Merge pull request #30703 from backstage/rugvip/element

frontend-plugin-api: AppRootElementBlueprint now only accepts an element

.changeset/honest-seas-repeat.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-app': minor
+---
+
+**BREAKING**: The `app-root-element` extension now only accepts `JSX.Element` in its `element` param, meaning overrides need to be updated.

.changeset/small-trams-do.md

@@ -0,0 +1,5 @@
+---
+'@backstage/frontend-plugin-api': minor
+---
+
+**BREAKING**: The `element` param for `AppRootElementBlueprint` no longer accepts a component. If you are currently passing a component such as `element: () => <MyComponent />` or `element: MyComponent`, simply switch to `element: <MyComponent />`.

.changeset/thick-breads-add.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-signals': patch
+'@backstage/plugin-home': patch
+---
+
+**BREAKING ALPHA**: The `app-root-element` extension now only accepts `JSX.Element` in its `element` param, meaning overrides need to be updated.

.github/vale/config/vocabularies/Backstage/accept.txt

@@ -324,6 +324,8 @@ pagerduty
 pageview
 Pandey
 parallelization
+param
+params
 parseable
 Patrik
 pattison

packages/frontend-plugin-api/report.api.md

@@ -252,7 +252,7 @@ export interface AppNodeSpec {
 export const AppRootElementBlueprint: ExtensionBlueprint<{
   kind: 'app-root-element';
   params: {
-    element: JSX.Element | (() => JSX.Element);
+    element: JSX.Element;
   };
   output: ConfigurableExtensionDataRef<JSX_3.Element, 'core.reactElement', {}>;
   inputs: {};

packages/frontend-plugin-api/src/blueprints/AppRootElementBlueprint.ts

@@ -26,9 +26,7 @@ export const AppRootElementBlueprint = createExtensionBlueprint({
   kind: 'app-root-element',
   attachTo: { id: 'app/root', input: 'elements' },
   output: [coreExtensionData.reactElement],
-  *factory(params: { element: JSX.Element | (() => JSX.Element) }) {
-    yield coreExtensionData.reactElement(
-      typeof params.element === 'function' ? params.element() : params.element,
-    );
+  *factory(params: { element: JSX.Element }) {
+    yield coreExtensionData.reactElement(params.element);
   },
 });

plugins/app/report.api.md

@@ -812,7 +812,7 @@ const appPlugin: FrontendPlugin<
       kind: 'app-root-element';
       name: 'alert-display';
       params: {
-        element: JSX.Element | (() => JSX.Element);
+        element: JSX.Element;
       };
     }>;
     'app-root-element:app/dialog-display': ExtensionDefinition<{
@@ -835,7 +835,7 @@ const appPlugin: FrontendPlugin<
       kind: 'app-root-element';
       name: 'dialog-display';
       params: {
-        element: JSX.Element | (() => JSX.Element);
+        element: JSX.Element;
       };
     }>;
     'app-root-element:app/oauth-request-dialog': ExtensionDefinition<{
@@ -850,7 +850,7 @@ const appPlugin: FrontendPlugin<
       >;
       inputs: {};
       params: {
-        element: JSX.Element | (() => JSX.Element);
+        element: JSX.Element;
       };
     }>;
     'sign-in-page:app': ExtensionDefinition<{

plugins/app/src/extensions/elements.tsx

@@ -41,7 +41,7 @@ export const alertDisplayAppRootElement =
     },
     factory: (originalFactory, { config }) => {
       return originalFactory({
-        element: () => <AlertDisplay {...config} />,
+        element: <AlertDisplay {...config} />,
       });
     },
   });

plugins/home/report-alpha.api.md

@@ -53,7 +53,7 @@ const _default: FrontendPlugin<
       >;
       inputs: {};
       params: {
-        element: JSX.Element | (() => JSX.Element);
+        element: JSX.Element;
       };
     }>;
     'page:home': ExtensionDefinition<{

plugins/signals/report-alpha.api.md

@@ -47,7 +47,7 @@ const _default: FrontendPlugin<
       >;
       inputs: {};
       params: {
-        element: JSX.Element | (() => JSX.Element);
+        element: JSX.Element;
       };
     }>;
   }