src/components/multiselectToolbar/MultiselectToolbar.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { connect } from 'react-redux';
   7 import { StyleRulesCallback, withStyles, WithStyles, Toolbar, Tooltip, IconButton } from '@material-ui/core';
   8 import { ArvadosTheme } from 'common/custom-theme';
   9 import { RootState } from 'store/store';
  10 import { Dispatch } from 'redux';
  11 import { TCheckedList } from 'components/data-table/data-table';
  12 import { openRemoveProcessDialog, openRemoveManyProcessesDialog } from 'store/processes/processes-actions';
  13 import { processResourceActionSet } from '../../views-components/context-menu/action-sets/process-resource-action-set';
  14 import { ContextMenuResource } from 'store/context-menu/context-menu-actions';
  15 import { extractUuidKind } from 'models/resource';
  16 import { openMoveProcessDialog } from 'store/processes/process-move-actions';
  17 import { openCopyProcessDialog, openCopyManyProcessesDialog } from 'store/processes/process-copy-actions';
  18 import { getResource } from 'store/resources/resources';
  19 import { ResourcesState } from 'store/resources/resources';
  20 import { getProcess } from 'store/processes/process';
  21 import { CopyProcessDialog, CopyManyProcessesDialog } from 'views-components/dialog-forms/copy-process-dialog';
  22 import { collectionActionSet } from 'views-components/context-menu/action-sets/collection-action-set';
  23 import { ContextMenuAction, ContextMenuActionSet } from 'views-components/context-menu/context-menu-action-set';
  24 import { TrashIcon } from 'components/icon/icon';
  25
  26 type CssRules = 'root' | 'button';
  27
  28 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  29     root: {
  30         display: 'flex',
  31         flexDirection: 'row',
  32         width: 0,
  33         padding: 0,
  34         margin: '1rem auto auto 0.5rem',
  35         overflow: 'hidden',
  36         transition: 'width 150ms',
  37     },
  38     button: {
  39         backgroundColor: '#017ead',
  40         color: 'white',
  41         fontSize: '0.75rem',
  42         width: 'auto',
  43         margin: 'auto',
  44         padding: '1px',
  45     },
  46 });
  47
  48 export type MultiselectToolbarProps = {
  49     isVisible: boolean;
  50     checkedList: TCheckedList;
  51     resources: ResourcesState;
  52     executeMulti: (fn, checkedList: TCheckedList, resources: ResourcesState) => void;
  53 };
  54
  55 const collectionMSActionsFilter = {
  56     MAKE_A_COPY: 'Make a copy',
  57     MOVE_TO: 'Move to',
  58     TOGGLE_TRASH_ACTION: 'ToggleTrashAction',
  59 };
  60
  61 const multiselectActionsFilters = {
  62     'arvados#collection': [collectionActionSet, collectionMSActionsFilter],
  63 };
  64
  65 export const MultiselectToolbar = connect(
  66     mapStateToProps,
  67     mapDispatchToProps
  68 )(
  69     withStyles(styles)((props: MultiselectToolbarProps & WithStyles<CssRules>) => {
  70         const { classes, isVisible, checkedList, resources } = props;
  71         const currentResourceKinds = Array.from(selectedToKindSet(checkedList));
  72
  73         const buttons = selectActionsByKind(currentResourceKinds, multiselectActionsFilters);
  74
  75         return (
  76             <Toolbar className={classes.root} style={{ width: `${buttons.length * 3.5}rem` }}>
  77                 {buttons.length ? (
  78                     buttons.map((btn, i) => (
  79                         <Tooltip title={btn.name} key={i} disableFocusListener>
  80                             <IconButton onClick={() => props.executeMulti(btn.execute, checkedList, props.resources)}>
  81                                 {btn.icon ? (
  82                                     btn.icon({ className: 'foo' })
  83                                 ) : btn.name === 'ToggleTrashAction' ? (
  84                                     <TrashIcon />
  85                                 ) : (
  86                                     <>error</>
  87                                 )}
  88                             </IconButton>
  89                         </Tooltip>
  90                     ))
  91                 ) : (
  92                     <></>
  93                 )}
  94             </Toolbar>
  95         );
  96     })
  97 );
  98
  99 //todo: put these all in a /utils
 100 function selectedToArray(checkedList: TCheckedList): Array<string> {
 101     const arrayifiedSelectedList: Array<string> = [];
 102     for (const [key, value] of Object.entries(checkedList)) {
 103         if (value === true) {
 104             arrayifiedSelectedList.push(key);
 105         }
 106     }
 107     return arrayifiedSelectedList;
 108 }
 109
 110 function selectedToKindSet(checkedList: TCheckedList): Set<string> {
 111     const setifiedList = new Set<string>();
 112     for (const [key, value] of Object.entries(checkedList)) {
 113         if (value === true) {
 114             setifiedList.add(extractUuidKind(key) as string);
 115         }
 116     }
 117     return setifiedList;
 118 }
 119
 120 function filterActions(actionArray: ContextMenuActionSet, filters: Record<string, string>): Array<ContextMenuAction> {
 121     return actionArray[0].filter((action) => Object.values(filters).includes(action.name as string));
 122 }
 123
 124 function selectActionsByKind(resourceKinds: Array<string>, filterSet: any) {
 125     const result: Array<ContextMenuAction> = [];
 126     resourceKinds.forEach((kind) => result.push(...filterActions(filterSet[kind][0], filterSet[kind][1])));
 127     return result;
 128 }
 129
 130 //--------------------------------------------------//
 131
 132 function mapStateToProps(state: RootState) {
 133     const { isVisible, checkedList } = state.multiselect;
 134     return {
 135         isVisible: isVisible,
 136         checkedList: checkedList as TCheckedList,
 137         resources: state.resources,
 138     };
 139 }
 140
 141 function mapDispatchToProps(dispatch: Dispatch) {
 142     return {
 143         executeMulti: (fn, checkedList: TCheckedList, resources: ResourcesState) =>
 144             selectedToArray(checkedList).forEach((uuid) => {
 145                 console.log(uuid);
 146                 fn(dispatch, getResource(uuid)(resources));
 147             }),
 148     };
 149 }