refactor(home): align layout input and widget data wiring

Signed-off-by: Adam Kunicki <kunickiaj@gmail.com>

plugins/home-react/report-alpha.api.md

@@ -3,6 +3,7 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
+import { AppNode } from '@backstage/frontend-plugin-api';
 import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionBlueprint } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
@@ -112,6 +113,7 @@ export interface HomePageWidgetData {
   description?: string;
   layout?: CardLayout;
   name?: string;
+  node: AppNode;
   settings?: CardSettings;
   title?: string;
 }

plugins/home-react/src/alpha/blueprints/HomePageLayoutBlueprint.tsx

@@ -51,7 +51,7 @@ export interface HomePageLayoutBlueprintParams {
  */
 export const HomePageLayoutBlueprint = createExtensionBlueprint({
   kind: 'home-page-layout',
-  attachTo: { id: 'page:home', input: 'layouts' },
+  attachTo: { id: 'page:home', input: 'layout' },
   output: [homePageLayoutComponentDataRef],
   dataRefs: {
     component: homePageLayoutComponentDataRef,

plugins/home-react/src/alpha/blueprints/HomePageWidgetBlueprint.tsx

@@ -106,6 +106,7 @@ export const HomePageWidgetBlueprint = createExtensionBlueprint({
     );
 
     yield homePageWidgetDataRef({
+      node,
       component: <Widget {...(params.componentProps ?? {})} />,
       name: params.name,
       title: params.title,

plugins/home-react/src/alpha/dataRefs.ts

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-import { createExtensionDataRef } from '@backstage/frontend-plugin-api';
+import {
+  createExtensionDataRef,
+  type AppNode,
+} from '@backstage/frontend-plugin-api';
 import { JSX, ReactElement } from 'react';
 import type { CardLayout, CardSettings } from '../extensions';
 
@@ -25,6 +28,10 @@ import type { CardLayout, CardSettings } from '../extensions';
  * @alpha
  */
 export interface HomePageWidgetData {
+  /**
+   * The originating app node for this widget.
+   */
+  node: AppNode;
   /**
    * The rendered widget component (typically a card with header, content, etc.)
    */

plugins/home/report-alpha.api.md

@@ -16,13 +16,9 @@ import { IconComponent } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
-import { ReactElement } from 'react';
 import { RouteRef } from '@backstage/frontend-plugin-api';
 import { TranslationRef } from '@backstage/frontend-plugin-api';
 
-// @public
-export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
 // @alpha
 const _default: OverridableFrontendPlugin<
   {
@@ -107,16 +103,16 @@ const _default: OverridableFrontendPlugin<
             internal: false;
           }
         >;
-        layouts: ExtensionInput<
+        layout: ExtensionInput<
           ConfigurableExtensionDataRef<
             (props: HomePageLayoutProps) => JSX_2.Element,
             'home.layout.component',
             {}
           >,
           {
-            singleton: false;
-            optional: false;
-            internal: false;
+            singleton: true;
+            optional: true;
+            internal: true;
           }
         >;
       };
@@ -166,17 +162,5 @@ export const homeTranslationRef: TranslationRef<
   }
 >;
 
-// @public
-export type LayoutConfiguration = {
-  component: ReactElement | string;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  movable?: boolean;
-  deletable?: boolean;
-  resizable?: boolean;
-};
-
 // (No @packageDocumentation comment for this package)
 ```

plugins/home/src/alpha.tsx

@@ -53,7 +53,11 @@ const rootRouteRef = createRouteRef();
 const homePage = PageBlueprint.makeWithOverrides({
   inputs: {
     widgets: createExtensionInput([homePageWidgetDataRef]),
-    layouts: createExtensionInput([HomePageLayoutBlueprint.dataRefs.component]),
+    layout: createExtensionInput([HomePageLayoutBlueprint.dataRefs.component], {
+      singleton: true,
+      optional: true,
+      internal: true,
+    }),
   },
   factory(originalFactory, { node, inputs }) {
     return originalFactory({
@@ -72,23 +76,16 @@ const homePage = PageBlueprint.makeWithOverrides({
           </ExtensionBoundary>
         );
 
-        const layouts = [
-          ...inputs.layouts.map(layout => ({
-            Component: layout.get(homePageLayoutComponentDataRef),
-          })),
-          {
-            Component: DefaultLayoutComponent,
-          },
-        ];
+        const Layout =
+          inputs.layout?.get(homePageLayoutComponentDataRef) ??
+          DefaultLayoutComponent;
 
-        const widgets = inputs.widgets.map(widget =>
-          widget.get(homePageWidgetDataRef),
-        );
+        const widgets = inputs.widgets.map(widget => ({
+          ...widget.get(homePageWidgetDataRef),
+          node: widget.node,
+        }));
 
-        // Use the first installed layout, or fall back to the default
-        const layout = layouts[0];
-
-        return <layout.Component widgets={widgets} />;
+        return <Layout widgets={widgets} />;
       },
     });
   },
@@ -149,7 +146,3 @@ export default createFrontendPlugin({
 });
 
 export { homeTranslationRef } from './translation';
-export {
-  type LayoutConfiguration,
-  type Breakpoint,
-} from './components/CustomHomepage/types';