Rewording for Core selector filter/sort (#2238)

* Rewording for Core selector filter/sort
Avaiga · Nov 12, 2024 · 19fc3d7 · 19fc3d7
1 parent 276b1d3
commit 19fc3d7
Show file tree

Hide file tree

Showing 8 changed files with 258 additions and 208 deletions.
diff --git a/frontend/taipy-gui/packaging/taipy-gui.d.ts b/frontend/taipy-gui/packaging/taipy-gui.d.ts
@@ -124,6 +124,8 @@ export interface FilterDesc {
     type: string;
 }
 export interface TableFilterProps {
+    fieldHeader?: string;
+    fieldHeaderTooltip?: string;
     columns: Record<string, ColumnDesc>;
     colsOrder?: Array<string>;
     onValidate: (data: Array<FilterDesc>) => void;
@@ -139,6 +141,8 @@ export interface SortDesc {
 }
 
 export interface TableSortProps {
+    fieldHeader?: string;
+    fieldHeaderTooltip?: string;
     columns: Record<string, ColumnDesc>;
     colsOrder?: Array<string>;
     onValidate: (data: Array<SortDesc>) => void;

diff --git a/frontend/taipy-gui/src/components/Taipy/TableFilter.spec.tsx b/frontend/taipy-gui/src/components/Taipy/TableFilter.spec.tsx
@@ -67,7 +67,7 @@ describe("Table Filter Component", () => {
         const elt = getByTestId("FilterListIcon");
         await userEvent.click(elt);
         expect(getAllByText("Column")).toHaveLength(2);
-        expect(getAllByText("Action")).toHaveLength(2);
+        expect(getAllByText("Condition")).toHaveLength(2);
         expect(getAllByText("Empty String")).toHaveLength(2);
         const dropdownElts = getAllByTestId("ArrowDropDownIcon");
         expect(dropdownElts).toHaveLength(2);
@@ -104,7 +104,7 @@ describe("Table Filter Component", () => {
         await userEvent.click(getByText("NumberCol"));
         await userEvent.click(dropdownElts[1].parentElement?.firstElementChild || dropdownElts[1]);
         await findByRole("listbox");
-        await userEvent.click(getByText("less equals"));
+        await userEvent.click(getByText("is less than or equal to"));
         const validate = getByTestId("CheckIcon").parentElement;
         expect(validate).toBeDisabled();
         const labels = getAllByText("Number");
@@ -127,7 +127,7 @@ describe("Table Filter Component", () => {
         await userEvent.click(getByText("BoolCol"));
         await userEvent.click(dropdownElts[1].parentElement?.firstElementChild || dropdownElts[1]);
         await findByRole("listbox");
-        await userEvent.click(getByText("equals"));
+        await userEvent.click(getByText("is"));
         const validate = getByTestId("CheckIcon").parentElement;
         expect(validate).toBeDisabled();
         const dddElts = getAllByTestId("ArrowDropDownIcon");
@@ -151,7 +151,7 @@ describe("Table Filter Component", () => {
         await userEvent.click(getByText("DateCol"));
         await userEvent.click(dropdownElts[1].parentElement?.firstElementChild || dropdownElts[1]);
         await findByRole("listbox");
-        await userEvent.click(getByText("before equal"));
+        await userEvent.click(getByText("is on or before"));
         const validate = getByTestId("CheckIcon").parentElement;
         expect(validate).toBeDisabled();
         const input = getByPlaceholderText("YYYY/MM/DD");
@@ -241,7 +241,7 @@ describe("Table Filter Component", () => {
         );
         const elt = getByTestId("FilterListIcon");
         await userEvent.click(elt);
-        const ddElts2 = getAllByTestId("ArrowDropDownIcon");
-        expect(ddElts2).toHaveLength(2);
+        const ddElements2 = getAllByTestId("ArrowDropDownIcon");
+        expect(ddElements2).toHaveLength(2);
     });
 });
diff --git a/frontend/taipy-gui/src/components/Taipy/TableFilter.tsx b/frontend/taipy-gui/src/components/Taipy/TableFilter.tsx
@@ -35,6 +35,8 @@ import { getDateTime, getTypeFromDf } from "../../utils";
 import { getSuffixedClassNames } from "./utils";
 
 interface TableFilterProps {
+    fieldHeader?: string;
+    fieldHeaderTooltip?: string;
     columns: Record<string, ColumnDesc>;
     colsOrder?: Array<string>;
     onValidate: (data: Array<FilterDesc>) => void;
@@ -45,6 +47,8 @@ interface TableFilterProps {
 
 interface FilterRowProps {
     idx: number;
+    fieldHeader?: string;
+    fieldHeaderTooltip?: string;
     filter?: FilterDesc;
     columns: Record<string, ColumnDesc>;
     colsOrder: Array<string>;
@@ -57,23 +61,23 @@ const anchorOrigin = {
 } as PopoverOrigin;
 
 const actionsByType = {
-    string: { "==": "equals", contains: "contains", "!=": "not equals" },
+    string: { "==": "is", contains: "contains", "!=": "is not" },
     number: {
-        "<": "less",
-        "<=": "less equals",
+        "<": "is less than",
+        "<=": "is less than or equal to",
         "==": "equals",
-        "!=": "not equals",
-        ">=": "greater equals",
-        ">": "greater",
+        "!=": "does not equal",
+        ">=": "is greater than or equal to",
+        ">": "is greater than",
     },
-    boolean: { "==": "equals", "!=": "not equals" },
+    boolean: { "==": "is", "!=": "is not" },
     date: {
-        "<": "before",
-        "<=": "before equal",
-        "==": "equals",
-        "!=": "not equals",
-        ">=": "after equal",
-        ">": "after",
+        "<": "is before",
+        "<=": "is on or before",
+        "==": "is on",
+        "!=": "is not on",
+        ">=": "is on or after",
+        ">": "is after",
     },
 } as Record<string, Record<string, string>>;
 
@@ -107,21 +111,21 @@ const getFilterDesc = (columns: Record<string, ColumnDesc>, colId?: string, act?
                         ? colType === "number"
                             ? parseFloat(val)
                             : colType === "boolean"
-                            ? val === "1"
-                            : colType === "date"
-                            ? getDateTime(val)
-                            : val
+                                ? val === "1"
+                                : colType === "date"
+                                    ? getDateTime(val)
+                                    : val
                         : val,
                 type: colType,
             } as FilterDesc;
         } catch (e) {
-            console.info("could not parse value ", val, e);
+            console.info("Could not parse value ", val, e);
         }
     }
 };
 
 const FilterRow = (props: FilterRowProps) => {
-    const { idx, setFilter, columns, colsOrder, filter } = props;
+    const { idx, fieldHeader, fieldHeaderTooltip, filter, columns, colsOrder, setFilter } = props;
 
     const [colId, setColId] = useState<string>("");
     const [action, setAction] = useState<string>("");
@@ -204,22 +208,24 @@ const FilterRow = (props: FilterRowProps) => {
         <Grid container size={12} alignItems="center">
             <Grid size={3.5}>
                 <FormControl margin="dense">
-                    <InputLabel>Column</InputLabel>
-                    <Select value={colId || ""} onChange={onColSelect} input={<OutlinedInput label="Column" />}>
-                        {colsOrder.map((col) =>
-                            columns[col].filter ? (
-                                <MenuItem key={col} value={col}>
-                                    {columns[col].title || columns[col].dfid}
-                                </MenuItem>
-                            ) : null
-                        )}
-                    </Select>
+                    <InputLabel>{fieldHeader}</InputLabel>
+                    <Tooltip title={fieldHeaderTooltip} placement="top">
+                        <Select value={colId || ""} onChange={onColSelect} input={<OutlinedInput label={fieldHeader} />}>
+                            {colsOrder.map((col) =>
+                                columns[col].filter ? (
+                                    <MenuItem key={col} value={col}>
+                                        {columns[col].title || columns[col].dfid}
+                                    </MenuItem>
+                                ) : null
+                            )}
+                        </Select>
+                    </Tooltip>
                 </FormControl>
             </Grid>
             <Grid size={3}>
                 <FormControl margin="dense">
-                    <InputLabel>Action</InputLabel>
-                    <Select value={action || ""} onChange={onActSelect} input={<OutlinedInput label="Action" />}>
+                    <InputLabel>Condition</InputLabel>
+                    <Select value={action || ""} onChange={onActSelect} input={<OutlinedInput label="Condition" />}>
                         {Object.keys(getActionsByType(colType)).map((a) => (
                             <MenuItem key={a} value={a}>
                                 {getActionsByType(colType)[a]}
@@ -306,7 +312,15 @@ const FilterRow = (props: FilterRowProps) => {
 };
 
 const TableFilter = (props: TableFilterProps) => {
-    const { onValidate, appliedFilters, columns, className = "", filteredCount } = props;
+    const {
+        fieldHeader = "Column",
+        fieldHeaderTooltip = "Select the column to filter",
+        columns,
+        onValidate,
+        appliedFilters,
+        className = "",
+        filteredCount
+    } = props;
 
     const [showFilter, setShowFilter] = useState(false);
     const filterRef = useRef<HTMLButtonElement | null>(null);
@@ -383,6 +397,8 @@ const TableFilter = (props: TableFilterProps) => {
                             <FilterRow
                                 key={"fd" + idx}
                                 idx={idx}
+                                fieldHeader={fieldHeader}
+                                fieldHeaderTooltip={fieldHeaderTooltip}
                                 filter={fd}
                                 columns={columns}
                                 colsOrder={colsOrder}
@@ -391,6 +407,8 @@ const TableFilter = (props: TableFilterProps) => {
                         ))}
                         <FilterRow
                             idx={-(filters.length + 1)}
+                            fieldHeader={fieldHeader}
+                            fieldHeaderTooltip={fieldHeaderTooltip}
                             columns={columns}
                             colsOrder={colsOrder}
                             setFilter={updateFilter}

diff --git a/frontend/taipy-gui/src/components/Taipy/TableSort.tsx b/frontend/taipy-gui/src/components/Taipy/TableSort.tsx
@@ -37,6 +37,8 @@ export interface SortDesc {
 }
 
 interface TableSortProps {
+    fieldHeader?: string;
+    fieldHeaderTooltip?: string;
     columns: Record<string, ColumnDesc>;
     colsOrder?: Array<string>;
     onValidate: (data: Array<SortDesc>) => void;
@@ -47,6 +49,8 @@ interface TableSortProps {
 interface SortRowProps {
     idx: number;
     sort?: SortDesc;
+    fieldHeader?: string;
+    fieldHeaderTooltip?: string;
     columns: Record<string, ColumnDesc>;
     colsOrder: Array<string>;
     setSort: (idx: number, fd: SortDesc, remove?: boolean) => void;
@@ -72,13 +76,13 @@ const orderCaptionSx = { ml: 1 };
 const getSortDesc = (columns: Record<string, ColumnDesc>, colId?: string, asc?: boolean) =>
     colId && asc !== undefined
         ? ({
-              col: columns[colId].dfid,
-              order: !!asc,
-          } as SortDesc)
+            col: columns[colId].dfid,
+            order: !!asc,
+        } as SortDesc)
         : undefined;
 
 const SortRow = (props: SortRowProps) => {
-    const { idx, setSort, columns, colsOrder, sort, appliedSorts } = props;
+    const { idx, sort, setSort, fieldHeader, fieldHeaderTooltip, columns, colsOrder, appliedSorts } = props;
 
     const [colId, setColId] = useState("");
     const [order, setOrder] = useState(true); // true => asc
@@ -133,13 +137,15 @@ const SortRow = (props: SortRowProps) => {
             <Grid size={6}>
                 <FormControl margin="dense">
                     <InputLabel>Column</InputLabel>
-                    <Select value={colId || ""} onChange={onColSelect} input={<OutlinedInput label="Column" />}>
-                        {cols.map((col) => (
-                            <MenuItem key={col} value={col}>
-                                {columns[col].title || columns[col].dfid}
-                            </MenuItem>
-                        ))}
-                    </Select>
+                    <Tooltip title={fieldHeaderTooltip} placement="top">
+                        <Select value={colId || ""} onChange={onColSelect} input={<OutlinedInput label={fieldHeader} />}>
+                            {cols.map((col) => (
+                                <MenuItem key={col} value={col}>
+                                    {columns[col].title || columns[col].dfid}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </Tooltip>
                 </FormControl>
             </Grid>
             <Grid size={4}>
@@ -171,7 +177,14 @@ const SortRow = (props: SortRowProps) => {
 };
 
 const TableSort = (props: TableSortProps) => {
-    const { onValidate, appliedSorts, columns, className = "" } = props;
+    const {
+        fieldHeader = "Column",
+        fieldHeaderTooltip = "Select the column to sort",
+        columns,
+        onValidate,
+        appliedSorts,
+        className = ""
+    } = props;
 
     const [showSort, setShowSort] = useState(false);
     const sortRef = useRef<HTMLButtonElement | null>(null);
@@ -243,6 +256,8 @@ const TableSort = (props: TableSortProps) => {
                             key={"fd" + idx}
                             idx={idx}
                             sort={sd}
+                            fieldHeader={fieldHeader}
+                            fieldHeaderTooltip={fieldHeaderTooltip}
                             columns={columns}
                             colsOrder={colsOrder}
                             setSort={updateSort}
@@ -251,6 +266,8 @@ const TableSort = (props: TableSortProps) => {
                     ))}
                     <SortRow
                         idx={-(sorts.length + 1)}
+                        fieldHeader={fieldHeader}
+                        fieldHeaderTooltip={fieldHeaderTooltip}
                         columns={columns}
                         colsOrder={colsOrder}
                         setSort={updateSort}