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, ResourceKind, 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-actions";
  17 import { ContextMenuAction } from "views-components/context-menu/context-menu-action-set";
  18 import { multiselectActionsFilters, TMultiselectActionsFilters, msMenuResourceKind } 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 import { resourceIsFrozen } from "common/frozen-resources";
  25 import { getResourceWithEditableStatus } from "store/resources/resources";
  26 import { GroupResource } from "models/group";
  27 import { EditableResource } from "models/resource";
  28 import { User } from "models/user";
  29 import { GroupClass } from "models/group";
  30 import { isProcessCancelable } from "store/processes/process";
  31 import { CollectionResource } from "models/collection";
  32 import { getProcess } from "store/processes/process";
  33 import { Process } from "store/processes/process";
  34 import { PublicFavoritesState } from "store/public-favorites/public-favorites-reducer";
  35
  36 type CssRules = "root" | "button" | "iconContainer";
  37
  38 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  39     root: {
  40         display: "flex",
  41         flexDirection: "row",
  42         width: 0,
  43         padding: 0,
  44         margin: "1rem auto auto 0.5rem",
  45         overflowY: 'scroll',
  46         transition: "width 150ms",
  47     },
  48     button: {
  49         width: "2.5rem",
  50         height: "2.5rem ",
  51     },
  52     iconContainer: {
  53         height: '100%'
  54     }
  55 });
  56
  57 export type MultiselectToolbarProps = {
  58     checkedList: TCheckedList;
  59     singleSelectedUuid: string | null
  60     iconProps: IconProps
  61     user: User | null
  62     disabledButtons: Set<string>
  63     executeMulti: (action: ContextMenuAction, checkedList: TCheckedList, resources: ResourcesState) => void;
  64 };
  65
  66 type IconProps = {
  67     resources: ResourcesState;
  68     favorites: FavoritesState;
  69     publicFavorites: PublicFavoritesState;
  70 }
  71
  72 export const MultiselectToolbar = connect(
  73     mapStateToProps,
  74     mapDispatchToProps
  75 )(
  76     withStyles(styles)((props: MultiselectToolbarProps & WithStyles<CssRules>) => {
  77         const { classes, checkedList, singleSelectedUuid, iconProps, user , disabledButtons} = props;
  78         const singleResourceKind = singleSelectedUuid ? [resourceToMsResourceKind(singleSelectedUuid, iconProps.resources, user)] : null
  79         const currentResourceKinds = singleResourceKind ? singleResourceKind : Array.from(selectedToKindSet(checkedList));
  80         const currentPathIsTrash = window.location.pathname === "/trash";
  81
  82         const actions =
  83         currentPathIsTrash && selectedToKindSet(checkedList).size
  84         ? [msToggleTrashAction]
  85         : selectActionsByKind(currentResourceKinds as string[], multiselectActionsFilters)
  86         .filter((action) => (singleSelectedUuid === null ? action.isForMulti : true));
  87
  88         return (
  89             <React.Fragment>
  90                 <Toolbar
  91                     className={classes.root}
  92                     style={{ width: `${(actions.length * 2.5) + 1}rem` }}
  93                     >
  94                     {actions.length ? (
  95                         actions.map((action, i) =>{
  96                             const { hasAlts, useAlts, name, altName, icon, altIcon } = action;
  97                         return hasAlts ? (
  98                             <Tooltip
  99                             className={classes.button}
 100                             title={currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altName : name}
 101                             key={i}
 102                             disableFocusListener
 103                             >
 104                                     <span className={classes.iconContainer}>
 105                                         <IconButton disabled={disabledButtons.has(name)} onClick={() => props.executeMulti(action, checkedList, iconProps.resources)}>
 106                                             {currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altIcon && altIcon({}) : icon({})}
 107                                         </IconButton>
 108                                     </span>
 109                                 </Tooltip>
 110                             ) : (
 111                                 <Tooltip
 112                                     className={classes.button}
 113                                     title={action.name}
 114                                     key={i}
 115                                     disableFocusListener
 116                                 >
 117                                     <span className={classes.iconContainer}>
 118                                         <IconButton onClick={() => props.executeMulti(action, checkedList, iconProps.resources)}>{action.icon({})}</IconButton>
 119                                     </span>
 120                                 </Tooltip>
 121                             )
 122                         })
 123                     ) : (
 124                         <></>
 125                     )}
 126                 </Toolbar>
 127             </React.Fragment>
 128         )
 129     })
 130 );
 131
 132 export function selectedToArray(checkedList: TCheckedList): Array<string> {
 133     const arrayifiedSelectedList: Array<string> = [];
 134     for (const [key, value] of Object.entries(checkedList)) {
 135         if (value === true) {
 136             arrayifiedSelectedList.push(key);
 137         }
 138     }
 139     return arrayifiedSelectedList;
 140 }
 141
 142 export function selectedToKindSet(checkedList: TCheckedList): Set<string> {
 143     const setifiedList = new Set<string>();
 144     for (const [key, value] of Object.entries(checkedList)) {
 145         if (value === true) {
 146             setifiedList.add(extractUuidKind(key) as string);
 147         }
 148     }
 149     return setifiedList;
 150 }
 151
 152 function groupByKind(checkedList: TCheckedList, resources: ResourcesState): Record<string, ContextMenuResource[]> {
 153     const result = {};
 154     selectedToArray(checkedList).forEach(uuid => {
 155         const resource = getResource(uuid)(resources) as ContainerRequestResource | Resource;
 156         if (!result[resource.kind]) result[resource.kind] = [];
 157         result[resource.kind].push(resource);
 158     });
 159     return result;
 160 }
 161
 162 function filterActions(actionArray: MultiSelectMenuActionSet, filters: Set<string>): Array<MultiSelectMenuAction> {
 163     return actionArray[0].filter(action => filters.has(action.name as string));
 164 }
 165
 166 const resourceToMsResourceKind = (uuid: string, resources: ResourcesState, user: User | null, readonly = false): (msMenuResourceKind | ResourceKind) | undefined => {
 167     if (!user) return;
 168     const resource = getResourceWithEditableStatus<GroupResource & EditableResource>(uuid, user.uuid)(resources);
 169     const { isAdmin } = user;
 170     const kind = extractUuidKind(uuid);
 171
 172     const isFrozen = resourceIsFrozen(resource, resources);
 173     const isEditable = (user.isAdmin || (resource || ({} as EditableResource)).isEditable) && !readonly && !isFrozen;
 174
 175     switch (kind) {
 176         case ResourceKind.PROJECT:
 177             if (isFrozen) {
 178                 return isAdmin ? msMenuResourceKind.FROZEN_PROJECT_ADMIN : msMenuResourceKind.FROZEN_PROJECT;
 179             }
 180
 181             return isAdmin && !readonly
 182                 ? resource && resource.groupClass !== GroupClass.FILTER
 183                     ? msMenuResourceKind.PROJECT_ADMIN
 184                     : msMenuResourceKind.FILTER_GROUP_ADMIN
 185                 : isEditable
 186                 ? resource && resource.groupClass !== GroupClass.FILTER
 187                     ? msMenuResourceKind.PROJECT
 188                     : msMenuResourceKind.FILTER_GROUP
 189                 : msMenuResourceKind.READONLY_PROJECT;
 190         case ResourceKind.COLLECTION:
 191             const c = getResource<CollectionResource>(uuid)(resources);
 192             if (c === undefined) {
 193                 return;
 194             }
 195             const isOldVersion = c.uuid !== c.currentVersionUuid;
 196             const isTrashed = c.isTrashed;
 197             return isOldVersion
 198                 ? msMenuResourceKind.OLD_VERSION_COLLECTION
 199                 : isTrashed && isEditable
 200                 ? msMenuResourceKind.TRASHED_COLLECTION
 201                 : isAdmin && isEditable
 202                 ? msMenuResourceKind.COLLECTION_ADMIN
 203                 : isEditable
 204                 ? msMenuResourceKind.COLLECTION
 205                 : msMenuResourceKind.READONLY_COLLECTION;
 206         case ResourceKind.PROCESS:
 207             return isAdmin && isEditable
 208                 ? resource && isProcessCancelable(getProcess(resource.uuid)(resources) as Process)
 209                     ? msMenuResourceKind.RUNNING_PROCESS_ADMIN
 210                     : msMenuResourceKind.PROCESS_ADMIN
 211                 : readonly
 212                 ? msMenuResourceKind.READONLY_PROCESS_RESOURCE
 213                 : resource && isProcessCancelable(getProcess(resource.uuid)(resources) as Process)
 214                 ? msMenuResourceKind.RUNNING_PROCESS_RESOURCE
 215                 : msMenuResourceKind.PROCESS_RESOURCE;
 216         case ResourceKind.USER:
 217             return msMenuResourceKind.ROOT_PROJECT;
 218         case ResourceKind.LINK:
 219             return msMenuResourceKind.LINK;
 220         case ResourceKind.WORKFLOW:
 221             return isEditable ? msMenuResourceKind.WORKFLOW : msMenuResourceKind.READONLY_WORKFLOW;
 222         default:
 223             return;
 224     }
 225 };
 226
 227 function selectActionsByKind(currentResourceKinds: Array<string>, filterSet: TMultiselectActionsFilters) {
 228     const rawResult: Set<MultiSelectMenuAction> = new Set();
 229     const resultNames = new Set();
 230     const allFiltersArray: MultiSelectMenuAction[][] = []
 231     currentResourceKinds.forEach(kind => {
 232         if (filterSet[kind]) {
 233             const actions = filterActions(...filterSet[kind]);
 234             allFiltersArray.push(actions);
 235             actions.forEach(action => {
 236                 if (!resultNames.has(action.name)) {
 237                     rawResult.add(action);
 238                     resultNames.add(action.name);
 239                 }
 240             });
 241         }
 242     });
 243
 244     const filteredNameSet = allFiltersArray.map(filterArray => {
 245         const resultSet = new Set<string>();
 246         filterArray.forEach(action => resultSet.add(action.name as string || ""));
 247         return resultSet;
 248     });
 249
 250     const filteredResult = Array.from(rawResult).filter(action => {
 251         for (let i = 0; i < filteredNameSet.length; i++) {
 252             if (!filteredNameSet[i].has(action.name as string)) return false;
 253         }
 254         return true;
 255     });
 256
 257     return filteredResult.sort((a, b) => {
 258         const nameA = a.name || "";
 259         const nameB = b.name || "";
 260         if (nameA < nameB) {
 261             return -1;
 262         }
 263         if (nameA > nameB) {
 264             return 1;
 265         }
 266         return 0;
 267     });
 268 }
 269
 270 export const isExactlyOneSelected = (checkedList: TCheckedList) => {
 271     let tally = 0;
 272     let current = '';
 273     for (const uuid in checkedList) {
 274         if (checkedList[uuid] === true) {
 275             tally++;
 276             current = uuid;
 277         }
 278     }
 279     return tally === 1 ? current : null
 280 };
 281
 282 //--------------------------------------------------//
 283
 284 function mapStateToProps({auth, multiselect, resources, favorites, publicFavorites}: RootState) {
 285     return {
 286         checkedList: multiselect.checkedList as TCheckedList,
 287         singleSelectedUuid: isExactlyOneSelected(multiselect.checkedList),
 288         user: auth && auth.user ? auth.user : null,
 289         disabledButtons: new Set<string>(multiselect.disabledButtons),
 290         iconProps: {
 291             resources,
 292             favorites,
 293             publicFavorites
 294         }
 295     }
 296 }
 297
 298 function mapDispatchToProps(dispatch: Dispatch) {
 299     return {
 300         executeMulti: (selectedAction: ContextMenuAction, checkedList: TCheckedList, resources: ResourcesState): void => {
 301             const kindGroups = groupByKind(checkedList, resources);
 302             switch (selectedAction.name) {
 303                 case MultiSelectMenuActionNames.MOVE_TO:
 304                 case MultiSelectMenuActionNames.REMOVE:
 305                     const firstResource = getResource(selectedToArray(checkedList)[0])(resources) as ContainerRequestResource | Resource;
 306                     const action = findActionByName(selectedAction.name as string, kindToActionSet[firstResource.kind]);
 307                     if (action) action.execute(dispatch, kindGroups[firstResource.kind]);
 308                     break;
 309                 case MultiSelectMenuActionNames.COPY_TO_CLIPBOARD:
 310                     const selectedResources = selectedToArray(checkedList).map(uuid => getResource(uuid)(resources));
 311                     dispatch<any>(copyToClipboardAction(selectedResources));
 312                     break;
 313                 default:
 314                     for (const kind in kindGroups) {
 315                         const action = findActionByName(selectedAction.name as string, kindToActionSet[kind]);
 316                         if (action) action.execute(dispatch, kindGroups[kind]);
 317                     }
 318                     break;
 319             }
 320         },
 321     };
 322 }