X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/16d131de262bbe7f5f04c2e66f906e5720caa7ed..28aa75d2683d5f0472335ecef3b2ff505e72f30d:/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 82c6f1bdc4..75a6e6e2c5 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,30 +34,20 @@ import { Process } from "store/processes/process"; import { PublicFavoritesState } from "store/public-favorites/public-favorites-reducer"; 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: { display: "flex", flexDirection: "row", width: 0, - 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', + height: '2.5rem', padding: 0, - margin: "1rem auto auto 0.3rem", + margin: 0, overflow: 'hidden', - transition: `width ${WIDTH_TRANSITION}ms`, }, button: { width: "2.5rem", @@ -71,18 +60,24 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ }, icon: { marginLeft: '-0.5rem', - } + }, + divider: { + display: "flex", + alignItems: "center", + }, }); export type MultiselectToolbarProps = { checkedList: TCheckedList; - selectedResource: string | null; + selectedResourceUuid: string | null; iconProps: IconProps user: User | null disabledButtons: Set auth: AuthState; location: string; - executeMulti: (action: ContextMenuAction | MultiSelectMenuAction, inputSelectedUuid: string | null, checkedList: TCheckedList, resources: ResourcesState) => void; + isSubPanel?: boolean; + injectedStyles?: string; + executeMulti: (action: ContextMenuAction | MultiSelectMenuAction, checkedList: TCheckedList, resources: ResourcesState) => void; }; type IconProps = { @@ -91,67 +86,80 @@ type IconProps = { publicFavorites: PublicFavoritesState; } +const disallowedPaths = [ + "/favorites", + "/public-favorites", + "/trash", + "/group", +] + +const isPathDisallowed = (location: string): boolean => { + return disallowedPaths.some(path => location.includes(path)) +} + export const MultiselectToolbar = connect( mapStateToProps, mapDispatchToProps )( withStyles(styles)((props: MultiselectToolbarProps & WithStyles) => { - const { classes, checkedList, iconProps, user, disabledButtons, selectedResource, location } = props; - const singleResourceKind = selectedResource ? [resourceToMsResourceKind(selectedResource, iconProps.resources, user)] : null + const { classes, checkedList, iconProps, user, disabledButtons, location, isSubPanel, injectedStyles } = props; + 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) => - selectedResource === null ? action.isForMulti : true + 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 ? ( + > props.executeMulti(action, selectedResource, checkedList, iconProps.resources)} + onClick={() => props.executeMulti(action, targetResources, iconProps.resources)} className={classes.icon} > - {currentPathIsTrash || (useAlts && useAlts(selectedResource, iconProps)) ? altIcon && altIcon({}) : icon({})} + {currentPathIsTrash || (useAlts && useAlts(selectedResourceUuid, iconProps)) ? altIcon && altIcon({}) : icon({})} @@ -162,13 +170,12 @@ export const MultiselectToolbar = connect( title={action.name} key={i} disableFocusListener - > + > { - console.log('executing action', action.name, 'with checkedList', checkedList, 'and iconProps', iconProps.resources) - props.executeMulti(action, selectedResource, checkedList, iconProps.resources)}} + props.executeMulti(action, targetResources, iconProps.resources)}} className={classes.icon} > {action.icon({})} @@ -221,30 +228,30 @@ 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; const kind = extractUuidKind(uuid); - const isFrozen = resourceIsFrozen(resource, resources); + const isFrozen = resource?.kind && resource.kind === ResourceKind.PROJECT ? resourceIsFrozen(resource, resources) : false; const isEditable = (user.isAdmin || (resource || ({} as EditableResource)).isEditable) && !readonly && !isFrozen; 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) { @@ -253,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[][] = [] @@ -312,29 +319,19 @@ 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; } //--------------------------------------------------// -function mapStateToProps({auth, multiselect, resources, favorites, publicFavorites, selectedResource}: RootState) { +function mapStateToProps({auth, multiselect, resources, favorites, publicFavorites, selectedResourceUuid}: RootState) { return { checkedList: multiselect.checkedList as TCheckedList, user: auth && auth.user ? auth.user : null, disabledButtons: new Set(multiselect.disabledButtons), auth, - selectedResource, + selectedResourceUuid, location: window.location.pathname, iconProps: { resources, @@ -346,17 +343,17 @@ function mapStateToProps({auth, multiselect, resources, favorites, publicFavorit function mapDispatchToProps(dispatch: Dispatch) { return { - executeMulti: (selectedAction: ContextMenuAction, inputSelectedUuid: string | null, checkedList: TCheckedList, resources: ResourcesState): void => { - const kindGroups = inputSelectedUuid ? groupByKind({[inputSelectedUuid]: true}, resources) : groupByKind(checkedList, resources); - const currentList = inputSelectedUuid ? [inputSelectedUuid] : selectedToArray(checkedList) + executeMulti: (selectedAction: ContextMenuAction, checkedList: TCheckedList, resources: ResourcesState): void => { + const kindGroups = groupByKind(checkedList, resources); + const currentList = selectedToArray(checkedList) switch (selectedAction.name) { - case MultiSelectMenuActionNames.MOVE_TO: - case MultiSelectMenuActionNames.REMOVE: + case ContextMenuActionNames.MOVE_TO: + case ContextMenuActionNames.REMOVE: const firstResource = getResource(currentList[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 = currentList.map(uuid => getResource(uuid)(resources)); dispatch(copyToClipboardAction(selectedResources)); break;