Boolean table cell in edit mode (#2258)

resolves #2257

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

frontend/taipy-gui/src/components/Taipy/tableUtils.spec.tsx

@@ -0,0 +1,118 @@
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import userEvent from "@testing-library/user-event";
+
+import { EditableCell, generateHeaderClassName, RowValue } from "./tableUtils";
+
+describe("generateHeaderClassName", () => {
+    it("should generate a CSS class name with a hyphen prefix and convert to lowercase", () => {
+        const result = generateHeaderClassName("ColumnName");
+        expect(result).toBe("-columnname");
+    });
+
+    it("should replace spaces and special characters with hyphens", () => {
+        const result = generateHeaderClassName("Column Name@123!");
+        expect(result).toBe("-column-name-123-");
+    });
+
+    it("should remove multiple hyphens in a row", () => {
+        const result = generateHeaderClassName("Column--Name");
+        expect(result).toBe("-column-name");
+    });
+
+    it("should handle empty strings and return an empty string", () => {
+        const result = generateHeaderClassName("");
+        expect(result).toBe("");
+    });
+
+    it("should return empty string for the undefined", () => {
+        const result = generateHeaderClassName(undefined);
+        expect(result).toBe("");
+    });
+});
+
+describe("Editable cell", () => {
+    const formatConfig = {
+        timeZone: "FR",
+        forceTZ: false,
+        date: "dd/MM/yyyy",
+        dateTime: "dd/MM/yyyy hh:mm",
+        number: "",
+    };
+    const colDesc = { dfid: "id", type: "bool", index: 0 };
+    describe("Non editable mode", () => {
+        it("show a boolean as a switch", () => {
+            const { getByRole } = render(
+                <EditableCell
+                    rowIndex={0}
+                    value={true}
+                    formatConfig={formatConfig}
+                    colDesc={colDesc}
+                    tableClassName="taipy-table"
+                />
+            );
+            const elt = getByRole("checkbox");
+            expect(elt.tagName).toBe("INPUT");
+            const switchCtl = elt.closest(".MuiSwitch-root");
+            expect(switchCtl).not.toBeNull();
+            expect(switchCtl).toHaveClass("taipy-table-bool");
+        });
+        it("show a boolean as a check", () => {
+            const { getByRole } = render(
+                <EditableCell
+                    rowIndex={0}
+                    value={true}
+                    formatConfig={formatConfig}
+                    colDesc={colDesc}
+                    useCheckbox={true}
+                    tableClassName="taipy-table"
+                />
+            );
+            const elt = getByRole("checkbox");
+            expect(elt.tagName).toBe("INPUT");
+            expect(elt.closest(".MuiSwitch-root")).toBeNull();
+            expect(elt).toHaveClass("taipy-table-bool");
+        });
+    });
+    describe("Editable mode", () => {
+        const onValidation = (value: RowValue, rowIndex: number, colName: string, userValue: string, tz?: string) => {};
+        it("show a boolean as a switch", async () => {
+            const { getByRole, getByTestId } = render(
+                <EditableCell
+                    rowIndex={0}
+                    value={true}
+                    formatConfig={formatConfig}
+                    colDesc={colDesc}
+                    tableClassName="taipy-table"
+                    onValidation={onValidation}
+                />
+            );
+            const but = getByTestId("EditIcon");
+            await userEvent.click(but);
+            const elt = getByRole("checkbox");
+            expect(elt.tagName).toBe("INPUT");
+            const switchCtl = elt.closest(".MuiSwitch-root");
+            expect(switchCtl).not.toBeNull();
+            expect(switchCtl).toHaveClass("taipy-table-bool");
+        });
+        it("show a boolean as a check", async () => {
+            const { getByRole, getByTestId } = render(
+                <EditableCell
+                    rowIndex={0}
+                    value={true}
+                    formatConfig={formatConfig}
+                    colDesc={colDesc}
+                    useCheckbox={true}
+                    tableClassName="taipy-table"
+                    onValidation={onValidation}
+                />
+            );
+            const but = getByTestId("EditIcon");
+            await userEvent.click(but);
+            const elt = getByRole("checkbox");
+            expect(elt.tagName).toBe("INPUT");
+            expect(elt.closest(".MuiSwitch-root")).toBeNull();
+            expect(elt).toHaveClass("taipy-table-bool");
+        });
+    });
+});

frontend/taipy-gui/src/components/Taipy/tableUtils.tsx

@@ -565,7 +565,7 @@ export const EditableCell = (props: EditableCellProps) => {
                 {edit ? (
                     colDesc.type?.startsWith("bool") ? (
                         <Box sx={cellBoxSx}>
-                            lightBool ? (
+                            {useCheckbox ? (
                             <input
                                 type="checkbox"
                                 checked={val as boolean}
@@ -585,7 +585,7 @@ export const EditableCell = (props: EditableCellProps) => {
                                 inputRef={setInputFocus}
                                 className={getSuffixedClassNames(tableClassName, "-bool")}
                             />
-                            )
+                            )}
                             <Box sx={iconsWrapperSx}>
                                 <IconButton onClick={onCheckClick} size="small" sx={iconInRowSx}>
                                     <CheckIcon fontSize="inherit" />
@@ -741,6 +741,7 @@ export const EditableCell = (props: EditableCellProps) => {
                                     checked={value as boolean}
                                     title={boolTitle}
                                     style={defaultCursor}
+                                    readOnly
                                     className={getSuffixedClassNames(tableClassName, "-bool")}
                                 />
                             ) : (