Merge branch '21386-project-loading-view'

[arvados.git] / services / workbench2 / src / components / data-table / data-table.tsx

diff --git a/services/workbench2/src/components/data-table/data-table.tsx b/services/workbench2/src/components/data-table/data-table.tsx
index 155d772f85855ddd86a90ecc7842065d543e830f..7b787994577305ea5725b80fcfd942d42f34f360 100644 (file)
--- a/services/workbench2/src/components/data-table/data-table.tsx
+++ b/services/workbench2/src/components/data-table/data-table.tsx
@@ -24,11 +24,12 @@ import { DataTableFilters } from "../data-table-filters/data-table-filters-tree"
 import { DataTableMultiselectPopover } from "../data-table-multiselect-popover/data-table-multiselect-popover";
 import { DataTableFiltersPopover } from "../data-table-filters/data-table-filters-popover";
 import { countNodes, getTreeDirty } from "models/tree";
-import { IconType, PendingIcon } from "components/icon/icon";
+import { IconType } from "components/icon/icon";
 import { SvgIconProps } from "@material-ui/core/SvgIcon";
 import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
 import { createTree } from "models/tree";
 import { DataTableMultiselectOption } from "../data-table-multiselect-popover/data-table-multiselect-popover";
+import { PendingIcon } from "components/icon/icon";
 
 export type DataColumns<I, R> = Array<DataColumn<I, R>>;
 
@@ -54,6 +55,7 @@ export interface DataTableDataProps<I> {
     toggleMSToolbar: (isVisible: boolean) => void;
     setCheckedListOnStore: (checkedList: TCheckedList) => void;
     checkedList: TCheckedList;
+    isNotFound?: boolean;
 }
 
 type CssRules =
@@ -63,13 +65,13 @@ type CssRules =
     | "noItemsInfo"
     | "checkBoxHead"
     | "checkBoxCell"
+    | "clickBox"
     | "checkBox"
     | "firstTableCell"
     | "tableCell"
     | "arrow"
     | "arrowButton"
