15768: checkedlist in redux store Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa...

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 0446ee6f3565169eef18cce0d669a7b8dfde29b4..3ef2e3f99e4e02a96e9aa4e6a7889d0aa605ff2f 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -15,6 +15,7 @@ import { CloseIcon, IconType, MaximizeIcon, UnMaximizeIcon, MoreOptionsIcon } fr
 import { PaperProps } from '@material-ui/core/Paper';
 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
 import { MultiselectToolbar, defaultActions } from 'components/multiselectToolbar/MultiselectToolbar';
+import { TCheckedList } from 'components/data-table/data-table';
 
 type CssRules = 'searchBox' | 'headerMenu' | 'toolbar' | 'footer' | 'root' | 'moreOptionsButton' | 'title' | 'dataTable' | 'container';
 
@@ -98,6 +99,7 @@ interface DataExplorerActionProps<T> {
     onLoadMore: (page: number) => void;
     extractKey?: (item: T) => React.Key;
     toggleMSToolbar: (isVisible: boolean) => void;
+    setCheckedListOnStore: (checkedList: TCheckedList) => void;
 }
 
 type DataExplorerProps<T> = DataExplorerDataProps<T> & DataExplorerActionProps<T> & WithStyles<CssRules> & MPVPanelProps;
@@ -186,6 +188,7 @@ export const DataExplorer = withStyles(styles)(
                 elementPath,
                 isMSToolbarVisible,
                 toggleMSToolbar,
+                setCheckedListOnStore,
             } = this.props;
             return (
                 <Paper className={classes.root} {...paperProps} key={paperKey} data-cy={this.props['data-cy']}>
@@ -248,6 +251,7 @@ export const DataExplorer = withStyles(styles)(
                                 currentItemUuid={currentItemUuid}
                                 currentRoute={paperKey}
                                 toggleMSToolbar={toggleMSToolbar}
+                                setCheckedListOnStore={setCheckedListOnStore}
                             />
                         </Grid>
                         <Grid item xs>

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 1b58f9e8b9f8d1aa24aa44ff998fe98f51faeb2e..875f18186146a32f81856f75f4f6bee1ce8f44ec 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
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React, { useEffect } from 'react';
-import { WithStyles, withStyles, ButtonBase, StyleRulesCallback, Theme, Popover, Button, Card, CardActions, Tooltip, IconButton } from '@material-ui/core';
+import { WithStyles, withStyles, ButtonBase, StyleRulesCallback, Theme, Popover, Card, Tooltip, IconButton } from '@material-ui/core';
 import classnames from 'classnames';
 import { DefaultTransformOrigin } from 'components/popover/helpers';
 import debounce from 'lodash/debounce';

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index e89fe4dd016fab09ed8bc529e39b427b8f791c2d..628405cee73eff7ecf6a8c01f50c171e461a0223 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> {
     currentItemUuid?: string;
     currentRoute?: string;
     toggleMSToolbar: (isVisible: boolean) => void;
+    setCheckedListOnStore: (checkedList: TCheckedList) => void;
 }
 
 type CssRules =
@@ -145,7 +146,7 @@ export const DataTable = withStyles(styles)(
         }
 
         componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: DataTableState) {
-            const { items, toggleMSToolbar } = this.props;
+            const { items, toggleMSToolbar, setCheckedListOnStore } = this.props;
             const { isSelected, checkedList } = this.state;
             if (!arraysAreCongruent(prevProps.items, items)) {
                 if (isSelected === true) this.setState({ isSelected: false });
@@ -153,6 +154,7 @@ export const DataTable = withStyles(styles)(
             }
             if (prevState.checkedList !== checkedList) {
                 toggleMSToolbar(this.isAnySelected() ? true : false);
+                setCheckedListOnStore(checkedList);
             }
         }
 

diff --git a/src/components/multiselectToolbar/MultiselectToolbar.tsx b/src/components/multiselectToolbar/MultiselectToolbar.tsx
index 6620792e11787de49bff66cc91ce614d3c40c675..b39fd65765275ba56f1d95b16202a9dc473af78f 100644 (file)
--- a/src/components/multiselectToolbar/MultiselectToolbar.tsx
+++ b/src/components/multiselectToolbar/MultiselectToolbar.tsx
@@ -36,13 +36,11 @@ export const defaultActions: Array<MultiselectToolbarAction> = [
     },
 ];
 
-const MSToolbarCopyButton = (classes, i) => {
-    return (
-        <Button key={i} className={classes.button}>
-            <CopyToClipboardSnackbar value='foo' children={<div>Copy</div>} />
-        </Button>
-    );
-};
+const MSToolbarCopyButton = (classes, i) => (
+    <Button key={i} className={classes.button}>
+        <CopyToClipboardSnackbar value='foo' children={<div>Copy</div>} />
+    </Button>
+);
 
 type MultiselectToolbarProps = MultiselectToolbarActions & WithStyles<CssRules>;
 
@@ -54,6 +52,7 @@ export const MultiselectToolbar = connect(mapStateToProps)(
 );
 
 function mapStateToProps(state: RootState) {
+    // console.log(state);
     return {
         // state: state,
     };

diff --git a/src/store/multiselect/multiselect-actions.tsx b/src/store/multiselect/multiselect-actions.tsx
index 307423b5c69c99edecec388a9697509bf56f8484..ba8edf42789fd4ea3cc14d53ae6920614364854f 100644 (file)
--- a/src/store/multiselect/multiselect-actions.tsx
+++ b/src/store/multiselect/multiselect-actions.tsx
@@ -4,6 +4,7 @@
 
 export const multiselectActions = {
     TOGGLE_VISIBLITY: 'TOGGLE_VISIBLITY',
+    SET_CHECKEDLIST: 'SET_CHECKEDLIST',
 };
 
 export const toggleMSToolbar = (isVisible: boolean) => {
@@ -11,3 +12,9 @@ export const toggleMSToolbar = (isVisible: boolean) => {
         dispatch({ type: multiselectActions.TOGGLE_VISIBLITY, payload: isVisible });
     };
 };
+
+export const setCheckedListOnStore = (checkedList) => {
+    return (dispatch) => {
+        dispatch({ type: multiselectActions.SET_CHECKEDLIST, payload: checkedList });
+    };
+};

diff --git a/src/store/multiselect/multiselect-reducer.tsx b/src/store/multiselect/multiselect-reducer.tsx
index 212f416b88568f6b846331e0e930065bb868fb25..6840df920aef33b2d0ad21505c30a490b482526c 100644 (file)
--- a/src/store/multiselect/multiselect-reducer.tsx
+++ b/src/store/multiselect/multiselect-reducer.tsx
@@ -3,16 +3,20 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { multiselectActions } from './multiselect-actions';
+import { TCheckedList } from 'components/data-table/data-table';
 
 type MultiselectToolbarState = {
     isVisible: boolean;
+    checkedList: TCheckedList;
 };
 
 const multiselectToolbarInitialState = {
     isVisible: false,
+    checkedList: {},
 };
 
 export const multiselectReducer = (state: MultiselectToolbarState = multiselectToolbarInitialState, action) => {
     if (action.type === multiselectActions.TOGGLE_VISIBLITY) return { ...state, isVisible: action.payload };
+    if (action.type === multiselectActions.SET_CHECKEDLIST) return { ...state, checkedList: action.payload };
     return state;
 };

diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx
index be19319b84bb9876fa9c12eeaf63b1fa422b0a1b..871389d4160ece2392846afe68ef74b2e295844f 100644 (file)
--- a/src/views-components/data-explorer/data-explorer.tsx
+++ b/src/views-components/data-explorer/data-explorer.tsx
@@ -9,10 +9,10 @@ import { getDataExplorer } from 'store/data-explorer/data-explorer-reducer';
 import { Dispatch } from 'redux';
 import { dataExplorerActions } from 'store/data-explorer/data-explorer-action';
 import { DataColumn } from 'components/data-table/data-column';
-import { DataColumns } from 'components/data-table/data-table';
+import { DataColumns, TCheckedList } from 'components/data-table/data-table';
 import { DataTableFilters } from 'components/data-table-filters/data-table-filters-tree';
 import { LAST_REFRESH_TIMESTAMP } from 'components/refresh-button/refresh-button';
-import { toggleMSToolbar } from 'store/multiselect/multiselect-actions';
+import { toggleMSToolbar, setCheckedListOnStore } from 'store/multiselect/multiselect-actions';
 
 interface Props {
     id: string;
@@ -78,6 +78,10 @@ const mapDispatchToProps = (dispatchFn) => {
             dispatchFn(toggleMSToolbar(isVisible));
         },
 
+        setCheckedListOnStore: (checkedList: TCheckedList) => {
+            dispatchFn(setCheckedListOnStore(checkedList));
+        },
+
         onRowClick,
 
         onRowDoubleClick,