Merge pull request #6742 from JosiahCraw/feature/support-ui-schema-for-array-items

Feature/support UI schema for array items

.changeset/green-ducks-tan.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Added UI Schema support for array items for example, support EntityPicker within an array field

plugins/scaffolder/src/components/MultistepJsonForm/schema.test.ts

@@ -346,4 +346,68 @@ describe('transformSchemaToProps', () => {
       uiSchema: expectedUiSchema,
     });
   });
+
+  it('transforms schema with array items', () => {
+    const inputSchema = {
+      type: 'object',
+      properties: {
+        person: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              name: {
+                type: 'string',
+              },
+              address: {
+                type: 'string',
+                'ui:widget': 'textarea',
+              },
+            },
+          },
+        },
+        accountNumber: {
+          type: 'number',
+        },
+      },
+    };
+    const expectedSchema = {
+      type: 'object',
+      properties: {
+        person: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              name: {
+                type: 'string',
+              },
+              address: {
+                type: 'string',
+              },
+            },
+          },
+        },
+        accountNumber: {
+          type: 'number',
+        },
+      },
+    };
+    const expectedUiSchema = {
+      accountNumber: {},
+      person: {
+        items: {
+          name: {},
+          address: {
+            'ui:widget': 'textarea',
+          },
+        },
+      },
+    };
+
+    expect(transformSchemaToProps(inputSchema)).toEqual({
+      schema: expectedSchema,
+      uiSchema: expectedUiSchema,
+    });
+  });
 });

plugins/scaffolder/src/components/MultistepJsonForm/schema.ts

@@ -26,7 +26,7 @@ function extractUiSchema(schema: JsonObject, uiSchema: JsonObject) {
     return;
   }
 
-  const { properties, anyOf, oneOf, allOf, dependencies } = schema;
+  const { properties, items, anyOf, oneOf, allOf, dependencies } = schema;
 
   for (const propName in schema) {
     if (!schema.hasOwnProperty(propName)) {
@@ -55,6 +55,12 @@ function extractUiSchema(schema: JsonObject, uiSchema: JsonObject) {
     }
   }
 
+  if (isObject(items)) {
+    const innerUiSchema = {};
+    uiSchema.items = innerUiSchema;
+    extractUiSchema(items, innerUiSchema);
+  }
+
   if (Array.isArray(anyOf)) {
     for (const schemaNode of anyOf) {
       if (!isObject(schemaNode)) {