Fixed edit node modal not being updated with opening of modal

src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx

@@ -10,6 +10,7 @@ const useColumnDefs = (
   myData: any,
   handleOnNewValue: (newValue: any, name: string) => void,
   changeAdvanced: (n: string) => void,
+  open: boolean,
 ) => {
   const columnDefs: ColDef[] = useMemo(
     () => [
@@ -81,7 +82,7 @@ const useColumnDefs = (
         cellClass: "no-border",
       },
     ],
-    [],
+    [open],
   );
 
   return columnDefs;

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

@@ -1,6 +1,6 @@
-import { ColDef } from "ag-grid-community";
+import { ColDef, GridApi } from "ag-grid-community";
 import { cloneDeep } from "lodash";
-import { forwardRef, useEffect, useRef } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
 import { Badge } from "../../components/ui/badge";
@@ -25,11 +25,7 @@ const EditNodeModal = forwardRef(
     },
     ref,
   ) => {
-    const nodes = useFlowStore((state) => state.nodes);
+    const myData = useRef(data);
-
-    const dataFromStore = nodes.find((node) => node.id === node.id)?.data;
-
-    const myData = useRef(dataFromStore ?? data);
 
     const setNode = useFlowStore((state) => state.setNode);
 
@@ -42,30 +38,30 @@ const EditNodeModal = forwardRef(
       myData.current.node!.template[name].value = newValue;
     };
 
-    useEffect(() => {
-      if (open) {
-        const cloneData = cloneDeep(dataFromStore ?? data);
-        myData.current = cloneData;
-      }
-    }, [open]);
-
     const rowData = useRowData(myData, open);
 
     const columnDefs: ColDef[] = useColumnDefs(
       myData,
       handleOnNewValue,
       changeAdvanced,
+      open,
     );
 
+    const [gridApi, setGridApi] = useState<GridApi | null>(null);
+
+    useEffect(() => {
+      if (gridApi && open) {
+        myData.current = data;
+        gridApi.refreshCells();
+      }
+    }, [gridApi, open]);
+
     return (
       <BaseModal
         key={data.id}
         size="medium-tall"
         open={open}
         setOpen={setOpen}
-        onChangeOpenModal={(open) => {
-          myData.current = data;
-        }}
         onSubmit={() => {
           setNode(data.id, (old) => ({
             ...old,
@@ -80,9 +76,9 @@ const EditNodeModal = forwardRef(
         <BaseModal.Trigger>
           <></>
         </BaseModal.Trigger>
-        <BaseModal.Header description={myData.current.node?.description!}>
+        <BaseModal.Header description={data.node?.description!}>
-          <span className="pr-2">{myData.current.type}</span>
+          <span className="pr-2">{data.type}</span>
-          <Badge variant="secondary">ID: {myData.current.id}</Badge>
+          <Badge variant="secondary">ID: {data.id}</Badge>
         </BaseModal.Header>
         <BaseModal.Content>
           <div className="flex h-full flex-col">
@@ -97,6 +93,9 @@ const EditNodeModal = forwardRef(
             <div className="h-full">
               {nodeLength > 0 && (
                 <TableComponent
+                  onGridReady={(params) => {
+                    setGridApi(params.api);
+                  }}
                   tooltipShowDelay={0.5}
                   columnDefs={columnDefs}
                   rowData={rowData}