From 4ff748876dc27686055592b49f35ba6173ca583a Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 6 Dec 2024 20:56:46 -0300
Subject: [PATCH] feature: Add interactive reader to dictAreaModal (#5122)

* feat: add interactive reader to dictAreaModal
---
 .../src/modals/dictAreaModal/index.tsx        | 39 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/modals/dictAreaModal/index.tsx b/src/frontend/src/modals/dictAreaModal/index.tsx
index e6e9a2e9f..4feb533a9 100644
--- a/src/frontend/src/modals/dictAreaModal/index.tsx
+++ b/src/frontend/src/modals/dictAreaModal/index.tsx
@@ -48,8 +48,45 @@ export default function DictAreaModal({
     navigator.clipboard.writeText(JSON.stringify(copy));
   };
 
+  const handleChangeType = (type: "array" | "object") => {
+    setComponentValue((value) => {
+      if (type === "array") {
+        if (value && Object.keys(value).length > 0) {
+          return [value];
+        }
+        return [];
+      }
+      if (value && Array.isArray(value) && value.length > 0) {
+        return value[0];
+      }
+      return {};
+    });
+  };
+
+  const IteractiveReader = () => {
+    return (
+      <span>
+        Customize your dictionary, adding or editing key-value pairs as needed.
+        Supports adding new{" "}
+        <span
+          onClick={() => handleChangeType("object")}
+          className="cursor-pointer underline"
+        >
+          objects &#123; &#125;
+        </span>{" "}
+        or{" "}
+        <span
+          onClick={() => handleChangeType("array")}
+          className="cursor-pointer underline"
+        >
+          arrays [].
+        </span>
+      </span>
+    );
+  };
+
   const renderHeader = () => (
-    <BaseModal.Header description={onChange ? CODE_DICT_DIALOG_SUBTITLE : null}>
+    <BaseModal.Header description={onChange ? IteractiveReader() : null}>
       <span className="pr-2">
         {onChange ? "Edit Dictionary" : "View Dictionary"}
       </span>