♻️ (tableComponent): remove unnecessary console.log and fix formatting

✨ (use-row-data): add open parameter to useRowData for reactivity
♻️ (editNodeModal): clone data before assigning to myData.current
✅ (dropdownComponent.spec): add waitForTimeout to stabilize tests

src/frontend/src/components/tableComponent/index.tsx

@@ -61,8 +61,6 @@ const TableComponent = forwardRef<
           }}
           ref={ref}
           getRowId={(params) => {
-            console.log(params);
-
             return params.data.id;
           }}
         />

src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants";
 import { TemplateVariableType } from "../../../types/api";
 
-const useRowData = (myData) => {
+const useRowData = (myData, open) => {
   const rowData = useMemo(() => {
     return Object.keys(myData.current.node!.template)
       .filter((key: string) => {
@@ -29,7 +29,7 @@ const useRowData = (myData) => {
           id: key,
         };
       });
-  }, [myData.current.node!.template]);
+  }, [open]);
 
   return rowData;
 };

src/frontend/src/modals/editNodeModal/index.tsx

@@ -1,4 +1,5 @@
 import { ColDef } from "ag-grid-community";
+import { cloneDeep } from "lodash";
 import { forwardRef, useEffect, useRef } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
@@ -22,7 +23,7 @@ const EditNodeModal = forwardRef(
       setOpen: (open: boolean) => void;
       data: NodeDataType;
     },
-    ref
+    ref,
   ) => {
     const nodes = useFlowStore((state) => state.nodes);
 
@@ -43,16 +44,17 @@ const EditNodeModal = forwardRef(
 
     useEffect(() => {
       if (open) {
-        myData.current = data;
+        const cloneData = cloneDeep(dataFromStore ?? data);
+        myData.current = cloneData;
       }
     }, [open]);
 
-    const rowData = useRowData(myData);
+    const rowData = useRowData(myData, open);
 
     const columnDefs: ColDef[] = useColumnDefs(
       myData,
       handleOnNewValue,
-      changeAdvanced
+      changeAdvanced,
     );
 
     return (
@@ -110,7 +112,7 @@ const EditNodeModal = forwardRef(
         <BaseModal.Footer submit={{ label: "Save Changes" }} />
       </BaseModal>
     );
-  }
+  },
 );
 
 export default EditNodeModal;

src/frontend/tests/end-to-end/dropdownComponent.spec.ts

@@ -62,6 +62,8 @@ test("dropDownComponent", async ({ page }) => {
     expect(false).toBeTruthy();
   }
 
+  await page.waitForTimeout(1000);
+
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();