X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/2cfa4357aa0c3e5fe45324b2a37a90ddbf689b2a..5bf73506d2630a957f16573cfc33bd2bbb09e6ad:/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 d1c7e1fc9d..89a2e2a8e6 100644
--- a/services/workbench2/src/components/data-table/data-table.tsx
+++ b/services/workbench2/src/components/data-table/data-table.tsx
@@ -29,6 +29,7 @@ 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,7 +55,7 @@ export interface DataTableDataProps<I> {
     toggleMSToolbar: (isVisible: boolean) => void;
     setCheckedListOnStore: (checkedList: TCheckedList) => void;
     checkedList: TCheckedList;
-    is404?: boolean;
+    isNotFound?: boolean;
 }
 
 type CssRules =
@@ -171,6 +172,9 @@ export const DataTable = withStyles(styles)(
             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 {
@@ -291,7 +295,7 @@ export const DataTable = withStyles(styles)(
         };
 
         render() {
-            const { items, classes, working, columns, is404 } = 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);
@@ -302,31 +306,35 @@ export const DataTable = withStyles(styles)(
                             <TableHead>
                                 <TableRow>{this.mapVisibleColumns(this.renderHeadCell)}</TableRow>
                             </TableHead>
-                            <TableBody className={classes.tableBody}>{(isLoaded && !is404) && items.map(this.renderBodyRow)}</TableBody>
+                            <TableBody className={classes.tableBody}>{(isLoaded && !isNotFound) && items.map(this.renderBodyRow)}</TableBody>
                         </Table>
-                        {(!isLoaded || is404 || items.length === 0) && 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));
-            if (this.state.isLoaded === false) {
+            if (isNotFound && isLoaded) {
                 return (
                     <DataTableDefaultView 
                         icon={this.props.defaultViewIcon} 
-                        messages={["Loading data, please wait"]} 
+                        messages={["No items found"]} 
                     />
                 );
-            } else if (this.props.is404) {
+            } else 
+            if (isLoaded === false || working === true) {
                 return (
                     <DataTableDefaultView 
-                        icon={this.props.defaultViewIcon} 
-                        messages={["Project not found"]} 
+                        icon={PendingIcon} 
+                        messages={["Loading data, please wait"]} 
                     />
                 );
             } else {
+                // isLoaded && !working && !isNotFound
                 return (
                     <DataTableDefaultView
                         icon={this.props.defaultViewIcon}
@@ -346,7 +354,7 @@ export const DataTable = withStyles(styles)(
                     key={key || index}
                     className={classes.checkBoxCell}>
                     <div className={classes.checkBoxHead}>
-                        <Tooltip title={this.state.isSelected ? "Deselect All" : "Select All"}>
+                        <Tooltip title={this.state.isSelected ? "Deselect all" : "Select all"}>
                             <input
                                 type="checkbox"
                                 className={classes.checkBox}