Draft(WIP): Add reconfigure to plugin

Signed-off-by: bnechyporenko <bnechyporenko@bol.com>

packages/app/src/App.tsx

@@ -94,6 +94,7 @@ import { techDocsPage } from './components/techdocs/TechDocsPage';
 import { ApacheAirflowPage } from '@backstage/plugin-apache-airflow';
 import { PermissionedRoute } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
+import { CatalogPluginMetadata } from '@backstage/plugin-catalog';
 
 const app = createApp({
   apis,
@@ -134,6 +135,11 @@ const app = createApp({
 const AppProvider = app.getProvider();
 const AppRouter = app.getRouter();
 
+catalogPlugin.reconfigure({
+  createComponentTitle: 'Create!!',
+  supportButton: () => <div>Contact Support</div>,
+} as CatalogPluginMetadata);
+
 const routes = (
   <FlatRoutes>
     <Navigate key="/" to="catalog" />

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

@@ -19,7 +19,7 @@ import { AnalyticsContext } from '../analytics/AnalyticsContext';
 import { useApp } from '../app';
 import { RouteRef, useRouteRef } from '../routing';
 import { attachComponentData } from './componentData';
-import { Extension, BackstagePlugin, AnyMetadata } from '../plugin/types';
+import { Extension, BackstagePlugin } from '../plugin/types';
 import { PluginErrorBoundary } from './PluginErrorBoundary';
 
 /**
@@ -73,13 +73,8 @@ export function createRoutableExtension<
    * variable for this extension.
    */
   name?: string;
-
-  /**
-   *
-   */
-  metadata?: AnyMetadata;
 }): Extension<T> {
-  const { component, mountPoint, name, metadata } = options;
+  const { component, mountPoint, name } = options;
   return createReactExtension({
     component: {
       lazy: () =>
@@ -105,7 +100,7 @@ export function createRoutableExtension<
                 }
                 throw error;
               }
-              return <InnerComponent {...props} {...metadata} />;
+              return <InnerComponent {...props} />;
             };
 
             const componentName =
@@ -240,6 +235,11 @@ export function createReactExtension<
           | { id?: string }
           | undefined;
 
+        const metadata = plugin.getMetadata();
+        const componentProperties = metadata
+          ? { ...props, metadata }
+          : { ...props };
+
         return (
           <Suspense fallback={<Progress />}>
             <PluginErrorBoundary app={app} plugin={plugin}>
@@ -250,7 +250,7 @@ export function createReactExtension<
                   ...(mountPoint && { routeRef: mountPoint.id }),
                 }}
               >
-                <Component {...props} />
+                <Component {...componentProperties} />
               </AnalyticsContext>
             </PluginErrorBoundary>
           </Suspense>

packages/core-plugin-api/src/plugin/Plugin.tsx

@@ -54,6 +54,10 @@ export class PluginImpl<
     return this.config.featureFlags?.slice() ?? [];
   }
 
+  getMetadata(): PluginMetadata {
+    return this.config.metadata!!;
+  }
+
   get routes(): Routes {
     return this.config.routes ?? ({} as Routes);
   }
@@ -67,7 +71,7 @@ export class PluginImpl<
   }
 
   reconfigure(metadata: PluginMetadata): BackstagePlugin {
-    this.config.metadata = metadata;
+    this.config.metadata = { ...this.config.metadata, ...metadata };
     return this;
   }
 

packages/core-plugin-api/src/plugin/types.ts

@@ -67,6 +67,7 @@ export type BackstagePlugin<
    * Returns all registered feature flags for this plugin.
    */
   getFeatureFlags(): Iterable<PluginFeatureFlagConfig>;
+  getMetadata(): PluginMetadata;
   provide<T>(extension: Extension<T>): T;
   reconfigure(metadata: PluginMetadata): BackstagePlugin;
   routes: Routes;

plugins/catalog/src/index.ts

@@ -53,6 +53,7 @@ export {
   RelatedEntitiesCard,
 } from './plugin';
 
+export type { CatalogPluginMetadata } from './plugin';
 export type { DependencyOfComponentsCardProps } from './components/DependencyOfComponentsCard';
 export type { DependsOnComponentsCardProps } from './components/DependsOnComponentsCard';
 export type { DependsOnResourcesCardProps } from './components/DependsOnResourcesCard';

plugins/catalog/src/plugin.ts

@@ -32,6 +32,7 @@ import {
   storageApiRef,
   AnyMetadata,
 } from '@backstage/core-plugin-api';
+import { SupportButton } from '@backstage/core-components';
 import { DefaultStarredEntitiesApi } from './apis';
 import { AboutCardProps } from './components/AboutCard';
 import { DefaultCatalogPageProps } from './components/CatalogPage';
@@ -47,14 +48,14 @@ import { rootRouteRef } from './routes';
 
 export interface CatalogPluginMetadata extends AnyMetadata {
   createComponentTitle: string;
-  supportButton: () => Promise<JSX.Element>;
+  supportButton: () => JSX.Element;
   supportButtonText: string;
 }
 
 const metadata = {
   createComponentTitle: 'Create Component',
-  supportButton: () =>
-    import('@backstage/core-components').then(m => m.SupportButton),
+  // eslint-disable-next-line new-cap
+  supportButton: () => SupportButton({}),
   supportButtonText: 'All your software catalog entities',
 } as CatalogPluginMetadata;
 
@@ -96,7 +97,6 @@ export const CatalogIndexPage: (props: DefaultCatalogPageProps) => JSX.Element =
       name: 'CatalogIndexPage',
       component: () =>
         import('./components/CatalogPage').then(m => m.CatalogPage),
-      metadata,
       mountPoint: rootRouteRef,
     }),
   );