🐛 fix(keypairListComponent): fix bug where onChange event was not updating the correct value in the ref object

✨ feat(keypairListComponent): add support for dataValue prop to pass down initial data value to the component
✨ feat(EditNodeModal): add support for dataValue state to store the current data value
✨ feat(EditNodeModal): pass down dataValue prop to KeypairListComponent to initialize the component with the current data value
✨ feat(types): add dataValue property to KeyPairListComponentType to reflect the changes in the component

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(ref.current[idx])[0];
-    const oldKey = Object.keys(newInputList[idx])[0];
+    const updatedObj = { [event.target.value]: ref.current[idx][oldKey] };
-    const updatedObj = { [event.target.value]: newInputList[idx][oldKey] };
+    ref.current[idx] = updatedObj;
-    newInputList[idx] = updatedObj;
+    onChange(ref.current);
-    onChange(newInputList);
   };
 
   const handleChangeValue = (newValue, idx) => {
-    const newInputList = _.cloneDeep(ref.current);
+    const key = Object.keys(ref.current[idx])[0];
-    const key = Object.keys(newInputList[idx])[0];
+    ref.current[idx][key] = newValue;
-    newInputList[idx][key] = newValue;
+    onChange(ref.current);
-    onChange(newInputList);
   };
 
   return (

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}

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 = {