X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/e86a96f413affec0a05a9843d2e8d960000843b6..0eea0b8a51ffec0c7e975932c029e4bd9a1d6b7e:/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 c1b5167b46..ae05353b4c 100644
--- a/services/workbench2/src/components/data-table/data-table.tsx
+++ b/services/workbench2/src/components/data-table/data-table.tsx
@@ -29,6 +29,8 @@ 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 { isExactlyOneSelected } from "store/multiselect/multiselect-actions";
+import { PendingIcon } from "components/icon/icon";
 
 export type DataColumns<I, R> = Array<DataColumn<I, R>>;
 
@@ -49,11 +51,13 @@ export interface DataTableDataProps<I> {
     working?: boolean;
     defaultViewIcon?: IconType;
     defaultViewMessages?: string[];
-    currentItemUuid?: string;
-    currentRoute?: string;
     toggleMSToolbar: (isVisible: boolean) => void;
     setCheckedListOnStore: (checkedList: TCheckedList) => void;
+    currentRoute?: string;
+    currentRouteUuid: string;
     checkedList: TCheckedList;
+    selectedResourceUuid: string;
+    setSelectedUuid: (uuid: string | null) => void;
     isNotFound?: boolean;
 }
 
@@ -155,26 +159,45 @@ export const DataTable = withStyles(styles)(
 
         componentDidMount(): void {
             this.initializeCheckedList([]);
+            // If table is initialized loaded but empty
+            // isLoaded won't be set true by componentDidUpdate later
+            // So we set it to true here
+            if (!this.props.working) {
+                this.setState({ isLoaded: true });
+            }
         }
 
         componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: DataTableState) {
-            const { items, setCheckedListOnStore } = this.props;
+            const { items, currentRouteUuid, setCheckedListOnStore } = this.props;
             const { isSelected } = this.state;
+            const singleSelected = isExactlyOneSelected(this.props.checkedList);
             if (prevProps.items !== items) {
                 if (isSelected === true) this.setState({ isSelected: false });
                 if (items.length) this.initializeCheckedList(items);
                 else setCheckedListOnStore({});
             }
             if (prevProps.currentRoute !== this.props.currentRoute) {
-                this.initializeCheckedList([])
+                this.initializeCheckedList([]);
             }
-            if((prevProps.working === true && this.props.working === false || this.props.items.length > 0) && !this.state.isLoaded) {
+            if (singleSelected && singleSelected !== isExactlyOneSelected(prevProps.checkedList)) {
+                this.props.setSelectedUuid(singleSelected);
+            }
+            if (!singleSelected && !!currentRouteUuid && !this.isAnySelected()) {
+                this.props.setSelectedUuid(currentRouteUuid);
+            }
+            if (!singleSelected && this.isAnySelected()) {
+                this.props.setSelectedUuid(null);
+            }
+            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([])
+            this.initializeCheckedList([]);
         }
 
         checkBoxColumn: DataColumn<any, any> = {
@@ -216,11 +239,12 @@ export const DataTable = withStyles(styles)(
         initializeCheckedList = (uuids: any[]): void => {
             const newCheckedList = { ...this.props.checkedList };
 
-            uuids.forEach(uuid => {
-                if (!newCheckedList.hasOwnProperty(uuid)) {
-                    newCheckedList[uuid] = false;
+            if(Object.keys(newCheckedList).length === 0){
+                for(const uuid of uuids){
+                    newCheckedList[uuid] = false
                 }
-            });
+            }
+
             for (const key in newCheckedList) {
                 if (!uuids.includes(key)) {
                     delete newCheckedList[key];
@@ -293,9 +317,8 @@ export const DataTable = withStyles(styles)(
         render() {
             const { items, classes, columns, isNotFound } = this.props;
             const { isLoaded } = this.state;
-            if (columns[0].name === this.checkBoxColumn.name) columns.shift();
+            if (columns.length && columns[0].name === this.checkBoxColumn.name) columns.shift();
             columns.unshift(this.checkBoxColumn);
-            console.log(items)
             return (
                 <div className={classes.root}>
                     <div className={classes.content}>
@@ -315,24 +338,23 @@ export const DataTable = withStyles(styles)(
             const { isLoaded } = this.state;
             const { working, isNotFound } = this.props;
             const dirty = columns.some(column => getTreeDirty("")(column.filters));
-            console.log('isNotFound', isNotFound, 'isLoaded', isLoaded, 'working', working, )
             if (isNotFound && isLoaded) {
                 return (
-                    <DataTableDefaultView 
-                        icon={this.props.defaultViewIcon} 
-                        messages={["Item not found"]} 
+                    <DataTableDefaultView
+                        icon={this.props.defaultViewIcon}
+                        messages={["No items found"]}
                     />
                 );
-            } else 
+            } else
             if (isLoaded === false || working === true) {
                 return (
-                    <DataTableDefaultView 
-                        icon={this.props.defaultViewIcon} 
-                        messages={["Loading data, please wait"]} 
+                    <DataTableDefaultView
+                        icon={PendingIcon}
+                        messages={["Loading data, please wait"]}
                     />
                 );
             } else {
-                //if (isLoaded && !working && !isNotFound)
+                // isLoaded && !working && !isNotFound
                 return (
                     <DataTableDefaultView
                         icon={this.props.defaultViewIcon}
@@ -352,7 +374,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}
@@ -410,8 +432,7 @@ export const DataTable = withStyles(styles)(
         );
 
         renderBodyRow = (item: any, index: number) => {
-            console.log('item', item)
-            const { onRowClick, onRowDoubleClick, extractKey, classes, currentItemUuid, currentRoute } = this.props;
+            const { onRowClick, onRowDoubleClick, extractKey, classes, selectedResourceUuid, currentRoute } = this.props;
             return (
                 <TableRow
                     data-cy={'data-table-row'}
@@ -420,7 +441,7 @@ export const DataTable = withStyles(styles)(
                     onClick={event => onRowClick && onRowClick(event, item)}
                     onContextMenu={this.handleRowContextMenu(item)}
                     onDoubleClick={event => onRowDoubleClick && onRowDoubleClick(event, item)}
-                    selected={item === currentItemUuid}>
+                    selected={item === selectedResourceUuid}>
                     {this.mapVisibleColumns((column, index) => (
                         <TableCell
                             key={column.key || index}