Tests and storybook

src/controls/ArrayControl.test.tsx

@@ -11,6 +11,7 @@ import {
   stringArrayControlJsonSchema,
   stringArrayControlJsonSchemaWithRequired,
   stringArrayControlJsonSchemaWithTitle,
+  numberArrayControlJsonSchema,
 } from "../testSchemas/arraySchema"
 
 describe("ArrayControl for Objects", () => {
@@ -58,8 +59,13 @@ describe("ArrayControl for Objects", () => {
       await screen.findByDisplayValue("my asset")
       await screen.findByDisplayValue("my other asset")
       //note: the text is within a span in the <button>
-      const removeButton = (await screen.findAllByText("Delete"))[0].parentNode
-      expect(removeButton).toHaveProperty("disabled", false)
+      const removeButtons = await screen.findAllByRole("button", {
+        name: "Delete",
+      })
+      expect(removeButtons).toHaveLength(2)
+      removeButtons.forEach((removeButton) => {
+        expect(removeButton).toHaveProperty("disabled", false)
+      })
     },
   )
 
@@ -207,8 +213,13 @@ describe("ArrayControl for Primatives", () => {
       await screen.findByDisplayValue("my asset")
       await screen.findByDisplayValue("my other asset")
       //note: the text is within a span in the <button>
-      const removeButton = (await screen.findAllByText("Delete"))[0].parentNode
-      expect(removeButton).toHaveProperty("disabled", false)
+      const removeButtons = await screen.findAllByRole("button", {
+        name: "Delete",
+      })
+      expect(removeButtons).toHaveLength(2)
+      removeButtons.forEach((removeButton) => {
+        expect(removeButton).toHaveProperty("disabled", false)
+      })
     },
   )
 
@@ -307,8 +318,7 @@ describe("ArrayControl for Primatives", () => {
   })
 
   test("renders with title", async () => {
-    const user = userEvent.setup()
-    let data = { assets: ["apple"] }
+    const data = { assets: ["apple"] }
     render({
       schema: stringArrayControlJsonSchemaWithTitle,
       uischema: arrayControlUISchema,
@@ -324,4 +334,19 @@ describe("ArrayControl for Primatives", () => {
     const textbox = await screen.findByLabelText("Use this as the label")
     expect(textbox).toHaveProperty("value", "apple")
   })
+
+  test("Primitive Number Array should not error if item is null", async () => {
+    const user = userEvent.setup()
+    const data = { assets: [0] }
+    render({
+      schema: numberArrayControlJsonSchema,
+      uischema: arrayControlUISchema,
+      data: data,
+    })
+
+    await screen.findByDisplayValue("0")
+    // Antd List component does not like null or undefined values, and will error if they are present
+    // This test is to ensure that the component does not error if the value is null
+    await user.clear(screen.getByDisplayValue("0"))
+  })
 })

src/controls/ArrayControl.tsx

@@ -1,4 +1,8 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import {
   Helpers,
   ArrayLayoutProps,
@@ -7,7 +11,11 @@ import {
   createDefaultValue,
   findUISchema,
 } from "@jsonforms/core"
-import { JsonFormsDispatch } from "@jsonforms/react"
+import {
+  JsonFormsDispatch,
+  withJsonFormsArrayControlProps,
+  withJsonFormsArrayLayoutProps,
+} from "@jsonforms/react"
 import { Flex, List, Button } from "antd"
 import range from "lodash.range"
 import { useCallback, useMemo } from "react"
@@ -59,7 +67,11 @@ export function ArrayControl({
 
   // Note: For primative arrays, ArrayControlProps.data is an array
   // For object arrays, ArrayLayoutProps.data is a number
-  const dataSource = typeof data === "number" ? range(data) : data
+  const dataSource: any[] =
+    typeof data === "number"
+      ? range(data)
+      : // antd List component doesn't like undefined/null in the dataSource
+        data?.map((item: any) => item ?? "")
   const dataLength = typeof data === "number" ? data : data?.length || 0
 
   const renderItem = (_item: number, index: number) => {
@@ -69,7 +81,6 @@ export function ArrayControl({
         actions={[
           <Button
             key="remove"
-            children="Delete"
             {...options.removeButtonProps}
             disabled={
               !removeItems || (required && dataLength == 1 && index === 0)
@@ -78,7 +89,9 @@ export function ArrayControl({
               e.stopPropagation()
               removeItems?.(path, [index])()
             }}
-          />,
+          >
+            {options.removeButtonProps?.children ?? "Delete"}
+          </Button>,
         ]}
       >
         <div style={{ width: "100%" }}>
@@ -99,13 +112,14 @@ export function ArrayControl({
   const addButton = (
     <Flex justify="center">
       <Button
-        children={`Add ${label}`}
         {...options.addButtonProps}
         onClick={(e) => {
           e.stopPropagation()
           addItem(path, innerCreateDefaultValue())()
         }}
-      />
+      >
+        {options.addButtonProps?.children || `Add ${label}`}
+      </Button>
     </Flex>
   )
 
@@ -122,3 +136,7 @@ export function ArrayControl({
     </>
   )
 }
+
+export const ObjectArrayRenderer = withJsonFormsArrayLayoutProps(ArrayControl)
+export const PrimitiveArrayRenderer =
+  withJsonFormsArrayControlProps(ArrayControl)