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>

packages/frontend-plugin-api/src/extensions/createNavItemExtension.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { IconComponent, RouteRef } from '@backstage/core-plugin-api';
+import { createSchemaFromZod } from '../schema/createSchemaFromZod';
+import { coreExtensionData, createExtension } from '../wiring';
+
+export function createNavItemExtension(options: {
+  id: string;
+  routeRef: RouteRef;
+  title: string;
+  icon: IconComponent;
+}) {
+  const { id, routeRef, title, icon } = options;
+  return createExtension({
+    id,
+    at: 'core.nav/items',
+    configSchema: createSchemaFromZod(z =>
+      z.object({
+        title: z.string().default(title),
+      }),
+    ),
+    output: {
+      navTarget: coreExtensionData.navTarget,
+    },
+    factory: ({ bind, config }) => {
+      bind({
+        navTarget: {
+          title: config.title,
+          icon,
+          routeRef,
+        },
+      });
+    },
+  });
+}

packages/frontend-plugin-api/src/extensions/index.ts

@@ -16,3 +16,4 @@
 
 export { createApiExtension } from './createApiExtension';
 export { createPageExtension } from './createPageExtension';
+export { createNavItemExtension } from './createNavItemExtension';

packages/frontend-plugin-api/src/wiring/coreExtensionData.ts

@@ -14,14 +14,26 @@
  * limitations under the License.
  */
 
-import { AnyApiFactory, RouteRef } from '@backstage/core-plugin-api';
 import { JSX } from 'react';
+import {
+  AnyApiFactory,
+  IconComponent,
+  RouteRef,
+} from '@backstage/core-plugin-api';
 import { createExtensionDataRef } from './createExtensionDataRef';
 
+/** @public */
+export type NavTarget = {
+  title: string;
+  icon: IconComponent;
+  routeRef: RouteRef<{}>;
+};
+
 /** @public */
 export const coreExtensionData = {
   reactElement: createExtensionDataRef<JSX.Element>('core.reactElement'),
   routePath: createExtensionDataRef<string>('core.routing.path'),
   apiFactory: createExtensionDataRef<AnyApiFactory>('core.api.factory'),
   routeRef: createExtensionDataRef<RouteRef>('core.routing.ref'),
+  navTarget: createExtensionDataRef<NavTarget>('core.nav.target'),
 };

packages/frontend-plugin-api/src/wiring/index.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-export { coreExtensionData } from './coreExtensionData';
+export { coreExtensionData, type NavTarget } from './coreExtensionData';
 export {
   createExtension,
   type CreateExtensionOptions,