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>

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,

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"

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.editable = false;
-          newCol.cellEditor = TableToggleCellEditor;
           newCol.autoHeight = false;
           newCol.cellClass = "no-border !py-2";
           newCol.type = "boolean";