Add support for Pages and Sidebar items in existing app

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
Co-authored-by: Camila Belo <camilaibs@gmail.com>
Co-authored-by: Philipp Hugenroth <philipph@spotify.com>
Signed-off-by: Johan Haals <johan.haals@gmail.com>

plugins/graphiql/src/alpha.tsx

@@ -19,6 +19,7 @@ import {
   createApiExtension,
   createExtension,
   createExtensionDataRef,
+  createNavItemExtension,
   createPageExtension,
   createPlugin,
   createSchemaFromZod,
@@ -29,15 +30,30 @@ import {
   GraphQLEndpoints,
   GraphQLEndpoint,
 } from '@backstage/plugin-graphiql';
-import { createApiFactory } from '@backstage/core-plugin-api';
+import GraphiQLIcon from './assets/graphiql.icon.svg';
+import {
+  createApiFactory,
+  createRouteRef,
+  IconComponent,
+} from '@backstage/core-plugin-api';
+
+const graphiqlRouteRef = createRouteRef({ id: 'graphiql' });
 
 /** @alpha */
 export const GraphiqlPage = createPageExtension({
   id: 'plugin.graphiql.page',
   defaultPath: '/graphiql',
+  routeRef: graphiqlRouteRef,
   loader: () => import('./components').then(m => <m.GraphiQLPage />),
 });
 
+export const graphiqlPageSidebarItem = createNavItemExtension({
+  id: 'plugin.graphiql.nav.index',
+  title: 'GraphiQL',
+  icon: GraphiQLIcon as IconComponent,
+  routeRef: graphiqlRouteRef,
+});
+
 /** @internal */
 const endpointDataRef = createExtensionDataRef<GraphQLEndpoint>(
   'plugin.graphiql.endpoint',
@@ -103,5 +119,10 @@ const gitlabGraphiQLBrowseExtension = createEndpointExtension({
 /** @alpha */
 export default createPlugin({
   id: 'graphiql',
-  extensions: [GraphiqlPage, graphiqlBrowseApi, gitlabGraphiQLBrowseExtension],
+  extensions: [
+    GraphiqlPage,
+    graphiqlBrowseApi,
+    gitlabGraphiQLBrowseExtension,
+    graphiqlPageSidebarItem,
+  ],
 });