plugins: refactor DI extension IDs

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

.changeset/rich-bees-breathe.md

@@ -0,0 +1,17 @@
+---
+'@backstage/plugin-catalog-import': patch
+'@backstage/plugin-stack-overflow': patch
+'@backstage/plugin-catalog-react': patch
+'@backstage/plugin-user-settings': patch
+'@backstage/plugin-search-react': patch
+'@backstage/plugin-tech-radar': patch
+'@backstage/plugin-graphiql': patch
+'@backstage/plugin-techdocs': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-explore': patch
+'@backstage/plugin-search': patch
+'@backstage/plugin-home': patch
+'@backstage/plugin-adr': patch
+---
+
+Refactor of the alpha exports due to API change in how extension IDs are constructed.

plugins/adr/src/alpha.tsx

@@ -31,7 +31,6 @@ function isAdrDocument(result: any): result is AdrDocument {
 /** @alpha */
 export const AdrSearchResultListItemExtension =
   createSearchResultListItemExtension({
-    id: 'adr',
     configSchema: createSchemaFromZod(z =>
       z.object({
         // TODO: Define how the icon can be configurable

plugins/catalog-import/src/alpha.tsx

@@ -38,7 +38,6 @@ 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 CatalogImportPageExtension = createPageExtension({
-  id: 'plugin.catalog-import.page',
   defaultPath: '/catalog-import',
   routeRef: convertLegacyRouteRef(rootRouteRef),
   loader: () => import('./components/ImportPage').then(m => <m.ImportPage />),

plugins/catalog-react/src/alpha.tsx

@@ -50,7 +50,8 @@ export const entityFilterExpressionExtensionDataRef =
 export function createEntityCardExtension<
   TInputs extends AnyExtensionInputMap,
 >(options: {
-  id: string;
+  namespace?: string;
+  name?: string;
   attachTo?: { id: string; input: string };
   disabled?: boolean;
   inputs?: TInputs;
@@ -61,12 +62,12 @@ export function createEntityCardExtension<
     inputs: Expand<ExtensionInputValues<TInputs>>;
   }) => Promise<JSX.Element>;
 }) {
-  const id = `entity.cards.${options.id}`;
-
   return createExtension({
-    id,
+    kind: 'entity-card',
+    namespace: options.namespace,
+    name: options.name,
     attachTo: options.attachTo ?? {
-      id: 'entity.content.overview',
+      id: 'entity-content:catalog/overview',
       input: 'cards',
     },
     disabled: options.disabled ?? true,
@@ -104,7 +105,8 @@ export function createEntityCardExtension<
 export function createEntityContentExtension<
   TInputs extends AnyExtensionInputMap,
 >(options: {
-  id: string;
+  namespace?: string;
+  name?: string;
   attachTo?: { id: string; input: string };
   disabled?: boolean;
   inputs?: TInputs;
@@ -118,12 +120,12 @@ export function createEntityContentExtension<
     inputs: Expand<ExtensionInputValues<TInputs>>;
   }) => Promise<JSX.Element>;
 }) {
-  const id = `entity.content.${options.id}`;
-
   return createExtension({
-    id,
+    kind: 'entity-content',
+    namespace: options.namespace,
+    name: options.name,
     attachTo: options.attachTo ?? {
-      id: 'plugin.catalog.page.entity',
+      id: 'page:catalog/entity',
       input: 'contents',
     },
     disabled: options.disabled ?? true,

plugins/catalog/src/alpha/createCatalogFilterExtension.tsx

@@ -28,16 +28,17 @@ export function createCatalogFilterExtension<
   TInputs extends AnyExtensionInputMap,
   TConfig = never,
 >(options: {
-  id: string;
+  namespace?: string;
+  name?: string;
   inputs?: TInputs;
   configSchema?: PortableSchema<TConfig>;
   loader: (options: { config: TConfig }) => Promise<JSX.Element>;
 }) {
-  const id = `catalog.filter.${options.id}`;
-
   return createExtension({
-    id,
-    attachTo: { id: 'plugin.catalog.page.index', input: 'filters' },
+    kind: 'catalog-filter',
+    namespace: options.namespace,
+    name: options.name,
+    attachTo: { id: 'page:catalog', input: 'filters' },
     inputs: options.inputs ?? {},
     configSchema: options.configSchema,
     output: {

plugins/catalog/src/alpha/entityCards.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';
 
 export const EntityAboutCard = createEntityCardExtension({
-  id: 'about',
+  name: 'about',
   loader: async () =>
     import('../components/AboutCard').then(m => (
       <m.AboutCard variant="gridItem" />
@@ -26,7 +26,7 @@ export const EntityAboutCard = createEntityCardExtension({
 });
 
 export const EntityLinksCard = createEntityCardExtension({
-  id: 'links',
+  name: 'links',
   filter: 'has:links',
   loader: async () =>
     import('../components/EntityLinksCard').then(m => {
@@ -35,7 +35,7 @@ export const EntityLinksCard = createEntityCardExtension({
 });
 
 export const EntityLabelsCard = createEntityCardExtension({
-  id: 'labels',
+  name: 'labels',
   filter: 'has:labels',
   loader: async () =>
     import('../components/EntityLabelsCard').then(m => (
@@ -44,7 +44,7 @@ export const EntityLabelsCard = createEntityCardExtension({
 });
 
 export const EntityDependsOnComponentsCard = createEntityCardExtension({
-  id: 'dependsOn.components',
+  name: 'dependsOnComponents',
   loader: async () =>
     import('../components/DependsOnComponentsCard').then(m => (
       <m.DependsOnComponentsCard variant="gridItem" />
@@ -52,7 +52,7 @@ export const EntityDependsOnComponentsCard = createEntityCardExtension({
 });
 
 export const EntityDependsOnResourcesCard = createEntityCardExtension({
-  id: 'dependsOn.resources',
+  name: 'dependsOnResources',
   loader: async () =>
     import('../components/DependsOnResourcesCard').then(m => (
       <m.DependsOnResourcesCard variant="gridItem" />
@@ -60,7 +60,7 @@ export const EntityDependsOnResourcesCard = createEntityCardExtension({
 });
 
 export const EntityHasComponentsCard = createEntityCardExtension({
-  id: 'has.components',
+  name: 'hasComponents',
   loader: async () =>
     import('../components/HasComponentsCard').then(m => (
       <m.HasComponentsCard variant="gridItem" />
@@ -68,7 +68,7 @@ export const EntityHasComponentsCard = createEntityCardExtension({
 });
 
 export const EntityHasResourcesCard = createEntityCardExtension({
-  id: 'has.resources',
+  name: 'hasResources',
   loader: async () =>
     import('../components/HasResourcesCard').then(m => (
       <m.HasResourcesCard variant="gridItem" />
@@ -76,7 +76,7 @@ export const EntityHasResourcesCard = createEntityCardExtension({
 });
 
 export const EntityHasSubcomponentsCard = createEntityCardExtension({
-  id: 'has.subcomponents',
+  name: 'hasSubcomponents',
   loader: async () =>
     import('../components/HasSubcomponentsCard').then(m => (
       <m.HasSubcomponentsCard variant="gridItem" />
@@ -84,7 +84,7 @@ export const EntityHasSubcomponentsCard = createEntityCardExtension({
 });
 
 export const EntityHasSystemsCard = createEntityCardExtension({
-  id: 'has.systems',
+  name: 'hasSystems',
   loader: async () =>
     import('../components/HasSystemsCard').then(m => (
       <m.HasSystemsCard variant="gridItem" />

plugins/catalog/src/alpha/entityContents.tsx

@@ -26,7 +26,7 @@ import {
 } from '@backstage/plugin-catalog-react/alpha';
 
 export const OverviewEntityContent = createEntityContentExtension({
-  id: 'overview',
+  name: 'overview',
   defaultPath: '/',
   defaultTitle: 'Overview',
   disabled: false,

plugins/catalog/src/alpha/filters.tsx

@@ -19,7 +19,7 @@ import { createCatalogFilterExtension } from './createCatalogFilterExtension';
 import { createSchemaFromZod } from '@backstage/frontend-plugin-api';
 
 const CatalogEntityTagFilter = createCatalogFilterExtension({
-  id: 'entity.tag',
+  name: 'tag',
   loader: async () => {
     const { EntityTagPicker } = await import('@backstage/plugin-catalog-react');
     return <EntityTagPicker />;
@@ -27,7 +27,7 @@ const CatalogEntityTagFilter = createCatalogFilterExtension({
 });
 
 const CatalogEntityKindFilter = createCatalogFilterExtension({
-  id: 'entity.kind',
+  name: 'kind',
   configSchema: createSchemaFromZod(z =>
     z.object({
       initialFilter: z.string().default('component'),
@@ -42,7 +42,7 @@ const CatalogEntityKindFilter = createCatalogFilterExtension({
 });
 
 const CatalogEntityTypeFilter = createCatalogFilterExtension({
-  id: 'entity.type',
+  name: 'type',
   loader: async () => {
     const { EntityTypePicker } = await import(
       '@backstage/plugin-catalog-react'
@@ -52,7 +52,7 @@ const CatalogEntityTypeFilter = createCatalogFilterExtension({
 });
 
 const CatalogEntityOwnerFilter = createCatalogFilterExtension({
-  id: 'entity.mode',
+  name: 'mode',
   configSchema: createSchemaFromZod(z =>
     z.object({
       mode: z.enum(['owners-only', 'all']).optional(),
@@ -67,7 +67,7 @@ const CatalogEntityOwnerFilter = createCatalogFilterExtension({
 });
 
 const CatalogEntityNamespaceFilter = createCatalogFilterExtension({
-  id: 'entity.namespace',
+  name: 'namespace',
   loader: async () => {
     const { EntityNamespacePicker } = await import(
       '@backstage/plugin-catalog-react'
@@ -77,7 +77,7 @@ const CatalogEntityNamespaceFilter = createCatalogFilterExtension({
 });
 
 const CatalogEntityLifecycleFilter = createCatalogFilterExtension({
-  id: 'entity.lifecycle',
+  name: 'lifecycle',
   loader: async () => {
     const { EntityLifecyclePicker } = await import(
       '@backstage/plugin-catalog-react'
@@ -87,7 +87,7 @@ const CatalogEntityLifecycleFilter = createCatalogFilterExtension({
 });
 
 const CatalogEntityProcessingStatusFilter = createCatalogFilterExtension({
-  id: 'entity.processing.status',
+  name: 'processing.status',
   loader: async () => {
     const { EntityProcessingStatusPicker } = await import(
       '@backstage/plugin-catalog-react'
@@ -97,7 +97,7 @@ const CatalogEntityProcessingStatusFilter = createCatalogFilterExtension({
 });
 
 const CatalogUserListFilter = createCatalogFilterExtension({
-  id: 'user.list',
+  name: 'list',
   configSchema: createSchemaFromZod(z =>
     z.object({
       initialFilter: z.enum(['owned', 'starred', 'all']).default('owned'),

plugins/catalog/src/alpha/navItems.tsx

@@ -20,7 +20,6 @@ import { createNavItemExtension } from '@backstage/frontend-plugin-api';
 import { rootRouteRef } from '../routes';
 
 export const CatalogIndexNavItem = createNavItemExtension({
-  id: 'catalog.nav.index',
   routeRef: convertLegacyRouteRef(rootRouteRef),
   title: 'Catalog',
   icon: HomeIcon,

plugins/catalog/src/alpha/pages.tsx

@@ -30,7 +30,6 @@ import { rootRouteRef } from '../routes';
 import { useEntityFromUrl } from '../components/CatalogEntityPage/useEntityFromUrl';
 
 export const CatalogIndexPage = createPageExtension({
-  id: 'plugin.catalog.page.index',
   defaultPath: '/catalog',
   routeRef: convertLegacyRouteRef(rootRouteRef),
   inputs: {
@@ -46,7 +45,7 @@ export const CatalogIndexPage = createPageExtension({
 });
 
 export const CatalogEntityPage = createPageExtension({
-  id: 'plugin.catalog.page.entity',
+  name: 'entity',
   defaultPath: '/catalog/:namespace/:kind/:name',
   routeRef: convertLegacyRouteRef(entityRouteRef),
   inputs: {

plugins/catalog/src/alpha/searchResultItems.tsx

@@ -18,7 +18,6 @@ import { createSearchResultListItemExtension } from '@backstage/plugin-search-re
 
 export const CatalogSearchResultListItemExtension =
   createSearchResultListItemExtension({
-    id: 'catalog',
     predicate: result => result.type === 'software-catalog',
     component: () =>
       import('../components/CatalogSearchResultListItem').then(

plugins/explore/src/alpha.tsx

@@ -20,7 +20,6 @@ import { createSearchResultListItemExtension } from '@backstage/plugin-search-re
 /** @alpha */
 export const ExploreSearchResultListItemExtension =
   createSearchResultListItemExtension({
-    id: 'explore',
     predicate: result => result.type === 'tools',
     component: () =>
       import('./components/ToolSearchResultListItem').then(

plugins/graphiql/src/alpha.tsx

@@ -38,7 +38,6 @@ import { convertLegacyRouteRef } from '@backstage/core-compat-api';
 
 /** @alpha */
 export const GraphiqlPage = createPageExtension({
-  id: 'plugin.graphiql.page',
   defaultPath: '/graphiql',
   routeRef: convertLegacyRouteRef(graphiQLRouteRef),
   loader: () => import('./components').then(m => <m.GraphiQLPage />),
@@ -46,7 +45,6 @@ export const GraphiqlPage = createPageExtension({
 
 /** @alpha */
 export const graphiqlPageSidebarItem = createNavItemExtension({
-  id: 'plugin.graphiql.nav.index',
   title: 'GraphiQL',
   icon: GraphiQLIcon as IconComponent,
   routeRef: convertLegacyRouteRef(graphiQLRouteRef),
@@ -59,7 +57,7 @@ const endpointDataRef = createExtensionDataRef<GraphQLEndpoint>(
 
 /** @alpha */
 export const graphiqlBrowseApi = createApiExtension({
-  api: graphQlBrowseApiRef, // apis.plugin.graphiql.browse
+  name: 'browse',
   inputs: {
     endpoints: createExtensionInput({
       endpoint: endpointDataRef,
@@ -74,15 +72,18 @@ export const graphiqlBrowseApi = createApiExtension({
 });
 
 /** @alpha */
-export function createEndpointExtension<TConfig extends {}>(options: {
-  id: string;
+export function createGraphiQLEndpointExtension<TConfig extends {}>(options: {
+  namespace?: string;
+  name?: string;
   configSchema?: PortableSchema<TConfig>;
   disabled?: boolean;
   factory: (options: { config: TConfig }) => { endpoint: GraphQLEndpoint };
 }) {
   return createExtension({
-    id: `apis.plugin.graphiql.browse.${options.id}`,
-    attachTo: { id: 'apis.plugin.graphiql.browse', input: 'endpoints' },
+    kind: 'graphiql-endpoint',
+    namespace: options.namespace,
+    name: options.name,
+    attachTo: { id: 'api:graphiql/browse', input: 'endpoints' },
     configSchema: options.configSchema,
     disabled: options.disabled ?? false,
     output: {
@@ -97,8 +98,8 @@ export function createEndpointExtension<TConfig extends {}>(options: {
 }
 
 /** @alpha */
-const gitlabGraphiQLBrowseExtension = createEndpointExtension({
-  id: 'gitlab',
+const gitlabGraphiQLBrowseExtension = createGraphiQLEndpointExtension({
+  name: 'gitlab',
   disabled: true,
   configSchema: createSchemaFromZod(z =>
     z

plugins/home/src/alpha.tsx

@@ -33,7 +33,6 @@ const rootRouteRef = createRouteRef();
 export const titleExtensionDataRef = createExtensionDataRef<string>('title');
 
 const HomepageCompositionRootExtension = createPageExtension({
-  id: 'home',
   defaultPath: '/home',
   routeRef: rootRouteRef,
   inputs: {

plugins/search-react/src/alpha.test.tsx

@@ -44,7 +44,6 @@ describe('createSearchResultListItemExtension', () => {
 
     const TechDocsSearchResultItemExtension =
       createSearchResultListItemExtension({
-        id: 'techdocs',
         attachTo: { id: 'plugin.search.page', input: 'items' },
         configSchema: createSchemaFromZod(z =>
           z
@@ -67,14 +66,12 @@ describe('createSearchResultListItemExtension', () => {
 
     const ExploreSearchResultItemExtension =
       createSearchResultListItemExtension({
-        id: 'explore',
         attachTo: { id: 'plugin.search.page', input: 'items' },
         predicate: result => result.type === 'explore',
         component: async () => ExploreSearchResultItemComponent,
       });
 
     const SearchPageExtension = createPageExtension({
-      id: 'plugin.search.page',
       defaultPath: '/',
       inputs: {
         items: createExtensionInput({

plugins/search-react/src/alpha.tsx

@@ -58,9 +58,13 @@ export type SearchResultItemExtensionOptions<
   TConfig extends { noTrack?: boolean },
 > = {
   /**
-   * The extension id.
+   * The extension namespace.
    */
-  id: string;
+  namespace?: string;
+  /**
+   * The extension name.
+   */
+  name?: string;
   /**
    * The extension attachment point (e.g., search modal or page).
    */
@@ -86,8 +90,6 @@ export type SearchResultItemExtensionOptions<
 export function createSearchResultListItemExtension<
   TConfig extends { noTrack?: boolean },
 >(options: SearchResultItemExtensionOptions<TConfig>) {
-  const id = `plugin.search.result.item.${options.id}`;
-
   const configSchema =
     'configSchema' in options
       ? options.configSchema
@@ -98,9 +100,11 @@ export function createSearchResultListItemExtension<
         ) as PortableSchema<TConfig>);
 
   return createExtension({
-    id,
+    kind: 'search-result-list-item',
+    namespace: options.namespace,
+    name: options.name,
     attachTo: options.attachTo ?? {
-      id: 'plugin.search.page',
+      id: 'page:search',
       input: 'items',
     },
     configSchema,

plugins/search/src/alpha.tsx

@@ -98,7 +98,6 @@ const useSearchPageStyles = makeStyles((theme: Theme) => ({
 
 /** @alpha */
 export const SearchPage = createPageExtension({
-  id: 'plugin.search.page',
   routeRef: convertLegacyRouteRef(rootRouteRef),
   configSchema: createSchemaFromZod(z =>
     z.object({
@@ -235,7 +234,6 @@ export const SearchPage = createPageExtension({
 
 /** @alpha */
 export const SearchNavItem = createNavItemExtension({
-  id: 'plugin.search.nav.index',
   routeRef: convertLegacyRouteRef(rootRouteRef),
   title: 'Search',
   icon: SearchIcon,

plugins/stack-overflow/src/alpha.tsx

@@ -33,7 +33,6 @@ const StackOverflowApi = createApiExtension({
 
 /** @alpha */
 const StackOverflowSearchResultListItem = createSearchResultListItemExtension({
-  id: 'stack-overflow',
   predicate: result => result.type === 'stack-overflow',
   component: () =>
     import('./search/StackOverflowSearchResultListItem').then(

plugins/tech-radar/src/alpha.tsx

@@ -29,7 +29,6 @@ import { rootRouteRef } from './plugin';
 
 /** @alpha */
 export const TechRadarPage = createPageExtension({
-  id: 'plugin.techradar.page',
   defaultPath: '/tech-radar',
   routeRef: convertLegacyRouteRef(rootRouteRef),
   configSchema: createSchemaFromZod(z =>
@@ -49,7 +48,6 @@ export const TechRadarPage = createPageExtension({
 });
 
 const sampleTechRadarApi = createApiExtension({
-  api: techRadarApiRef,
   factory() {
     return createApiFactory(techRadarApiRef, new SampleTechRadarApi());
   },

plugins/techdocs/src/alpha.tsx

@@ -46,8 +46,7 @@ import { createEntityContentExtension } from '@backstage/plugin-catalog-react/al
 
 /** @alpha */
 const techDocsStorage = createApiExtension({
-  api: techdocsStorageApiRef,
-
+  name: 'storage',
   factory() {
     return createApiFactory({
       api: techdocsStorageApiRef,
@@ -70,7 +69,6 @@ const techDocsStorage = createApiExtension({
 
 /** @alpha */
 const techDocsClient = createApiExtension({
-  api: techdocsApiRef,
   factory() {
     return createApiFactory({
       api: techdocsApiRef,
@@ -92,7 +90,6 @@ const techDocsClient = createApiExtension({
 /** @alpha */
 export const TechDocsSearchResultListItemExtension =
   createSearchResultListItemExtension({
-    id: 'techdocs',
     configSchema: createSchemaFromZod(z =>
       z.object({
         // TODO: Define how the icon can be configurable
@@ -118,7 +115,6 @@ export const TechDocsSearchResultListItemExtension =
  * @alpha
  */
 const TechDocsIndexPage = createPageExtension({
-  id: 'plugin.techdocs.indexPage',
   defaultPath: '/docs',
   routeRef: convertLegacyRouteRef(rootRouteRef),
   loader: () =>
@@ -133,7 +129,7 @@ const TechDocsIndexPage = createPageExtension({
  * @alpha
  */
 const TechDocsReaderPage = createPageExtension({
-  id: 'plugin.techdocs.readerPage',
+  name: 'reader',
   defaultPath: '/docs/:namespace/:kind/:name',
   routeRef: convertLegacyRouteRef(rootDocsRouteRef),
   loader: () =>
@@ -148,7 +144,6 @@ const TechDocsReaderPage = createPageExtension({
  * @alpha
  */
 const TechDocsEntityContent = createEntityContentExtension({
-  id: 'techdocs',
   defaultPath: 'docs',
   defaultTitle: 'TechDocs',
   loader: () => import('./Router').then(m => <m.EmbeddedDocsRouter />),
@@ -156,7 +151,6 @@ const TechDocsEntityContent = createEntityContentExtension({
 
 /** @alpha */
 const TechDocsNavItem = createNavItemExtension({
-  id: 'plugin.techdocs.nav.index',
   icon: LibraryBooks,
   title: 'Docs',
   routeRef: convertLegacyRouteRef(rootRouteRef),

plugins/user-settings/src/alpha.tsx

@@ -27,7 +27,6 @@ import React from 'react';
 export * from './translation';
 
 const UserSettingsPage = createPageExtension({
-  id: 'plugin.user-settings.page',
   defaultPath: '/settings',
   routeRef: convertLegacyRouteRef(settingsRouteRef),
   inputs: {