From 4b3bb5f34e58154dabaac8ab372f2e8c278adefa Mon Sep 17 00:00:00 2001
From: Ola Hungerford <olahungerford@gmail.com>
Date: Wed, 29 Jan 2025 11:36:10 -0700
Subject: [PATCH] Add description to array input fields

---
 client/src/components/DynamicJsonForm.tsx | 41 +++++++++++++++--------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index c1a85d5..66a36fd 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -132,8 +132,19 @@ const DynamicJsonForm = ({
         const arrayValue = Array.isArray(currentValue) ? currentValue : [];
         if (!propSchema.items) return null;
         return (
-          <div className="space-y-2">
-            {arrayValue.map((item, index) => (
+          <div className="space-y-4">
+            {propSchema.description && (
+              <p className="text-sm text-gray-600">{propSchema.description}</p>
+            )}
+            
+            {propSchema.items?.description && (
+              <p className="text-sm text-gray-500">
+                Items: {propSchema.items.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,
@@ -154,18 +165,20 @@ const DynamicJsonForm = ({
                 </Button>
               </div>
             ))}
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => {
-                handleFieldChange(
-                  path,
-                  [...arrayValue, generateDefaultValue(propSchema.items as JsonSchemaType)]
-                );
-              }}
-            >
-              Add Item
-            </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  handleFieldChange(
+                    path,
+                    [...arrayValue, generateDefaultValue(propSchema.items as JsonSchemaType)]
+                  );
+                }}
+                title={propSchema.items?.description ? `Add new ${propSchema.items.description}` : 'Add new item'}
+              >
+                Add Item
+              </Button>
+            </div>
           </div>
         );
       }