From d6864b8c710b92baffd915a473e63a0f2d218289 Mon Sep 17 00:00:00 2001
From: Francisco Veiras <74626997+francisco-svg761@users.noreply.github.com>
Date: Fri, 27 Jun 2025 17:30:30 -0300
Subject: [PATCH 1/3] feat: add copy JSON value

---
 client/src/components/DynamicJsonForm.tsx | 57 +++++++++++++++++++----
 1 file changed, 49 insertions(+), 8 deletions(-)

diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index 6a5993c3..93cde052 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -5,6 +5,8 @@ import JsonEditor from "./JsonEditor";
 import { updateValueAtPath } from "@/utils/jsonUtils";
 import { generateDefaultValue } from "@/utils/schemaUtils";
 import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
+import { useToast } from "@/lib/hooks/useToast";
+import { CheckCheck, Copy } from "lucide-react";
 
 interface DynamicJsonFormProps {
   schema: JsonSchemaType;
@@ -31,6 +33,9 @@ const DynamicJsonForm = ({
   const isOnlyJSON = !isSimpleObject(schema);
   const [isJsonMode, setIsJsonMode] = useState(isOnlyJSON);
   const [jsonError, setJsonError] = useState<string>();
+  const [copiedJson, setCopiedJson] = useState<boolean>(false);
+  const { toast } = useToast();
+
   // Store the raw JSON string to allow immediate feedback during typing
   // while deferring parsing until the user stops typing
   const [rawJsonValue, setRawJsonValue] = useState<string>(
@@ -246,19 +251,55 @@ const DynamicJsonForm = ({
     }
   }, [shouldUseJsonMode, isJsonMode]);
 
+  const handleCopyJson = useCallback(() => {
+    try {
+      navigator.clipboard
+        .writeText(JSON.stringify(value, null, 2) ?? "[]")
+        .then(() => {
+          setCopiedJson(true);
+
+          toast({
+            title: "JSON copied",
+            description:
+              "The JSON data has been successfully copied to your clipboard.",
+          });
+
+          setTimeout(() => {
+            setCopiedJson(false);
+          }, 2000);
+        })
+        .catch((error) => {
+          reportError(error);
+        });
+    } catch (error) {
+      reportError(error);
+    }
+  }, [toast, value]);
+
   return (
     <div className="space-y-4">
       <div className="flex justify-end space-x-2">
         {isJsonMode && (
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={formatJson}
-          >
-            Format JSON
-          </Button>
+          <>
+            <Button variant="outline" size="sm" onClick={handleCopyJson}>
+              {copiedJson ? (
+                <CheckCheck className="h-4 w-4 mr-2" />
+              ) : (
+                <Copy className="h-4 w-4 mr-2" />
+              )}
+              Copy JSON
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={formatJson}
+            >
+              Format JSON
+            </Button>
+          </>
         )}
+
         {!isOnlyJSON && (
           <Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
             {isJsonMode ? "Switch to Form" : "Switch to JSON"}

From b08aa6823693d562f3eead0c3ca62f169783dc8e Mon Sep 17 00:00:00 2001
From: Francisco Veiras <74626997+francisco-svg761@users.noreply.github.com>
Date: Thu, 3 Jul 2025 20:04:53 -0300
Subject: [PATCH 2/3] test: DynamicJsonForm tests with Copy JSON functionality

---
 .../__tests__/DynamicJsonForm.test.tsx        | 76 ++++++++++++++++++-
 1 file changed, 74 insertions(+), 2 deletions(-)

diff --git a/client/src/components/__tests__/DynamicJsonForm.test.tsx b/client/src/components/__tests__/DynamicJsonForm.test.tsx
index afd435d7..cd321418 100644
--- a/client/src/components/__tests__/DynamicJsonForm.test.tsx
+++ b/client/src/components/__tests__/DynamicJsonForm.test.tsx
@@ -117,8 +117,11 @@ describe("DynamicJsonForm Complex Fields", () => {
       const input = screen.getByRole("textbox");
       expect(input).toHaveProperty("type", "textarea");
       const buttons = screen.getAllByRole("button");
-      expect(buttons).toHaveLength(1);
-      expect(buttons[0]).toHaveProperty("textContent", "Format JSON");
+      expect(buttons).toHaveLength(2); // Copy JSON + Format JSON
+      const copyButton = screen.getByRole("button", { name: /copy json/i });
+      const formatButton = screen.getByRole("button", { name: /format json/i });
+      expect(copyButton).toBeTruthy();
+      expect(formatButton).toBeTruthy();
     });
 
     it("should pass changed values to onChange", () => {
@@ -137,3 +140,72 @@ describe("DynamicJsonForm Complex Fields", () => {
     });
   });
 });
+
+describe("DynamicJsonForm Copy JSON Functionality", () => {
+  const mockWriteText = jest.fn(() => Promise.resolve());
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: mockWriteText,
+      },
+    });
+  });
+
+  const renderFormInJsonMode = (props = {}) => {
+    const defaultProps = {
+      schema: {
+        type: "object",
+        properties: {
+          nested: { oneOf: [{ type: "string" }, { type: "integer" }] },
+        },
+      } as unknown as JsonSchemaType,
+      value: { nested: "test value" },
+      onChange: jest.fn(),
+    };
+    return render(<DynamicJsonForm {...defaultProps} {...props} />);
+  };
+
+  describe("Copy JSON Button", () => {
+    it("should render Copy JSON button when in JSON mode", () => {
+      renderFormInJsonMode();
+
+      const copyButton = screen.getByRole("button", { name: "Copy JSON" });
+      expect(copyButton).toBeTruthy();
+    });
+
+    it("should not render Copy JSON button when not in JSON mode", () => {
+      const simpleSchema = {
+        type: "string" as const,
+        description: "Test string field",
+      };
+
+      render(
+        <DynamicJsonForm
+          schema={simpleSchema}
+          value="test"
+          onChange={jest.fn()}
+        />,
+      );
+
+      const copyButton = screen.queryByRole("button", { name: "Copy JSON" });
+      expect(copyButton).toBeNull();
+    });
+
+    it("should copy JSON to clipboard when clicked", async () => {
+      const testValue = { nested: "test value", number: 42 };
+
+      renderFormInJsonMode({ value: testValue });
+
+      const copyButton = screen.getByRole("button", { name: "Copy JSON" });
+      fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(mockWriteText).toHaveBeenCalledWith(
+          JSON.stringify(testValue, null, 2),
+        );
+      });
+    });
+  });
+});

