fix: render nested object arrays and Optional arrays as structured forms

Author: Ahmed-Islam-AI

client/src/components/DynamicJsonForm.tsx

@@ -10,7 +10,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import JsonEditor from "./JsonEditor";
 import { updateValueAtPath } from "@/utils/jsonUtils";
-import { generateDefaultValue } from "@/utils/schemaUtils";
+import { generateDefaultValue, normalizeUnionType } from "@/utils/schemaUtils";
 import type {
   JsonValue,
   JsonSchemaType,
@@ -87,6 +87,9 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
     // - Arrays with defined items are form-capable
     // - Primitive types are form-capable
     const canRenderTopLevelForm = (s: JsonSchemaType): boolean => {
+      // Unwrap Optional[X] at the top level so anyOf:[X,null] is treated as X
+      s = normalizeUnionType(s);
+
       const primitiveTypes = ["string", "number", "integer", "boolean", "null"];
 
       const hasType = Array.isArray(s.type) ? s.type.length > 0 : !!s.type;
@@ -303,6 +306,10 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
       parentSchema?: JsonSchemaType,
       propertyName?: string,
     ) => {
+      // Unwrap Optional[X] / nullable unions (anyOf: [X, null]) before ANY type checks
+      // so that maxDepth enforcement and the type switch both see the real type.
+      propSchema = normalizeUnionType(propSchema);
+
       if (
         depth >= maxDepth &&
         (propSchema.type === "object" || propSchema.type === "array")
@@ -601,7 +608,10 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
           if (!propSchema.items) return null;
 
           // Special handling: array of enums -> render multi-select control
-          const itemSchema = propSchema.items as JsonSchemaType;
+          // Normalize items so Optional[X] (anyOf:[X,null]) is unwrapped correctly.
+          const itemSchema = normalizeUnionType(
+            propSchema.items as JsonSchemaType,
+          );
           let multiOptions: { value: string; label: string }[] | null = null;
 
           const titledMulti = (
@@ -666,8 +676,11 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
             );
           }
 
-          // If the array items are simple, render as form fields, otherwise use JSON editor
-          if (isSimpleObject(propSchema.items)) {
+          // Typed object items → structured form with Add/Remove; untyped → JSON fallback
+          const itemIsObject =
+            itemSchema.type === "object" && !!itemSchema.properties;
+
+          if (isSimpleObject(itemSchema) || itemIsObject) {
             return (
               <div className="space-y-4">
                 {propSchema.description && (
@@ -676,46 +689,68 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
                   </p>
                 )}
 
-                {propSchema.items?.description && (
+                {itemSchema.description && (
                   <p className="text-sm text-gray-500">
-                    Items: {propSchema.items.description}
+                    {itemSchema.description}
                   </p>
                 )}
 
                 <div className="space-y-2">
-                  {arrayValue.map((item, index) => (
-                    <div key={index} className="flex items-center gap-2">
-                      {renderFormFields(
-                        propSchema.items as JsonSchemaType,
-                        item,
-                        [...path, index.toString()],
-                        depth + 1,
-                      )}
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => {
-                          const newArray = [...arrayValue];
-                          newArray.splice(index, 1);
-                          handleFieldChange(path, newArray);
-                        }}
-                      >
-                        Remove
-                      </Button>
-                    </div>
-                  ))}
+                  {arrayValue.map((item, index) =>
+                    itemIsObject ? (
+                      <div key={index} className="space-y-2">
+                        {renderFormFields(
+                          itemSchema,
+                          item,
+                          [...path, index.toString()],
+                          depth + 1,
+                        )}
+                        <div className="flex justify-end">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => {
+                              const newArray = [...arrayValue];
+                              newArray.splice(index, 1);
+                              handleFieldChange(path, newArray);
+                            }}
+                          >
+                            Remove
+                          </Button>
+                        </div>
+                      </div>
+                    ) : (
+                      <div key={index} className="flex items-center gap-2">
+                        {renderFormFields(
+                          itemSchema,
+                          item,
+                          [...path, index.toString()],
+                          depth + 1,
+                        )}
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => {
+                            const newArray = [...arrayValue];
+                            newArray.splice(index, 1);
+                            handleFieldChange(path, newArray);
+                          }}
+                        >
+                          Remove
+                        </Button>
+                      </div>
+                    ),
+                  )}
                   <Button
                     variant="outline"
                     size="sm"
                     onClick={() => {
-                      const defaultValue = getArrayItemDefault(
-                        propSchema.items as JsonSchemaType,
-                      );
+                      const defaultValue = getArrayItemDefault(itemSchema);
                       handleFieldChange(path, [...arrayValue, defaultValue]);
                     }}
                     title={
-                      propSchema.items?.description
-                        ? `Add new ${propSchema.items.description}`
+                      itemSchema.description
+                        ? `Add new ${itemSchema.description}`
                         : "Add new item"
                     }
                   >
@@ -726,7 +761,7 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
             );
           }
 
-          // For complex arrays, fall back to JSON editor
+          // For truly unstructured arrays (no type or no properties), fall back to JSON editor
           return (
             <JsonEditor
               value={JSON.stringify(currentValue ?? [], null, 2)}

client/src/components/__tests__/DynamicJsonForm.array.test.tsx

@@ -45,7 +45,7 @@ describe("DynamicJsonForm Array Fields", () => {
 
       // Should show array description
       expect(screen.getByText("Test array field")).toBeDefined();
-      expect(screen.getByText("Items: Array item")).toBeDefined();
+      expect(screen.getByText("Array item")).toBeDefined();
 
       // Should show input fields for each item
       const inputs = screen.getAllByRole("textbox");
@@ -101,21 +101,80 @@ describe("DynamicJsonForm Array Fields", () => {
     });
   });
 
-  describe("Complex Array Fallback", () => {
-    it("should render JSON editor for complex arrays", () => {
-      renderComplexArrayForm();
+  describe("Complex Array Rendering", () => {
+    it("should render structured form for arrays of objects with properties", () => {
+      renderComplexArrayForm({ value: [{ nested: {} }] });
 
-      // Initially renders form view with Switch to JSON button; switch to JSON to see textarea
-      const switchBtn = screen.getByRole("button", { name: /switch to json/i });
-      expect(switchBtn).toBeInTheDocument();
-      fireEvent.click(switchBtn);
+      // Should show Add Item and Remove — not fall back to raw JSON
+      expect(screen.getByText("Add Item")).toBeInTheDocument();
+      expect(screen.getByText("Remove")).toBeInTheDocument();
 
-      const textarea = screen.getByRole("textbox");
-      expect(textarea).toHaveProperty("type", "textarea");
+      // Switch to JSON should still be available
+      expect(
+        screen.getByRole("button", { name: /switch to json/i }),
+      ).toBeInTheDocument();
+    });
 
-      // Should not show form-specific array controls
+    it("should render JSON editor for untyped (no-type) array items", () => {
+      const schema: JsonSchemaType = {
+        type: "array",
+        items: {} as JsonSchemaType, // no type at all
+      };
+      render(
+        <DynamicJsonForm schema={schema} value={[]} onChange={jest.fn()} />,
+      );
+
+      // Falls back to JSON editor; no structured controls
       expect(screen.queryByText("Add Item")).toBeNull();
-      expect(screen.queryByText("Remove")).toBeNull();
+    });
+
+    it("should render structured form for Optional array (anyOf:[array,null])", () => {
+      const schema: JsonSchemaType = {
+        anyOf: [
+          {
+            type: "array",
+            items: { type: "string" as const },
+          },
+          { type: "null" },
+        ],
+      } as unknown as JsonSchemaType;
+      render(
+        <DynamicJsonForm
+          schema={schema}
+          value={["hello"]}
+          onChange={jest.fn()}
+        />,
+      );
+
+      // Should render as a structured string-array form, not a raw JSON box
+      expect(screen.getByText("Add Item")).toBeInTheDocument();
+      const inputs = screen.getAllByRole("textbox");
+      expect(inputs[0]).toHaveProperty("value", "hello");
+    });
+
+    it("should render structured form for array of Optional objects (items anyOf:[object,null])", () => {
+      const schema: JsonSchemaType = {
+        type: "array",
+        items: {
+          anyOf: [
+            {
+              type: "object" as const,
+              properties: { name: { type: "string" as const } },
+            },
+            { type: "null" },
+          ],
+        } as unknown as JsonSchemaType,
+      };
+      render(
+        <DynamicJsonForm
+          schema={schema}
+          value={[{ name: "Alice" }]}
+          onChange={jest.fn()}
+        />,
+      );
+
+      expect(screen.getByText("Add Item")).toBeInTheDocument();
+      expect(screen.getByText("Remove")).toBeInTheDocument();
     });
   });
 
@@ -305,7 +364,7 @@ describe("DynamicJsonForm Array Fields", () => {
       renderSimpleArrayForm({ schema });
 
       expect(screen.getByText("List of names")).toBeDefined();
-      expect(screen.getByText("Items: Person name")).toBeDefined();
+      expect(screen.getByText("Person name")).toBeDefined();
     });
 
     it("should use item description in add button title", () => {