From d03fc971d65359b58b481f3ea42ee00b639bd1cf Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Sat, 28 Oct 2023 14:32:21 +0200
Subject: [PATCH] app-next: text tab for visualizer

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .../components/AppVisualizerPage.tsx          | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/app-next/src/plugins/app-visualizer/components/AppVisualizerPage.tsx b/packages/app-next/src/plugins/app-visualizer/components/AppVisualizerPage.tsx
index 759b3870b9..08e95305a2 100644
--- a/packages/app-next/src/plugins/app-visualizer/components/AppVisualizerPage.tsx
+++ b/packages/app-next/src/plugins/app-visualizer/components/AppVisualizerPage.tsx
@@ -14,8 +14,32 @@
  * limitations under the License.
  */
 
+import {
+  Header,
+  Page,
+  TabbedLayout,
+  CodeSnippet,
+} from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+import { appTreeApiRef } from '@backstage/frontend-plugin-api';
 import React from 'react';
 
 export function AppVisualizerPage() {
-  return <h1>Hello world</h1>;
+  const appTreeApi = useApi(appTreeApiRef);
+  const { tree } = appTreeApi.getTree();
+
+  return (
+    <Page themeId="tool">
+      <Header title="App Visualizer" />
+      <TabbedLayout>
+        <TabbedLayout.Route path="/text" title="Text">
+          <CodeSnippet
+            text={String(tree.root)}
+            language="sql"
+            customStyle={{ margin: 0, padding: 0 }}
+          />
+        </TabbedLayout.Route>
+      </TabbedLayout>
+    </Page>
+  );
 }