X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/5c260a4bfcce9f967dc1518bd52aaaa6d6335c60..5bf94d55b564bfbd052a61ab8219aa063b2a80c6:/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx

diff --git a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index 6500593166..194950b134 100644
--- a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { connect } from "react-redux";
 import { StyleRulesCallback, withStyles, WithStyles, Toolbar, Tooltip, IconButton } from "@material-ui/core";
 import { ArvadosTheme } from "common/custom-theme";
@@ -14,9 +14,8 @@ import { Resource, ResourceKind, extractUuidKind } from "models/resource";
 import { getResource } from "store/resources/resources";
 import { ResourcesState } from "store/resources/resources";
 import { MultiSelectMenuAction, MultiSelectMenuActionSet } from "views-components/multiselect-toolbar/ms-menu-actions";
-import { MultiSelectMenuActionNames } from "views-components/multiselect-toolbar/ms-menu-actions";
-import { ContextMenuAction } from "views-components/context-menu/context-menu-action-set";
-import { multiselectActionsFilters, TMultiselectActionsFilters, msMenuResourceKind } from "./ms-toolbar-action-filters";
+import { ContextMenuAction, ContextMenuActionNames } from "views-components/context-menu/context-menu-action-set";
+import { multiselectActionsFilters, TMultiselectActionsFilters } from "./ms-toolbar-action-filters";
 import { kindToActionSet, findActionByName } from "./ms-kind-action-differentiator";
 import { msToggleTrashAction } from "views-components/multiselect-toolbar/ms-project-action-set";
 import { copyToClipboardAction } from "store/open-in-new-tab/open-in-new-tab.actions";
@@ -35,10 +34,9 @@ import { Process } from "store/processes/process";
 import { PublicFavoritesState } from "store/public-favorites/public-favorites-reducer";
 import { isExactlyOneSelected } from "store/multiselect/multiselect-actions";
 import { IntersectionObserverWrapper } from "./ms-toolbar-overflow-wrapper";
+import { ContextMenuKind, sortMenuItems, menuDirection } from 'views-components/context-menu/menu-item-sort';
 
-const WIDTH_TRANSITION = 150
-
-type CssRules = "root" | "transition" | "button" | "iconContainer" | "icon";
+type CssRules = "root" | "button" | "iconContainer" | "icon" | "divider";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
@@ -48,17 +46,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         height: '2.7rem',
         padding: 0,
         margin: "1rem auto auto 0.3rem",
