From 0b89ca8ce24a7b8305ddf49934042ecdb0ff4f40 Mon Sep 17 00:00:00 2001 From: ivgo Date: Wed, 5 Jul 2023 10:47:31 +0200 Subject: [PATCH] Allow uiSchema to be set as part of the settings for HomePage Signed-off-by: ivgo --- .changeset/silent-oranges-explode.md | 8 ++++++++ plugins/home-react/api-report.md | 2 ++ plugins/home-react/src/extensions.tsx | 3 ++- plugins/home/README.md | 8 +++++++- .../src/components/CustomHomepage/CustomHomepageGrid.tsx | 1 + .../components/CustomHomepage/WidgetSettingsOverlay.tsx | 1 + plugins/home/src/components/CustomHomepage/types.ts | 4 +++- 7 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 .changeset/silent-oranges-explode.md diff --git a/.changeset/silent-oranges-explode.md b/.changeset/silent-oranges-explode.md new file mode 100644 index 0000000000..0c2b0ba6e3 --- /dev/null +++ b/.changeset/silent-oranges-explode.md @@ -0,0 +1,8 @@ +--- +'@backstage/plugin-home-react': patch +'@backstage/plugin-home': patch +--- + +Add possibility to customize the settings widget for different +properties by using the `uiSchema` provided by the json-schema. +More information here: https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema diff --git a/plugins/home-react/api-report.md b/plugins/home-react/api-report.md index 42e8fd0b0f..d6a2f92589 100644 --- a/plugins/home-react/api-report.md +++ b/plugins/home-react/api-report.md @@ -7,6 +7,7 @@ import { Extension } from '@backstage/core-plugin-api'; import { RJSFSchema } from '@rjsf/utils'; +import { UiSchema } from '@rjsf/utils'; // @public (undocumented) export type CardConfig = { @@ -36,6 +37,7 @@ export type CardLayout = { // @public (undocumented) export type CardSettings = { schema?: RJSFSchema; + uiSchema?: UiSchema; }; // @public (undocumented) diff --git a/plugins/home-react/src/extensions.tsx b/plugins/home-react/src/extensions.tsx index 380ff6713a..5bf9d153ef 100644 --- a/plugins/home-react/src/extensions.tsx +++ b/plugins/home-react/src/extensions.tsx @@ -20,7 +20,7 @@ import SettingsIcon from '@material-ui/icons/Settings'; import { InfoCard } from '@backstage/core-components'; import { SettingsModal } from './components'; import { createReactExtension, useApp } from '@backstage/core-plugin-api'; -import { RJSFSchema } from '@rjsf/utils'; +import { RJSFSchema, UiSchema } from '@rjsf/utils'; /** * @public @@ -62,6 +62,7 @@ export type CardLayout = { */ export type CardSettings = { schema?: RJSFSchema; + uiSchema?: UiSchema; }; /** diff --git a/plugins/home/README.md b/plugins/home/README.md index 8bb474aa4b..926acdf993 100644 --- a/plugins/home/README.md +++ b/plugins/home/README.md @@ -173,7 +173,8 @@ Available home page properties that are used for homepage widgets are: To define settings that the users can change for your component, you should define the `layout` and `settings` properties. The `settings.schema` object should follow [react-jsonschema-form](https://rjsf-team.github.io/react-jsonschema-form/docs/) definition and the type of the schema -must be `object`. +must be `object`. As well, the `uiSchema` can be defined if a certain UI style needs to be applied fo any of the defined +properties. More documentation [here](https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema). ```tsx import { createCardExtension } from '@backstage/plugin-home-react'; @@ -201,6 +202,11 @@ export const HomePageRandomJoke = homePlugin.provide( }, }, }, + uiSchema: { + defaultCategory: { + 'ui:widget': 'radio', // Instead of the default 'select' + }, + }, }, }), ); diff --git a/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx b/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx index 2d4636a4b4..f5ee8f3ddc 100644 --- a/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx +++ b/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx @@ -178,6 +178,7 @@ const availableWidgetsFilter = (elements: ElementCollection) => { title: getComponentData(elem, 'title'), description: getComponentData(elem, 'description'), settingsSchema: config?.settings?.schema, + uiSchema: config?.settings?.uiSchema, width: config?.layout?.width?.defaultColumns, minWidth: config?.layout?.width?.minColumns, maxWidth: config?.layout?.width?.maxColumns, diff --git a/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx b/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx index 1d863c020d..261dabb833 100644 --- a/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx +++ b/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx @@ -78,6 +78,7 @@ export const WidgetSettingsOverlay = (props: WidgetSettingsOverlayProps) => { validator={validator} showErrorList={false} schema={widget.settingsSchema} + uiSchema={widget.uiSchema} noHtml5Validate formData={settings} formContext={{ settings }} diff --git a/plugins/home/src/components/CustomHomepage/types.ts b/plugins/home/src/components/CustomHomepage/types.ts index 8cdcc337b3..8e9c6f403e 100644 --- a/plugins/home/src/components/CustomHomepage/types.ts +++ b/plugins/home/src/components/CustomHomepage/types.ts @@ -17,9 +17,10 @@ import { ReactElement } from 'react'; import { Layout } from 'react-grid-layout'; import { z } from 'zod'; -import { RJSFSchema } from '@rjsf/utils'; +import { RJSFSchema, UiSchema } from '@rjsf/utils'; const RSJFTypeSchema: z.ZodType = z.any(); +const RSJFTypeUiSchema: z.ZodType = z.any(); const ReactElementSchema: z.ZodType = z.any(); const LayoutSchema: z.ZodType = z.any(); @@ -62,6 +63,7 @@ export const WidgetSchema = z.object({ .positive('maxHeight must be positive number') .optional(), settingsSchema: RSJFTypeSchema.optional(), + uiSchema: RSJFTypeUiSchema.optional(), }); export type Widget = z.infer;