🐛 fix(parameterComponent): fix incorrect condition for rendering component based on type

🐛 fix(keypairListComponent): remove console.log statement
🐛 fix(keypairListComponent): add class 'input-invalid' to input when duplicate key is detected
🐛 fix(EditNodeModal): fix incorrect condition for rendering KeypairListComponent based on type
🎨 style(applies.css): add styles for 'input-invalid' class to indicate invalid input

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}

src/frontend/src/components/keypairListComponent/index.tsx

@@ -21,8 +21,6 @@ export default function KeypairListComponent({
     }
   }, [disabled]);
   
-  console.log(duplicateKey);
-  
 
  const handleChangeKey = (event, idx) => {
     const newInputList = _.cloneDeep(value);
@@ -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) => {

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]

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
+  }
 }