21386: search results good Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii...

[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 f9ab7f0a25c9927ab905af0dd20a3ee221bfd26d..3e7c86459b1abe80beebba5c9754e05abe83413a 100644 (file)
--- a/services/workbench2/src/components/data-table/data-table.tsx
+++ b/services/workbench2/src/components/data-table/data-table.tsx
@@ -54,7 +54,7 @@ export interface DataTableDataProps<I> {
     toggleMSToolbar: (isVisible: boolean) => void;
     setCheckedListOnStore: (checkedList: TCheckedList) => void;
     checkedList: TCheckedList;
-    notFound?: boolean;
+    is404?: boolean;
 }
 
 type CssRules =
@@ -141,6 +141,7 @@ export type TCheckedList = Record<string, boolean>;
 
 type DataTableState = {
     isSelected: boolean;
+    isLoaded: boolean;
 };
 
 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
@@ -149,6 +150,7 @@ export const DataTable = withStyles(styles)(
     class Component<T> extends React.Component<DataTableProps<T>> {
         state: DataTableState = {
             isSelected: false,
+            isLoaded: false,
         };
 
         componentDidMount(): void {
@@ -166,6 +168,9 @@ export const DataTable = withStyles(styles)(
             if (prevProps.currentRoute !== this.props.currentRoute) {
                 this.initializeCheckedList([])
             }
+            if(prevProps.working === true && this.props.working === false) {
+                this.setState({ isLoaded: true });
+            }
         }
 
         componentWillUnmount(): void {
@@ -286,7 +291,8 @@ export const DataTable = withStyles(styles)(
         };
 
         render() {
-            const { items, classes, working, columns, notFound } = this.props;
+            const { items, classes, columns, is404 } = this.props;
+            const { isLoaded } = this.state;
             if (columns[0].name === this.checkBoxColumn.name) columns.shift();
             columns.unshift(this.checkBoxColumn);
             return (
@@ -296,32 +302,32 @@ export const DataTable = withStyles(styles)(
                             <TableHead>
                                 <TableRow>{this.mapVisibleColumns(this.renderHeadCell)}</TableRow>
                             </TableHead>
-                            <TableBody className={classes.tableBody}>{(!working && !notFound) && items.map(this.renderBodyRow)}</TableBody>
+                            <TableBody className={classes.tableBody}>{(isLoaded && !is404) && items.map(this.renderBodyRow)}</TableBody>
                         </Table>
-                        {(working || notFound) && this.renderNoItemsPlaceholder(this.props.columns)}
+                        {(!isLoaded || is404 || items.length === 0) && this.renderNoItemsPlaceholder(this.props.columns)}
                     </div>
                 </div>
             );
         }
 
         renderNoItemsPlaceholder = (columns: DataColumns<T, any>) => {
-            const { working, notFound } = this.props;
             const dirty = columns.some(column => getTreeDirty("")(column.filters));
-            if (working) {
+            if (this.state.isLoaded === false || this.props.working === true) {
                 return (
                     <DataTableDefaultView 
                         icon={this.props.defaultViewIcon} 
                         messages={["Loading data, please wait"]} 
                     />
                 );
-            } else if (notFound) {
+            } else if (this.props.is404) {
                 return (
                     <DataTableDefaultView 
                         icon={this.props.defaultViewIcon} 
-                        messages={["Project not found"]} 
+                        messages={["Item not found"]} 
                     />
                 );
             } else {
+                //if (isLoaded && !working && !is404)
                 return (
                     <DataTableDefaultView
                         icon={this.props.defaultViewIcon}