From 4e48360e2acfc26c927e8d5a12baf975415e4390 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 28 Sep 2023 21:32:42 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(keypairListComponent):=20fix?=
 =?UTF-8?q?=20bug=20where=20onChange=20event=20was=20not=20updating=20the?=
 =?UTF-8?q?=20correct=20value=20in=20the=20ref=20object=20=E2=9C=A8=20feat?=
 =?UTF-8?q?(keypairListComponent):=20add=20support=20for=20dataValue=20pro?=
 =?UTF-8?q?p=20to=20pass=20down=20initial=20data=20value=20to=20the=20comp?=
 =?UTF-8?q?onent=20=E2=9C=A8=20feat(EditNodeModal):=20add=20support=20for?=
 =?UTF-8?q?=20dataValue=20state=20to=20store=20the=20current=20data=20valu?=
 =?UTF-8?q?e=20=E2=9C=A8=20feat(EditNodeModal):=20pass=20down=20dataValue?=
 =?UTF-8?q?=20prop=20to=20KeypairListComponent=20to=20initialize=20the=20c?=
 =?UTF-8?q?omponent=20with=20the=20current=20data=20value=20=E2=9C=A8=20fe?=
 =?UTF-8?q?at(types):=20add=20dataValue=20property=20to=20KeyPairListCompo?=
 =?UTF-8?q?nentType=20to=20reflect=20the=20changes=20in=20the=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/keypairListComponent/index.tsx   | 17 ++++++++---------
 src/frontend/src/modals/EditNodeModal/index.tsx |  3 +++
 src/frontend/src/types/components/index.ts      |  1 +
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/components/keypairListComponent/index.tsx b/src/frontend/src/components/keypairListComponent/index.tsx
index b92a8faa5..360ebb37e 100644
--- a/src/frontend/src/components/keypairListComponent/index.tsx
+++ b/src/frontend/src/components/keypairListComponent/index.tsx
@@ -13,6 +13,7 @@ export default function KeypairListComponent({
   editNode = false,
   duplicateKey,
   advanced = false,
+  dataValue,
 }: KeyPairListComponentType): JSX.Element {
   useEffect(() => {
     if (disabled) {
@@ -30,18 +31,16 @@ export default function KeypairListComponent({
   }, [value]);
 
   const handleChangeKey = (event, idx) => {
-    const newInputList = _.cloneDeep(ref.current);
-    const oldKey = Object.keys(newInputList[idx])[0];
-    const updatedObj = { [event.target.value]: newInputList[idx][oldKey] };
-    newInputList[idx] = updatedObj;
-    onChange(newInputList);
+    const oldKey = Object.keys(ref.current[idx])[0];
+    const updatedObj = { [event.target.value]: ref.current[idx][oldKey] };
+    ref.current[idx] = updatedObj;
+    onChange(ref.current);
   };
 
   const handleChangeValue = (newValue, idx) => {
-    const newInputList = _.cloneDeep(ref.current);
-    const key = Object.keys(newInputList[idx])[0];
-    newInputList[idx][key] = newValue;
-    onChange(newInputList);
+    const key = Object.keys(ref.current[idx])[0];
+    ref.current[idx][key] = newValue;
+    onChange(ref.current);
   };
 
   return (
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index aba6f2db4..768c70daa 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -81,6 +81,7 @@ const EditNodeModal = forwardRef(
 
     const handleOnNewValue = (newValue: any, name) => {
       myData.current.node!.template[name].value = newValue;
+      setDataValue(newValue);
     };
 
     useEffect(() => {
@@ -90,6 +91,7 @@ const EditNodeModal = forwardRef(
 
     const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
     const [adv, setAdv] = useState<boolean | null>(null);
+    const [dataValue, setDataValue] = useState(data);
 
     return (
       <BaseModal
@@ -268,6 +270,7 @@ const EditNodeModal = forwardRef(
                                   )}
                                 >
                                   <KeypairListComponent
+                                    dataValue={dataValue}
                                     advanced={adv}
                                     disabled={disabled}
                                     editNode={true}
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index b2d9db7be..7c3af1d92 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -62,6 +62,7 @@ export type KeyPairListComponentType = {
   editNode?: boolean;
   duplicateKey?: boolean;
   advanced?: boolean | null;
+  dataValue?: any;
 };
 
 export type DictComponentType = {