X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/6f80d59b4d111454ce848f18c93aec8a891ff908..562687ce72e709d485aa47773117a51a764a6606:/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 137506e743..0d74b6b38b 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"; @@ -36,10 +35,9 @@ import { PublicFavoritesState } from "store/public-favorites/public-favorites-re import { AuthState } from "store/auth/auth-reducer"; import { IntersectionObserverWrapper } from "./ms-toolbar-overflow-wrapper"; import classNames from "classnames"; +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 = (theme: ArvadosTheme) => ({ root: { @@ -48,17 +46,9 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ width: 0, height: '2.5rem', padding: 0, - transition: `width ${WIDTH_TRANSITION}ms`, + margin: "1rem auto auto 0.3rem", overflow: 'hidden', }, - transition: { - display: "flex", - flexDirection: "row", - height: '2.5rem', - padding: 0, - overflow: 'hidden', - transition: `width ${WIDTH_TRANSITION}ms`, - }, button: { width: "2.5rem", height: "2.5rem ", @@ -70,7 +60,11 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ }, icon: { marginLeft: '-0.5rem', - } + }, + divider: { + display: "flex", + alignItems: "center", + }, }); export type MultiselectToolbarProps = { @@ -112,53 +106,52 @@ export const MultiselectToolbar = connect( const selectedResourceUuid = isPathDisallowed(location) ? null : props.selectedResourceUuid; const singleResourceKind = selectedResourceUuid && !isSubPanel ? [resourceToMsResourceKind(selectedResourceUuid, iconProps.resources, user)] : null const currentResourceKinds = singleResourceKind ? singleResourceKind : Array.from(selectedToKindSet(checkedList)); - const currentPathIsTrash = location.includes("/trash"); - const [isTransitioning, setIsTransitioning] = useState(false); - let transitionTimeout; - - const handleTransition = () => { - setIsTransitioning(true) - transitionTimeout = setTimeout(() => { - setIsTransitioning(false) - }, WIDTH_TRANSITION); - } - - useEffect(()=>{ - handleTransition() - return () => { - if(transitionTimeout) clearTimeout(transitionTimeout) - }; - // eslint-disable-next-line - }, [checkedList]) + const currentPathIsTrash = window.location.pathname === "/trash"; - const actions = + const rawActions = currentPathIsTrash && selectedToKindSet(checkedList).size ? [msToggleTrashAction] : selectActionsByKind(currentResourceKinds as string[], multiselectActionsFilters).filter((action) => selectedResourceUuid === null ? action.isForMulti : true ); + + const actions: ContextMenuAction[] | MultiSelectMenuAction[] = sortMenuItems( + singleResourceKind && singleResourceKind.length ? (singleResourceKind[0] as ContextMenuKind) : ContextMenuKind.MULTI, + rawActions, + menuDirection.HORIZONTAL + ); const targetResources = selectedResourceUuid ? {[selectedResourceUuid]: true} as TCheckedList : checkedList return ( {actions.length ? ( {actions.map((action, i) =>{ const { hasAlts, useAlts, name, altName, icon, altIcon } = action; - return hasAlts ? ( + return action.name === ContextMenuActionNames.DIVIDER ? ( + action.component && ( +
+ +
+ ) + ) : hasAlts ? ( + > + > 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(uuid, user.uuid)(resources); const { isAdmin } = user; @@ -247,18 +240,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(uuid)(resources); if (c === undefined) { @@ -267,36 +260,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 isAdmin ? msMenuResourceKind.ROOT_PROJECT_ADMIN : msMenuResourceKind.ROOT_PROJECT; + return isAdmin ? ContextMenuKind.ROOT_PROJECT_ADMIN : 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, filterSet: TMultiselectActionsFilters) { +function selectActionsByKind(currentResourceKinds: Array, filterSet: TMultiselectActionsFilters): MultiSelectMenuAction[] { const rawResult: Set = new Set(); const resultNames = new Set(); const allFiltersArray: MultiSelectMenuAction[][] = [] @@ -326,17 +319,7 @@ function selectActionsByKind(currentResourceKinds: Array, 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; } @@ -364,14 +347,14 @@ function mapDispatchToProps(dispatch: Dispatch) { const kindGroups = groupByKind(checkedList, resources); const currentList = selectedToArray(checkedList) switch (selectedAction.name) { - case MultiSelectMenuActionNames.MOVE_TO: - case MultiSelectMenuActionNames.REMOVE: - const firstResource = getResource(currentList[0])(resources) as ContainerRequestResource | Resource; + 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: - const selectedResources = currentList.map(uuid => getResource(uuid)(resources)); + case ContextMenuActionNames.COPY_LINK_TO_CLIPBOARD: + const selectedResources = selectedToArray(checkedList).map(uuid => getResource(uuid)(resources)); dispatch(copyToClipboardAction(selectedResources)); break; default: