21448: fixed dividers in toolbar menuArvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa...

diff --git a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index 41d25bb6f828a31e94ad9b07f49f48e0ef659952..69f5d036d6c71e9134a3fa5f19b1d01ce0118b36 100644 (file)
--- a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
@@ -39,7 +39,7 @@ import { sortByProperty } from "common/array-utils";
 
 const WIDTH_TRANSITION = 150
 
-type CssRules = "root" | "transition" | "button" | "iconContainer" | "icon";
+type CssRules = "root" | "transition" | "button" | "iconContainer" | "icon" | "divider";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
@@ -72,7 +72,11 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     icon: {
         marginLeft: '-0.5rem',
-    }
+    },
+    divider: {
+        display: "flex",
+        alignItems: "center",
+    },
 });
 
 export type MultiselectToolbarProps = {
@@ -133,15 +137,24 @@ export const MultiselectToolbar = connect(
                         <IntersectionObserverWrapper menuLength={actions.length}>
                             {actions.map((action, i) =>{
                                 const { hasAlts, useAlts, name, altName, icon, altIcon } = action;
-                            return action.name === ContextMenuActionNames.DIVIDER ? (action.component && <action.component data-targetid={name} key={i} />)
-                            : hasAlts ? (
+                            return action.name === ContextMenuActionNames.DIVIDER ? (
+                                action.component && (
+                                    <div
+                                        className={classes.divider}
+                                        data-targetid={`${name}${i}`}
+                                        key={i}
+                                    >
+                                        <action.component />
+                                    </div>
+                                )
+                            ) : hasAlts ? (
                                 <Tooltip
                                     className={classes.button}
                                     data-targetid={name}
                                     title={currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altName : name}
                                     key={i}
                                     disableFocusListener
-                                    >
+                                >
                                     <span className={classes.iconContainer}>
                                         <IconButton
                                             data-cy='multiselect-button'
@@ -160,7 +173,7 @@ export const MultiselectToolbar = connect(
                                     title={action.name}
                                     key={i}
                                     disableFocusListener
-                                    >
+                                >
                                     <span className={classes.iconContainer}>
                                         <IconButton
                                             data-cy='multiselect-button'

diff --git a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx
index fd62b20439a7c2616411a25f5537c8a40608354a..28b82271590a8ed1642198a2b439fa7155bc8547 100644 (file)
--- a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx
@@ -83,7 +83,7 @@ export const OverflowMenu = withStyles(styles)((props: OverflowMenuProps & WithS
                 className={classes.menu}
             >
                 {React.Children.map(children, (child: any) => {
-                    if (!visibilityMap[child.props['data-targetid']] && child.props['data-targetid'] !== 'Divider') {
+                    if (!visibilityMap[child.props['data-targetid']]) {
                         return <MenuItem
                                 key={child}
                                 onClick={handleClose}

diff --git a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
index 32f977e1a4e772004fb2b2d09dc31a146041fed9..e0f32f1fa6e7a8f8a9b6a3ca45e2661b3a5d1272 100644 (file)
--- a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
@@ -127,7 +127,7 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
                     visibilityMap={visibilityMap}
                     className={classes.overflowStyle}
                 >
-                    {children}
+                    {children.filter((child) => !child.props['data-targetid'].includes("Divider"))}
                 </OverflowMenu>
             )}
         </div>