From 3d827679506d1d9beeea04cbb17e6f0398d29a7b Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 31 Aug 2023 11:10:58 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20fix?=
 =?UTF-8?q?=20incorrect=20condition=20for=20rendering=20component=20based?=
 =?UTF-8?q?=20on=20type=20=F0=9F=90=9B=20fix(keypairListComponent):=20remo?=
 =?UTF-8?q?ve=20console.log=20statement=20=F0=9F=90=9B=20fix(keypairListCo?=
 =?UTF-8?q?mponent):=20add=20class=20'input-invalid'=20to=20input=20when?=
 =?UTF-8?q?=20duplicate=20key=20is=20detected=20=F0=9F=90=9B=20fix(EditNod?=
 =?UTF-8?q?eModal):=20fix=20incorrect=20condition=20for=20rendering=20Keyp?=
 =?UTF-8?q?airListComponent=20based=20on=20type=20=F0=9F=8E=A8=20style(app?=
 =?UTF-8?q?lies.css):=20add=20styles=20for=20'input-invalid'=20class=20to?=
 =?UTF-8?q?=20indicate=20invalid=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/parameterComponent/index.tsx   |  2 +-
 .../components/keypairListComponent/index.tsx |  9 ++++--
 .../src/modals/EditNodeModal/index.tsx        | 28 +++++++++++++++----
 src/frontend/src/style/applies.css            |  4 +++
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index b06271782..de54c93bb 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -224,7 +224,7 @@ export default function ParameterComponent({
           type === "int") &&
         !optionalHandle ? (
           <></>
-        ) : left === true && type === "str" ? (
+        ) : left === true && type === "dict" ? (
           <div className="mt-2 w-full">
             <KeypairListComponent
               disabled={disabled}
diff --git a/src/frontend/src/components/keypairListComponent/index.tsx b/src/frontend/src/components/keypairListComponent/index.tsx
index 1e9f73ccf..87cad64d0 100644
--- a/src/frontend/src/components/keypairListComponent/index.tsx
+++ b/src/frontend/src/components/keypairListComponent/index.tsx
@@ -20,8 +20,6 @@ export default function KeypairListComponent({
       onChange([""]);
     }
   }, [disabled]);
-
-  console.log(duplicateKey);
   
 
  const handleChangeKey = (event, idx) => {
@@ -54,7 +52,12 @@ export default function KeypairListComponent({
                 disabled={disabled}
                 type="text"
                 value={key}
-                className={editNode ? "input-edit-node" : ""}
+                className={classNames(
+                  editNode
+                    ? "input-edit-node"
+                    : "",
+                    duplicateKey ? "input-invalid" : ""
+                )}
                 placeholder="Type key..."
                 onChange={(event) => handleChangeKey(event, index)}
                 onKeyDown={(e) => {
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 80f31b160..5f53d670c 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -27,6 +27,11 @@ import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
 import { TabsState } from "../../types/tabs";
+import {
+  convertArrayToObj,
+  convertObjToArray,
+  hasDuplicateKeys,
+} from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import BaseModal from "../baseModal";
 
@@ -49,6 +54,7 @@ const EditNodeModal = forwardRef(
     const [myData, setMyData] = useState(data);
     const { setTabsState, tabId } = useContext(TabsContext);
     const { reactFlowInstance } = useContext(typesContext);
+    const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
 
     let disabled =
       reactFlowInstance
@@ -87,10 +93,10 @@ const EditNodeModal = forwardRef(
       key5: "value5",
       key6: "value6",
     } as {});
-    const [dictArr, setDictArr] = useState([]);
+    const [dictArr, setDictArr] = useState([] as string[]);
 
     useEffect(() => {
-      convertToArray(dict);
+      setDictArr(convertObjToArray(dict));
     }, [dict]);
 
     const convertToArray = (singleObject) => {
@@ -208,13 +214,25 @@ const EditNodeModal = forwardRef(
                                       }}
                                     />
                                   ) : myData.node?.template[templateParam]
-                                      .type === "str" ? (
+                                      .type === "dict" ? (
                                     <div className="mt-2 w-full">
                                       <KeypairListComponent
                                         disabled={disabled}
-                                        editNode={true}
+                                        editNode={false}
                                         value={dictArr}
-                                        onChange={convertToDict}
+                                        duplicateKey={errorDuplicateKey}
+                                        onChange={(newValue: string[]) => {
+                                          setErrorDuplicateKey(
+                                            hasDuplicateKeys(newValue)
+                                          );
+                                          if (hasDuplicateKeys(newValue)) {
+                                            setDictArr(newValue);
+                                          } else {
+                                            setDict(
+                                              convertArrayToObj(newValue)
+                                            );
+                                          }
+                                        }}
                                       />
                                     </div>
                                   ) : myData.node.template[templateParam]
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 4f6f9b3a5..e52599291 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -1037,4 +1037,8 @@
   .label-invalid{
     @apply text-destructive
   }
+
+  .input-invalid{
+    @apply border-destructive focus:ring-destructive  focus:border-destructive
+  }
 }