From 1ebf2d29ef768ddda010b11b4a64f3f32ae68b29 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 5 Jun 2024 17:02:16 -0300
Subject: [PATCH] Fixed toggle cell renderer not updating itself

---
 .../tableToggleCellRender/index.tsx           | 49 +++++++++++++++++++
 .../src/modals/editNodeModal/index.tsx        | 25 ++++------
 2 files changed, 59 insertions(+), 15 deletions(-)
 create mode 100644 src/frontend/src/components/tableToggleCellRender/index.tsx

diff --git a/src/frontend/src/components/tableToggleCellRender/index.tsx b/src/frontend/src/components/tableToggleCellRender/index.tsx
new file mode 100644
index 000000000..fe27efcf2
--- /dev/null
+++ b/src/frontend/src/components/tableToggleCellRender/index.tsx
@@ -0,0 +1,49 @@
+import { CustomCellEditorProps, CustomCellRendererProps } from "ag-grid-react";
+import { classNames, cn, isTimeStampString } from "../../utils/utils";
+import ArrayReader from "../arrayReaderComponent";
+import DateReader from "../dateReaderComponent";
+import NumberReader from "../numberReader";
+import ObjectRender from "../objectRender";
+import StringReader from "../stringReaderComponent";
+import { Badge } from "../ui/badge";
+import { cloneDeep } from "lodash";
+import { type } from "os";
+import {
+  convertObjToArray,
+  convertValuesToNumbers,
+  hasDuplicateKeys,
+  scapedJSONStringfy,
+} from "../../utils/reactflowUtils";
+import CodeAreaComponent from "../codeAreaComponent";
+import DictComponent from "../dictComponent";
+import Dropdown from "../dropdownComponent";
+import FloatComponent from "../floatComponent";
+import InputFileComponent from "../inputFileComponent";
+import InputGlobalComponent from "../inputGlobalComponent";
+import InputListComponent from "../inputListComponent";
+import IntComponent from "../intComponent";
+import KeypairListComponent from "../keypairListComponent";
+import PromptAreaComponent from "../promptComponent";
+import TextAreaComponent from "../textAreaComponent";
+import ToggleShadComponent from "../toggleShadComponent";
+import { useState } from "react";
+import useFlowStore from "../../stores/flowStore";
+
+export default function TableToggleCellRender({
+  value: { name, enabled, setEnabled },
+}: CustomCellRendererProps) {
+  const [value, setValue] = useState(enabled);
+
+  return (
+    <ToggleShadComponent
+      id={"show" + name}
+      enabled={value}
+      setEnabled={(e) => {
+        setValue(e);
+        setEnabled(e);
+      }}
+      size="small"
+      editNode={true}
+    />
+  );
+}
diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx
index 4de784ed8..a9922386e 100644
--- a/src/frontend/src/modals/editNodeModal/index.tsx
+++ b/src/frontend/src/modals/editNodeModal/index.tsx
@@ -12,6 +12,7 @@ import useFlowStore from "../../stores/flowStore";
 import { TemplateVariableType } from "../../types/api";
 import { NodeDataType } from "../../types/flow";
 import BaseModal from "../baseModal";
+import TableToggleCellRender from "../../components/tableToggleCellRender";
 
 const EditNodeModal = forwardRef(
   (
@@ -127,21 +128,15 @@ const EditNodeModal = forwardRef(
       {
         headerName: "Show",
         field: "advanced",
-        cellRenderer: (params) => {
-          const templateParam = params.data;
-          return (
-            <>
-              <ToggleShadComponent
-                id={"show" + templateParam?.name}
-                enabled={!templateParam?.advanced}
-                setEnabled={() => {
-                  changeAdvanced(params.data.key);
-                }}
-                size="small"
-                editNode={true}
-              />
-            </>
-          );
+        cellRenderer: TableToggleCellRender,
+        valueGetter: (params: ValueGetterParams) => {
+          return {
+            name: params.data.name,
+            enabled: !params.data.advanced,
+            setEnabled: () => {
+              changeAdvanced(params.data.key);
+            },
+          };
         },
         editable: false,
         maxWidth: 80,