Merge branch 'backstage:master' into master

plugins/home/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @backstage/plugin-home
 
+## 0.5.4-next.2
+
+### Patch Changes
+
+- 0b89ca8ce24a: 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
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.8.0-next.2
+  - @backstage/plugin-home-react@0.1.1-next.2
+  - @backstage/theme@0.4.1-next.1
+  - @backstage/core-plugin-api@1.5.3-next.1
+  - @backstage/core-components@0.13.3-next.2
+  - @backstage/catalog-model@1.4.1-next.0
+  - @backstage/config@1.0.8
+
 ## 0.5.4-next.1
 
 ### Patch Changes

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/plugin-home",
   "description": "A Backstage plugin that helps you build a home page",
-  "version": "0.5.4-next.1",
+  "version": "0.5.4-next.2",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",

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