From e9856c5b1fc9162ce1f105fee49e2a80d69dd397 Mon Sep 17 00:00:00 2001 From: Lisa Knox Date: Fri, 29 Mar 2024 13:54:48 -0400 Subject: [PATCH] 21448: divider in place for context menu Arvados-DCO-1.1-Signed-off-by: Lisa Knox --- .../MultiselectToolbar.tsx | 1 - .../actions/context-menu-divider.tsx | 30 +++++++++++++++++++ .../context-menu/context-menu-action-set.ts | 1 + .../context-menu/context-menu.tsx | 1 - .../context-menu/menu-item-sort.ts | 25 ++++++++++++++-- 5 files changed, 53 insertions(+), 5 deletions(-) create mode 100644 services/workbench2/src/views-components/context-menu/actions/context-menu-divider.tsx diff --git a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx index 5b39e925bf..ec3db484b4 100644 --- a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx +++ b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx @@ -97,7 +97,6 @@ export const MultiselectToolbar = connect( withStyles(styles)((props: MultiselectToolbarProps & WithStyles) => { const { classes, checkedList, singleSelectedUuid, iconProps, user, disabledButtons } = props; const singleResourceKind = singleSelectedUuid ? [resourceToMsResourceKind(singleSelectedUuid, iconProps.resources, user)] : null - console.log(singleResourceKind) const currentResourceKinds = singleResourceKind ? singleResourceKind : Array.from(selectedToKindSet(checkedList)); const currentPathIsTrash = window.location.pathname === "/trash"; const [isTransitioning, setIsTransitioning] = useState(false); diff --git a/services/workbench2/src/views-components/context-menu/actions/context-menu-divider.tsx b/services/workbench2/src/views-components/context-menu/actions/context-menu-divider.tsx new file mode 100644 index 0000000000..439f594779 --- /dev/null +++ b/services/workbench2/src/views-components/context-menu/actions/context-menu-divider.tsx @@ -0,0 +1,30 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import React from 'react'; +import { ContextMenuAction } from '../context-menu-action-set'; +import { Divider as DividerComponent, StyleRulesCallback, withStyles } from '@material-ui/core'; +import { WithStyles } from '@material-ui/core/styles'; + +type CssRules = 'root'; + +const styles:StyleRulesCallback = () => ({ + root: { + backgroundColor: 'black', + }, +}); + +type DividerProps = { + orthogonality: 'vertical' | 'horizontal'; +}; + +export const Divider = withStyles(styles)((props: DividerProps & WithStyles) => { + return ; +}); + +export const menuDivider: ContextMenuAction = { + name: 'divider', + component: Divider, + execute: () => null, +}; \ No newline at end of file diff --git a/services/workbench2/src/views-components/context-menu/context-menu-action-set.ts b/services/workbench2/src/views-components/context-menu/context-menu-action-set.ts index 560a04bebd..d67c4ea7f8 100644 --- a/services/workbench2/src/views-components/context-menu/context-menu-action-set.ts +++ b/services/workbench2/src/views-components/context-menu/context-menu-action-set.ts @@ -23,6 +23,7 @@ export enum ContextMenuActionNames { COPY_TO_CLIPBOARD = 'Copy link to clipboard', DEACTIVATE_USER = 'Deactivate user', DELETE_WORKFLOW = 'Delete Workflow', + DIVIDER = 'Divider', DOWNLOAD = 'Download', EDIT_COLLECTION = 'Edit collection', EDIT_PROCESS = 'Edit process', diff --git a/services/workbench2/src/views-components/context-menu/context-menu.tsx b/services/workbench2/src/views-components/context-menu/context-menu.tsx index 6314ba97ad..89b75bbc4f 100644 --- a/services/workbench2/src/views-components/context-menu/context-menu.tsx +++ b/services/workbench2/src/views-components/context-menu/context-menu.tsx @@ -10,7 +10,6 @@ import { createAnchorAt } from "components/popover/helpers"; import { ContextMenuActionSet, ContextMenuAction } from "./context-menu-action-set"; import { Dispatch } from "redux"; import { memoize } from "lodash"; -import { sortByProperty } from "common/array-utils"; import { sortMenuItems, ContextMenuKind } from "./menu-item-sort"; type DataProps = Pick & { resource?: ContextMenuResource }; diff --git a/services/workbench2/src/views-components/context-menu/menu-item-sort.ts b/services/workbench2/src/views-components/context-menu/menu-item-sort.ts index 030f8801c3..972f83bc0b 100644 --- a/services/workbench2/src/views-components/context-menu/menu-item-sort.ts +++ b/services/workbench2/src/views-components/context-menu/menu-item-sort.ts @@ -4,7 +4,8 @@ import { ContextMenuAction } from './context-menu-action-set'; import { ContextMenuActionNames } from 'views-components/context-menu/context-menu-action-set'; -import { sortByProperty } from 'common/array-utils'; +import { sortByProperty } from 'common/array-utils'; +import { menuDivider } from './actions/context-menu-divider'; export enum ContextMenuKind { API_CLIENT_AUTHORIZATION = "ApiClientAuthorization", @@ -54,11 +55,14 @@ export enum ContextMenuKind { SEARCH_RESULTS = "SearchResults", } + + const processOrder = [ ContextMenuActionNames.VIEW_DETAILS, ContextMenuActionNames.OPEN_IN_NEW_TAB, ContextMenuActionNames.OUTPUTS, ContextMenuActionNames.API_DETAILS, + ContextMenuActionNames.DIVIDER, ContextMenuActionNames.EDIT_PROCESS, ContextMenuActionNames.COPY_AND_RERUN_PROCESS, ContextMenuActionNames.MOVE_TO, @@ -73,11 +77,13 @@ const projectOrder = [ ContextMenuActionNames.COPY_TO_CLIPBOARD, ContextMenuActionNames.OPEN_WITH_3RD_PARTY_CLIENT, ContextMenuActionNames.API_DETAILS, + ContextMenuActionNames.DIVIDER, ContextMenuActionNames.NEW_PROJECT, ContextMenuActionNames.EDIT_PROJECT, ContextMenuActionNames.SHARE, ContextMenuActionNames.MOVE_TO, ContextMenuActionNames.REMOVE, + ContextMenuActionNames.DIVIDER, ContextMenuActionNames.FREEZE_PROJECT, ContextMenuActionNames.ADD_TO_FAVORITES, ContextMenuActionNames.ADD_TO_PUBLIC_FAVORITES, @@ -89,12 +95,14 @@ const collectionOrder = [ ContextMenuActionNames.COPY_TO_CLIPBOARD, ContextMenuActionNames.OPEN_WITH_3RD_PARTY_CLIENT, ContextMenuActionNames.API_DETAILS, + ContextMenuActionNames.DIVIDER, ContextMenuActionNames.NEW_COLLECTION, ContextMenuActionNames.EDIT_COLLECTION, ContextMenuActionNames.SHARE, ContextMenuActionNames.MOVE_TO, ContextMenuActionNames.MAKE_A_COPY, ContextMenuActionNames.MOVE_TO_TRASH, + ContextMenuActionNames.DIVIDER, ContextMenuActionNames.ADD_TO_FAVORITES, ContextMenuActionNames.ADD_TO_PUBLIC_FAVORITES, ]; @@ -104,6 +112,7 @@ const workflowOrder = [ ContextMenuActionNames.OPEN_IN_NEW_TAB, ContextMenuActionNames.COPY_TO_CLIPBOARD, ContextMenuActionNames.API_DETAILS, + ContextMenuActionNames.DIVIDER, ContextMenuActionNames.RUN_WORKFLOW, ContextMenuActionNames.REMOVE, ] @@ -138,8 +147,18 @@ export const sortMenuItems = (menuKind: ContextMenuKind, menuItems: ContextMenuA const bucketMap = new Map(); const leftovers: ContextMenuAction[] = []; - preferredOrder.forEach((name) => bucketMap.set(name, null)); - menuItems.forEach((item) => { + // if we have multiple dividers, we need each of them to have a different key + let count = 0; + + preferredOrder.forEach((name) => { + if (name === ContextMenuActionNames.DIVIDER) { + count++; + bucketMap.set(`${name}-${count}`, menuDivider) + } else { + bucketMap.set(name, null) + } + }); + [...menuItems].forEach((item) => { if (bucketMap.has(item.name)) bucketMap.set(item.name, item); else leftovers.push(item); }); -- 2.30.2