frontend-plugin-api: update built-in extension creators for new extension ID systme

Co-authored-by: Camila Belo <camilaibs@gmail.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

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

@@ -35,7 +35,7 @@ export function createNavItemExtension(options: {
     namespace,
     name,
     kind: 'nav-item',
-    attachTo: { id: 'core.nav', input: 'items' },
+    attachTo: { id: 'core/nav', input: 'items' },
     configSchema: createSchemaFromZod(z =>
       z.object({
         title: z.string().default(title),

packages/frontend-plugin-api/src/extensions/createPageExtension.test.tsx

@@ -36,14 +36,15 @@ describe('createPageExtension', () => {
 
     expect(
       createPageExtension({
-        id: 'test',
+        name: 'test',
         configSchema,
         loader: async () => <div />,
       }),
     ).toEqual({
-      $$type: '@backstage/Extension',
-      id: 'test',
-      attachTo: { id: 'core.routes', input: 'routes' },
+      $$type: '@backstage/ExtensionDefinition',
+      name: 'test',
+      kind: 'page',
+      attachTo: { id: 'core/routes', input: 'routes' },
       configSchema: expect.anything(),
       disabled: false,
       inputs: {},
@@ -57,7 +58,7 @@ describe('createPageExtension', () => {
 
     expect(
       createPageExtension({
-        id: 'test',
+        name: 'test',
         attachTo: { id: 'other', input: 'place' },
         disabled: true,
         configSchema,
@@ -69,8 +70,9 @@ describe('createPageExtension', () => {
         loader: async () => <div />,
       }),
     ).toEqual({
-      $$type: '@backstage/Extension',
-      id: 'test',
+      $$type: '@backstage/ExtensionDefinition',
+      name: 'test',
+      kind: 'page',
       attachTo: { id: 'other', input: 'place' },
       configSchema: expect.anything(),
       disabled: true,
@@ -89,14 +91,15 @@ describe('createPageExtension', () => {
 
     expect(
       createPageExtension({
-        id: 'test',
+        name: 'test',
         defaultPath: '/here',
         loader: async () => <div />,
       }),
     ).toEqual({
-      $$type: '@backstage/Extension',
-      id: 'test',
-      attachTo: { id: 'core.routes', input: 'routes' },
+      $$type: '@backstage/ExtensionDefinition',
+      name: 'test',
+      kind: 'page',
+      attachTo: { id: 'core/routes', input: 'routes' },
       configSchema: expect.anything(),
       disabled: false,
       inputs: {},
@@ -118,7 +121,6 @@ describe('createPageExtension', () => {
 
     createExtensionTester(
       createPageExtension({
-        id: 'plugin.page',
         defaultPath: '/',
         loader: async () => <div>Component</div>,
       }),

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

@@ -20,12 +20,12 @@ import { createSchemaFromZod, PortableSchema } from '../schema';
 import {
   coreExtensionData,
   createExtension,
-  Extension,
   ExtensionInputValues,
   AnyExtensionInputMap,
 } from '../wiring';
 import { RouteRef } from '../routing';
 import { Expand } from '../types';
+import { ExtensionDefinition } from '../wiring/createExtension';
 
 /**
  * Helper for creating extensions for a routable React page component.
@@ -44,7 +44,8 @@ export function createPageExtension<
         configSchema: PortableSchema<TConfig>;
       }
   ) & {
-    id: string;
+    namespace?: string;
+    name?: string;
     attachTo?: { id: string; input: string };
     disabled?: boolean;
     inputs?: TInputs;
@@ -54,9 +55,7 @@ export function createPageExtension<
       inputs: Expand<ExtensionInputValues<TInputs>>;
     }) => Promise<JSX.Element>;
   },
-): Extension<TConfig> {
-  const { id } = options;
-
+): ExtensionDefinition<TConfig> {
   const configSchema =
     'configSchema' in options
       ? options.configSchema
@@ -65,8 +64,10 @@ export function createPageExtension<
         ) as PortableSchema<TConfig>);
 
   return createExtension({
-    id,
-    attachTo: options.attachTo ?? { id: 'core.routes', input: 'routes' },
+    kind: 'page',
+    namespace: options.namespace,
+    name: options.name,
+    attachTo: options.attachTo ?? { id: 'core/routes', input: 'routes' },
     configSchema,
     inputs: options.inputs,
     disabled: options.disabled,

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

@@ -20,7 +20,9 @@ import { AppTheme } from '@backstage/core-plugin-api';
 /** @public */
 export function createThemeExtension(theme: AppTheme) {
   return createExtension({
-    id: `themes.${theme.id}`,
+    kind: 'theme',
+    namespace: 'app',
+    name: theme.id,
     attachTo: { id: 'core', input: 'themes' },
     output: {
       theme: coreExtensionData.theme,