Merge pull request #7435 from backstage/codemod/extension-names

Add names to all core extensions provided by plugins

.changeset/we-call-a-rose.md

@@ -0,0 +1,47 @@
+---
+'@backstage/plugin-allure': patch
+'@backstage/plugin-api-docs': patch
+'@backstage/plugin-badges': patch
+'@backstage/plugin-bitrise': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-catalog-graph': patch
+'@backstage/plugin-catalog-import': patch
+'@backstage/plugin-circleci': patch
+'@backstage/plugin-cloudbuild': patch
+'@backstage/plugin-code-coverage': patch
+'@backstage/plugin-config-schema': patch
+'@backstage/plugin-cost-insights': patch
+'@backstage/plugin-explore': patch
+'@backstage/plugin-firehydrant': patch
+'@backstage/plugin-fossa': patch
+'@backstage/plugin-gcp-projects': patch
+'@backstage/plugin-git-release-manager': patch
+'@backstage/plugin-github-actions': patch
+'@backstage/plugin-github-deployments': patch
+'@backstage/plugin-gitops-profiles': patch
+'@backstage/plugin-graphiql': patch
+'@backstage/plugin-home': patch
+'@backstage/plugin-ilert': patch
+'@backstage/plugin-jenkins': patch
+'@backstage/plugin-kafka': patch
+'@backstage/plugin-kubernetes': patch
+'@backstage/plugin-lighthouse': patch
+'@backstage/plugin-newrelic': patch
+'@backstage/plugin-org': patch
+'@backstage/plugin-pagerduty': patch
+'@backstage/plugin-rollbar': patch
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-search': patch
+'@backstage/plugin-sentry': patch
+'@backstage/plugin-shortcuts': patch
+'@backstage/plugin-sonarqube': patch
+'@backstage/plugin-splunk-on-call': patch
+'@backstage/plugin-tech-radar': patch
+'@backstage/plugin-techdocs': patch
+'@backstage/plugin-todo': patch
+'@backstage/plugin-user-settings': patch
+'@backstage/plugin-welcome': patch
+'@backstage/plugin-xcmetrics': patch
+---
+
+Added a `name` key to all extensions in order to improve Analytics API metadata.

.changeset/whats-in-a-name.md

@@ -0,0 +1,11 @@
+---
+'@backstage/codemods': patch
+---
+
+Added an `extension-names` codemod, which adds a `name` key to all extensions
+provided by plugins. Extension names are used to provide richer context to
+events captured by the new Analytics API, and may also appear in debug output
+and other situations.
+
+To apply this codemod, run `npx @backstage/codemods apply extension-names` in
+the root of your Backstage monorepo.

packages/codemods/src/codemods.ts

@@ -25,4 +25,9 @@ export const codemods: Codemod[] = [
     description:
       'Updates @backstage/core imports to use @backstage/core-* imports instead.',
   },
+  {
+    name: 'extension-names',
+    description:
+      'Adds a "name" property to all core extensions provided by plugins.',
+  },
 ];

packages/codemods/transforms/extension-names.js

@@ -0,0 +1,83 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+module.exports = (file, /** @type {import('jscodeshift').API} */ api) => {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // Find all variables set to *.provide() with an invocation of an extension
+  // creator as its first argument.
+  // For example: somePlugin.provide(createReactExtension({}))
+  const extensionCreators = [
+    'createReactExtension',
+    'createComponentExtension',
+    'createRoutableExtension',
+  ];
+  const extensions = root
+    .findVariableDeclarators()
+    .filter(
+      n =>
+        n.node.init?.type === 'CallExpression' &&
+        n.node.init?.callee.type === 'MemberExpression' &&
+        n.node.init?.callee?.property.name === 'provide' &&
+        n.node.init?.arguments.length === 1 &&
+        extensionCreators.includes(n.node.init?.arguments[0].callee?.name),
+    );
+
+  // Abort if no such variable declarations exist in this file.
+  if (extensions.size === 0) {
+    return undefined;
+  }
+
+  // For each variable, parse out its name and apply the name as the value of
+  // the "name" key on the argument passed to the extension creator's argument.
+  // For example: createReactExtension({ name: 'Some Extension' })
+  let numberAffected = 0;
+  extensions.nodes().flatMap(node => {
+    const creatorArgObject = node.init?.arguments[0].arguments[0];
+    const hasNameKeyAlready =
+      creatorArgObject.properties.filter(p => p.key.name === 'name').length ===
+      1;
+    const nameProp = j.objectProperty(
+      j.identifier('name'),
+      j.literal(node.id.name),
+    );
+
+    // Apply this change only once.
+    if (!hasNameKeyAlready) {
+      numberAffected++;
+      creatorArgObject.properties.unshift(nameProp);
+    }
+  });
+
+  // Abort if no changes were made.
+  if (numberAffected === 0) {
+    return undefined;
+  }
+
+  // Check for code styles to be applied to this file.
+  const useSingleQuote =
+    root.find(j.ImportDeclaration).nodes()[0]?.source.extra.raw[0] === "'";
+  const useTrailingComma = root
+    .find(j.ObjectExpression)
+    .nodes()[0]
+    ?.extra?.hasOwnProperty('trailingComma');
+
+  return root.toSource({
+    quote: useSingleQuote ? 'single' : 'double',
+    trailingComma: useTrailingComma,
+  });
+};

packages/core-app-api/src/app/App.test.tsx