-        transition: `width ${WIDTH_TRANSITION}ms`,
-        overflow: 'hidden',
-    },
-    transition: {
-        display: "flex",
-        flexDirection: "row",
-        height: '2.7rem',
-        padding: 0,
-        margin: "1rem auto auto 0.3rem",
         overflow: 'hidden',
-        transition: `width ${WIDTH_TRANSITION}ms`,
     },
     button: {
         width: "2.5rem",
@@ -71,7 +59,11 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     icon: {
         marginLeft: '-0.5rem',
-    }
+    },
+    divider: {
+        display: "flex",
+        alignItems: "center",
+    },
 });
 
 export type MultiselectToolbarProps = {
@@ -98,30 +90,24 @@ export const MultiselectToolbar = connect(
         const singleResourceKind = singleSelectedUuid ? [resourceToMsResourceKind(singleSelectedUuid, iconProps.resources, user)] : null
         const currentResourceKinds = singleResourceKind ? singleResourceKind : Array.from(selectedToKindSet(checkedList));
         const currentPathIsTrash = window.location.pathname === "/trash";
-        const [isTransitioning, setIsTransitioning] = useState(false);
-        
-        const handleTransition = () => {
-            setIsTransitioning(true)
-            setTimeout(() => {
-                setIsTransitioning(false)
-            }, WIDTH_TRANSITION);
-        }
-        
-        useEffect(()=>{
-                handleTransition()
-        }, [checkedList])
 
-        const actions =
+        const rawActions =
             currentPathIsTrash && selectedToKindSet(checkedList).size
                 ? [msToggleTrashAction]
                 : selectActionsByKind(currentResourceKinds as string[], multiselectActionsFilters).filter((action) =>
                         singleSelectedUuid === null ? action.isForMulti : true
                     );
+                    
+        const actions: ContextMenuAction[] | MultiSelectMenuAction[] = sortMenuItems(
+            singleResourceKind && singleResourceKind.length ? (singleResourceKind[0] as ContextMenuKind) : ContextMenuKind.MULTI,
+            rawActions,
+            menuDirection.HORIZONTAL
+        ); 
 
         return (
             <React.Fragment>
                 <Toolbar
-                    className={isTransitioning ? classes.transition: classes.root}
+                    className={classes.root}
                     style={{ width: `${(actions.length * 2.5) + 6}rem`}}
                     data-cy='multiselect-toolbar'
                     >
@@ -129,14 +115,24 @@ export const MultiselectToolbar = connect(
                         <IntersectionObserverWrapper menuLength={actions.length}>
                             {actions.map((action, i) =>{
                                 const { hasAlts, useAlts, name, altName, icon, altIcon } = action;
-                            return hasAlts ? (
+                            return action.name === ContextMenuActionNames.DIVIDER ? (
+                                action.component && (
+                                    <div
+                                        className={classes.divider}
+                                        data-targetid={`${name}${i}`}
+                                        key={i}
+                                    >
+                                        <action.component />
+                                    </div>
+                                )
+                            ) : hasAlts ? (
                                 <Tooltip
                                     className={classes.button}
                                     data-targetid={name}
                                     title={currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altName : name}
                                     key={i}
                                     disableFocusListener
-                                    >
+                                >
                                     <span className={classes.iconContainer}>
                                         <IconButton
                                             data-cy='multiselect-button'
@@ -155,7 +151,7 @@ export const MultiselectToolbar = connect(
                                     title={action.name}
                                     key={i}
                                     disableFocusListener
-                                    >
+                                >
                                     <span className={classes.iconContainer}>
                                         <IconButton
                                             data-cy='multiselect-button'
@@ -212,7 +208,7 @@ function filterActions(actionArray: MultiSelectMenuActionSet, filters: Set<strin
     return actionArray[0].filter(action => filters.has(action.name as string));
 }
 
-const resourceToMsResourceKind = (uuid: string, resources: ResourcesState, user: User | null, readonly = false): (msMenuResourceKind | ResourceKind) | undefined => {
+const resourceToMsResourceKind = (uuid: string, resources: ResourcesState, user: User | null, readonly = false): (ContextMenuKind | ResourceKind) | undefined => {
     if (!user) return;
     const resource = getResourceWithEditableStatus<GroupResource & EditableResource>(uuid, user.uuid)(resources);
     const { isAdmin } = user;
@@ -224,18 +220,18 @@ const resourceToMsResourceKind = (uuid: string, resources: ResourcesState, user:
     switch (kind) {
         case ResourceKind.PROJECT:
             if (isFrozen) {
-                return isAdmin ? msMenuResourceKind.FROZEN_PROJECT_ADMIN : msMenuResourceKind.FROZEN_PROJECT;
+                return isAdmin ? ContextMenuKind.FROZEN_PROJECT_ADMIN : ContextMenuKind.FROZEN_PROJECT;
             }
 
             return isAdmin && !readonly
                 ? resource && resource.groupClass !== GroupClass.FILTER
-                    ? msMenuResourceKind.PROJECT_ADMIN
-                    : msMenuResourceKind.FILTER_GROUP_ADMIN
+                    ? ContextMenuKind.PROJECT_ADMIN
+                    : ContextMenuKind.FILTER_GROUP_ADMIN
                 : isEditable
                 ? resource && resource.groupClass !== GroupClass.FILTER
-                    ? msMenuResourceKind.PROJECT
-                    : msMenuResourceKind.FILTER_GROUP
-                : msMenuResourceKind.READONLY_PROJECT;
+                    ? ContextMenuKind.PROJECT
+                    : ContextMenuKind.FILTER_GROUP
+                : ContextMenuKind.READONLY_PROJECT;
         case ResourceKind.COLLECTION:
             const c = getResource<CollectionResource>(uuid)(resources);
             if (c === undefined) {
@@ -244,36 +240,36 @@ const resourceToMsResourceKind = (uuid: string, resources: ResourcesState, user:
             const isOldVersion = c.uuid !== c.currentVersionUuid;
             const isTrashed = c.isTrashed;
             return isOldVersion
-                ? msMenuResourceKind.OLD_VERSION_COLLECTION
+                ? ContextMenuKind.OLD_VERSION_COLLECTION
                 : isTrashed && isEditable
-                ? msMenuResourceKind.TRASHED_COLLECTION
+                ? ContextMenuKind.TRASHED_COLLECTION
                 : isAdmin && isEditable
-                ? msMenuResourceKind.COLLECTION_ADMIN
+                ? ContextMenuKind.COLLECTION_ADMIN
                 : isEditable
-                ? msMenuResourceKind.COLLECTION
-                : msMenuResourceKind.READONLY_COLLECTION;
+                ? ContextMenuKind.COLLECTION
+                : ContextMenuKind.READONLY_COLLECTION;
         case ResourceKind.PROCESS:
             return isAdmin && isEditable
                 ? resource && isProcessCancelable(getProcess(resource.uuid)(resources) as Process)
-                    ? msMenuResourceKind.RUNNING_PROCESS_ADMIN
-                    : msMenuResourceKind.PROCESS_ADMIN
+                    ? ContextMenuKind.RUNNING_PROCESS_ADMIN
+                    : ContextMenuKind.PROCESS_ADMIN
                 : readonly
-                ? msMenuResourceKind.READONLY_PROCESS_RESOURCE
+                ? ContextMenuKind.READONLY_PROCESS_RESOURCE
                 : resource && isProcessCancelable(getProcess(resource.uuid)(resources) as Process)
-                ? msMenuResourceKind.RUNNING_PROCESS_RESOURCE
-                : msMenuResourceKind.PROCESS_RESOURCE;
+                ? ContextMenuKind.RUNNING_PROCESS_RESOURCE
+                : ContextMenuKind.PROCESS_RESOURCE;
         case ResourceKind.USER:
-            return msMenuResourceKind.ROOT_PROJECT;
+            return ContextMenuKind.ROOT_PROJECT;
         case ResourceKind.LINK:
-            return msMenuResourceKind.LINK;
+            return ContextMenuKind.LINK;
         case ResourceKind.WORKFLOW:
-            return isEditable ? msMenuResourceKind.WORKFLOW : msMenuResourceKind.READONLY_WORKFLOW;
+            return isEditable ? ContextMenuKind.WORKFLOW : ContextMenuKind.READONLY_WORKFLOW;
         default:
             return;
     }
 }; 
 
-function selectActionsByKind(currentResourceKinds: Array<string>, filterSet: TMultiselectActionsFilters) {
+function selectActionsByKind(currentResourceKinds: Array<string>, filterSet: TMultiselectActionsFilters): MultiSelectMenuAction[] {
     const rawResult: Set<MultiSelectMenuAction> = new Set();
     const resultNames = new Set();
     const allFiltersArray: MultiSelectMenuAction[][] = []
@@ -303,17 +299,7 @@ function selectActionsByKind(currentResourceKinds: Array<string>, filterSet: TMu
         return true;
     });
 
-    return filteredResult.sort((a, b) => {
-        const nameA = a.name || "";
-        const nameB = b.name || "";
-        if (nameA < nameB) {
-            return -1;
-        }
-        if (nameA > nameB) {
-            return 1;
-        }
-        return 0;
-    });
+    return filteredResult;
 }
 
 
@@ -338,13 +324,13 @@ function mapDispatchToProps(dispatch: Dispatch) {
         executeMulti: (selectedAction: ContextMenuAction, checkedList: TCheckedList, resources: ResourcesState): void => {
             const kindGroups = groupByKind(checkedList, resources);
             switch (selectedAction.name) {
-                case MultiSelectMenuActionNames.MOVE_TO:
-                case MultiSelectMenuActionNames.REMOVE:
+                case ContextMenuActionNames.MOVE_TO:
+                case ContextMenuActionNames.REMOVE:
                     const firstResource = getResource(selectedToArray(checkedList)[0])(resources) as ContainerRequestResource | Resource;
                     const action = findActionByName(selectedAction.name as string, kindToActionSet[firstResource.kind]);
                     if (action) action.execute(dispatch, kindGroups[firstResource.kind]);
                     break;
-                case MultiSelectMenuActionNames.COPY_TO_CLIPBOARD:
+                case ContextMenuActionNames.COPY_LINK_TO_CLIPBOARD:
                     const selectedResources = selectedToArray(checkedList).map(uuid => getResource(uuid)(resources));
                     dispatch<any>(copyToClipboardAction(selectedResources));
                     break;
