From 75e79518eafc6e6eb55585f166667418419662de Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 15 Aug 2024 15:22:16 +0200 Subject: [PATCH] chore: some more migrations Signed-off-by: blam --- plugins/catalog-import/src/alpha.tsx | 68 ++++++----- plugins/devtools/src/alpha/plugin.tsx | 54 ++++---- plugins/org/src/alpha.tsx | 58 +++++---- plugins/techdocs/src/alpha.tsx | 170 ++++++++++++++------------ plugins/user-settings/src/alpha.tsx | 52 ++++---- 5 files changed, 221 insertions(+), 181 deletions(-) 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, + }, }); /**