21448: fixed toolbar divider so it renders consistently Arvados-DCO-1.1-Signed-off...

diff --git a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index f9ac243f0d9c69e6dd354c88031f95f37902317f..d8a5fe9023c3532d5225393fbe6cee628830b83f 100644 (file)
--- a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
@@ -133,7 +133,8 @@ export const MultiselectToolbar = connect(
                         <IntersectionObserverWrapper menuLength={actions.length}>
                             {actions.map((action, i) =>{
                                 const { hasAlts, useAlts, name, altName, icon, altIcon } = action;
-                            return hasAlts ? (
+                            return action.name === ContextMenuActionNames.DIVIDER ? (action.component && <action.component />)
+                            : hasAlts ? (
                                 <Tooltip
                                     className={classes.button}
                                     data-targetid={name}

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 e5c2b353927dd9792b68a11a69544345b8dcf4f8..77955c22515287b113f7fc2dc92365e17800aec5 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,38 +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 { ArvadosTheme } from 'common/custom-theme';
 import { VerticalLineDivider } from 'components/icon/icon';
 
 type CssRules = 'horizontal' | 'vertical';
 
-const styles:StyleRulesCallback<CssRules> = () => ({
+const styles:StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
   horizontal: {
       backgroundColor: 'black',
   },
   vertical: {
-      backgroundColor: 'black',
-      transform: 'rotate(90deg)',
+    color: theme.palette.grey["400"],
+    margin: 'auto 0',
+    transform: 'scaleY(1.25)',
   },
 });
 
 export const VerticalLine = withStyles(styles)((props: WithStyles<CssRules>) => {
-  return  <DividerComponent variant='middle' className={props.classes.vertical}/>;
+  return  <VerticalLineDivider className={props.classes.vertical} />;
 });
 
 export const HorizontalLine = withStyles(styles)((props: WithStyles<CssRules>) => {
   return  <DividerComponent variant='middle' className={props.classes.horizontal} />;
 });
 
-//msToolbar only renders icon and not component
 export const horizontalMenuDivider: ContextMenuAction = {
-  name: 'divider',
-  icon: VerticalLineDivider,
+  name: 'Divider',
+  icon: () => null,
   component: VerticalLine,
   execute: () => null,
 };
 
 export const verticalMenuDivider: ContextMenuAction = {
-  name: 'divider',
+  name: 'Divider',
   icon: () => null,
   component: HorizontalLine,
   execute: () => null,