table edit default behavior (#1530)

* Default behavior for table edit, delete, add resolves #557 * test * manage on_add, on_delete with editable * update dependencies resolves #1531 * not ready for react-jsx-parser with jest * tests * fix small things reported by tests as warning * test coverage * test coverage * test coverage * test coverage with more permissions * test coverage with a bit less permissions * start the coverage process * fix * test coverage with a bit less permissions * double quotes Co-authored-by: Fabien Lelaquais <86590727+FabienLelaquais@users.noreply.github.com> * double quotes Co-authored-by: Fabien Lelaquais <86590727+FabienLelaquais@users.noreply.github.com> * double quotes Co-authored-by: Fabien Lelaquais <86590727+FabienLelaquais@users.noreply.github.com> * make table_on_* public --------- Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io> Co-authored-by: Fabien Lelaquais <86590727+FabienLelaquais@users.noreply.github.com>
Avaiga · Jul 17, 2024 · 69280fa · 69280fa
1 parent fe4ba50
commit 69280fa
Show file tree

Hide file tree

Showing 20 changed files with 773 additions and 493 deletions.
diff --git a/.github/workflows/frontend.yml b/.github/workflows/frontend.yml
@@ -2,14 +2,17 @@ name: Frontend Tests & Coverage
 
 on:
   push:
-    branches: [ develop ]
+    branches: [develop]
   pull_request:
-    branches: [ develop ]
+    branches: [develop]
     paths:
-        - 'frontend/taipy-gui/**'
+      - "frontend/taipy-gui/**"
   workflow_dispatch:
 
 permissions:
+  # Required to checkout the code
+  checks: write
+  # Required to put a comment into the pull-request
   pull-requests: write
 
 env:
@@ -32,13 +35,13 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-python@v5
         with:
-          python-version: '3.11'
+          python-version: "3.11"
       - name: npm build and test with node ${{ matrix.node-version }} on ${{ matrix.os }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-          cache-dependency-path: '**/package-lock.json'
+          cache: "npm"
+          cache-dependency-path: "**/package-lock.json"
 
       - name: Hash taipy-gui source code
         id: hash-gui-fe
@@ -70,10 +73,12 @@ jobs:
 
       - name: Code coverage
         if: matrix.os == 'ubuntu-latest' && github.event_name == 'pull_request' && steps.cache-gui-fe-build.outputs.cache-hit != 'true'
-        uses: artiomtr/jest-coverage-report-action@v2.3.0
+        uses: artiomtr/jest-coverage-report-action@v2
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           threshold: "80"
           working-directory: "./frontend/taipy-gui"
           skip-step: install
           annotations: failed-tests
+          # use if you want to avoid errors on the base branch coverage (ie no coverage and no comparison but as it fails anyway as it uses npm install)
+          # base-coverage-file: ./report.json
diff --git a/frontend/taipy-gui/package-lock.json b/frontend/taipy-gui/package-lock.json
diff --git a/frontend/taipy-gui/package.json b/frontend/taipy-gui/package.json
@@ -20,7 +20,7 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.3",
     "react-helmet-async": "^2.0.1",
-    "react-jsx-parser": "^1.28.4",
+    "react-jsx-parser": "^1.29.0",
     "react-markdown": "^9.0.1",
     "react-plotly.js": "^2.5.1",
     "react-router-dom": "^6.0.1",

diff --git a/frontend/taipy-gui/src/components/Taipy/AutoLoadingTable.tsx b/frontend/taipy-gui/src/components/Taipy/AutoLoadingTable.tsx
@@ -209,7 +209,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
 
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
     const active = useDynamicProperty(props.active, props.defaultActive, true);
-    const editable = useDynamicProperty(props.editable, props.defaultEditable, true);
+    const editable = useDynamicProperty(props.editable, props.defaultEditable, false);
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
     const baseColumns = useDynamicJsonProperty(props.columns, props.defaultColumns, defaultColumns);
 
@@ -292,7 +292,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
                     }
                 });
                 addDeleteColumn(
-                    (active && (onAdd || onDelete) ? 1 : 0) +
+                    (active && editable && (onAdd || onDelete) ? 1 : 0) +
                         (active && filter ? 1 : 0) +
                         (active && downloadable ? 1 : 0),
                     baseColumns

diff --git a/frontend/taipy-gui/src/components/Taipy/Input.tsx b/frontend/taipy-gui/src/components/Taipy/Input.tsx
@@ -13,7 +13,6 @@
 
 import React, { useState, useEffect, useCallback, useRef, KeyboardEvent, useMemo, CSSProperties } from "react";
 import IconButton from "@mui/material/IconButton";
-import InputAdornment from "@mui/material/InputAdornment";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import Visibility from "@mui/icons-material/Visibility";
@@ -218,16 +217,14 @@ const Input = (props: TaipyInputProps) => {
             type == "password"
                 ? {
                       endAdornment: (
-                          <InputAdornment position="end">
-                              <IconButton
-                                  aria-label="toggle password visibility"
-                                  onClick={handleClickShowPassword}
-                                  onMouseDown={handleMouseDownPassword}
-                                  edge="end"
-                              >
-                                  {showPassword ? <VisibilityOff /> : <Visibility />}
-                              </IconButton>
-                          </InputAdornment>
+                          <IconButton
+                              aria-label="toggle password visibility"
+                              onClick={handleClickShowPassword}
+                              onMouseDown={handleMouseDownPassword}
+                              edge="end"
+                          >
+                              {showPassword ? <VisibilityOff /> : <Visibility />}
+                          </IconButton>
                       ),
                   }
                 : type == "number"
@@ -270,6 +267,8 @@ const Input = (props: TaipyInputProps) => {
                       min: min,
                       max: max,
                   }
+                : type == "password"
+                ? { autoComplete: "current-password" }
                 : undefined,
         [type, step, min, max]
     );

diff --git a/frontend/taipy-gui/src/components/Taipy/Login.tsx b/frontend/taipy-gui/src/components/Taipy/Login.tsx
@@ -48,8 +48,8 @@ const closeSx: SxProps<Theme> = {
     alignSelf: "start",
 };
 const titleSx = { m: 0, p: 2, display: "flex", paddingRight: "0.1em" };
-const userProps = { autocomplete: "username" };
-const pwdProps = { autocomplete: "current-password" };
+const userProps = { autoComplete: "username" };
+const pwdProps = { autoComplete: "current-password" };
 
 const Login = (props: LoginProps) => {
     const { id, title = "Log-in", onAction = "on_login", message, defaultMessage } = props;

diff --git a/frontend/taipy-gui/src/components/Taipy/PaginatedTable.spec.tsx b/frontend/taipy-gui/src/components/Taipy/PaginatedTable.spec.tsx
@@ -375,7 +375,7 @@ describe("PaginatedTable Component", () => {
             const state: TaipyState = INITIAL_STATE;
             const { getAllByTestId, queryAllByTestId, rerender } = render(
                 <TaipyContext.Provider value={{ state, dispatch }}>
-                    <PaginatedTable data={undefined} defaultColumns={editableColumns} onEdit="onEdit" showAll={true} />
+                    <PaginatedTable data={undefined} defaultColumns={editableColumns} editable={true} onEdit="onEdit" showAll={true} />
                 </TaipyContext.Provider>
             );
 
@@ -384,6 +384,7 @@ describe("PaginatedTable Component", () => {
                     <PaginatedTable
                         data={editableValue as TableValueType}
                         defaultColumns={editableColumns}
+                        editable={true}
                         onEdit="onEdit"
                         showAll={true}
                     />
@@ -400,7 +401,7 @@ describe("PaginatedTable Component", () => {
             const state: TaipyState = INITIAL_STATE;
             const { getByTestId, queryAllByTestId, getAllByTestId, rerender } = render(
                 <TaipyContext.Provider value={{ state, dispatch }}>
-                    <PaginatedTable data={undefined} defaultColumns={editableColumns} onEdit="onEdit" showAll={true} />
+                    <PaginatedTable data={undefined} defaultColumns={editableColumns} editable={true} onEdit="onEdit" showAll={true} />
                 </TaipyContext.Provider>
             );
 
@@ -409,6 +410,7 @@ describe("PaginatedTable Component", () => {
                     <PaginatedTable
                         data={editableValue as TableValueType}
                         defaultColumns={editableColumns}
+                        editable={true}
                         onEdit="onEdit"
                         showAll={true}
                     />
@@ -497,7 +499,7 @@ describe("PaginatedTable Component", () => {
         const state: TaipyState = INITIAL_STATE;
         const { getByTestId } = render(
             <TaipyContext.Provider value={{ state, dispatch }}>
-                <PaginatedTable data={undefined} defaultColumns={editableColumns} showAll={true} onAdd="onAdd" />
+                <PaginatedTable data={undefined} defaultColumns={editableColumns} showAll={true} editable={true} onAdd="onAdd" />
             </TaipyContext.Provider>
         );
 
@@ -519,7 +521,7 @@ describe("PaginatedTable Component", () => {
         const state: TaipyState = INITIAL_STATE;
         const { getAllByTestId, getByTestId, queryAllByTestId, rerender } = render(
             <TaipyContext.Provider value={{ state, dispatch }}>
-                <PaginatedTable data={undefined} defaultColumns={editableColumns} showAll={true} onDelete="onDelete" />
+                <PaginatedTable data={undefined} defaultColumns={editableColumns} showAll={true} editable={true} onDelete="onDelete" />
             </TaipyContext.Provider>
         );
 
@@ -528,6 +530,7 @@ describe("PaginatedTable Component", () => {
                 <PaginatedTable
                     data={editableValue as TableValueType}
                     defaultColumns={editableColumns}
+                    editable={true}
                     showAll={true}
                     onDelete="onDelete"
                 />

diff --git a/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx b/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx
@@ -127,7 +127,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
     const refresh = typeof props.data === "number";
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
     const active = useDynamicProperty(props.active, props.defaultActive, true);
-    const editable = useDynamicProperty(props.editable, props.defaultEditable, true);
+    const editable = useDynamicProperty(props.editable, props.defaultEditable, false);
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
     const baseColumns = useDynamicJsonProperty(props.columns, props.defaultColumns, defaultColumns);
 
@@ -149,7 +149,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                     }
                 });
                 addDeleteColumn(
-                    (active && (onAdd || onDelete) ? 1 : 0) +
+                    (active && editable && (onAdd || onDelete) ? 1 : 0) +
                         (active && filter ? 1 : 0) +
                         (active && downloadable ? 1 : 0),
                     baseColumns

diff --git a/frontend/taipy-gui/src/components/Taipy/Selector.tsx b/frontend/taipy-gui/src/components/Taipy/Selector.tsx
@@ -99,7 +99,7 @@ const getOptionLabel = (option: LovItem) => (typeof option.item === "string" ? o
 const getOptionKey = (option: LovItem) => "" + option.id;
 const isOptionEqualToValue = (option: LovItem, value: LovItem) => option.id == value.id;
 const renderOption = (props: HTMLAttributes<HTMLLIElement>, option: LovItem) => (
-    <li {...props}>{typeof option.item === "string" ? option.item : <LovImage item={option.item} />}</li>
+    <li {...props} key={option.id}>{typeof option.item === "string" ? option.item : <LovImage item={option.item} />}</li>
 );
 
 const getLovItemsFromStr = (value: string | string[] | undefined, lovList: LovItem[], multiple: boolean) => {

diff --git a/frontend/taipy-gui/src/components/Taipy/TableFilter.tsx b/frontend/taipy-gui/src/components/Taipy/TableFilter.tsx
@@ -171,13 +171,7 @@ const FilterRow = (props: FilterRowProps) => {
     );
     const onDateChange = useCallback(
         (v: Date | null) => {
-            let dv;
-            try {
-                dv = v?.toISOString() || "";
-            } catch (e) {
-                dv = "";
-                console.info("TableFilter.onDateChange", v);
-            }
+            const dv = (!(v instanceof Date) || isNaN(v.valueOf())) ?  "": v.toISOString();
             setVal(dv);
             setEnableCheck(!!getFilterDesc(columns, colId, action, dv));
         },