-    | "tableCellWorkflows"
-    | "loader";
+    | "tableCellWorkflows";
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     root: {
@@ -82,11 +84,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     tableBody: {
         background: theme.palette.background.paper,
     },
-    loader: {
-        left: "50%",
-        marginLeft: "-84px",
-        position: "absolute",
-    },
     noItemsInfo: {
         textAlign: "center",
         padding: theme.spacing.unit,
@@ -94,10 +91,22 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     checkBoxHead: {
         padding: "0",
         display: "flex",
+        width: '2rem',
+        height: "1.5rem",
+        paddingLeft: '0.9rem',
+        marginRight: '0.5rem'
     },
     checkBoxCell: {
         padding: "0",
-        paddingLeft: "10px",
+    },
+    clickBox: {
+        display: 'flex',
+        width: '1.6rem',
+        height: "1.5rem",
+        paddingLeft: '0.35rem',
+        paddingTop: '0.1rem',
+        marginLeft: '0.5rem',
+        cursor: "pointer",
     },
     checkBox: {
         cursor: "pointer",
@@ -133,6 +142,7 @@ export type TCheckedList = Record<string, boolean>;
 
 type DataTableState = {
     isSelected: boolean;
+    isLoaded: boolean;
 };
 
 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
@@ -141,10 +151,11 @@ export const DataTable = withStyles(styles)(
     class Component<T> extends React.Component<DataTableProps<T>> {
         state: DataTableState = {
             isSelected: false,
+            isLoaded: false,
         };
 
         componentDidMount(): void {
-            this.initializeCheckedList(this.props.items);
+            this.initializeCheckedList([]);
         }
 
         componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: DataTableState) {
@@ -155,6 +166,19 @@ export const DataTable = withStyles(styles)(
                 if (items.length) this.initializeCheckedList(items);
                 else setCheckedListOnStore({});
             }
+            if (prevProps.currentRoute !== this.props.currentRoute) {
+                this.initializeCheckedList([])
+            }
+            if(prevProps.working === true && this.props.working === false) {
+                this.setState({ isLoaded: true });
+            }
+            if((this.props.items.length > 0) && !this.state.isLoaded) {
+                this.setState({ isLoaded: true });
+            }
+        }
+
+        componentWillUnmount(): void {
+            this.initializeCheckedList([])
         }
 
         checkBoxColumn: DataColumn<any, any> = {
@@ -165,13 +189,24 @@ export const DataTable = withStyles(styles)(
             render: uuid => {
                 const { classes, checkedList } = this.props;
                 return (
-                    <input
-                        type="checkbox"
-                        name={uuid}
-                        className={classes.checkBox}
-                        checked={checkedList && checkedList[uuid] ? checkedList[uuid] : false}
-                        onChange={() => this.handleSelectOne(uuid)}
-                        onDoubleClick={ev => ev.stopPropagation()}></input>
+                    <div
+                        className={classes.clickBox}
+                        onClick={(ev) => {
+                            ev.stopPropagation()
+                            this.handleSelectOne(uuid)
+                        }}
+                        onDoubleClick={(ev) => ev.stopPropagation()}
+                    >
+                        <input
+                            data-cy={`multiselect-checkbox-${uuid}`}
+                            type='checkbox'
+                            name={uuid}
+                            className={classes.checkBox}
+                            checked={checkedList && checkedList[uuid] ? checkedList[uuid] : false}
+                            onChange={() => this.handleSelectOne(uuid)}
+                            onDoubleClick={(ev) => ev.stopPropagation()}
+                        ></input>
+                    </div>
                 );
             },
         };
@@ -260,7 +295,8 @@ export const DataTable = withStyles(styles)(
         };
 
         render() {
-            const { items, classes, working, columns } = this.props;
+            const { items, classes, columns, isNotFound } = this.props;
+            const { isLoaded } = this.state;
             if (columns[0].name === this.checkBoxColumn.name) columns.shift();
             columns.unshift(this.checkBoxColumn);
             return (
@@ -270,31 +306,43 @@ export const DataTable = withStyles(styles)(
                             <TableHead>
                                 <TableRow>{this.mapVisibleColumns(this.renderHeadCell)}</TableRow>
                             </TableHead>
-                            <TableBody className={classes.tableBody}>{!working && items.map(this.renderBodyRow)}</TableBody>
+                            <TableBody className={classes.tableBody}>{(isLoaded && !isNotFound) && items.map(this.renderBodyRow)}</TableBody>
                         </Table>
-                        {!!working && (
-                            <div className={classes.loader}>
-                                <DataTableDefaultView
-                                    icon={PendingIcon}
-                                    messages={["Loading data, please wait."]}
-                                />
-                            </div>
-                        )}
-                        {items.length === 0 && !working && this.renderNoItemsPlaceholder(this.props.columns)}
+                        {(!isLoaded || isNotFound || items.length === 0) && this.renderNoItemsPlaceholder(this.props.columns)}
                     </div>
                 </div>
             );
         }
 
         renderNoItemsPlaceholder = (columns: DataColumns<T, any>) => {
+            const { isLoaded } = this.state;
+            const { working, isNotFound } = this.props;
             const dirty = columns.some(column => getTreeDirty("")(column.filters));
-            return (
-                <DataTableDefaultView
-                    icon={this.props.defaultViewIcon}
-                    messages={this.props.defaultViewMessages}
-                    filtersApplied={dirty}
-                />
-            );
+            if (isNotFound && isLoaded) {
+                return (
+                    <DataTableDefaultView 
+                        icon={this.props.defaultViewIcon} 
+                        messages={["No items found"]} 
+                    />
+                );
+            } else 
+            if (isLoaded === false || working === true) {
+                return (
+                    <DataTableDefaultView 
+                        icon={PendingIcon} 
+                        messages={["Loading data, please wait"]} 
+                    />
+                );
+            } else {
+                // isLoaded && !working && !isNotFound
+                return (
+                    <DataTableDefaultView
+                        icon={this.props.defaultViewIcon}
+                        messages={this.props.defaultViewMessages}
+                        filtersApplied={dirty}
+                    />
+                );
+            }
         };
 
         renderHeadCell = (column: DataColumn<T, any>, index: number) => {
@@ -367,6 +415,7 @@ export const DataTable = withStyles(styles)(
             const { onRowClick, onRowDoubleClick, extractKey, classes, currentItemUuid, currentRoute } = this.props;
             return (
                 <TableRow
+                    data-cy={'data-table-row'}
                     hover
                     key={extractKey ? extractKey(item) : index}
                     onClick={event => onRowClick && onRowClick(event, item)}