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