15768: fixed checkbox disable on empty list Arvados-DCO-1.1-Signed-off-by: Lisa Knox...

diff --git a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
index 875f18186146a32f81856f75f4f6bee1ce8f44ec..6a38581e2de507da42a86b391bf73ea6c35305bc 100644 (file)
--- a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
+++ b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
@@ -10,7 +10,7 @@ import debounce from 'lodash/debounce';
 import { grey } from '@material-ui/core/colors';
 import { TCheckedList } from 'components/data-table/data-table';
 
-export type CssRules = 'root' | 'icon' | 'iconButton' | 'optionsContainer' | 'option';
+export type CssRules = 'root' | 'icon' | 'iconButton' | 'disabled' | 'optionsContainer' | 'option';
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     root: {
@@ -37,6 +37,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         padding: 1,
         paddingBottom: 5,
     },
+    disabled: {
+        color: grey[500],
+    },
     optionsContainer: {
         padding: '1rem 0',
         flex: 1,
@@ -60,6 +63,7 @@ export type DataTableMultiselectOption = {
 
 export interface DataTableMultiselectProps {
     name: string;
+    disabled: boolean;
     options: DataTableMultiselectOption[];
     checkedList: TCheckedList;
 }
@@ -76,14 +80,18 @@ export const DataTableMultiselectPopover = withStyles(styles)(
         icon = React.createRef<HTMLElement>();
 
         render() {
-            const { classes, children, options, checkedList } = this.props;
+            const { classes, children, options, checkedList, disabled } = this.props;
             return (
                 <>
                     <Tooltip disableFocusListener title='Select Options'>
-                        <ButtonBase className={classnames(classes.root)} component='span' onClick={this.open} disableRipple>
+                        <ButtonBase className={classnames(classes.root)} component='span' onClick={disabled ? () => {} : this.open} disableRipple>
                             {children}
                             <IconButton component='span' classes={{ root: classes.iconButton }} tabIndex={-1}>
-                                <i className={classnames(['fas fa-sort-down', classes.icon])} data-fa-transform='shrink-3' ref={this.icon} />
+                                <i
+                                    className={`${classnames(['fas fa-sort-down', classes.icon])}${disabled ? ` ${classes.disabled}` : ''}`}
+                                    data-fa-transform='shrink-3'
+                                    ref={this.icon}
+                                />
                             </IconButton>
                         </ButtonBase>
                     </Tooltip>

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index effc46ab7a2cce08b9632ccb64bfa93e2a28c690..3194fc20a013862b7ce788333b10e3b85bc8e3fb 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -28,7 +28,6 @@ import { IconType, PendingIcon } from 'components/icon/icon';
 import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
 import { createTree } from 'models/tree';
-import arraysAreCongruent from 'validators/arrays-are-congruent';
 import { DataTableMultiselectOption } from '../data-table-multiselect-popover/data-table-multiselect-popover';
 
 export type DataColumns<I, R> = Array<DataColumn<I, R>>;
@@ -152,9 +151,10 @@ export const DataTable = withStyles(styles)(
         componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: DataTableState) {
             const { items, toggleMSToolbar, setCheckedListOnStore } = this.props;
             const { isSelected, checkedList } = this.state;
-            if (!arraysAreCongruent(prevProps.items, items)) {
+            if (prevProps.items !== items) {
                 if (isSelected === true) this.setState({ isSelected: false });
                 if (items.length) this.initializeCheckedList(items);
+                else this.setState({ checkedList: {} });
             }
             if (prevState.checkedList !== checkedList) {
                 toggleMSToolbar(this.isAnySelected() ? true : false);
@@ -295,10 +295,17 @@ export const DataTable = withStyles(styles)(
                 <TableCell key={key || index} className={classes.checkBoxCell}>
                     <div className={classes.checkBoxHead}>
                         <Tooltip title={this.state.isSelected ? 'Deselect All' : 'Select All'}>
-                            <input type='checkbox' className={classes.checkBox} checked={isSelected} onChange={this.handleSelectorSelect}></input>
+                            <input
+                                type='checkbox'
+                                className={classes.checkBox}
+                                checked={isSelected}
+                                disabled={!this.props.items.length}
+                                onChange={this.handleSelectorSelect}
+                            ></input>
                         </Tooltip>
                         <DataTableMultiselectPopover
                             name={`Options`}
+                            disabled={!this.props.items.length}
                             options={this.multiselectOptions}
                             checkedList={checkedList}
                         ></DataTableMultiselectPopover>

diff --git a/src/validators/arrays-are-congruent.tsx b/src/validators/arrays-are-congruent.tsx
deleted file mode 100644 (file)
index d945600..0000000
--- a/src/validators/arrays-are-congruent.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-export default function arraysAreCongruent<T>(arr1: T[], arr2: T[]): boolean {
-    if (!arr1.length || !arr2.length) return false;
-    if (arr1.length !== arr2.length) return false;
-
-    const sortedArr1 = [...arr1].sort();
-    const sortedArr2 = [...arr2].sort();
-
-    for (let i = 0; i < sortedArr1.length; i++) {
-        if (sortedArr1[i] !== sortedArr2[i]) return false;
-    }
-
-    return true;
-}