From 41cab80c62fb97fb83014121a8f2b25b38387050 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fred=20Lef=C3=A9v=C3=A8re-Laoide?=
 <90181748+FredLL-Avaiga@users.noreply.github.com>
Date: Fri, 13 Oct 2023 13:29:17 +0200
Subject: [PATCH] Cursor on table (non edit mode) (#974)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Cursor on table (non edit mode) (#971)

* fx tests

* fx tests

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>
---
 gui/src/components/Taipy/AutoLoadingTable.spec.tsx | 6 +++---
 gui/src/components/Taipy/PaginatedTable.spec.tsx   | 6 +++---
 gui/src/components/Taipy/tableUtils.tsx            | 7 +++++--
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/gui/src/components/Taipy/AutoLoadingTable.spec.tsx b/gui/src/components/Taipy/AutoLoadingTable.spec.tsx
index c3252c8ab..8e1e21510 100644
--- a/gui/src/components/Taipy/AutoLoadingTable.spec.tsx
+++ b/gui/src/components/Taipy/AutoLoadingTable.spec.tsx
@@ -213,7 +213,7 @@ describe("AutoLoadingTable Component", () => {
         );
         const elts = getAllByText("Austria");
         expect(elts.length).toBeGreaterThan(1);
-        expect(elts[0].tagName).toBe("DIV");
+        expect(elts[0].tagName).toBe("SPAN");
     });
     it("selects the rows", async () => {
         const dispatch = jest.fn();
@@ -238,8 +238,8 @@ describe("AutoLoadingTable Component", () => {
         const elts = getAllByText("Austria");
         elts.forEach((elt: HTMLElement, idx: number) =>
             selected.indexOf(idx) == -1
-                ? expect(elt.parentElement?.parentElement).not.toHaveClass("Mui-selected")
-                : expect(elt.parentElement?.parentElement).toHaveClass("Mui-selected")
+                ? expect(elt.parentElement?.parentElement?.parentElement).not.toHaveClass("Mui-selected")
+                : expect(elt.parentElement?.parentElement?.parentElement).toHaveClass("Mui-selected")
         );
         expect(document.querySelectorAll(".Mui-selected")).toHaveLength(selected.length);
     });
diff --git a/gui/src/components/Taipy/PaginatedTable.spec.tsx b/gui/src/components/Taipy/PaginatedTable.spec.tsx
index ac6c10219..fdf07844e 100644
--- a/gui/src/components/Taipy/PaginatedTable.spec.tsx
+++ b/gui/src/components/Taipy/PaginatedTable.spec.tsx
@@ -280,7 +280,7 @@ describe("PaginatedTable Component", () => {
         );
         const elts = getAllByText("Austria");
         expect(elts.length).toBeGreaterThan(1);
-        expect(elts[0].tagName).toBe("DIV");
+        expect(elts[0].tagName).toBe("SPAN");
     });
     it("selects the rows", async () => {
         const dispatch = jest.fn();
@@ -299,8 +299,8 @@ describe("PaginatedTable Component", () => {
         const elts = await waitFor(() => findAllByText("Austria"));
         elts.forEach((elt: HTMLElement, idx: number) =>
             selected.indexOf(idx) == -1
-                ? expect(elt.parentElement?.parentElement).not.toHaveClass("Mui-selected")
-                : expect(elt.parentElement?.parentElement).toHaveClass("Mui-selected")
+                ? expect(elt.parentElement?.parentElement?.parentElement).not.toHaveClass("Mui-selected")
+                : expect(elt.parentElement?.parentElement?.parentElement).toHaveClass("Mui-selected")
         );
         expect(document.querySelectorAll(".Mui-selected")).toHaveLength(selected.length);
     });
diff --git a/gui/src/components/Taipy/tableUtils.tsx b/gui/src/components/Taipy/tableUtils.tsx
index 4a040358c..102261ea4 100644
--- a/gui/src/components/Taipy/tableUtils.tsx
+++ b/gui/src/components/Taipy/tableUtils.tsx
@@ -195,11 +195,14 @@ const VALID_BOOLEAN_STRINGS = ["true", "1", "t", "y", "yes", "yeah", "sure"];
 const isBooleanTrue = (val: RowValue) =>
     typeof val == "string" ? VALID_BOOLEAN_STRINGS.some((s) => s == val.trim().toLowerCase()) : !!val;
 
+const defaultCursor = { cursor: "default" };
+const defaultCursorIcon = { ...iconInRowSx, "& .MuiSwitch-input": defaultCursor };
+
 const renderCellValue = (val: RowValue | boolean, col: ColumnDesc, formatConf: FormatConfig, nanValue?: string) => {
     if (val !== null && val !== undefined && col.type && col.type.startsWith("bool")) {
-        return <Switch checked={val as boolean} size="small" title={val ? "True" : "False"} sx={iconInRowSx} />;
+        return <Switch checked={val as boolean} size="small" title={val ? "True" : "False"} sx={defaultCursorIcon} />;
     }
-    return <>{formatValue(val as RowValue, col, formatConf, nanValue)}</>;
+    return <span style={defaultCursor}>{formatValue(val as RowValue, col, formatConf, nanValue)}</span>;
 };
 
 const getCellProps = (col: ColumnDesc, base: Partial<TableCellProps> = {}): Partial<TableCellProps> => {