X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/b352c3862814fe0bdd2b5a40b1dc8171474dbb48..31f0010ed0833ff91600cd8ce31d4df1847882cc:/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 f92c0dcf4e..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"; @@ -34,10 +33,10 @@ import { getProcess } from "store/processes/process"; 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"; +type CssRules = "root" | "button" | "iconContainer" | "icon" | "divider"; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ root: { @@ -46,40 +45,25 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ width: 0, height: '2.7rem', padding: 0, - margin: "1rem auto auto 0.5rem", - transition: `width ${WIDTH_TRANSITION}ms`, - overflowY: 'auto', - scrollBehavior: 'smooth', - '&::-webkit-scrollbar': { - width: 0, - height: 2 - }, - '&::-webkit-scrollbar-track': { - width: 0, - height: 2 - }, - '&::-webkit-scrollbar-thumb': { - backgroundColor: '#757575', - borderRadius: 2 - } - }, - transition: { - display: "flex", - flexDirection: "row", - width: 0, - height: '2.7rem', - padding: 0, - margin: "1rem auto auto 0.5rem", + margin: "1rem auto auto 0.3rem", overflow: 'hidden', - transition: `width ${WIDTH_TRANSITION}ms`, }, button: { width: "2.5rem", height: "2.5rem ", + paddingLeft: 0, + border: "1px solid transparent", }, iconContainer: { - height: '100%' - } + height: '100%', + }, + icon: { + marginLeft: '-0.5rem', + }, + divider: { + display: "flex", + alignItems: "center", + }, }); export type MultiselectToolbarProps = { @@ -106,71 +90,81 @@ 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 ( {actions.length ? ( - actions.map((action, i) =>{ - const { hasAlts, useAlts, name, altName, icon, altIcon } = action; - return hasAlts ? ( - - - props.executeMulti(action, checkedList, iconProps.resources)} - > - {currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altIcon && altIcon({}) : icon({})} - - - - ) : ( - - - props.executeMulti(action, checkedList, iconProps.resources)} + + {actions.map((action, i) =>{ + const { hasAlts, useAlts, name, altName, icon, altIcon } = action; + return action.name === ContextMenuActionNames.DIVIDER ? ( + action.component && ( +
- {action.icon({})} - - - - ); - }) + +
+ ) + ) : hasAlts ? ( + + + props.executeMulti(action, checkedList, iconProps.resources)} + className={classes.icon} + > + {currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altIcon && altIcon({}) : icon({})} + + + + ) : ( + + + props.executeMulti(action, checkedList, iconProps.resources)} + className={classes.icon} + > + {action.icon({})} + + + + ); + })} + ) : ( <> )} @@ -214,7 +208,7 @@ function filterActions(actionArray: MultiSelectMenuActionSet, filters: Set 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; @@ -226,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(uuid)(resources); if (c === undefined) { @@ -246,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, filterSet: TMultiselectActionsFilters) { +function selectActionsByKind(currentResourceKinds: Array, filterSet: TMultiselectActionsFilters): MultiSelectMenuAction[] { const rawResult: Set = new Set(); const resultNames = new Set(); const allFiltersArray: MultiSelectMenuAction[][] = [] @@ -305,17 +299,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; } @@ -340,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(copyToClipboardAction(selectedResources)); break;