diff --git a/plugins/catalog-import/src/alpha.tsx b/plugins/catalog-import/src/alpha.tsx
index 9f685cf778..cf63c92338 100644
--- a/plugins/catalog-import/src/alpha.tsx
+++ b/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(),
- ),
+const catalogImportPage = PageBlueprint.make({
+ params: {
+ defaultPath: '/catalog-import',
+ routeRef: convertLegacyRouteRef(rootRouteRef),
+ loader: () =>
+ import('./components/ImportPage').then(m =>
+ compatWrapper(),
+ ),
+ },
});
-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 */
diff --git a/plugins/devtools/src/alpha/plugin.tsx b/plugins/devtools/src/alpha/plugin.tsx
index 73b94f52f8..4c62dd3155 100644
--- a/plugins/devtools/src/alpha/plugin.tsx
+++ b/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(),
- ),
+export const devToolsPage = PageBlueprint.make({
+ params: {
+ defaultPath: '/devtools',
+ routeRef: convertLegacyRouteRef(rootRouteRef),
+ loader: () =>
+ import('../components/DevToolsPage').then(m =>
+ compatWrapper(),
+ ),
+ },
});
/** @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 */
diff --git a/plugins/org/src/alpha.tsx b/plugins/org/src/alpha.tsx
index 481d9f2b63..61054a2d8a 100644
--- a/plugins/org/src/alpha.tsx
+++ b/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(),
- ),
+ params: {
+ filter: 'kind:group',
+ loader: async () =>
+ import('./components/Cards/Group/GroupProfile/GroupProfileCard').then(m =>
+ compatWrapper(),
+ ),
+ },
});
/** @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(),
- ),
+ params: {
+ filter: 'kind:group',
+ loader: async () =>
+ import('./components/Cards/Group/MembersList/MembersListCard').then(m =>
+ compatWrapper(),
+ ),
+ },
});
/** @alpha */
-const EntityOwnershipCard = createEntityCardExtension({
+const EntityOwnershipCard = EntityCardBlueprint.make({
name: 'ownership',
- filter: 'kind:group,user',
- loader: async () =>
- import('./components/Cards/OwnershipCard/OwnershipCard').then(m =>
- compatWrapper(),
- ),
+ params: {
+ filter: 'kind:group,user',
+ loader: async () =>
+ import('./components/Cards/OwnershipCard/OwnershipCard').then(m =>
+ compatWrapper(),
+ ),
+ },
});
/** @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(),
- ),
+ params: {
+ filter: 'kind:user',
+ loader: async () =>
+ import('./components/Cards/User/UserProfileCard/UserProfileCard').then(
+ m => compatWrapper(),
+ ),
+ },
});
/** @alpha */
diff --git a/plugins/techdocs/src/alpha.tsx b/plugins/techdocs/src/alpha.tsx
index d1a186f227..b0d0d3d467 100644
--- a/plugins/techdocs/src/alpha.tsx
+++ b/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();
+ 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(
+ ,
+ );
+ },
+ });
},
});
@@ -111,13 +119,15 @@ export const techDocsSearchResultListItemExtension =
*
* @alpha
*/
-const techDocsPage = createPageExtension({
- defaultPath: '/docs',
- routeRef: convertLegacyRouteRef(rootRouteRef),
- loader: () =>
- import('./home/components/TechDocsIndexPage').then(m =>
- compatWrapper(),
- ),
+const techDocsPage = PageBlueprint.make({
+ params: {
+ defaultPath: '/docs',
+ routeRef: convertLegacyRouteRef(rootRouteRef),
+ loader: () =>
+ import('./home/components/TechDocsIndexPage').then(m =>
+ compatWrapper(),
+ ),
+ },
});
/**
@@ -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(),
- ),
+ params: {
+ defaultPath: '/docs/:namespace/:kind/:name',
+ routeRef: convertLegacyRouteRef(rootDocsRouteRef),
+ loader: () =>
+ import('./reader/components/TechDocsReaderPage').then(m =>
+ compatWrapper(),
+ ),
+ },
});
/**
@@ -140,18 +152,22 @@ const techDocsReaderPage = createPageExtension({
*
* @alpha
*/
-const techDocsEntityContent = createEntityContentExtension({
- defaultPath: 'docs',
- defaultTitle: 'TechDocs',
- loader: () =>
- import('./Router').then(m => compatWrapper()),
+const techDocsEntityContent = EntityContentBlueprint.make({
+ params: {
+ defaultPath: 'docs',
+ defaultTitle: 'TechDocs',
+ loader: () =>
+ import('./Router').then(m => compatWrapper()),
+ },
});
/** @alpha */
-const techDocsNavItem = createNavItemExtension({
- icon: LibraryBooks,
- title: 'Docs',
- routeRef: convertLegacyRouteRef(rootRouteRef),
+const techDocsNavItem = NavItemBlueprint.make({
+ params: {
+ icon: LibraryBooks,
+ title: 'Docs',
+ routeRef: convertLegacyRouteRef(rootRouteRef),
+ },
});
/** @alpha */
diff --git a/plugins/user-settings/src/alpha.tsx b/plugins/user-settings/src/alpha.tsx
index cfc3369487..bdd16acf0f 100644
--- a/plugins/user-settings/src/alpha.tsx
+++ b/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(
+ ,
+ ),
+ ),
+ });
},
- loader: ({ inputs }) =>
- import('./components/SettingsPage').then(m =>
- compatWrapper(
- ,
- ),
- ),
});
/** @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,
+ },
});
/**