frontend-plugin-api: update createComponentExtension for new naming pattern

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/core-compat-api/api-report.md

@@ -8,7 +8,7 @@
 import { AnyRouteRefParams } from '@backstage/core-plugin-api';
 import { AppComponents } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/frontend-plugin-api';
-import { Extension } from '@backstage/frontend-plugin-api';
+import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { ExtensionOverrides } from '@backstage/frontend-plugin-api';
 import { ExternalRouteRef } from '@backstage/core-plugin-api';
 import { ExternalRouteRef as ExternalRouteRef_2 } from '@backstage/frontend-plugin-api';
@@ -21,7 +21,7 @@ import { SubRouteRef as SubRouteRef_2 } from '@backstage/frontend-plugin-api';
 // @public (undocumented)
 export function collectLegacyComponents(
   components: Partial<AppComponents>,
-): Extension<unknown>[];
+): ExtensionDefinition<unknown>[];
 
 // @public (undocumented)
 export function collectLegacyRoutes(

packages/core-compat-api/src/collectLegacyComponents.test.tsx

@@ -31,28 +31,33 @@ describe('collectLegacyComponents', () => {
 
     expect(
       collected.map(p => ({
-        id: p.id,
+        kind: p.kind,
+        namespace: p.namespace,
         attachTo: p.attachTo,
         disabled: p.disabled,
       })),
     ).toEqual([
       {
-        id: 'core.components.progress',
+        kind: 'component',
+        namespace: 'core.components.progress',
         attachTo: { id: 'core', input: 'components' },
         disabled: false,
       },
       {
-        id: 'core.components.bootErrorPage',
+        kind: 'component',
+        namespace: 'core.components.bootErrorPage',
         attachTo: { id: 'core', input: 'components' },
         disabled: false,
       },
       {
-        id: 'core.components.notFoundErrorPage',
+        kind: 'component',
+        namespace: 'core.components.notFoundErrorPage',
         attachTo: { id: 'core', input: 'components' },
         disabled: false,
       },
       {
-        id: 'core.components.errorBoundaryFallback',
+        kind: 'component',
+        namespace: 'core.components.errorBoundaryFallback',
         attachTo: { id: 'core', input: 'components' },
         disabled: false,
       },

packages/core-compat-api/src/collectLegacyComponents.tsx

@@ -15,10 +15,10 @@
  */
 
 import {
-  Extension,
   ComponentRef,
   createComponentExtension,
   coreComponentsRefs,
+  ExtensionDefinition,
 } from '@backstage/frontend-plugin-api';
 import { AppComponents } from '@backstage/core-plugin-api';
 
@@ -33,7 +33,7 @@ const refs: Record<string, ComponentRef<ComponentTypes>> = {
 
 /** @public */
 export function collectLegacyComponents(components: Partial<AppComponents>) {
-  return Object.entries(components).reduce<Extension<unknown>[]>(
+  return Object.entries(components).reduce<ExtensionDefinition<unknown>[]>(
     (extensions, [name, component]) => {
       const ref = refs[name];
       return ref

packages/frontend-app-api/src/wiring/createApp.test.tsx

@@ -201,10 +201,10 @@ describe('createApp', () => {
           </core/router>
         ]
         components [
-          <core.components.progress out=[component.ref] />
-          <core.components.errorBoundaryFallback out=[component.ref] />
-          <core.components.bootErrorPage out=[component.ref] />
-          <core.components.notFoundErrorPage out=[component.ref] />
+          <component:core.components.progress out=[component.ref] />
+          <component:core.components.errorBoundaryFallback out=[component.ref] />
+          <component:core.components.bootErrorPage out=[component.ref] />
+          <component:core.components.notFoundErrorPage out=[component.ref] />
         ]
         themes [
           <theme:app/light out=[core.theme] />

packages/frontend-plugin-api/api-report.md

@@ -405,6 +405,7 @@ export function createComponentExtension<
   TInputs extends AnyExtensionInputMap,
 >(options: {
   ref: TRef;
+  name?: string;
   disabled?: boolean;
   inputs?: TInputs;
   configSchema?: PortableSchema<TConfig>;
@@ -421,7 +422,7 @@ export function createComponentExtension<
           inputs: Expand<ExtensionInputValues<TInputs>>;
         }) => TRef['T'];
       };
-}): Extension<TConfig>;
+}): ExtensionDefinition<TConfig>;
 
 // @public (undocumented)
 export function createExtension<

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

@@ -32,6 +32,7 @@ export function createComponentExtension<
   TInputs extends AnyExtensionInputMap,
 >(options: {
   ref: TRef;
+  name?: string;
   disabled?: boolean;
   inputs?: TInputs;
   configSchema?: PortableSchema<TConfig>;
@@ -49,9 +50,10 @@ export function createComponentExtension<
         }) => TRef['T'];
       };
 }) {
-  const id = options.ref.id;
   return createExtension({
-    id,
+    kind: 'component',
+    namespace: options.ref.id,
+    name: options.name,
     attachTo: { id: 'core', input: 'components' },
     inputs: options.inputs,
     disabled: options.disabled,