chore: some more migrations

Signed-off-by: blam <ben@blam.sh>

plugins/catalog-import/src/alpha.tsx

@@ -25,9 +25,9 @@ import {
   convertLegacyRouteRef,
 } from '@backstage/core-compat-api';
 import {
-  createApiExtension,
-  createPageExtension,
   createFrontendPlugin,
+  PageBlueprint,
+  ApiBlueprint,
 } from '@backstage/frontend-plugin-api';
 import {
   scmAuthApiRef,
@@ -40,43 +40,47 @@ import { catalogApiRef } from '@backstage/plugin-catalog-react';
 
 // TODO: It's currently possible to override the import page with a custom one. We need to decide
 //       whether this type of override is typically done with an input or by overriding the entire extension.
-const catalogImportPage = createPageExtension({
-  defaultPath: '/catalog-import',
-  routeRef: convertLegacyRouteRef(rootRouteRef),
-  loader: () =>
-    import('./components/ImportPage').then(m =>
-      compatWrapper(<m.ImportPage />),
-    ),
+const catalogImportPage = PageBlueprint.make({
+  params: {
+    defaultPath: '/catalog-import',
+    routeRef: convertLegacyRouteRef(rootRouteRef),
+    loader: () =>
+      import('./components/ImportPage').then(m =>
+        compatWrapper(<m.ImportPage />),
+      ),
+  },
 });
 
-const catalogImportApi = createApiExtension({
-  factory: createApiFactory({
-    api: catalogImportApiRef,
-    deps: {
-      discoveryApi: discoveryApiRef,
-      scmAuthApi: scmAuthApiRef,
-      fetchApi: fetchApiRef,
-      scmIntegrationsApi: scmIntegrationsApiRef,
-      catalogApi: catalogApiRef,
-      configApi: configApiRef,
-    },
-    factory: ({
-      discoveryApi,
-      scmAuthApi,
-      fetchApi,
-      scmIntegrationsApi,
-      catalogApi,
-      configApi,
-    }) =>
-      new CatalogImportClient({
+const catalogImportApi = ApiBlueprint.make({
+  params: {
+    factory: createApiFactory({
+      api: catalogImportApiRef,
+      deps: {
+        discoveryApi: discoveryApiRef,
+        scmAuthApi: scmAuthApiRef,
+        fetchApi: fetchApiRef,
+        scmIntegrationsApi: scmIntegrationsApiRef,
+        catalogApi: catalogApiRef,
+        configApi: configApiRef,
+      },
+      factory: ({
         discoveryApi,
         scmAuthApi,
-        scmIntegrationsApi,
         fetchApi,
+        scmIntegrationsApi,
         catalogApi,
         configApi,
-      }),
-  }),
+      }) =>
+        new CatalogImportClient({
+          discoveryApi,
+          scmAuthApi,
+          scmIntegrationsApi,
+          fetchApi,
+          catalogApi,
+          configApi,
+        }),
+    }),
+  },
 });
 
 /** @alpha */

plugins/devtools/src/alpha/plugin.tsx

@@ -16,13 +16,13 @@
 
 import React from 'react';
 import {
-  createApiExtension,
   createApiFactory,
-  createNavItemExtension,
-  createPageExtension,
   createFrontendPlugin,
   discoveryApiRef,
   fetchApiRef,
+  ApiBlueprint,
+  PageBlueprint,
+  NavItemBlueprint,
 } from '@backstage/frontend-plugin-api';
 
 import { devToolsApiRef, DevToolsClient } from '../api';
@@ -34,33 +34,39 @@ import BuildIcon from '@material-ui/icons/Build';
 import { rootRouteRef } from '../routes';
 
 /** @alpha */
-export const devToolsApi = createApiExtension({
-  factory: createApiFactory({
-    api: devToolsApiRef,
-    deps: {
-      discoveryApi: discoveryApiRef,
-      fetchApi: fetchApiRef,
-    },
-    factory: ({ discoveryApi, fetchApi }) =>
-      new DevToolsClient({ discoveryApi, fetchApi }),
-  }),
+export const devToolsApi = ApiBlueprint.make({
+  params: {
+    factory: createApiFactory({
+      api: devToolsApiRef,
+      deps: {
+        discoveryApi: discoveryApiRef,
+        fetchApi: fetchApiRef,
+      },
+      factory: ({ discoveryApi, fetchApi }) =>
+        new DevToolsClient({ discoveryApi, fetchApi }),
+    }),
+  },
 });
 
 /** @alpha */
-export const devToolsPage = createPageExtension({
-  defaultPath: '/devtools',
-  routeRef: convertLegacyRouteRef(rootRouteRef),
-  loader: () =>
-    import('../components/DevToolsPage').then(m =>
-      compatWrapper(<m.DevToolsPage />),
-    ),
+export const devToolsPage = PageBlueprint.make({
+  params: {
+    defaultPath: '/devtools',
+    routeRef: convertLegacyRouteRef(rootRouteRef),
+    loader: () =>
+      import('../components/DevToolsPage').then(m =>
+        compatWrapper(<m.DevToolsPage />),
+      ),
+  },
 });
 
 /** @alpha */
-export const devToolsNavItem = createNavItemExtension({
-  title: 'DevTools',
-  routeRef: convertLegacyRouteRef(rootRouteRef),
-  icon: BuildIcon,
+export const devToolsNavItem = NavItemBlueprint.make({
+  params: {
+    title: 'DevTools',
+    routeRef: convertLegacyRouteRef(rootRouteRef),
+    icon: BuildIcon,
+  },
 });
 
 /** @alpha */

plugins/org/src/alpha.tsx

@@ -21,46 +21,54 @@ import {
 import { createFrontendPlugin } from '@backstage/frontend-plugin-api';
 import React from 'react';
 import { catalogIndexRouteRef } from './routes';
-import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';
+import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';
 
 /** @alpha */
-const EntityGroupProfileCard = createEntityCardExtension({
+const EntityGroupProfileCard = EntityCardBlueprint.make({
   name: 'group-profile',
-  filter: 'kind:group',
-  loader: async () =>
-    import('./components/Cards/Group/GroupProfile/GroupProfileCard').then(m =>
-      compatWrapper(<m.GroupProfileCard />),
-    ),
+  params: {
+    filter: 'kind:group',
+    loader: async () =>
+      import('./components/Cards/Group/GroupProfile/GroupProfileCard').then(m =>
+        compatWrapper(<m.GroupProfileCard />),
+      ),
+  },
 });
 
 /** @alpha */
-const EntityMembersListCard = createEntityCardExtension({
+const EntityMembersListCard = EntityCardBlueprint.make({
   name: 'members-list',
-  filter: 'kind:group',
-  loader: async () =>
-    import('./components/Cards/Group/MembersList/MembersListCard').then(m =>
-      compatWrapper(<m.MembersListCard />),
-    ),
+  params: {
+    filter: 'kind:group',
+    loader: async () =>
+      import('./components/Cards/Group/MembersList/MembersListCard').then(m =>
+        compatWrapper(<m.MembersListCard />),
+      ),
+  },
 });
 
 /** @alpha */
-const EntityOwnershipCard = createEntityCardExtension({
+const EntityOwnershipCard = EntityCardBlueprint.make({
   name: 'ownership',
-  filter: 'kind:group,user',
-  loader: async () =>
-    import('./components/Cards/OwnershipCard/OwnershipCard').then(m =>
-      compatWrapper(<m.OwnershipCard />),
-    ),
+  params: {
+    filter: 'kind:group,user',
+    loader: async () =>
+      import('./components/Cards/OwnershipCard/OwnershipCard').then(m =>
+        compatWrapper(<m.OwnershipCard />),
+      ),
+  },
 });
 
 /** @alpha */
-const EntityUserProfileCard = createEntityCardExtension({
+const EntityUserProfileCard = EntityCardBlueprint.make({
   name: 'user-profile',
-  filter: 'kind:user',
-  loader: async () =>
-    import('./components/Cards/User/UserProfileCard/UserProfileCard').then(m =>
-      compatWrapper(<m.UserProfileCard />),
-    ),
+  params: {
+    filter: 'kind:user',
+    loader: async () =>
+      import('./components/Cards/User/UserProfileCard/UserProfileCard').then(
+        m => compatWrapper(<m.UserProfileCard />),
+      ),
+  },
 });
 
 /** @alpha */

plugins/techdocs/src/alpha.tsx

@@ -18,12 +18,11 @@ import React from 'react';
 import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import {
   createFrontendPlugin,
-  createSchemaFromZod,
-  createApiExtension,
-  createPageExtension,
-  createNavItemExtension,
+  ApiBlueprint,
+  PageBlueprint,
+  NavItemBlueprint,
 } from '@backstage/frontend-plugin-api';
-import { createSearchResultListItemExtension } from '@backstage/plugin-search-react/alpha';
+import { SearchResultListItemBlueprint } from '@backstage/plugin-search-react/alpha';
 import {
   configApiRef,
   createApiFactory,
@@ -45,64 +44,73 @@ import {
   rootDocsRouteRef,
   rootRouteRef,
 } from './routes';
-import { createEntityContentExtension } from '@backstage/plugin-catalog-react/alpha';
+import { EntityContentBlueprint } from '@backstage/plugin-catalog-react/alpha';
 
 /** @alpha */
-const techDocsStorageApi = createApiExtension({
-  factory: createApiFactory({
-    api: techdocsStorageApiRef,
-    deps: {
-      configApi: configApiRef,
-      discoveryApi: discoveryApiRef,
-      fetchApi: fetchApiRef,
-    },
-    factory: ({ configApi, discoveryApi, fetchApi }) =>
-      new TechDocsStorageClient({
-        configApi,
-        discoveryApi,
-        fetchApi,
-      }),
-  }),
+const techDocsStorageApi = ApiBlueprint.make({
+  name: 'storage',
+  params: {
+    factory: createApiFactory({
+      api: techdocsStorageApiRef,
+      deps: {
+        configApi: configApiRef,
+        discoveryApi: discoveryApiRef,
+        fetchApi: fetchApiRef,
+      },
+      factory: ({ configApi, discoveryApi, fetchApi }) =>
+        new TechDocsStorageClient({
+          configApi,
+          discoveryApi,
+          fetchApi,
+        }),
+    }),
+  },
 });
 
 /** @alpha */
-const techDocsClientApi = createApiExtension({
-  factory: createApiFactory({
-    api: techdocsApiRef,
-    deps: {
-      configApi: configApiRef,
-      discoveryApi: discoveryApiRef,
-      fetchApi: fetchApiRef,
-    },
-    factory: ({ configApi, discoveryApi, fetchApi }) =>
-      new TechDocsClient({
-        configApi,
-        discoveryApi,
-        fetchApi,
-      }),
-  }),
+const techDocsClientApi = ApiBlueprint.make({
+  params: {
+    factory: createApiFactory({
+      api: techdocsApiRef,
+      deps: {
+        configApi: configApiRef,
+        discoveryApi: discoveryApiRef,
+        fetchApi: fetchApiRef,
+      },
+      factory: ({ configApi, discoveryApi, fetchApi }) =>
+        new TechDocsClient({
+          configApi,
+          discoveryApi,
+          fetchApi,
+        }),
+    }),
+  },
 });
 
 /** @alpha */
 export const techDocsSearchResultListItemExtension =
-  createSearchResultListItemExtension({
-    configSchema: createSchemaFromZod(z =>
-      z.object({
-        // TODO: Define how the icon can be configurable
-        title: z.string().optional(),
-        lineClamp: z.number().default(5),
-        asLink: z.boolean().default(true),
-        asListItem: z.boolean().default(true),
-        noTrack: z.boolean().default(false),
-      }),
-    ),
-    predicate: result => result.type === 'techdocs',
-    component: async ({ config }) => {
-      const { TechDocsSearchResultListItem } = await import(
-        './search/components/TechDocsSearchResultListItem'
-      );
-      return props =>
-        compatWrapper(<TechDocsSearchResultListItem {...props} {...config} />);
+  SearchResultListItemBlueprint.makeWithOverrides({
+    config: {
+      schema: {
+        title: z => z.string().optional(),
+        lineClamp: z => z.number().default(5),
+        asLink: z => z.boolean().default(true),
+        asListItem: z => z.boolean().default(true),
+      },
+    },
+    factory(originalFactory, { config }) {
+      return originalFactory({
+        predicate: result => result.type === 'techdocs',
+        component: async () => {
+          const { TechDocsSearchResultListItem } = await import(
+            './search/components/TechDocsSearchResultListItem'
+          );
+          return props =>
+            compatWrapper(
+              <TechDocsSearchResultListItem {...props} {...config} />,
+            );
+        },
+      });
     },
   });
 
@@ -111,13 +119,15 @@ export const techDocsSearchResultListItemExtension =
  *
  * @alpha
  */
-const techDocsPage = createPageExtension({
-  defaultPath: '/docs',
-  routeRef: convertLegacyRouteRef(rootRouteRef),
-  loader: () =>
-    import('./home/components/TechDocsIndexPage').then(m =>
-      compatWrapper(<m.TechDocsIndexPage />),
-    ),
+const techDocsPage = PageBlueprint.make({
+  params: {
+    defaultPath: '/docs',
+    routeRef: convertLegacyRouteRef(rootRouteRef),
+    loader: () =>
+      import('./home/components/TechDocsIndexPage').then(m =>
+        compatWrapper(<m.TechDocsIndexPage />),
+      ),
+  },
 });
 
 /**
@@ -125,14 +135,16 @@ const techDocsPage = createPageExtension({
  *
  * @alpha
  */
-const techDocsReaderPage = createPageExtension({
+const techDocsReaderPage = PageBlueprint.make({
   name: 'reader',
-  defaultPath: '/docs/:namespace/:kind/:name',
-  routeRef: convertLegacyRouteRef(rootDocsRouteRef),
-  loader: () =>
-    import('./reader/components/TechDocsReaderPage').then(m =>
-      compatWrapper(<m.TechDocsReaderPage />),
-    ),
+  params: {
+    defaultPath: '/docs/:namespace/:kind/:name',
+    routeRef: convertLegacyRouteRef(rootDocsRouteRef),
+    loader: () =>
+      import('./reader/components/TechDocsReaderPage').then(m =>
+        compatWrapper(<m.TechDocsReaderPage />),
+      ),
+  },
 });
 
 /**
@@ -140,18 +152,22 @@ const techDocsReaderPage = createPageExtension({
  *
  * @alpha
  */
-const techDocsEntityContent = createEntityContentExtension({
-  defaultPath: 'docs',
-  defaultTitle: 'TechDocs',
-  loader: () =>
-    import('./Router').then(m => compatWrapper(<m.EmbeddedDocsRouter />)),
+const techDocsEntityContent = EntityContentBlueprint.make({
+  params: {
+    defaultPath: 'docs',
+    defaultTitle: 'TechDocs',
+    loader: () =>
+      import('./Router').then(m => compatWrapper(<m.EmbeddedDocsRouter />)),
+  },
 });
 
 /** @alpha */
-const techDocsNavItem = createNavItemExtension({
-  icon: LibraryBooks,
-  title: 'Docs',
-  routeRef: convertLegacyRouteRef(rootRouteRef),
+const techDocsNavItem = NavItemBlueprint.make({
+  params: {
+    icon: LibraryBooks,
+    title: 'Docs',
+    routeRef: convertLegacyRouteRef(rootRouteRef),
+  },
 });
 
 /** @alpha */

plugins/user-settings/src/alpha.tsx

@@ -16,9 +16,9 @@
 import {
   coreExtensionData,
   createExtensionInput,
-  createNavItemExtension,
-  createPageExtension,
   createFrontendPlugin,
+  PageBlueprint,
+  NavItemBlueprint,
 } from '@backstage/frontend-plugin-api';
 import {
   convertLegacyRouteRef,
@@ -32,32 +32,38 @@ import React from 'react';
 
 export * from './translation';
 
-const userSettingsPage = createPageExtension({
-  defaultPath: '/settings',
-  routeRef: convertLegacyRouteRef(settingsRouteRef),
+const userSettingsPage = PageBlueprint.makeWithOverrides({
   inputs: {
-    providerSettings: createExtensionInput(
-      {
-        element: coreExtensionData.reactElement,
-      },
-      { singleton: true, optional: true },
-    ),
+    providerSettings: createExtensionInput([coreExtensionData.reactElement], {
+      singleton: true,
+      optional: true,
+    }),
+  },
+  factory(originalFactory, { inputs }) {
+    return originalFactory({
+      defaultPath: '/settings',
+      routeRef: convertLegacyRouteRef(settingsRouteRef),
+      loader: () =>
+        import('./components/SettingsPage').then(m =>
+          compatWrapper(
+            <m.SettingsPage
+              providerSettings={inputs.providerSettings?.get(
+                coreExtensionData.reactElement,
+              )}
+            />,
+          ),
+        ),
+    });
   },
-  loader: ({ inputs }) =>
-    import('./components/SettingsPage').then(m =>
-      compatWrapper(
-        <m.SettingsPage
-          providerSettings={inputs.providerSettings?.output.element}
-        />,
-      ),
-    ),
 });
 
 /** @alpha */
-export const settingsNavItem = createNavItemExtension({
-  routeRef: convertLegacyRouteRef(settingsRouteRef),
-  title: 'Settings',
-  icon: SettingsIcon,
+export const settingsNavItem = NavItemBlueprint.make({
+  params: {
+    routeRef: convertLegacyRouteRef(settingsRouteRef),
+    title: 'Settings',
+    icon: SettingsIcon,
+  },
 });
 
 /**