21448: divider in place for toolbar menu Arvados-DCO-1.1-Signed-off-by: Lisa Knox...

diff --git a/services/workbench2/src/components/icon/icon.tsx b/services/workbench2/src/components/icon/icon.tsx
index 1ba88d25b221ce4ea5567401ebff3f7e4ed2e6d7..08c2e8f45476874d32f6474d545f6a1a6ee2dfe2 100644 (file)
--- a/services/workbench2/src/components/icon/icon.tsx
+++ b/services/workbench2/src/components/icon/icon.tsx
@@ -179,6 +179,13 @@ export const DoubleRightArrows: IconType = (props: any) => (
     </SvgIcon>
 )
 
+//https://pictogrammers.com/library/memory/icon/box-light-vertical/
+export const VerticalLineDivider: IconType = (props: any) => (
+    <SvgIcon {...props}>
+        <path d="M12 0V22H10V0H12Z" />
+    </SvgIcon>
+)
+
 export type IconType = React.SFC<{ className?: string; style?: object }>;
 
 export const AddIcon: IconType = props => <Add {...props} />;

diff --git a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index ec3db484b44635af8c0cc73c602955aed33c574e..f9ac243f0d9c69e6dd354c88031f95f37902317f 100644 (file)
--- a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
@@ -34,7 +34,7 @@ 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 } from 'views-components/context-menu/menu-item-sort';
+import { ContextMenuKind, sortMenuItems, menuDirection } from 'views-components/context-menu/menu-item-sort';
 import { sortByProperty } from "common/array-utils";
 
 const WIDTH_TRANSITION = 150
@@ -119,8 +119,8 @@ export const MultiselectToolbar = connect(
                         singleSelectedUuid === null ? action.isForMulti : true
                     );
                     
-        const actions =
-            singleResourceKind && singleResourceKind.length ? sortMenuItems(singleResourceKind[0] as ContextMenuKind, rawActions) : rawActions.sort(sortByProperty('name'));
+        const actions: ContextMenuAction[] | MultiSelectMenuAction[] =
+            singleResourceKind && singleResourceKind.length ? sortMenuItems(singleResourceKind[0] as ContextMenuKind, rawActions, menuDirection.HORIZONTAL) : rawActions.sort(sortByProperty('name'));
 
         return (
             <React.Fragment>

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
index 439f594779430c408a808091a6d4ae61b6cf1874..e5c2b353927dd9792b68a11a69544345b8dcf4f8 100644 (file)
--- 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
@@ -6,25 +6,39 @@ 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';
+import { VerticalLineDivider } from 'components/icon/icon';
 
-type CssRules = 'root';
+type CssRules = 'horizontal' | 'vertical';
 
 const styles:StyleRulesCallback<CssRules> = () => ({
-  root: {
+  horizontal: {
       backgroundColor: 'black',
   },
+  vertical: {
+      backgroundColor: 'black',
+      transform: 'rotate(90deg)',
+  },
 });
 
-type DividerProps = {
-  orthogonality: 'vertical' | 'horizontal';
-};
+export const VerticalLine = withStyles(styles)((props: WithStyles<CssRules>) => {
+  return  <DividerComponent variant='middle' className={props.classes.vertical}/>;
+});
 
-export const Divider = withStyles(styles)((props: DividerProps & WithStyles<CssRules>) => {
-  return  <DividerComponent variant='middle' className={props.classes.root} />;
+export const HorizontalLine = withStyles(styles)((props: WithStyles<CssRules>) => {
+  return  <DividerComponent variant='middle' className={props.classes.horizontal} />;
 });
 
-export const menuDivider: ContextMenuAction = {
+//msToolbar only renders icon and not component
+export const horizontalMenuDivider: ContextMenuAction = {
+  name: 'divider',
+  icon: VerticalLineDivider,
+  component: VerticalLine,
+  execute: () => null,
+};
+
+export const verticalMenuDivider: ContextMenuAction = {
   name: 'divider',
-  component: Divider,
+  icon: () => null,
+  component: HorizontalLine,
   execute: () => null,
 };
\ No newline at end of file

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 89b75bbc4f4fe1a1a24550a29072b8dc6076d9fd..a173399b7bae25d7e0e1b609be2de84ae389e373 100644 (file)
--- 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,7 @@ import { createAnchorAt } from "components/popover/helpers";
 import { ContextMenuActionSet, ContextMenuAction } from "./context-menu-action-set";
 import { Dispatch } from "redux";
 import { memoize } from "lodash";
-import { sortMenuItems, ContextMenuKind } from "./menu-item-sort";
+import { sortMenuItems, ContextMenuKind, menuDirection } from "./menu-item-sort";
 
 type DataProps = Pick<ContextMenuProps, "anchorEl" | "items" | "open"> & { resource?: ContextMenuResource };
 
@@ -66,7 +66,7 @@ export const ContextMenu = connect(mapStateToProps, mapDispatchToProps, mergePro
 const menuActionSets = new Map<string, ContextMenuActionSet>();
 
 export const addMenuActionSet = (name: ContextMenuKind, itemSet: ContextMenuActionSet) => {
-    const sorted = itemSet.map(items => sortMenuItems(name, items));
+    const sorted = itemSet.map(items => sortMenuItems(name, items, menuDirection.VERTICAL));
     menuActionSets.set(name, sorted);
 };
 

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 972f83bc0b67b57589f24ca348e6e553f743bae4..b178edfe10a03dcb213586421aabac8f7fd265d3 100644 (file)
--- a/services/workbench2/src/views-components/context-menu/menu-item-sort.ts
+++ b/services/workbench2/src/views-components/context-menu/menu-item-sort.ts
@@ -5,7 +5,7 @@
 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 { menuDivider } from './actions/context-menu-divider';
+import { horizontalMenuDivider, verticalMenuDivider } from './actions/context-menu-divider';
 
 export enum ContextMenuKind {
     API_CLIENT_AUTHORIZATION = "ApiClientAuthorization",
@@ -67,6 +67,7 @@ const processOrder = [
     ContextMenuActionNames.COPY_AND_RERUN_PROCESS,
     ContextMenuActionNames.MOVE_TO,
     ContextMenuActionNames.REMOVE,
+    ContextMenuActionNames.DIVIDER,
     ContextMenuActionNames.ADD_TO_FAVORITES,
     ContextMenuActionNames.ADD_TO_PUBLIC_FAVORITES,
 ];
@@ -138,7 +139,12 @@ const kindToOrder: Record<string, ContextMenuActionNames[]> = {
     [ContextMenuKind.READONLY_WORKFLOW]: workflowOrder,
 };
 
-export const sortMenuItems = (menuKind: ContextMenuKind, menuItems: ContextMenuAction[]) => {
+export const menuDirection = {
+    VERTICAL: 'vertical',
+    HORIZONTAL: 'horizontal'
+}
+
+export const sortMenuItems = (menuKind: ContextMenuKind, menuItems: ContextMenuAction[], orthagonality: string) => {
 
     const preferredOrder = kindToOrder[menuKind];
     //if no specified order, sort by name
@@ -153,7 +159,7 @@ export const sortMenuItems = (menuKind: ContextMenuKind, menuItems: ContextMenuA
     preferredOrder.forEach((name) => {
         if (name === ContextMenuActionNames.DIVIDER) {
             count++;
-            bucketMap.set(`${name}-${count}`, menuDivider)
+            bucketMap.set(`${name}-${count}`, orthagonality === menuDirection.VERTICAL ? verticalMenuDivider : horizontalMenuDivider)
         } else {
             bucketMap.set(name, null)
         }