From dacdfa401a90195aa14877cbf6fd961d9943f10c Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 2 Nov 2023 01:00:11 +0100
Subject: [PATCH] visualizer: add nav item

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 plugins/visualizer/src/index.ts   |  2 +-
 plugins/visualizer/src/plugin.tsx | 23 ++++++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/plugins/visualizer/src/index.ts b/plugins/visualizer/src/index.ts
index 60e8ced455..b91a06c569 100644
--- a/plugins/visualizer/src/index.ts
+++ b/plugins/visualizer/src/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { appVisualizerPlugin as default } from './plugin';
+export { visualizerPlugin as default } from './plugin';
diff --git a/plugins/visualizer/src/plugin.tsx b/plugins/visualizer/src/plugin.tsx
index c39cb9a6c3..216c1f8ee2 100644
--- a/plugins/visualizer/src/plugin.tsx
+++ b/plugins/visualizer/src/plugin.tsx
@@ -15,19 +15,32 @@
  */
 
 import {
+  createNavItemExtension,
   createPageExtension,
   createPlugin,
+  createRouteRef,
 } from '@backstage/frontend-plugin-api';
+import VisualizerIcon from '@material-ui/icons/Visibility';
 import React from 'react';
 
-const appVisualizerPage = createPageExtension({
-  id: 'plugin.app-visualizer.page',
+const rootRouteRef = createRouteRef();
+
+const visualizerPage = createPageExtension({
+  id: 'plugin.visualizer.page',
   defaultPath: '/visualizer',
+  routeRef: rootRouteRef,
   loader: () =>
     import('./components/AppVisualizerPage').then(m => <m.AppVisualizerPage />),
 });
 
-export const appVisualizerPlugin = createPlugin({
-  id: 'app-visualizer',
-  extensions: [appVisualizerPage],
+export const visualizerPageSidebarItem = createNavItemExtension({
+  id: 'plugin.visualizer.nav.index',
+  title: 'Visualizer',
+  icon: VisualizerIcon,
+  routeRef: rootRouteRef,
+});
+
+export const visualizerPlugin = createPlugin({
+  id: 'visualizer',
+  extensions: [visualizerPage, visualizerPageSidebarItem],
 });