From 9842a6278a71c9f5515bd24584b3a43b67be3a97 Mon Sep 17 00:00:00 2001
From: Francisco Veiras <74626997+francisco-svg761@users.noreply.github.com>
Date: Sun, 6 Jul 2025 12:08:20 -0300
Subject: [PATCH 3/3] fix: Copy JSON button form submission

---
 client/src/components/DynamicJsonForm.tsx | 51 +++++++++++++----------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index 93cde052..70303aec 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -252,28 +252,32 @@ const DynamicJsonForm = ({
   }, [shouldUseJsonMode, isJsonMode]);
 
   const handleCopyJson = useCallback(() => {
-    try {
-      navigator.clipboard
-        .writeText(JSON.stringify(value, null, 2) ?? "[]")
-        .then(() => {
-          setCopiedJson(true);
+    const copyToClipboard = async () => {
+      try {
+        await navigator.clipboard.writeText(
+          JSON.stringify(value, null, 2) ?? "[]",
+        );
+        setCopiedJson(true);
 
-          toast({
-            title: "JSON copied",
-            description:
-              "The JSON data has been successfully copied to your clipboard.",
-          });
-
-          setTimeout(() => {
-            setCopiedJson(false);
-          }, 2000);
-        })
-        .catch((error) => {
-          reportError(error);
+        toast({
+          title: "JSON copied",
+          description:
+            "The JSON data has been successfully copied to your clipboard.",
         });
-    } catch (error) {
-      reportError(error);
-    }
+
+        setTimeout(() => {
+          setCopiedJson(false);
+        }, 2000);
+      } catch (error) {
+        toast({
+          title: "Error",
+          description: `Failed to copy JSON: ${error instanceof Error ? error.message : String(error)}`,
+          variant: "destructive",
+        });
+      }
+    };
+
+    copyToClipboard();
   }, [toast, value]);
 
   return (
@@ -281,7 +285,12 @@ const DynamicJsonForm = ({
       <div className="flex justify-end space-x-2">
         {isJsonMode && (
           <>
-            <Button variant="outline" size="sm" onClick={handleCopyJson}>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={handleCopyJson}
+            >
               {copiedJson ? (
                 <CheckCheck className="h-4 w-4 mr-2" />
               ) : (