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