Allow uiSchema to be set as part of the settings for HomePage

Signed-off-by: ivgo <ivgo@spreadgroup.com>

.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

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)

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;
 };
 
 /**

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'
+        },
+      },
     },
   }),
 );

plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx

@@ -178,6 +178,7 @@ const availableWidgetsFilter = (elements: ElementCollection) => {
           title: getComponentData<string>(elem, 'title'),
           description: getComponentData<string>(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,

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 }}

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<RJSFSchema> = z.any();
+const RSJFTypeUiSchema: z.ZodType<UiSchema> = z.any();
 const ReactElementSchema: z.ZodType<ReactElement> = z.any();
 const LayoutSchema: z.ZodType<Layout> = 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<typeof WidgetSchema>;