From 3a65ff415090daa1d5b46eda48a9acc4f6d9ded7 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Fri, 7 Mar 2025 16:12:07 -0300
Subject: [PATCH] fix: changed badge to toggle on editable boolean fields on
 table component (#6956)

* Make column of type boolean use editor from TableAutoCellRender

* Adds editor to boolean cell

* Add boolean to isCustomEdit

---------

Co-authored-by: Edwin Jose <edwin.jose@datastax.com>
---
 .../components/TableNodeComponent/index.tsx       |  3 ++-
 .../components/tableAutoCellRender/index.tsx      | 15 ++++++++++++++-
 src/frontend/src/utils/utils.ts                   |  4 +---
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/TableNodeComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/TableNodeComponent/index.tsx
index 925ebefba..ec5925706 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/TableNodeComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/TableNodeComponent/index.tsx
@@ -141,7 +141,8 @@ export default function TableNodeComponent({
       const isCustomEdit =
         column.formatter &&
         ((column.formatter === "text" && column.edit_mode === "modal") ||
-          column.formatter === "json");
+          column.formatter === "json" ||
+          column.formatter === "boolean");
       return {
         field: column.name,
         onUpdate: updateComponent,
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender/index.tsx
index 465b31228..16a9be4c3 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender/index.tsx
@@ -5,6 +5,8 @@ import DateReader from "@/components/core/dateReaderComponent";
 import { Badge } from "@/components/ui/badge";
 import { cn, isTimeStampString } from "@/utils/utils";
 import { CustomCellRendererProps } from "ag-grid-react";
+import { uniqueId } from "lodash";
+import ToggleShadComponent from "../../../toggleShadComponent";
 
 interface CustomCellRender extends CustomCellRendererProps {
   formatter?: "json" | "text" | "boolean" | "number" | "undefined" | "null";
@@ -81,7 +83,18 @@ export default function TableAutoCellRender({
           value === true
             ? true
             : false;
-        return (
+        return !!colDef?.onCellValueChanged ||
+          !!api.getGridOption("onCellValueChanged") ? (
+          <ToggleShadComponent
+            value={value}
+            handleOnNewValue={(data) => {
+              setValue?.(data.value);
+            }}
+            editNode={true}
+            id={"toggle" + colDef?.colId + uniqueId()}
+            disabled={false}
+          />
+        ) : (
           <Badge
             variant={value ? "successStatic" : "errorStatic"}
             size="sq"
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 1d66fe2a7..bc8ad8a71 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -1,6 +1,5 @@
 import TableAutoCellRender from "@/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender";
 import TableDropdownCellEditor from "@/components/core/parameterRenderComponent/components/tableComponent/components/tableDropdownCellEditor";
-import TableToggleCellEditor from "@/components/core/parameterRenderComponent/components/tableComponent/components/tableToggleCellEditor";
 import useAlertStore from "@/stores/alertStore";
 import { ColumnField, FormatterType } from "@/types/utils/functions";
 import { ColDef, ColGroupDef, ValueParserParams } from "ag-grid-community";
@@ -594,8 +593,7 @@ export function FormatColumns(columns: ColumnField[]): ColDef<any>[] {
           };
         } else if (col.formatter === FormatterType.boolean) {
           newCol.cellRenderer = TableAutoCellRender;
-          newCol.cellEditorPopup = false;
-          newCol.cellEditor = TableToggleCellEditor;
+          newCol.editable = false;
           newCol.autoHeight = false;
           newCol.cellClass = "no-border !py-2";
           newCol.type = "boolean";