From 368b1e62602ec5cbb2c5e1331811418b5d0c2b6e Mon Sep 17 00:00:00 2001
From: Thu Pham <thu.pham@greatexpectations.io>
Date: Mon, 18 Mar 2024 20:06:32 -0700
Subject: [PATCH] Updated based on comments, plus respect requires

---
 src/controls/ObjectArrayControl.test.tsx      | 95 +++++++++++--------
 src/controls/ObjectArrayControl.tsx           | 43 +++++----
 ...ies.tsx => ObjectArrayControl.stories.tsx} | 87 ++++++++++-------
 src/testSchemas/objectArraySchema.tsx         | 20 ++++
 4 files changed, 154 insertions(+), 91 deletions(-)
 rename src/stories/controls/{ObjectArraryControl.stories.tsx => ObjectArrayControl.stories.tsx} (84%)

diff --git a/src/controls/ObjectArrayControl.test.tsx b/src/controls/ObjectArrayControl.test.tsx
index b7442d0..51603e5 100644
--- a/src/controls/ObjectArrayControl.test.tsx
+++ b/src/controls/ObjectArrayControl.test.tsx
@@ -1,4 +1,4 @@
-import { test } from "vitest"
+import { test, expect } from "vitest"
 import { screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { render } from "../common/test-render"
@@ -7,8 +7,8 @@ import {
   objectArrayControlUISchema,
   objectArrayControlJsonSchema,
   objectArrayControlUISchemaWithIcons,
+  objectArrayControlJsonSchemaWithRequired,
 } from "../testSchemas/objectArraySchema"
-import { expect } from "@storybook/test"
 
 test("ObjectArrayControl renders without any data", async () => {
   render({
@@ -20,32 +20,45 @@ test("ObjectArrayControl renders without any data", async () => {
   await screen.findByText("No data")
 })
 
-test("ObjectArrayControl renders disabled remove button with one element", async () => {
-  render({
-    schema: objectArrayControlJsonSchema,
-    uischema: objectArrayControlUISchema,
-    data: { assets: [{ asset: "my asset" }] },
-  })
-  await screen.findByText("Add Assets")
-  await screen.findByDisplayValue("my asset")
-  //note: the text is within a span in the <button>
-  const removeButton = (await screen.findByText("Delete")).parentNode
-  expect(removeButton).toHaveProperty("disabled", true)
-})
+test.each([
+  [objectArrayControlJsonSchema, false],
+  [objectArrayControlJsonSchemaWithRequired, true],
+])(
+  "ObjectArrayControl renders disabled remove button with one element if required",
+  async (schema, should_be_disabled) => {
+    render({
+      schema: schema,
+      uischema: objectArrayControlUISchema,
+      data: { assets: [{ asset: "my asset" }] },
+    })
+    await screen.findByText("Add Assets")
+    await screen.findByDisplayValue("my asset")
+    //note: the text is within a span in the <button>
+    const removeButton = await screen.findByRole("button", { name: "Delete" })
+    expect(removeButton).toHaveProperty("disabled", should_be_disabled)
+  },
+)
 
-test("ObjectArrayControl renders enabled remove buttons with multiple elements", async () => {
-  render({
-    schema: objectArrayControlJsonSchema,
-    uischema: objectArrayControlUISchema,
-    data: { assets: [{ asset: "my asset" }, { asset: "my other asset" }] },
-  })
-  await screen.findByText("Add Assets")
-  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)
-})
+// test with paramaterized schema
+test.each([
+  [objectArrayControlJsonSchema],
+  [objectArrayControlJsonSchemaWithRequired],
+])(
+  "ObjectArrayControl renders enabled remove buttons with multiple elements",
+  async (schema) => {
+    render({
+      schema: schema,
+      uischema: objectArrayControlUISchema,
+      data: { assets: [{ asset: "my asset" }, { asset: "my other asset" }] },
+    })
+    await screen.findByText("Add Assets")
+    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)
+  },
+)
 
 test("ObjectArrayControl correctly appends to the list with add button", async () => {
   let data = { assets: [{ asset: "my asset" }] }
@@ -61,11 +74,11 @@ test("ObjectArrayControl correctly appends to the list with add button", async (
   await screen.findByDisplayValue("my asset")
   await user.click(screen.getByRole("button", { name: "Add Assets" }))
   const newAsset = await screen.findByDisplayValue("")
-  await user.type(newAsset, "my other asset")
-  await screen.findByDisplayValue("my other asset")
+  await user.type(newAsset, "new")
+  await screen.findByDisplayValue("new")
   await waitFor(() => {
     expect(data).toEqual({
-      assets: [{ asset: "my asset" }, { asset: "my other asset" }],
+      assets: [{ asset: "my asset" }, { asset: "new" }],
     })
   })
 })
@@ -102,11 +115,13 @@ test("ObjectArrayControl correctly removes from the list with remove button", as
     name: "Delete",
   })
   expect(updatedRemoveButtons).toHaveLength(2)
+  await screen.findByDisplayValue("my asset")
+  await screen.findByDisplayValue("my other asset")
 })
 
 test("ObjectArrayControl renders with overwritten icons and does not allow overwriting onClick", async () => {
   const user = userEvent.setup()
-  let data = { assets: [{ asset: "my asset" }, { asset: "my other asset" }] }
+  let data = { assets: [] }
   render({
     schema: objectArrayControlJsonSchema,
     uischema: objectArrayControlUISchemaWithIcons,
@@ -118,26 +133,26 @@ test("ObjectArrayControl renders with overwritten icons and does not allow overw
   // Add button text is overwritten and has the correct icon
   await screen.findByText("Add more items")
   await screen.findByLabelText("plus-circle") // fyi: aria-label is "plus-circle"
-  // Delete button text is overwritten and has the correct icon
-  expect(await screen.findAllByText("Destroy me!")).toHaveLength(2)
-  expect(await screen.findAllByLabelText("delete")).toHaveLength(2) // fyi: aria-label is "delete"
 
   // Check that the onClick handler is not overwritten on Add button
-  user.click(await screen.findByText("Add more items"))
+  await user.click(await screen.findByText("Add more items"))
   await screen.findByDisplayValue("")
   await waitFor(() => {
     expect(data).toEqual({
-      assets: [{ asset: "my asset" }, { asset: "my other asset" }, {}],
+      assets: [{}],
     })
   })
 
+  // Delete button text is overwritten and has the correct icon
+  await screen.findByText("Destroy me!")
+  await screen.findByLabelText("delete") // fyi: aria-label is "delete"
+
   // Check that the onClick handler is not overwritten on Delete button
-  const deleteButtons = await screen.findAllByText("Destroy me!")
-  expect(deleteButtons).toHaveLength(3)
-  user.click(deleteButtons[0])
+  const deleteButton = await screen.findByText("Destroy me!")
+  await user.click(deleteButton)
   await waitFor(() => {
     expect(data).toEqual({
-      assets: [{ asset: "my other asset" }, {}],
+      assets: [],
     })
   })
 })
diff --git a/src/controls/ObjectArrayControl.tsx b/src/controls/ObjectArrayControl.tsx
index 7cd95de..61e488c 100644
--- a/src/controls/ObjectArrayControl.tsx
+++ b/src/controls/ObjectArrayControl.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { Helpers } from "@jsonforms/core"
 import {
-  ArrayControlProps,
+  Helpers,
+  ArrayLayoutProps,
   composePaths,
   createDefaultValue,
   findUISchema,
@@ -9,7 +9,7 @@ import {
 import { JsonFormsDispatch } from "@jsonforms/react"
 import { Flex, List, Button } from "antd"
 import range from "lodash.range"
-import { useCallback, useEffect } from "react"
+import { useCallback, useEffect, useMemo } from "react"
 import { ArrayControlOptions } from "../ui-schema"
 
 export function ObjectArrayControl({
@@ -22,19 +22,33 @@ export function ObjectArrayControl({
   removeItems,
   renderers,
   cells,
+  visible,
   rootSchema,
   uischemas,
-}: ArrayControlProps) {
+  required,
+}: ArrayLayoutProps) {
+  const foundUISchema = useMemo(
+    () =>
+      findUISchema(
+        uischemas ?? [],
+        schema,
+        uischema.scope,
+        path,
+        undefined,
+        uischema,
+        rootSchema,
+      ),
+    [uischemas, schema, path, uischema, rootSchema],
+  )
+
   const innerCreateDefaultValue = useCallback(
     () => createDefaultValue(schema, rootSchema),
     [schema, rootSchema],
   )
 
-  useEffect(() => {
-    if (data === 0) {
-      addItem(path, innerCreateDefaultValue())()
-    }
-  }, [addItem, data, innerCreateDefaultValue, path])
+  if (!visible) {
+    return null
+  }
 
   const labelDescription = Helpers.createLabelDescriptionFrom(uischema, schema)
   const label = labelDescription.show ? labelDescription.text : ""
@@ -43,15 +57,6 @@ export function ObjectArrayControl({
     (uischema.options as ArrayControlOptions) ?? {}
 
   const renderItem = (_item: number, index: number) => {
-    const foundUISchema = findUISchema(
-      uischemas ?? [],
-      schema,
-      uischema.scope,
-      path,
-      undefined,
-      uischema,
-      rootSchema,
-    )
     return (
       <List.Item
         key={index}
@@ -60,7 +65,7 @@ export function ObjectArrayControl({
             key="remove"
             children="Delete"
             {...options.removeButtonProps}
-            disabled={!removeItems || (data === 1 && index === 0)}
+            disabled={!removeItems || (required && data == 1 && index === 0)}
             onClick={(e) => {
               e.stopPropagation()
               removeItems?.(path, [index])()
diff --git a/src/stories/controls/ObjectArraryControl.stories.tsx b/src/stories/controls/ObjectArrayControl.stories.tsx
similarity index 84%
rename from src/stories/controls/ObjectArraryControl.stories.tsx
rename to src/stories/controls/ObjectArrayControl.stories.tsx
index 1b70390..7d9b753 100644
--- a/src/stories/controls/ObjectArraryControl.stories.tsx
+++ b/src/stories/controls/ObjectArrayControl.stories.tsx
@@ -42,38 +42,6 @@ export const ObjectArrayOfStrings: Story = {
   },
 }
 
-export const ObjectArrayOfBooleans: Story = {
-  tags: ["autodocs"],
-  args: {
-    jsonSchema: {
-      type: "object",
-      properties: {
-        options: {
-          type: "array",
-          items: {
-            type: "object",
-            properties: {
-              option: {
-                title: "Option",
-                type: "boolean",
-              },
-            },
-          },
-        },
-      },
-    } satisfies JSONSchema,
-    uiSchema: {
-      type: "VerticalLayout",
-      elements: [
-        {
-          scope: "#/properties/options",
-          type: "Control",
-        },
-      ],
-    } satisfies UISchema,
-  },
-}
-
 export const ObjectArrayWithUiOptionAddButtonTop: Story = {
   tags: ["autodocs"],
   args: {
@@ -176,3 +144,58 @@ export const ObjectArrayWithMultipleProperties: Story = {
     } satisfies UISchema,
   },
 }
+
+export const PrimativeArrayOfStringsAsRequired: Story = {
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: {
+      type: "object",
+      properties: {
+        assets: {
+          type: "array",
+          items: {
+            type: "string",
+            title: "asset",
+          },
+        },
+      },
+      required: ["assets"],
+    } satisfies JSONSchema,
+    uiSchema: {
+      type: "VerticalLayout",
+      elements: [
+        {
+          scope: "#/properties/assets",
+          type: "Control",
+        },
+      ],
+    } satisfies UISchema,
+  },
+}
+
+export const PrimativeArrayOfNumbersWithoutRequired: Story = {
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: {
+      type: "object",
+      properties: {
+        assets: {
+          type: "array",
+          items: {
+            type: "number",
+            title: "asset",
+          },
+        },
+      },
+    } satisfies JSONSchema,
+    uiSchema: {
+      type: "VerticalLayout",
+      elements: [
+        {
+          scope: "#/properties/assets",
+          type: "Control",
+        },
+      ],
+    } satisfies UISchema,
+  },
+}
diff --git a/src/testSchemas/objectArraySchema.tsx b/src/testSchemas/objectArraySchema.tsx
index cca3138..b6b4575 100644
--- a/src/testSchemas/objectArraySchema.tsx
+++ b/src/testSchemas/objectArraySchema.tsx
@@ -32,6 +32,26 @@ export const objectArrayControlJsonSchema = {
   },
 } satisfies JSONSchema
 
+export const objectArrayControlJsonSchemaWithRequired = {
+  title: "Assets",
+  type: "object",
+  properties: {
+    assets: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          asset: {
+            title: "Asset",
+            type: "string",
+          },
+        },
+      },
+    },
+  },
+  required: ["assets"],
+} satisfies JSONSchema
+
 export const objectArrayControlUISchemaWithIcons = {
   type: "VerticalLayout",
   elements: [