refactor(home): rename HomepageWidgetBlueprint to HomePageWidgetBlueprint
Align naming convention with HomePageLayoutBlueprint and the catalog plugin's consistent entity- prefix pattern. Also update the kind string from 'home-widget' to 'home-page-widget' to match 'home-page-layout'. Added interface-level JSDoc to HomePageWidgetBlueprintParams. Signed-off-by: Adam Kunicki <kunickiaj@gmail.com>
This commit is contained in:
@@ -94,7 +94,7 @@ The New Frontend System provides powerful customization options:
|
||||
|
||||
**Custom Homepage Layouts**: Use the `HomePageLayoutBlueprint` from `@backstage/plugin-home-react/alpha` to create custom homepage layouts with your own design and widget arrangements. A layout receives the installed widgets and is responsible for rendering them. If no custom layout is installed, the plugin provides a built-in default.
|
||||
|
||||
**Adding Homepage Widgets**: Register custom widgets using the `HomepageWidgetBlueprint` from the `@backstage/plugin-home-react/alpha` package.
|
||||
**Adding Homepage Widgets**: Register custom widgets using the `HomePageWidgetBlueprint` from the `@backstage/plugin-home-react/alpha` package.
|
||||
|
||||
For detailed instructions on creating custom layouts, registering widgets, and advanced configuration options, see the [Home plugin documentation](https://github.com/backstage/backstage/tree/master/plugins/home#readme).
|
||||
|
||||
|
||||
@@ -79,9 +79,9 @@ export interface HomePageLayoutProps {
|
||||
}
|
||||
|
||||
// @alpha
|
||||
export const HomepageWidgetBlueprint: ExtensionBlueprint<{
|
||||
kind: 'home-widget';
|
||||
params: HomepageWidgetBlueprintParams;
|
||||
export const HomePageWidgetBlueprint: ExtensionBlueprint<{
|
||||
kind: 'home-page-widget';
|
||||
params: HomePageWidgetBlueprintParams;
|
||||
output: ExtensionDataRef<HomePageWidgetData, 'home.widget.data', {}>;
|
||||
inputs: {};
|
||||
config: {};
|
||||
@@ -95,8 +95,8 @@ export const HomepageWidgetBlueprint: ExtensionBlueprint<{
|
||||
};
|
||||
}>;
|
||||
|
||||
// @alpha (undocumented)
|
||||
export interface HomepageWidgetBlueprintParams {
|
||||
// @alpha
|
||||
export interface HomePageWidgetBlueprintParams {
|
||||
componentProps?: Record<string, unknown>;
|
||||
components: () => Promise<ComponentParts>;
|
||||
description?: string;
|
||||
|
||||
@@ -25,9 +25,9 @@
|
||||
*/
|
||||
export { homeReactTranslationRef } from './translation';
|
||||
export {
|
||||
HomepageWidgetBlueprint,
|
||||
type HomepageWidgetBlueprintParams,
|
||||
} from './alpha/blueprints/HomepageWidgetBlueprint';
|
||||
HomePageWidgetBlueprint,
|
||||
type HomePageWidgetBlueprintParams,
|
||||
} from './alpha/blueprints/HomePageWidgetBlueprint';
|
||||
export {
|
||||
HomePageLayoutBlueprint,
|
||||
type HomePageLayoutBlueprintParams,
|
||||
|
||||
+9
-5
@@ -28,8 +28,12 @@ import {
|
||||
} from '../../extensions';
|
||||
import { homePageWidgetDataRef } from '../dataRefs';
|
||||
|
||||
/** @alpha */
|
||||
export interface HomepageWidgetBlueprintParams {
|
||||
/**
|
||||
* Parameters for creating a home page widget extension.
|
||||
*
|
||||
* @alpha
|
||||
*/
|
||||
export interface HomePageWidgetBlueprintParams {
|
||||
/**
|
||||
* Optional name for the widget. If not provided, the extension will use only its kind
|
||||
* in the extension ID.
|
||||
@@ -71,14 +75,14 @@ const DEFAULT_WIDGET_ATTACH_POINT = {
|
||||
*
|
||||
* @alpha
|
||||
*/
|
||||
export const HomepageWidgetBlueprint = createExtensionBlueprint({
|
||||
kind: 'home-widget',
|
||||
export const HomePageWidgetBlueprint = createExtensionBlueprint({
|
||||
kind: 'home-page-widget',
|
||||
attachTo: DEFAULT_WIDGET_ATTACH_POINT,
|
||||
dataRefs: {
|
||||
widget: homePageWidgetDataRef,
|
||||
},
|
||||
output: [homePageWidgetDataRef],
|
||||
*factory(params: HomepageWidgetBlueprintParams, { node }) {
|
||||
*factory(params: HomePageWidgetBlueprintParams, { node }) {
|
||||
const isCustomizable = params.settings?.schema !== undefined;
|
||||
const LazyCard = lazy(() =>
|
||||
params.components().then(parts => ({
|
||||
@@ -114,17 +114,17 @@ app:
|
||||
|
||||
Homepage widgets are React components that can be added to customizable home pages. The **key difference** between the new frontend system and legacy system is how these widget components are **registered and exported**:
|
||||
|
||||
- **New Frontend System**: Use `HomepageWidgetBlueprint` to register widgets as extensions
|
||||
- **New Frontend System**: Use `HomePageWidgetBlueprint` to register widgets as extensions
|
||||
- **Legacy System**: Use `createCardExtension` to export widgets as card components
|
||||
|
||||
### New Frontend System
|
||||
|
||||
Create widgets using the `HomepageWidgetBlueprint`:
|
||||
Create widgets using the `HomePageWidgetBlueprint`:
|
||||
|
||||
```ts
|
||||
import { HomepageWidgetBlueprint } from '@backstage/plugin-home-react/alpha';
|
||||
import { HomePageWidgetBlueprint } from '@backstage/plugin-home-react/alpha';
|
||||
|
||||
const myWidget = HomepageWidgetBlueprint.make({
|
||||
const myWidget = HomePageWidgetBlueprint.make({
|
||||
name: 'my-widget',
|
||||
params: {
|
||||
name: 'MyWidget',
|
||||
|
||||
@@ -28,7 +28,7 @@ import {
|
||||
createFrontendModule,
|
||||
} from '@backstage/frontend-plugin-api';
|
||||
import {
|
||||
HomepageWidgetBlueprint,
|
||||
HomePageWidgetBlueprint,
|
||||
HomePageLayoutBlueprint,
|
||||
} from '@backstage/plugin-home-react/alpha';
|
||||
import { HeaderWorldClock, WelcomeTitle, type ClockConfig } from '../src';
|
||||
@@ -102,7 +102,7 @@ const homePageLayout = HomePageLayoutBlueprint.make({
|
||||
},
|
||||
});
|
||||
|
||||
const homePageToolkitWidget = HomepageWidgetBlueprint.make({
|
||||
const homePageToolkitWidget = HomePageWidgetBlueprint.make({
|
||||
name: 'home-toolkit',
|
||||
params: {
|
||||
name: 'HomePageToolkit',
|
||||
@@ -124,7 +124,7 @@ const homePageToolkitWidget = HomepageWidgetBlueprint.make({
|
||||
},
|
||||
});
|
||||
|
||||
const homePageStarredEntitiesWidget = HomepageWidgetBlueprint.make({
|
||||
const homePageStarredEntitiesWidget = HomePageWidgetBlueprint.make({
|
||||
name: 'home-starred-entities',
|
||||
params: {
|
||||
name: 'HomePageStarredEntities',
|
||||
@@ -136,7 +136,7 @@ const homePageStarredEntitiesWidget = HomepageWidgetBlueprint.make({
|
||||
},
|
||||
});
|
||||
|
||||
const homePageRandomJokeWidget = HomepageWidgetBlueprint.make({
|
||||
const homePageRandomJokeWidget = HomePageWidgetBlueprint.make({
|
||||
name: 'home-random-joke',
|
||||
params: {
|
||||
name: 'HomePageRandomJoke',
|
||||
|
||||
Reference in New Issue
Block a user