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

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

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';