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

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

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