Merge pull request #472 from Avaiga/backport/#469-gui-config

Backport to 2.0: Align _GuiSection._from_dict (#469)

gui/doc/table.csv

@@ -34,7 +34,7 @@ filter,bool,FALSE,"Indicates, if True, that all columns can be filtered."
 filter[<i>col_name</i>],bool,FALSE,"Indicates, if True, that the indicated column can be filtered."
 nan_value,str,"""""",The replacement text for NaN (not-a-number) values.
 nan_value[<i>col_name</i>],str,"""""",The replacement text for NaN (not-a-number) values for the indicated column.
-editable,dynamic(bool),FALSE,"Indicates, if True, that all columns can be edited."
+editable,dynamic(bool),True,"Indicates, if True, that all columns can be edited."
 editable[<i>col_name</i>],bool,"editable","Indicates, if False, that the indicated column cannot be edited when editable is True."
 on_edit,Callback,,"The name of a function that is to be triggered when a cell edition is validated.<br/>
 All parameters of that function are optional:
@@ -81,6 +81,6 @@ This dictionary has the following keys:
 </li>
 </ul>
 If this property is not set, the user cannot add rows."
-size,str,"""small""","The size of the rows, valid values are small or medium."
+size,str,"""small""","The size of the rows, valid values are small and medium."
 >active,,,
 >shared,,,

gui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taipy-gui",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.10.0",

gui/packaging/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taipy-gui",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "private": true,
   "main": "./taipy-gui.js",
   "types": "./taipy-gui.d.ts"

gui/src/components/Taipy/AutoLoadingTable.tsx

@@ -117,7 +117,7 @@ const Row = ({
                     value={rows[index][col]}
                     formatConfig={formatConfig}
                     rowIndex={index}
-                    onValidation={onValidation}
+                    onValidation={!columns[col].notEditable ? onValidation: undefined}
                     onDeletion={onDeletion}
                     nanValue={columns[col].nanValue || nanValue}
                     tableCellProps={cellProps[cidx]}
@@ -242,12 +242,10 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
                     filter = filter || col.filter;
                     if (typeof col.notEditable != "boolean") {
                         col.notEditable = !editable;
-                    } else {
-                        col.notEditable = col.notEditable || !editable;
                     }
                 });
                 addDeleteColumn(
-                    (!!(active && editable && (onAdd || onDelete)) ? 1 : 0) + (active && filter ? 1 : 0),
+                    (active && (onAdd || onDelete) ? 1 : 0) + (active && filter ? 1 : 0),
                     columns
                 );
                 const colsOrder = Object.keys(columns).sort(getsortByIndex(columns));
@@ -398,16 +396,15 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
             isItemLoaded: isItemLoaded,
             selection: selected,
             formatConfig: formatConfig,
-            onValidation: active && editable && onEdit ? onCellValidation : undefined,
-            onDeletion: active && editable && onDelete ? onRowDeletion : undefined,
+            onValidation: active && onEdit ? onCellValidation : undefined,
+            onDeletion: active && onDelete ? onRowDeletion : undefined,
             lineStyle: props.lineStyle,
             nanValue: props.nanValue,
         }),
         [
             rows,
             isItemLoaded,
             active,
-            editable,
             colsOrder,
             columns,
             selected,
@@ -425,7 +422,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
     const boxSx = useMemo(() => ({ ...baseBoxSx, width: width }), [width]);
 
     return (
-        <Box sx={boxSx} id={id}>
+        <Box id={id} sx={boxSx}>
             <Paper sx={paperSx}>
                 <Tooltip title={hover || ""}>
                     <TableContainer>
@@ -446,7 +443,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
                                         >
                                             {columns[col].dfid === EDIT_COL ? (
                                                 [
-                                                    active && editable && onAdd ? (
+                                                    active && onAdd ? (
                                                         <Tooltip title="Add a row" key="addARow">
                                                             <IconButton
                                                                 onClick={onAddRowClick}

gui/src/components/Taipy/Image.spec.tsx

@@ -58,6 +58,11 @@ describe("Image Component", () => {
         const elt = getByRole("button");
         expect(elt).not.toBeDisabled();
     });
+    it("is disabled when no action", async () => {
+        const { getByRole } = render(<Image defaultContent="/url/toto.png" active={false} />);
+        const elt = getByRole("button");
+        expect(elt).toBeDisabled();
+    });
     it("dispatch a well formed message", async () => {
         const dispatch = jest.fn();
         const state: TaipyState = INITIAL_STATE;

gui/src/components/Taipy/Image.tsx

@@ -11,7 +11,7 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useContext,  useMemo } from "react";
 import { styled, SxProps, Theme } from "@mui/material/styles";
 import ButtonBase from "@mui/material/ButtonBase";
 import Typography from "@mui/material/Typography";
@@ -20,7 +20,7 @@ import Tooltip from "@mui/material/Tooltip";
 import { TaipyContext } from "../../context/taipyContext";
 import { createSendActionNameAction } from "../../context/taipyReducers";
 import { useDynamicProperty } from "../../utils/hooks";
-import { TaipyActiveProps } from "./utils";
+import { getSuffixedClassNames, TaipyActiveProps } from "./utils";
 
 interface ImageProps extends TaipyActiveProps {
     onAction?: string;
@@ -98,37 +98,19 @@ const ImageMarked = styled("span")(({ theme }) => ({
 
 const Image = (props: ImageProps) => {
     const { className, id, onAction, width = 300, height } = props;
-    const [label, setLabel] = useState(props.defaultLabel);
-    const [content, setContent] = useState(props.defaultContent);
     const { dispatch } = useContext(TaipyContext);
 
     const active = useDynamicProperty(props.active, props.defaultActive, true);
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
+    const label = useDynamicProperty(props.label, props.defaultLabel, undefined);
+    const content = useDynamicProperty(props.content, props.defaultContent, "");
 
     const handleClick = useCallback(() => {
         if (onAction) {
             dispatch(createSendActionNameAction(id, onAction));
         }
     }, [id, onAction, dispatch]);
 
-    useEffect(() => {
-        setLabel((val) => {
-            if (props.label !== undefined && val !== props.label) {
-                return props.label;
-            }
-            return val;
-        });
-    }, [props.label]);
-
-    useEffect(() => {
-        setContent((val) => {
-            if (props.content !== undefined && val !== props.content) {
-                return props.content;
-            }
-            return val;
-        });
-    }, [props.content]);
-
     const style = useMemo(() => ({ width: width, height: height }), [width, height]);
 
     const imgStyle = useMemo(() => ({ backgroundImage: `url("${content}")` }), [content]);
@@ -147,18 +129,18 @@ const Image = (props: ImageProps) => {
     return (
         <Tooltip title={hover || ""}>
             <ImageButton
-                focusRipple
+                focusRipple={!!onAction}
                 style={style}
                 onClick={handleClick}
-                disabled={!active}
+                disabled={!active || !onAction}
                 className={className}
                 id={id}
             >
                 <ImageSrc style={imgStyle} />
-                <ImageBackdrop className="MuiImageBackdrop-root" />
+                {onAction ? <ImageBackdrop className="MuiImageBackdrop-root" /> : null}
                 {label === undefined ? null : (
                     <ImageSpan>
-                        <Typography component="span" variant="subtitle1" color="inherit" sx={imgSx}>
+                        <Typography component="span" variant="subtitle1" color="inherit" sx={imgSx} className={getSuffixedClassNames(className, "-label")}>
                             {label}
                             <ImageMarked className="MuiImageMarked-root" />
                         </Typography>

gui/src/components/Taipy/PaginatedTable.tsx

@@ -124,18 +124,16 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                     filter = filter || col.filter;
                     if (typeof col.notEditable != "boolean") {
                         col.notEditable = !editable;
-                    } else {
-                        col.notEditable = col.notEditable || !editable;
                     }
                 });
                 addDeleteColumn(
-                    (!!active && editable && (onAdd || onDelete) ? 1 : 0) + (active && filter ? 1 : 0),
+                    (active && (onAdd || onDelete) ? 1 : 0) + (active && filter ? 1 : 0),
                     columns
                 );
                 const colsOrder = Object.keys(columns).sort(getsortByIndex(columns));
-                const styles = colsOrder.reduce<Record<string, string>>((pv, col) => {
+                const styles = colsOrder.reduce<Record<string, unknown>>((pv, col) => {
                     if (columns[col].style) {
-                        pv[columns[col].dfid] = columns[col].style as string;
+                        pv[columns[col].dfid] = columns[col].style;
                     }
                     hNan = hNan || !!columns[col].nanValue;
                     return pv;
@@ -361,7 +359,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                                         >
                                             {columns[col].dfid === EDIT_COL ? (
                                                 [
-                                                    active && editable && onAdd ? (
+                                                    active && onAdd ? (
                                                         <Tooltip title="Add a row" key="addARow">
                                                             <IconButton
                                                                 onClick={onAddRowClick}
@@ -453,10 +451,10 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                                                     formatConfig={formatConfig}
                                                     rowIndex={index}
                                                     onValidation={
-                                                        active && editable && onEdit ? onCellValidation : undefined
+                                                        active && !columns[col].notEditable && onEdit ? onCellValidation : undefined
                                                     }
                                                     onDeletion={
-                                                        active && editable && onDelete ? onRowDeletion : undefined
+                                                        active && onDelete ? onRowDeletion : undefined
                                                     }
                                                     nanValue={columns[col].nanValue || props.nanValue}
                                                 />

gui/src/components/Taipy/tableUtils.tsx

@@ -350,7 +350,7 @@ export const EditableCell = (props: EditableCellProps) => {
             ) : (
                 <Box sx={cellBoxSx}>
                     {renderCellValue(value, colDesc, formatConfig, nanValue)}
-                    {onValidation && !colDesc.notEditable ? (
+                    {onValidation ? (
                         <IconButton onClick={onEditClick} size="small" sx={iconInRowSx}>
                             <EditIcon fontSize="inherit" />
                         </IconButton>

src/taipy/gui/config.py

@@ -233,7 +233,7 @@ def _to_dict(self):
             return as_dict
 
         @classmethod
-        def _from_dict(cls, as_dict: t.Dict[str, t.Any]):
+        def _from_dict(cls, as_dict: t.Dict[str, t.Any], *_):
             return _GuiSection(property_list=list(default_config), **as_dict)
 
         def _update(self, as_dict: t.Dict[str, t.Any]):

src/taipy/gui/renderers/builder.py

@@ -420,9 +420,9 @@ def _get_dataframe_attributes(self, date_format="MM/dd/yyyy", number_format=None
                         warnings.warn(f"{self.__element_name} filter[{k}] is not in the list of displayed columns")
             editables = self.get_name_indexed_property("editable")
             for k, v in editables.items():
-                if not _is_boolean_true(v):
+                if _is_boolean(v):
                     if col_desc := next((x for x in columns.values() if x["dfid"] == k), None):
-                        col_desc["notEditable"] = True
+                        col_desc["notEditable"] = not _is_boolean_true(v)
                     else:
                         warnings.warn(f"{self.__element_name} editable[{k}] is not in the list of displayed columns")
             group_by = self.get_name_indexed_property("group_by")

src/taipy/gui/version.json

@@ -1 +1 @@
-{"major": 2, "minor": 0, "patch": 1, "ext": ""}
+{"major": 2, "minor": 0, "patch": 2, "ext": ""}