Incorporated the feedback.

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

docs/plugins/customization.md

@@ -18,8 +18,12 @@ customizable elements. For example
 ```typescript jsx
 const plugin = createPlugin({
   id: 'my-plugin',
-  options: {
-    createButtonTitle: 'Create',
+  configure(options?: PluginInputOptions): PluginOptions {
+    const defaultOptions = { createButtonTitle: 'Create' };
+    if (!options) {
+      return defaultOptions;
+    }
+    return { ...defaultOptions, ...options };
   },
 });
 ```
@@ -50,8 +54,7 @@ plugin. Example:
 ```typescript jsx
 import { myPlugin } from '@backstage/my-plugin';
 
-myPlugin.reconfigure((options: CatalogPageOptionsProps) => ({
-  ...options,
+myPlugin.reconfigure({
   createButtonTitle: 'Maybe Create',
-}));
+});
 ```

packages/app/src/App.tsx

@@ -97,7 +97,6 @@ import * as plugins from './plugins';
 import { techDocsPage } from './components/techdocs/TechDocsPage';
 import { ApacheAirflowPage } from '@backstage/plugin-apache-airflow';
 import { PermissionedRoute } from '@backstage/plugin-permission-react';
-import { AnyPluginOptions } from '@backstage/core-plugin-api';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
 
 const app = createApp({

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

@@ -236,12 +236,6 @@ export function createReactExtension<
           | { id?: string }
           | undefined;
 
-        const renderComponent = () => (
-          <PluginOptionsProvider pluginOptions={plugin.getPluginOptions()}>
-            <Component {...props} />
-          </PluginOptionsProvider>
-        );
-
         return (
           <Suspense fallback={<Progress />}>
             <PluginErrorBoundary app={app} plugin={plugin}>
@@ -252,7 +246,11 @@ export function createReactExtension<
                   ...(mountPoint && { routeRef: mountPoint.id }),
                 }}
               >
-                {renderComponent()}
+                <PluginOptionsProvider
+                  pluginOptions={plugin.getPluginOptions()}
+                >
+                  <Component {...props} />
+                </PluginOptionsProvider>
               </AnalyticsContext>
             </PluginErrorBoundary>
           </Suspense>

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

@@ -20,9 +20,9 @@ import {
   Extension,
   AnyRoutes,
   AnyExternalRoutes,
-  AnyPluginOptions,
+  PluginOptions,
+  PluginInputOptions,
   PluginFeatureFlagConfig,
-  ReconfigureFunction,
 } from './types';
 import { AnyApiFactory } from '../apis';
 
@@ -32,16 +32,9 @@ import { AnyApiFactory } from '../apis';
 export class PluginImpl<
   Routes extends AnyRoutes,
   ExternalRoutes extends AnyExternalRoutes,
-  PluginOptions extends AnyPluginOptions,
-> implements BackstagePlugin<Routes, ExternalRoutes, PluginOptions>
+> implements BackstagePlugin<Routes, ExternalRoutes>
 {
-  constructor(
-    private readonly config: PluginConfig<
-      Routes,
-      ExternalRoutes,
-      PluginOptions
-    >,
-  ) {}
+  constructor(private readonly config: PluginConfig<Routes, ExternalRoutes>) {}
 
   getId(): string {
     return this.config.id;
@@ -67,13 +60,16 @@ export class PluginImpl<
     return extension.expose(this);
   }
 
-  reconfigure(fn: ReconfigureFunction): void {
-    if (this.config.options) {
-      this.config.options = fn(this.config.options) as PluginOptions;
+  reconfigure(options: PluginInputOptions): void {
+    if (this.config.configure) {
+      this.config.options = this.config.configure(options);
     }
   }
 
   getPluginOptions(): PluginOptions {
+    if (this.config.configure && !this.config.options) {
+      this.config.options = this.config.configure();
+    }
     return this.config.options ?? ({} as PluginOptions);
   }
 
@@ -91,9 +87,8 @@ export class PluginImpl<
 export function createPlugin<
   Routes extends AnyRoutes = {},
   ExternalRoutes extends AnyExternalRoutes = {},
-  PluginOptions extends AnyPluginOptions = {},
 >(
-  config: PluginConfig<Routes, ExternalRoutes, PluginOptions>,
-): BackstagePlugin<Routes, ExternalRoutes, PluginOptions> {
+  config: PluginConfig<Routes, ExternalRoutes>,
+): BackstagePlugin<Routes, ExternalRoutes> {
   return new PluginImpl(config);
 }

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

@@ -17,7 +17,8 @@
 export { createPlugin } from './Plugin';
 export type {
   AnyExternalRoutes,
-  AnyPluginOptions,
+  PluginOptions,
+  PluginInputOptions,
   AnyRoutes,
   BackstagePlugin,
   Extension,

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

@@ -49,12 +49,8 @@ export type AnyExternalRoutes = { [name: string]: ExternalRouteRef };
  *
  * @public
  */
-export type AnyPluginOptions = { [name: string]: unknown };
-export type AnyPluginInputOptions = { [name: string]: unknown };
-
-export type ReconfigureFunction = (
-  options: AnyPluginInputOptions,
-) => AnyPluginOptions;
+export type PluginOptions = { [name: string]: unknown };
+export type PluginInputOptions = { [name: string]: unknown };
 
 /**
  * Plugin type.
@@ -64,7 +60,6 @@ export type ReconfigureFunction = (
 export type BackstagePlugin<
   Routes extends AnyRoutes = {},
   ExternalRoutes extends AnyExternalRoutes = {},
-  PluginOptions extends AnyPluginOptions = { [name: string]: any },
 > = {
   getId(): string;
   getApis(): Iterable<AnyApiFactory>;
@@ -74,7 +69,7 @@ export type BackstagePlugin<
   getFeatureFlags(): Iterable<PluginFeatureFlagConfig>;
   provide<T>(extension: Extension<T>): T;
   getPluginOptions(): PluginOptions;
-  reconfigure(fn: ReconfigureFunction): void;
+  reconfigure(options: PluginInputOptions): void;
   routes: Routes;
   externalRoutes: ExternalRoutes;
 };
@@ -97,7 +92,6 @@ export type PluginFeatureFlagConfig = {
 export type PluginConfig<
   Routes extends AnyRoutes,
   ExternalRoutes extends AnyExternalRoutes,
-  PluginOptions extends AnyPluginOptions,
 > = {
   id: string;
   apis?: Iterable<AnyApiFactory>;
@@ -105,6 +99,7 @@ export type PluginConfig<
   externalRoutes?: ExternalRoutes;
   featureFlags?: PluginFeatureFlagConfig[];
   options?: PluginOptions;
+  configure?(options?: PluginInputOptions): PluginOptions;
 };
 
 /**

plugins/catalog/src/plugin.ts

@@ -30,6 +30,8 @@ import {
   discoveryApiRef,
   fetchApiRef,
   storageApiRef,
+  PluginOptions,
+  PluginInputOptions,
 } from '@backstage/core-plugin-api';
 import { DefaultStarredEntitiesApi } from './apis';
 import { AboutCardProps } from './components/AboutCard';
@@ -72,6 +74,13 @@ export const catalogPlugin = createPlugin({
     createComponent: createComponentRouteRef,
     viewTechDoc: viewTechDocRouteRef,
   },
+  configure(options?: PluginInputOptions): PluginOptions {
+    const defaultOptions = { createButtonTitle: 'Create' };
+    if (!options) {
+      return defaultOptions;
+    }
+    return { ...defaultOptions, ...options };
+  },
 });
 
 /** @public */