From 56c58877b13aa7a75124bfe8281a06348d0d5158 Mon Sep 17 00:00:00 2001 From: Adam Kunicki Date: Sun, 8 Feb 2026 19:42:11 -0800 Subject: [PATCH] refactor(home): align layout input and widget data wiring Signed-off-by: Adam Kunicki --- plugins/home-react/report-alpha.api.md | 2 ++ .../blueprints/HomePageLayoutBlueprint.tsx | 2 +- .../blueprints/HomePageWidgetBlueprint.tsx | 1 + plugins/home-react/src/alpha/dataRefs.ts | 9 ++++- plugins/home/report-alpha.api.md | 24 +++----------- plugins/home/src/alpha.tsx | 33 ++++++++----------- 6 files changed, 29 insertions(+), 42 deletions(-) diff --git a/plugins/home-react/report-alpha.api.md b/plugins/home-react/report-alpha.api.md index cd672719b1..0de77172a0 100644 --- a/plugins/home-react/report-alpha.api.md +++ b/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; } diff --git a/plugins/home-react/src/alpha/blueprints/HomePageLayoutBlueprint.tsx b/plugins/home-react/src/alpha/blueprints/HomePageLayoutBlueprint.tsx index c1d4e94ffb..9610b79993 100644 --- a/plugins/home-react/src/alpha/blueprints/HomePageLayoutBlueprint.tsx +++ b/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, diff --git a/plugins/home-react/src/alpha/blueprints/HomePageWidgetBlueprint.tsx b/plugins/home-react/src/alpha/blueprints/HomePageWidgetBlueprint.tsx index 1dd1dc5501..755713a363 100644 --- a/plugins/home-react/src/alpha/blueprints/HomePageWidgetBlueprint.tsx +++ b/plugins/home-react/src/alpha/blueprints/HomePageWidgetBlueprint.tsx @@ -106,6 +106,7 @@ export const HomePageWidgetBlueprint = createExtensionBlueprint({ ); yield homePageWidgetDataRef({ + node, component: , name: params.name, title: params.title, diff --git a/plugins/home-react/src/alpha/dataRefs.ts b/plugins/home-react/src/alpha/dataRefs.ts index 2fc6ee30fa..b626289541 100644 --- a/plugins/home-react/src/alpha/dataRefs.ts +++ b/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.) */ diff --git a/plugins/home/report-alpha.api.md b/plugins/home/report-alpha.api.md index 5214736c1c..fb7e6bb53d 100644 --- a/plugins/home/report-alpha.api.md +++ b/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) ``` diff --git a/plugins/home/src/alpha.tsx b/plugins/home/src/alpha.tsx index 59e13213f2..fea06f914e 100644 --- a/plugins/home/src/alpha.tsx +++ b/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({ ); - 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 ; + return ; }, }); }, @@ -149,7 +146,3 @@ export default createFrontendPlugin({ }); export { homeTranslationRef } from './translation'; -export { - type LayoutConfiguration, - type Breakpoint, -} from './components/CustomHomepage/types';