@@ -127,6 +127,7 @@ describe('Integration Test', () => {
 
   const HiddenComponent = plugin2.provide(
     createRoutableExtension({
+      name: 'HiddenComponent',
       component: () => Promise.resolve((_: { path?: string }) => <div />),
       mountPoint: plugin2RouteRef,
     }),
@@ -134,6 +135,7 @@ describe('Integration Test', () => {
 
   const ExposedComponent = plugin1.provide(
     createRoutableExtension({
+      name: 'ExposedComponent',
       component: () =>
         Promise.resolve((_: PropsWithChildren<{ path?: string }>) => {
           const link1 = useRouteRef(plugin1RouteRef);

packages/core-app-api/src/plugins/collectors.test.tsx

@@ -43,24 +43,35 @@ const ref2 = createRouteRef(mockConfig());
 
 const Extension1 = pluginA.provide(
   createRoutableExtension({
+    name: 'Extension1',
     component: () => Promise.resolve(MockComponent),
     mountPoint: ref1,
   }),
 );
 const Extension2 = pluginB.provide(
   createRoutableExtension({
+    name: 'Extension2',
     component: () => Promise.resolve(MockComponent),
     mountPoint: ref2,
   }),
 );
 const Extension3 = pluginA.provide(
-  createComponentExtension({ component: { sync: MockComponent } }),
+  createComponentExtension({
+    name: 'Extension3',
+    component: { sync: MockComponent },
+  }),
 );
 const Extension4 = pluginB.provide(
-  createComponentExtension({ component: { sync: MockComponent } }),
+  createComponentExtension({
+    name: 'Extension4',
+    component: { sync: MockComponent },
+  }),
 );
 const Extension5 = pluginC.provide(
-  createComponentExtension({ component: { sync: MockComponent } }),
+  createComponentExtension({
+    name: 'Extension5',
+    component: { sync: MockComponent },
+  }),
 );
 
 describe('collection', () => {

packages/core-app-api/src/routing/RoutingProvider.test.tsx

@@ -91,30 +91,35 @@ const MockRouteSource = <T extends { [name in string]: string }>(props: {
 
 const Extension1 = plugin.provide(
   createRoutableExtension({
+    name: 'Extension1',
     component: () => Promise.resolve(MockComponent),
     mountPoint: ref1,
   }),
 );
 const Extension2 = plugin.provide(
   createRoutableExtension({
+    name: 'Extension2',
     component: () => Promise.resolve(MockRouteSource),
     mountPoint: ref2,
   }),
 );
 const Extension3 = plugin.provide(
   createRoutableExtension({
+    name: 'Extension3',
     component: () => Promise.resolve(MockComponent),
     mountPoint: ref3,
   }),
 );
 const Extension4 = plugin.provide(
   createRoutableExtension({
+    name: 'Extension4',
     component: () => Promise.resolve(MockRouteSource),
     mountPoint: ref4,
   }),
 );
 const Extension5 = plugin.provide(
   createRoutableExtension({
+    name: 'Extension5',
     component: () => Promise.resolve(MockComponent),
     mountPoint: ref5,
   }),

packages/core-app-api/src/routing/collectors.test.tsx

@@ -51,30 +51,35 @@ const refOrder = [ref1, ref2, ref3, ref4, ref5];
 
 const Extension1 = plugin.provide(
   createRoutableExtension({
+    name: 'Extension1',
     component: () => Promise.resolve(MockComponent),
     mountPoint: ref1,
   }),
 );
 const Extension2 = plugin.provide(
   createRoutableExtension({
+    name: 'Extension2',
     component: () => Promise.resolve(MockComponent),
     mountPoint: ref2,
   }),
 );
 const Extension3 = plugin.provide(
   createRoutableExtension({
+    name: 'Extension3',
     component: () => Promise.resolve(MockComponent),
     mountPoint: ref3,
   }),
 );
 const Extension4 = plugin.provide(
   createRoutableExtension({
+    name: 'Extension4',
     component: () => Promise.resolve(MockComponent),
     mountPoint: ref4,
   }),
 );
 const Extension5 = plugin.provide(
   createRoutableExtension({
+    name: 'Extension5',
     component: () => Promise.resolve(MockComponent),
     mountPoint: ref5,
   }),

packages/core-plugin-api/src/extensions/extensions.test.tsx

@@ -85,6 +85,7 @@ describe('extensions', () => {
   it('should wrap extended component with error boundary', async () => {
     const BrokenComponent = plugin.provide(
       createComponentExtension({
+        name: 'BrokenComponent',
         component: {
           sync: () => {
             throw new Error('Test error');

plugins/allure/src/plugin.ts

@@ -44,6 +44,7 @@ export const allurePlugin = createPlugin({
 
 export const EntityAllureReportContent = allurePlugin.provide(
   createRoutableExtension({
+    name: 'EntityAllureReportContent',
     component: () =>
       import('./components/AllureReportComponent').then(
         m => m.AllureReportComponent,

plugins/api-docs/src/plugin.ts

@@ -51,6 +51,7 @@ export const apiDocsPlugin = createPlugin({
 
 export const ApiExplorerPage = apiDocsPlugin.provide(
   createRoutableExtension({
+    name: 'ApiExplorerPage',
     component: () =>
       import('./components/ApiExplorerPage').then(m => m.ApiExplorerPage),
     mountPoint: rootRoute,
@@ -59,6 +60,7 @@ export const ApiExplorerPage = apiDocsPlugin.provide(
 
 export const EntityApiDefinitionCard = apiDocsPlugin.provide(
   createComponentExtension({
+    name: 'EntityApiDefinitionCard',
     component: {
       lazy: () =>
         import('./components/ApiDefinitionCard').then(m => m.ApiDefinitionCard),
@@ -68,6 +70,7 @@ export const EntityApiDefinitionCard = apiDocsPlugin.provide(
 
 export const EntityConsumedApisCard = apiDocsPlugin.provide(
   createComponentExtension({
+    name: 'EntityConsumedApisCard',
     component: {
       lazy: () =>
         import('./components/ApisCards').then(m => m.ConsumedApisCard),
@@ -77,6 +80,7 @@ export const EntityConsumedApisCard = apiDocsPlugin.provide(
 
 export const EntityConsumingComponentsCard = apiDocsPlugin.provide(
   createComponentExtension({
+    name: 'EntityConsumingComponentsCard',
     component: {
       lazy: () =>
         import('./components/ComponentsCards').then(
@@ -88,6 +92,7 @@ export const EntityConsumingComponentsCard = apiDocsPlugin.provide(
 
 export const EntityProvidedApisCard = apiDocsPlugin.provide(
   createComponentExtension({
+    name: 'EntityProvidedApisCard',
     component: {
       lazy: () =>
         import('./components/ApisCards').then(m => m.ProvidedApisCard),
@@ -97,6 +102,7 @@ export const EntityProvidedApisCard = apiDocsPlugin.provide(
 
 export const EntityProvidingComponentsCard = apiDocsPlugin.provide(
   createComponentExtension({
+    name: 'EntityProvidingComponentsCard',
     component: {
       lazy: () =>
         import('./components/ComponentsCards').then(
@@ -108,6 +114,7 @@ export const EntityProvidingComponentsCard = apiDocsPlugin.provide(
 
 export const EntityHasApisCard = apiDocsPlugin.provide(
   createComponentExtension({
+    name: 'EntityHasApisCard',
     component: {
       lazy: () => import('./components/ApisCards').then(m => m.HasApisCard),
     },

plugins/badges/src/plugin.ts

@@ -36,6 +36,7 @@ export const badgesPlugin = createPlugin({
 
 export const EntityBadgesDialog = badgesPlugin.provide(
   createComponentExtension({
+    name: 'EntityBadgesDialog',
     component: {
       lazy: () =>
         import('./components/EntityBadgesDialog').then(

plugins/bitrise/src/extensions.ts

@@ -19,6 +19,7 @@ import { createComponentExtension } from '@backstage/core-plugin-api';
 
 export const EntityBitriseContent = bitrisePlugin.provide(
   createComponentExtension({
+    name: 'EntityBitriseContent',
     component: {
       lazy: () =>
         import('./components/BitriseBuildsComponent').then(

plugins/catalog-graph/src/extensions.tsx

@@ -27,6 +27,7 @@ import { catalogGraphRouteRef } from './routes';
  */
 export const EntityCatalogGraphCard = catalogGraphPlugin.provide(
   createComponentExtension({
+    name: 'EntityCatalogGraphCard',
     component: {
       lazy: () =>
         import('./components/CatalogGraphCard').then(m => m.CatalogGraphCard),
@@ -42,6 +43,7 @@ export const EntityCatalogGraphCard = catalogGraphPlugin.provide(
  */
 export const CatalogGraphPage = catalogGraphPlugin.provide(
   createRoutableExtension({
+    name: 'CatalogGraphPage',
     component: () =>
       import('./components/CatalogGraphPage').then(m => m.CatalogGraphPage),
     mountPoint: catalogGraphRouteRef,

plugins/catalog-import/src/plugin.ts

@@ -73,6 +73,7 @@ export const catalogImportPlugin = createPlugin({
 
 export const CatalogImportPage = catalogImportPlugin.provide(
   createRoutableExtension({
+    name: 'CatalogImportPage',
     component: () => import('./components/ImportPage').then(m => m.ImportPage),
     mountPoint: rootRouteRef,
   }),

plugins/catalog/src/plugin.ts

@@ -56,6 +56,7 @@ export const catalogPlugin = createPlugin({
 
 export const CatalogIndexPage = catalogPlugin.provide(
   createRoutableExtension({
+    name: 'CatalogIndexPage',
     component: () =>
       import('./components/CatalogPage').then(m => m.CatalogPage),
     mountPoint: catalogRouteRef,
@@ -64,6 +65,7 @@ export const CatalogIndexPage = catalogPlugin.provide(
 
 export const CatalogEntityPage = catalogPlugin.provide(
   createRoutableExtension({
+    name: 'CatalogEntityPage',
     component: () =>
       import('./components/CatalogEntityPage').then(m => m.CatalogEntityPage),
     mountPoint: entityRouteRef,
@@ -72,6 +74,7 @@ export const CatalogEntityPage = catalogPlugin.provide(
 
 export const EntityAboutCard = catalogPlugin.provide(
   createComponentExtension({
+    name: 'EntityAboutCard',
     component: {
       lazy: () => import('./components/AboutCard').then(m => m.AboutCard),
     },
@@ -80,6 +83,7 @@ export const EntityAboutCard = catalogPlugin.provide(
 
 export const EntityLinksCard = catalogPlugin.provide(
   createComponentExtension({
+    name: 'EntityLinksCard',
     component: {
       lazy: () =>
         import('./components/EntityLinksCard').then(m => m.EntityLinksCard),
@@ -89,6 +93,7 @@ export const EntityLinksCard = catalogPlugin.provide(
 
 export const EntityHasSystemsCard = catalogPlugin.provide(
   createComponentExtension({
+    name: 'EntityHasSystemsCard',
     component: {
       lazy: () =>
         import('./components/HasSystemsCard').then(m => m.HasSystemsCard),
@@ -98,6 +103,7 @@ export const EntityHasSystemsCard = catalogPlugin.provide(
 
 export const EntityHasComponentsCard = catalogPlugin.provide(
   createComponentExtension({
+    name: 'EntityHasComponentsCard',
     component: {
       lazy: () =>
         import('./components/HasComponentsCard').then(m => m.HasComponentsCard),
@@ -107,6 +113,7 @@ export const EntityHasComponentsCard = catalogPlugin.provide(
 
 export const EntityHasSubcomponentsCard = catalogPlugin.provide(
   createComponentExtension({
+    name: 'EntityHasSubcomponentsCard',
     component: {
       lazy: () =>
         import('./components/HasSubcomponentsCard').then(
@@ -118,6 +125,7 @@ export const EntityHasSubcomponentsCard = catalogPlugin.provide(
 
 export const EntityHasResourcesCard = catalogPlugin.provide(
   createComponentExtension({
+    name: 'EntityHasResourcesCard',
     component: {
       lazy: () =>
         import('./components/HasResourcesCard').then(m => m.HasResourcesCard),
@@ -127,6 +135,7 @@ export const EntityHasResourcesCard = catalogPlugin.provide(
 
 export const EntityDependsOnComponentsCard = catalogPlugin.provide(
   createComponentExtension({
+    name: 'EntityDependsOnComponentsCard',
     component: {
       lazy: () =>
         import('./components/DependsOnComponentsCard').then(
@@ -138,6 +147,7 @@ export const EntityDependsOnComponentsCard = catalogPlugin.provide(
 
 export const EntityDependencyOfComponentsCard = catalogPlugin.provide(
   createComponentExtension({
+    name: 'EntityDependencyOfComponentsCard',
     component: {
       lazy: () =>
         import('./components/DependencyOfComponentsCard').then(
@@ -149,6 +159,7 @@ export const EntityDependencyOfComponentsCard = catalogPlugin.provide(
 
 export const EntityDependsOnResourcesCard = catalogPlugin.provide(
   createComponentExtension({
+    name: 'EntityDependsOnResourcesCard',
     component: {
       lazy: () =>
         import('./components/DependsOnResourcesCard').then(
@@ -160,6 +171,7 @@ export const EntityDependsOnResourcesCard = catalogPlugin.provide(
 
 export const EntitySystemDiagramCard = catalogPlugin.provide(
   createComponentExtension({
+    name: 'EntitySystemDiagramCard',
     component: {
       lazy: () =>
         import('./components/SystemDiagramCard').then(m => m.SystemDiagramCard),

plugins/circleci/src/plugin.ts

@@ -36,6 +36,7 @@ export const circleCIPlugin = createPlugin({
 
 export const EntityCircleCIContent = circleCIPlugin.provide(
   createRoutableExtension({
+    name: 'EntityCircleCIContent',
     component: () => import('./components/Router').then(m => m.Router),
     mountPoint: circleCIRouteRef,
   }),

plugins/cloudbuild/src/plugin.ts

@@ -41,6 +41,7 @@ export const cloudbuildPlugin = createPlugin({
 
 export const EntityCloudbuildContent = cloudbuildPlugin.provide(
   createRoutableExtension({
+    name: 'EntityCloudbuildContent',
     component: () => import('./components/Router').then(m => m.Router),
     mountPoint: rootRouteRef,
   }),
@@ -48,6 +49,7 @@ export const EntityCloudbuildContent = cloudbuildPlugin.provide(
 
 export const EntityLatestCloudbuildRunCard = cloudbuildPlugin.provide(
   createComponentExtension({
+    name: 'EntityLatestCloudbuildRunCard',
     component: {
       lazy: () =>
         import('./components/Cards').then(m => m.LatestWorkflowRunCard),
@@ -57,6 +59,7 @@ export const EntityLatestCloudbuildRunCard = cloudbuildPlugin.provide(
 
 export const EntityLatestCloudbuildsForBranchCard = cloudbuildPlugin.provide(
   createComponentExtension({
+    name: 'EntityLatestCloudbuildsForBranchCard',
     component: {
       lazy: () =>
         import('./components/Cards').then(m => m.LatestWorkflowsForBranchCard),

plugins/code-coverage/src/plugin.ts

@@ -39,6 +39,7 @@ export const codeCoveragePlugin = createPlugin({
 
 export const EntityCodeCoverageContent = codeCoveragePlugin.provide(
   createRoutableExtension({
+    name: 'EntityCodeCoverageContent',
     component: () => import('./components/Router').then(m => m.Router),
     mountPoint: rootRouteRef,
   }),

plugins/config-schema/src/plugin.ts

@@ -29,6 +29,7 @@ export const configSchemaPlugin = createPlugin({
 
 export const ConfigSchemaPage = configSchemaPlugin.provide(
   createRoutableExtension({
+    name: 'ConfigSchemaPage',
     component: () =>
       import('./components/ConfigSchemaPage').then(m => m.ConfigSchemaPage),
     mountPoint: rootRouteRef,

plugins/cost-insights/src/plugin.ts

@@ -49,6 +49,7 @@ export const costInsightsPlugin = createPlugin({
 
 export const CostInsightsPage = costInsightsPlugin.provide(
   createRoutableExtension({
+    name: 'CostInsightsPage',
     component: () =>
       import('./components/CostInsightsPage').then(m => m.CostInsightsPage),
     mountPoint: rootRouteRef,
@@ -58,6 +59,7 @@ export const CostInsightsPage = costInsightsPlugin.provide(
 export const CostInsightsProjectGrowthInstructionsPage =
   costInsightsPlugin.provide(
     createRoutableExtension({
+      name: 'CostInsightsProjectGrowthInstructionsPage',
       component: () =>
         import('./components/ProjectGrowthInstructionsPage').then(
           m => m.ProjectGrowthInstructionsPage,
@@ -69,6 +71,7 @@ export const CostInsightsProjectGrowthInstructionsPage =
 export const CostInsightsLabelDataflowInstructionsPage =
   costInsightsPlugin.provide(
     createRoutableExtension({
+      name: 'CostInsightsLabelDataflowInstructionsPage',
       component: () =>
         import('./components/LabelDataflowInstructionsPage').then(
           m => m.LabelDataflowInstructionsPage,

plugins/explore/src/extensions.tsx

@@ -23,6 +23,7 @@ import {
 
 export const ExplorePage = explorePlugin.provide(
   createRoutableExtension({
+    name: 'ExplorePage',
     component: () =>
       import('./components/ExplorePage').then(m => m.ExplorePage),
     mountPoint: exploreRouteRef,
@@ -31,6 +32,7 @@ export const ExplorePage = explorePlugin.provide(
 
 export const DomainExplorerContent = explorePlugin.provide(
   createComponentExtension({
+    name: 'DomainExplorerContent',
     component: {
       lazy: () =>
         import('./components/DomainExplorerContent').then(
@@ -42,6 +44,7 @@ export const DomainExplorerContent = explorePlugin.provide(
 
 export const GroupsExplorerContent = explorePlugin.provide(
   createComponentExtension({
+    name: 'GroupsExplorerContent',
     component: {
       lazy: () =>
         import('./components/GroupsExplorerContent').then(
@@ -53,6 +56,7 @@ export const GroupsExplorerContent = explorePlugin.provide(
 
 export const ToolExplorerContent = explorePlugin.provide(
   createComponentExtension({
+    name: 'ToolExplorerContent',
     component: {
       lazy: () =>
         import('./components/ToolExplorerContent').then(

plugins/firehydrant/src/plugin.ts

@@ -39,6 +39,7 @@ export const firehydrantPlugin = createPlugin({
 
 export const FirehydrantCard = firehydrantPlugin.provide(
   createComponentExtension({
+    name: 'FirehydrantCard',
     component: {
       lazy: () =>
         import('./components/ServiceDetailsCard').then(

plugins/fossa/src/extensions.tsx

@@ -23,6 +23,7 @@ import {
 
 export const EntityFossaCard = fossaPlugin.provide(
   createComponentExtension({
+    name: 'EntityFossaCard',
     component: {
       lazy: () => import('./components/FossaCard').then(m => m.FossaCard),
     },
@@ -31,6 +32,7 @@ export const EntityFossaCard = fossaPlugin.provide(
 
 export const FossaPage = fossaPlugin.provide(
   createRoutableExtension({
+    name: 'FossaPage',
     component: () => import('./components/FossaPage').then(m => m.FossaPage),
     mountPoint: rootRoute,
   }),

plugins/gcp-projects/src/plugin.ts

@@ -41,6 +41,7 @@ export const gcpProjectsPlugin = createPlugin({
 
 export const GcpProjectsPage = gcpProjectsPlugin.provide(
   createRoutableExtension({
+    name: 'GcpProjectsPage',
     component: () =>
       import('./components/GcpProjectsPage').then(m => m.GcpProjectsPage),
     mountPoint: rootRouteRef,

plugins/git-release-manager/src/plugin.ts

@@ -56,6 +56,7 @@ export const gitReleaseManagerPlugin = createPlugin({
 
 export const GitReleaseManagerPage = gitReleaseManagerPlugin.provide(
   createRoutableExtension({
+    name: 'GitReleaseManagerPage',
     component: () =>
       import('./GitReleaseManager').then(m => m.GitReleaseManager),
     mountPoint: rootRouteRef,

plugins/github-actions/src/plugin.ts

@@ -42,6 +42,7 @@ export const githubActionsPlugin = createPlugin({
 
 export const EntityGithubActionsContent = githubActionsPlugin.provide(
   createRoutableExtension({
+    name: 'EntityGithubActionsContent',
     component: () => import('./components/Router').then(m => m.Router),
     mountPoint: rootRouteRef,
   }),
@@ -49,6 +50,7 @@ export const EntityGithubActionsContent = githubActionsPlugin.provide(
 
 export const EntityLatestGithubActionRunCard = githubActionsPlugin.provide(
   createComponentExtension({
+    name: 'EntityLatestGithubActionRunCard',
     component: {
       lazy: () =>
         import('./components/Cards').then(m => m.LatestWorkflowRunCard),
@@ -59,6 +61,7 @@ export const EntityLatestGithubActionRunCard = githubActionsPlugin.provide(
 export const EntityLatestGithubActionsForBranchCard =
   githubActionsPlugin.provide(
     createComponentExtension({
+      name: 'EntityLatestGithubActionsForBranchCard',
       component: {
         lazy: () =>
           import('./components/Cards').then(
@@ -70,6 +73,7 @@ export const EntityLatestGithubActionsForBranchCard =
 
 export const EntityRecentGithubActionsRunsCard = githubActionsPlugin.provide(
   createComponentExtension({
+    name: 'EntityRecentGithubActionsRunsCard',
     component: {
       lazy: () =>
         import('./components/Cards').then(m => m.RecentWorkflowRunsCard),

plugins/github-deployments/src/plugin.ts

@@ -39,6 +39,7 @@ export const githubDeploymentsPlugin = createPlugin({
 
 export const EntityGithubDeploymentsCard = githubDeploymentsPlugin.provide(
   createComponentExtension({
+    name: 'EntityGithubDeploymentsCard',
     component: {
       lazy: () =>
         import('./components/GithubDeploymentsCard').then(

plugins/gitops-profiles/src/plugin.ts

@@ -40,6 +40,7 @@ export const gitopsProfilesPlugin = createPlugin({
 
 export const GitopsProfilesClusterListPage = gitopsProfilesPlugin.provide(
   createRoutableExtension({
+    name: 'GitopsProfilesClusterListPage',
     component: () => import('./components/ClusterList').then(m => m.default),
     mountPoint: gitOpsClusterListRoute,
   }),
@@ -47,6 +48,7 @@ export const GitopsProfilesClusterListPage = gitopsProfilesPlugin.provide(
 
 export const GitopsProfilesClusterPage = gitopsProfilesPlugin.provide(
   createRoutableExtension({
+    name: 'GitopsProfilesClusterPage',
     component: () => import('./components/ClusterPage').then(m => m.default),
     mountPoint: gitOpsClusterDetailsRoute,
   }),
@@ -54,6 +56,7 @@ export const GitopsProfilesClusterPage = gitopsProfilesPlugin.provide(
 
 export const GitopsProfilesCreatePage = gitopsProfilesPlugin.provide(
   createRoutableExtension({
+    name: 'GitopsProfilesCreatePage',
     component: () => import('./components/ProfileCatalog').then(m => m.default),
     mountPoint: gitOpsClusterCreateRoute,
   }),

plugins/graphiql/src/plugin.ts

@@ -42,6 +42,7 @@ export const graphiqlPlugin = createPlugin({
 
 export const GraphiQLPage = graphiqlPlugin.provide(
   createRoutableExtension({
+    name: 'GraphiQLPage',
     component: () => import('./components').then(m => m.GraphiQLPage),
     mountPoint: graphiQLRouteRef,
   }),

plugins/home/src/plugin.ts

@@ -31,6 +31,7 @@ export const homePlugin = createPlugin({
 
 export const HomepageCompositionRoot = homePlugin.provide(
   createRoutableExtension({
+    name: 'HomepageCompositionRoot',
     component: () =>
       import('./components').then(m => m.HomepageCompositionRoot),
     mountPoint: rootRouteRef,
@@ -39,6 +40,7 @@ export const HomepageCompositionRoot = homePlugin.provide(
 
 export const ComponentAccordion = homePlugin.provide(
   createComponentExtension({
+    name: 'ComponentAccordion',
     component: {
       lazy: () =>
         import('./componentRenderers').then(m => m.ComponentAccordion),
@@ -47,6 +49,7 @@ export const ComponentAccordion = homePlugin.provide(
 );
 export const ComponentTabs = homePlugin.provide(
   createComponentExtension({
+    name: 'ComponentTabs',
     component: {
       lazy: () => import('./componentRenderers').then(m => m.ComponentTabs),
     },
@@ -54,6 +57,7 @@ export const ComponentTabs = homePlugin.provide(
 );
 export const ComponentTab = homePlugin.provide(
   createComponentExtension({
+    name: 'ComponentTab',
     component: {
       lazy: () => import('./componentRenderers').then(m => m.ComponentTab),
     },

plugins/ilert/src/plugin.ts

@@ -46,6 +46,7 @@ export const ilertPlugin = createPlugin({
 
 export const ILertPage = ilertPlugin.provide(
   createRoutableExtension({
+    name: 'ILertPage',
     component: () => import('./components').then(m => m.ILertPage),
     mountPoint: iLertRouteRef,
   }),
@@ -53,6 +54,7 @@ export const ILertPage = ilertPlugin.provide(
 
 export const EntityILertCard = ilertPlugin.provide(
   createComponentExtension({
+    name: 'EntityILertCard',
     component: {
       lazy: () => import('./components/ILertCard').then(m => m.ILertCard),
     },

plugins/jenkins/src/plugin.ts

@@ -53,12 +53,14 @@ export const jenkinsPlugin = createPlugin({
 
 export const EntityJenkinsContent = jenkinsPlugin.provide(
   createRoutableExtension({
+    name: 'EntityJenkinsContent',
     component: () => import('./components/Router').then(m => m.Router),
     mountPoint: rootRouteRef,
   }),
 );
 export const EntityLatestJenkinsRunCard = jenkinsPlugin.provide(
   createComponentExtension({
+    name: 'EntityLatestJenkinsRunCard',
     component: {
       lazy: () => import('./components/Cards').then(m => m.LatestRunCard),
     },

plugins/kafka/src/plugin.ts

@@ -44,6 +44,7 @@ export const kafkaPlugin = createPlugin({
 
 export const EntityKafkaContent = kafkaPlugin.provide(
   createRoutableExtension({
+    name: 'EntityKafkaContent',
     component: () => import('./Router').then(m => m.Router),
     mountPoint: rootCatalogKafkaRouteRef,
   }),

plugins/kubernetes/src/plugin.ts

@@ -59,6 +59,7 @@ export const kubernetesPlugin = createPlugin({
 
 export const EntityKubernetesContent = kubernetesPlugin.provide(
   createRoutableExtension({
+    name: 'EntityKubernetesContent',
     component: () => import('./Router').then(m => m.Router),
     mountPoint: rootCatalogKubernetesRouteRef,
   }),

plugins/lighthouse/src/plugin.ts

@@ -60,6 +60,7 @@ export const lighthousePlugin = createPlugin({
 
 export const LighthousePage = lighthousePlugin.provide(
   createRoutableExtension({
+    name: 'LighthousePage',
     component: () => import('./Router').then(m => m.Router),
     mountPoint: rootRouteRef,
   }),
@@ -67,6 +68,7 @@ export const LighthousePage = lighthousePlugin.provide(
 
 export const EntityLighthouseContent = lighthousePlugin.provide(
   createRoutableExtension({
+    name: 'EntityLighthouseContent',
     component: () => import('./Router').then(m => m.EmbeddedRouter),
     mountPoint: entityContentRouteRef,
   }),
@@ -74,6 +76,7 @@ export const EntityLighthouseContent = lighthousePlugin.provide(
 
 export const EntityLastLighthouseAuditCard = lighthousePlugin.provide(
   createComponentExtension({
+    name: 'EntityLastLighthouseAuditCard',
     component: {
       lazy: () =>
         import('./components/Cards').then(m => m.LastLighthouseAuditCard),

plugins/newrelic/src/plugin.ts

@@ -44,6 +44,7 @@ export const newRelicPlugin = createPlugin({
 
 export const NewRelicPage = newRelicPlugin.provide(
   createRoutableExtension({
+    name: 'NewRelicPage',
     component: () =>
       import('./components/NewRelicComponent').then(m => m.default),
     mountPoint: rootRouteRef,

plugins/org/src/plugin.ts

@@ -24,6 +24,7 @@ export const orgPlugin = createPlugin({
 
 export const EntityGroupProfileCard = orgPlugin.provide(
   createComponentExtension({
+    name: 'EntityGroupProfileCard',
     component: {
       lazy: () => import('./components').then(m => m.GroupProfileCard),
     },
@@ -31,6 +32,7 @@ export const EntityGroupProfileCard = orgPlugin.provide(
 );
 export const EntityMembersListCard = orgPlugin.provide(
   createComponentExtension({
+    name: 'EntityMembersListCard',
     component: {
       lazy: () => import('./components').then(m => m.MembersListCard),
     },
@@ -38,6 +40,7 @@ export const EntityMembersListCard = orgPlugin.provide(
 );
 export const EntityOwnershipCard = orgPlugin.provide(
   createComponentExtension({
+    name: 'EntityOwnershipCard',
     component: {
       lazy: () => import('./components').then(m => m.OwnershipCard),
     },
@@ -45,6 +48,7 @@ export const EntityOwnershipCard = orgPlugin.provide(
 );
 export const EntityUserProfileCard = orgPlugin.provide(
   createComponentExtension({
+    name: 'EntityUserProfileCard',
     component: {
       lazy: () => import('./components').then(m => m.UserProfileCard),
     },

plugins/pagerduty/src/plugin.ts

@@ -42,6 +42,7 @@ export const pagerDutyPlugin = createPlugin({
 
 export const EntityPagerDutyCard = pagerDutyPlugin.provide(
   createComponentExtension({
+    name: 'EntityPagerDutyCard',
     component: {
       lazy: () =>
         import('./components/PagerDutyCard').then(m => m.PagerDutyCard),

plugins/rollbar/src/plugin.ts

@@ -47,6 +47,7 @@ export const rollbarPlugin = createPlugin({
 
 export const EntityRollbarContent = rollbarPlugin.provide(
   createRoutableExtension({
+    name: 'EntityRollbarContent',
     component: () => import('./components/Router').then(m => m.Router),
     mountPoint: rootRouteRef,
   }),

plugins/scaffolder/src/plugin.ts

@@ -90,6 +90,7 @@ export const OwnerPickerFieldExtension = scaffolderPlugin.provide(
 
 export const ScaffolderPage = scaffolderPlugin.provide(
   createRoutableExtension({
+    name: 'ScaffolderPage',
     component: () => import('./components/Router').then(m => m.Router),
     mountPoint: rootRouteRef,
   }),

plugins/search/src/plugin.ts

@@ -54,6 +54,7 @@ export const searchPlugin = createPlugin({
 
 export const SearchPage = searchPlugin.provide(
   createRoutableExtension({
+    name: 'SearchPage',
     component: () => import('./components/SearchPage').then(m => m.SearchPage),
     mountPoint: rootRouteRef,
   }),
@@ -67,6 +68,7 @@ export const SearchPage = searchPlugin.provide(
  */
 export const SearchPageNext = searchPlugin.provide(
   createRoutableExtension({
+    name: 'SearchPageNext',
     component: () => import('./components/SearchPage').then(m => m.SearchPage),
     mountPoint: rootNextRouteRef,
   }),
@@ -74,6 +76,7 @@ export const SearchPageNext = searchPlugin.provide(
 
 export const SearchBar = searchPlugin.provide(
   createComponentExtension({
+    name: 'SearchBar',
     component: {
       lazy: () => import('./components/SearchBar').then(m => m.SearchBar),
     },
@@ -88,6 +91,7 @@ export const SearchBar = searchPlugin.provide(
  */
 export const SearchBarNext = searchPlugin.provide(
   createComponentExtension({
+    name: 'SearchBarNext',
     component: {
       lazy: () => import('./components/SearchBar').then(m => m.SearchBar),
     },
@@ -96,6 +100,7 @@ export const SearchBarNext = searchPlugin.provide(
 
 export const SearchResult = searchPlugin.provide(
   createComponentExtension({
+    name: 'SearchResult',
     component: {
       lazy: () => import('./components/SearchResult').then(m => m.SearchResult),
     },
@@ -110,6 +115,7 @@ export const SearchResult = searchPlugin.provide(
  */
 export const SearchResultNext = searchPlugin.provide(
   createComponentExtension({
+    name: 'SearchResultNext',
     component: {
       lazy: () => import('./components/SearchResult').then(m => m.SearchResult),
     },
@@ -118,6 +124,7 @@ export const SearchResultNext = searchPlugin.provide(
 
 export const DefaultResultListItem = searchPlugin.provide(
   createComponentExtension({
+    name: 'DefaultResultListItem',
     component: {
       lazy: () =>
         import('./components/DefaultResultListItem').then(
@@ -129,6 +136,7 @@ export const DefaultResultListItem = searchPlugin.provide(
 
 export const HomePageSearchBar = searchPlugin.provide(
   createComponentExtension({
+    name: 'HomePageSearchBar',
     component: {
       lazy: () =>
         import('./components/HomePageComponent').then(m => m.HomePageSearchBar),

plugins/sentry/src/extensions.tsx

@@ -24,6 +24,7 @@ import {
 
 export const EntitySentryContent = sentryPlugin.provide(
   createRoutableExtension({
+    name: 'EntitySentryContent',
     mountPoint: rootRouteRef,
     component: () =>
       import('./components/SentryIssuesWidget').then(
@@ -40,6 +41,7 @@ export const EntitySentryContent = sentryPlugin.provide(
 
 export const EntitySentryCard = sentryPlugin.provide(
   createComponentExtension({
+    name: 'EntitySentryCard',
     component: {
       lazy: () =>
         import('./components/SentryIssuesWidget').then(

plugins/shortcuts/src/plugin.ts

@@ -36,6 +36,7 @@ export const shortcutsPlugin = createPlugin({
 
 export const Shortcuts = shortcutsPlugin.provide(
   createComponentExtension({
+    name: 'Shortcuts',
     component: { lazy: () => import('./Shortcuts').then(m => m.Shortcuts) },
   }),
 );

plugins/sonarqube/src/plugin.ts

@@ -46,6 +46,7 @@ export const sonarQubePlugin = createPlugin({
 
 export const EntitySonarQubeCard = sonarQubePlugin.provide(
   createComponentExtension({
+    name: 'EntitySonarQubeCard',
     component: {
       lazy: () =>
         import('./components/SonarQubeCard').then(m => m.SonarQubeCard),

plugins/splunk-on-call/src/plugin.ts

@@ -45,6 +45,7 @@ export const splunkOnCallPlugin = createPlugin({
 
 export const SplunkOnCallPage = splunkOnCallPlugin.provide(
   createRoutableExtension({
+    name: 'SplunkOnCallPage',
     component: () =>
       import('./components/SplunkOnCallPage').then(m => m.SplunkOnCallPage),
     mountPoint: rootRouteRef,
@@ -53,6 +54,7 @@ export const SplunkOnCallPage = splunkOnCallPlugin.provide(
 
 export const EntitySplunkOnCallCard = splunkOnCallPlugin.provide(
   createComponentExtension({
+    name: 'EntitySplunkOnCallCard',
     component: {
       lazy: () =>
         import('./components/EntitySplunkOnCallCard').then(

plugins/tech-radar/src/plugin.ts

@@ -48,6 +48,7 @@ export const techRadarPlugin = createPlugin({
  */
 export const TechRadarPage = techRadarPlugin.provide(
   createRoutableExtension({
+    name: 'TechRadarPage',
     component: () => import('./components/RadarPage').then(m => m.RadarPage),
     mountPoint: rootRouteRef,
   }),

plugins/techdocs/src/plugin.ts

@@ -72,6 +72,7 @@ export const techdocsPlugin = createPlugin({
 
 export const TechdocsPage = techdocsPlugin.provide(
   createRoutableExtension({
+    name: 'TechdocsPage',
     component: () => import('./Router').then(m => m.Router),
     mountPoint: rootRouteRef,
   }),
@@ -79,6 +80,7 @@ export const TechdocsPage = techdocsPlugin.provide(
 
 export const EntityTechdocsContent = techdocsPlugin.provide(
   createRoutableExtension({
+    name: 'EntityTechdocsContent',
     component: () => import('./Router').then(m => m.EmbeddedDocsRouter),
     mountPoint: rootCatalogDocsRouteRef,
   }),
@@ -87,6 +89,7 @@ export const EntityTechdocsContent = techdocsPlugin.provide(
 // takes a list of entities and renders documentation cards
 export const DocsCardGrid = techdocsPlugin.provide(
   createComponentExtension({
+    name: 'DocsCardGrid',
     component: {
       lazy: () =>
         import('./home/components/DocsCardGrid').then(m => m.DocsCardGrid),
@@ -97,6 +100,7 @@ export const DocsCardGrid = techdocsPlugin.provide(
 // takes a list of entities and renders table listing documentation
 export const DocsTable = techdocsPlugin.provide(
   createComponentExtension({
+    name: 'DocsTable',
     component: {
       lazy: () => import('./home/components/DocsTable').then(m => m.DocsTable),
     },
@@ -106,6 +110,7 @@ export const DocsTable = techdocsPlugin.provide(
 // takes a custom tabs config object and renders a documentation landing page
 export const TechDocsCustomHome = techdocsPlugin.provide(
   createRoutableExtension({
+    name: 'TechDocsCustomHome',
     component: () =>
       import('./home/components/TechDocsCustomHome').then(
         m => m.TechDocsCustomHome,
@@ -116,6 +121,7 @@ export const TechDocsCustomHome = techdocsPlugin.provide(
 
 export const TechDocsIndexPage = techdocsPlugin.provide(
   createRoutableExtension({
+    name: 'TechDocsIndexPage',
     component: () =>
       import('./home/components/TechDocsIndexPage').then(
         m => m.TechDocsIndexPage,
@@ -126,6 +132,7 @@ export const TechDocsIndexPage = techdocsPlugin.provide(
 
 export const TechDocsReaderPage = techdocsPlugin.provide(
   createRoutableExtension({
+    name: 'TechDocsReaderPage',
     component: () =>
       import('./reader/components/TechDocsPage').then(m => m.TechDocsPage),
     mountPoint: rootDocsRouteRef,

plugins/todo/src/plugin.ts

@@ -53,6 +53,7 @@ export const todoPlugin = createPlugin({
  */
 export const EntityTodoContent = todoPlugin.provide(
   createComponentExtension({
+    name: 'EntityTodoContent',
     component: {
       lazy: () => import('./components/TodoList').then(m => m.TodoList),
     },

plugins/user-settings/src/plugin.ts

@@ -34,6 +34,7 @@ export const userSettingsPlugin = createPlugin({
 
 export const UserSettingsPage = userSettingsPlugin.provide(
   createRoutableExtension({
+    name: 'UserSettingsPage',
     component: () =>
       import('./components/SettingsPage').then(m => m.SettingsPage),
     mountPoint: settingsRouteRef,

plugins/welcome/src/plugin.ts

@@ -33,6 +33,7 @@ export const welcomePlugin = createPlugin({
 
 export const WelcomePage = welcomePlugin.provide(
   createRoutableExtension({
+    name: 'WelcomePage',
     component: () => import('./components/WelcomePage').then(m => m.default),
     mountPoint: rootRouteRef,
   }),

plugins/xcmetrics/src/plugin.ts

@@ -42,6 +42,7 @@ export const xcmetricsPlugin = createPlugin({
 
 export const XcmetricsPage = xcmetricsPlugin.provide(
   createRoutableExtension({
+    name: 'XcmetricsPage',
     component: () =>
       import('./components/XcmetricsLayout').then(m => m.XcmetricsLayout),
     mountPoint: rootRouteRef,