From 4151c412724bc38745958d0c62a427fabff1ac0d Mon Sep 17 00:00:00 2001
From: Lisa Knox <lisaknox83@gmail.com>
Date: Mon, 1 Apr 2024 09:55:50 -0400
Subject: [PATCH] 21448: fixed toolbar divider so it renders consistently
 Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

---
 .../multiselect-toolbar/MultiselectToolbar.tsx  |  3 ++-
 .../actions/context-menu-divider.tsx            | 17 +++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index f9ac243f0d..d8a5fe9023 100644
--- 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 e5c2b35392..77955c2251 100644
--- 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,
-- 
2.30.2