Merge branch '21128-toolbar-context-menu'

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

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 8f701f7457e4eaf0232d2f42f577ce74f23e9f6e..de3e272d1ed88f8ec2d622222bc390b61e720dad 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -53,6 +53,7 @@ export interface DataTableDataProps<I> {
     currentRoute?: string;
     toggleMSToolbar: (isVisible: boolean) => void;
     setCheckedListOnStore: (checkedList: TCheckedList) => void;
+    checkedList: TCheckedList;
 }
 
 type CssRules =
@@ -132,7 +133,6 @@ export type TCheckedList = Record<string, boolean>;
 
 type DataTableState = {
     isSelected: boolean;
-    checkedList: TCheckedList;
 };
 
 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
@@ -141,42 +141,47 @@ export const DataTable = withStyles(styles)(
     class Component<T> extends React.Component<DataTableProps<T>> {
         state: DataTableState = {
             isSelected: false,
-            checkedList: {},
         };
 
         componentDidMount(): void {
-            this.initializeCheckedList(this.props.items);
+            this.initializeCheckedList([]);
         }
 
         componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: DataTableState) {
-            const { items, toggleMSToolbar, setCheckedListOnStore } = this.props;
-            const { isSelected, checkedList } = this.state;
+            const { items, setCheckedListOnStore } = this.props;
+            const { isSelected } = this.state;
             if (prevProps.items !== items) {
-                if (isSelected === true) this.setState({ isSelected: this.isAnySelected(checkedList) });
-
+                if (isSelected === true) this.setState({ isSelected: false });
                 if (items.length) this.initializeCheckedList(items);
-                else this.setState({ checkedList: {} });
+                else setCheckedListOnStore({});
             }
-            if (prevState.checkedList !== checkedList) {
-                toggleMSToolbar(this.isAnySelected(checkedList) ? true : false);
-                setCheckedListOnStore(checkedList);
+            if (prevProps.currentRoute !== this.props.currentRoute) {
+                this.initializeCheckedList([])
             }
         }
 
+        componentWillUnmount(): void {
+            this.initializeCheckedList([])
+        }
+
         checkBoxColumn: DataColumn<any, any> = {
             name: "checkBoxColumn",
             selected: true,
             configurable: false,
             filters: createTree(),
-            render: uuid => (
-                <input
-                    type="checkbox"
-                    name={uuid}
-                    className={this.props.classes.checkBox}
-                    checked={this.state.checkedList[uuid] ?? false}
-                    onChange={() => this.handleCheck(uuid)}
-                    onDoubleClick={ev => ev.stopPropagation()}></input>
-            ),
+            render: uuid => {
+                const { classes, checkedList } = this.props;
+                return (
+                    <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>
+                );
+            },
         };
 
         multiselectOptions: DataTableMultiselectOption[] = [
@@ -186,7 +191,7 @@ export const DataTable = withStyles(styles)(
         ];
 
         initializeCheckedList = (uuids: any[]): void => {
-            const newCheckedList = { ...this.state.checkedList };
+            const newCheckedList = { ...this.props.checkedList };
 
             uuids.forEach(uuid => {
                 if (!newCheckedList.hasOwnProperty(uuid)) {
@@ -198,7 +203,7 @@ export const DataTable = withStyles(styles)(
                     delete newCheckedList[key];
                 }
             }
-            this.setState({ checkedList: newCheckedList });
+            this.props.setCheckedListOnStore(newCheckedList);
         };
 
         isAllSelected = (list: TCheckedList): boolean => {
@@ -208,8 +213,8 @@ export const DataTable = withStyles(styles)(
             return true;
         };
 
-        isAnySelected = (checkedList): boolean => {
-            // const { checkedList } = this.state;
+        isAnySelected = (): boolean => {
+            const { checkedList } = this.props;
             if (!Object.keys(checkedList).length) return false;
             for (const key in checkedList) {
                 if (checkedList[key] === true) return true;
@@ -217,15 +222,16 @@ export const DataTable = withStyles(styles)(
             return false;
         };
 
-        handleCheck = (uuid: string): void => {
-            const { checkedList } = this.state;
+        handleSelectOne = (uuid: string): void => {
+            const { checkedList } = this.props;
             const newCheckedList = { ...checkedList };
             newCheckedList[uuid] = !checkedList[uuid];
-            this.setState({ checkedList: newCheckedList, isSelected: this.isAnySelected(newCheckedList) });
+            this.setState({ isSelected: this.isAllSelected(newCheckedList) });
+            this.props.setCheckedListOnStore(newCheckedList);
         };
 
         handleSelectorSelect = (): void => {
-            const { checkedList } = this.state;
+            const { checkedList } = this.props;
             const { isSelected } = this.state;
             isSelected ? this.handleSelectNone(checkedList) : this.handleSelectAll(checkedList);
         };
@@ -236,7 +242,8 @@ export const DataTable = withStyles(styles)(
                 for (const key in newCheckedList) {
                     newCheckedList[key] = true;
                 }
-                this.setState({ isSelected: true, checkedList: newCheckedList });
+                this.setState({ isSelected: true });
+                this.props.setCheckedListOnStore(newCheckedList);
             }
         };
 
@@ -245,7 +252,8 @@ export const DataTable = withStyles(styles)(
             for (const key in newCheckedList) {
                 newCheckedList[key] = false;
             }
-            this.setState({ isSelected: false, checkedList: newCheckedList });
+            this.setState({ isSelected: false });
+            this.props.setCheckedListOnStore(newCheckedList);
         };
 
         handleInvertSelect = (list: TCheckedList): void => {
@@ -254,7 +262,8 @@ export const DataTable = withStyles(styles)(
                 for (const key in newCheckedList) {
                     newCheckedList[key] = !list[key];
                 }
-                this.setState({ checkedList: newCheckedList, isSelected: this.isAllSelected(newCheckedList) });
+                this.setState({ isSelected: this.isAllSelected(newCheckedList) });
+                this.props.setCheckedListOnStore(newCheckedList);
             }
         };
 
@@ -298,8 +307,8 @@ export const DataTable = withStyles(styles)(
 
         renderHeadCell = (column: DataColumn<T, any>, index: number) => {
             const { name, key, renderHeader, filters, sort } = column;
-            const { onSortToggle, onFiltersChange, classes } = this.props;
-            const { isSelected, checkedList } = this.state;
+            const { onSortToggle, onFiltersChange, classes, checkedList } = this.props;
+            const { isSelected } = this.state;
             return column.name === "checkBoxColumn" ? (
                 <TableCell
                     key={key || index}
@@ -322,7 +331,7 @@ export const DataTable = withStyles(styles)(
                 </TableCell>
             ) : (
                 <TableCell
-                    className={index == 1 ? classes.firstTableCell : classes.tableCell}
+                    className={index === 1 ? classes.firstTableCell : classes.tableCell}
                     key={key || index}>
                     {renderHeader ? (
                         renderHeader()
@@ -366,6 +375,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)}