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 { ContextMenuResource } from "store/context-menu/context-menu-actions";
  13 import { Resource, extractUuidKind } from "models/resource";
  14 import { getResource } from "store/resources/resources";
  15 import { ResourcesState } from "store/resources/resources";
  16 import { ContextMenuAction, ContextMenuActionSet } from "views-components/context-menu/context-menu-action-set";
  17 import { RestoreFromTrashIcon, TrashIcon } from "components/icon/icon";
  18 import { multiselectActionsFilters, TMultiselectActionsFilters, contextMenuActionConsts } from "./ms-toolbar-action-filters";
  19 import { kindToActionSet, findActionByName } from "./ms-kind-action-differentiator";
  20 import { toggleTrashAction } from "views-components/context-menu/action-sets/project-action-set";
  21 import { copyToClipboardAction } from "store/open-in-new-tab/open-in-new-tab.actions";
  22
  23 type CssRules = "root" | "button";
  24
  25 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  26     root: {
  27         display: "flex",
  28         flexDirection: "row",
  29         width: 0,
  30         padding: 0,
  31         margin: "1rem auto auto 0.5rem",
  32         overflow: "hidden",
  33         transition: "width 150ms",
  34     },
  35     button: {
  36         width: "1rem",
  37         margin: "auto 5px",
  38     },
  39 });
  40
  41 export type MultiselectToolbarProps = {
  42     isVisible: boolean;
  43     checkedList: TCheckedList;
  44     resources: ResourcesState;
  45     executeMulti: (action: ContextMenuAction, checkedList: TCheckedList, resources: ResourcesState) => void;
  46 };
  47
  48 export const MultiselectToolbar = connect(
  49     mapStateToProps,
  50     mapDispatchToProps
  51 )(
  52     withStyles(styles)((props: MultiselectToolbarProps & WithStyles<CssRules>) => {
  53         const { classes, checkedList } = props;
  54         const currentResourceKinds = Array.from(selectedToKindSet(checkedList));
  55
  56         const currentPathIsTrash = window.location.pathname === "/trash";
  57         const buttons =
  58             currentPathIsTrash && selectedToKindSet(checkedList).size
  59                 ? [toggleTrashAction]
  60                 : selectActionsByKind(currentResourceKinds, multiselectActionsFilters);
  61
  62         return (
  63             <Toolbar
  64                 className={classes.root}
  65                 style={{ width: `${buttons.length * 2.12}rem` }}>
  66                 {buttons.length ? (
  67                     buttons.map((btn, i) =>
  68                         btn.name === "ToggleTrashAction" ? (
  69                             <Tooltip
  70                                 className={classes.button}
  71                                 title={currentPathIsTrash ? "Restore" : "Move to trash"}
  72                                 key={i}
  73                                 disableFocusListener>
  74                                 <IconButton onClick={() => props.executeMulti(btn, checkedList, props.resources)}>
  75                                     {currentPathIsTrash ? <RestoreFromTrashIcon /> : <TrashIcon />}
  76                                 </IconButton>
  77                             </Tooltip>
  78                         ) : (
  79                             <Tooltip
  80                                 className={classes.button}
  81                                 title={btn.name}
  82                                 key={i}
  83                                 disableFocusListener>
  84                                 <IconButton onClick={() => props.executeMulti(btn, checkedList, props.resources)}>
  85                                     {btn.icon ? btn.icon({}) : <></>}
  86                                 </IconButton>
  87                             </Tooltip>
  88                         )
  89                     )
  90                 ) : (
  91                     <></>
  92                 )}
  93             </Toolbar>
  94         );
  95     })
  96 );
  97
  98 export function selectedToArray(checkedList: TCheckedList): Array<string> {
  99     const arrayifiedSelectedList: Array<string> = [];
 100     for (const [key, value] of Object.entries(checkedList)) {
 101         if (value === true) {
 102             arrayifiedSelectedList.push(key);
 103         }
 104     }
 105     return arrayifiedSelectedList;
 106 }
 107
 108 export function selectedToKindSet(checkedList: TCheckedList): Set<string> {
 109     const setifiedList = new Set<string>();
 110     for (const [key, value] of Object.entries(checkedList)) {
 111         if (value === true) {
 112             setifiedList.add(extractUuidKind(key) as string);
 113         }
 114     }
 115     return setifiedList;
 116 }
 117
 118 function groupByKind(checkedList: TCheckedList, resources: ResourcesState): Record<string, ContextMenuResource[]> {
 119     const result = {};
 120     selectedToArray(checkedList).forEach(uuid => {
 121         const resource = getResource(uuid)(resources) as Resource;
 122         if (!result[resource.kind]) result[resource.kind] = [];
 123         result[resource.kind].push(resource);
 124     });
 125     return result;
 126 }
 127
 128 function filterActions(actionArray: ContextMenuActionSet, filters: Set<string>): Array<ContextMenuAction> {
 129     return actionArray[0].filter(action => filters.has(action.name as string));
 130 }
 131
 132 function selectActionsByKind(currentResourceKinds: Array<string>, filterSet: TMultiselectActionsFilters) {
 133     const rawResult: Set<ContextMenuAction> = new Set();
 134     const resultNames = new Set();
 135     const allFiltersArray: ContextMenuAction[][] = [];
 136     currentResourceKinds.forEach(kind => {
 137         if (filterSet[kind]) {
 138             const actions = filterActions(...filterSet[kind]);
 139             allFiltersArray.push(actions);
 140             actions.forEach(action => {
 141                 if (!resultNames.has(action.name)) {
 142                     rawResult.add(action);
 143                     resultNames.add(action.name);
 144                 }
 145             });
 146         }
 147     });
 148
 149     const filteredNameSet = allFiltersArray.map(filterArray => {
 150         const resultSet = new Set();
 151         filterArray.forEach(action => resultSet.add(action.name || ""));
 152         return resultSet;
 153     });
 154
 155     const filteredResult = Array.from(rawResult).filter(action => {
 156         for (let i = 0; i < filteredNameSet.length; i++) {
 157             if (!filteredNameSet[i].has(action.name)) return false;
 158         }
 159         return true;
 160     });
 161
 162     return filteredResult.sort((a, b) => {
 163         const nameA = a.name || "";
 164         const nameB = b.name || "";
 165         if (nameA < nameB) {
 166             return -1;
 167         }
 168         if (nameA > nameB) {
 169             return 1;
 170         }
 171         return 0;
 172     });
 173 }
 174
 175 //--------------------------------------------------//
 176
 177 function mapStateToProps(state: RootState) {
 178     const { isVisible, checkedList } = state.multiselect;
 179     return {
 180         isVisible: isVisible,
 181         checkedList: checkedList as TCheckedList,
 182         resources: state.resources,
 183     };
 184 }
 185
 186 function mapDispatchToProps(dispatch: Dispatch) {
 187     return {
 188         executeMulti: (selectedAction: ContextMenuAction, checkedList: TCheckedList, resources: ResourcesState): void => {
 189             const kindGroups = groupByKind(checkedList, resources);
 190             switch (selectedAction.name) {
 191                 case contextMenuActionConsts.MOVE_TO:
 192                     const firstResource = getResource(selectedToArray(checkedList)[0])(resources) as Resource;
 193
 194                     const actionSet = kindToActionSet[firstResource.kind];
 195                     const action = findActionByName(selectedAction.name as string, actionSet);
 196
 197                     if (action) action.execute(dispatch, kindGroups[firstResource.kind]);
 198                     break;
 199                 case contextMenuActionConsts.COPY_TO_CLIPBOARD:
 200                     const selectedResources = selectedToArray(checkedList).map(uuid => getResource(uuid)(resources));
 201                     dispatch<any>(copyToClipboardAction(selectedResources));
 202                     break;
 203                 default:
 204                     for (const kind in kindGroups) {
 205                         const actionSet = kindToActionSet[kind];
 206                         const action = findActionByName(selectedAction.name as string, actionSet);
 207
 208                         if (action) action.execute(dispatch, kindGroups[kind]);
 209                     }
 210                     break;
 211             }
 212         },
 213     };
 214 }