21128: dynamic menu types created Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa...

[arvados.git] / src / components / multiselect-toolbar / MultiselectToolbar.tsx

diff --git a/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index e52cef6a5f41773b125c2c0bdca7ccf073dfe908..a8a3f7a8238d3d9ee70b0ea7b8455b260d0b3f6a 100644 (file)
--- a/src/components/multiselect-toolbar/MultiselectToolbar.tsx
+++ b/src/components/multiselect-toolbar/MultiselectToolbar.tsx
@@ -13,7 +13,7 @@ import { ContextMenuResource } from "store/context-menu/context-menu-actions";
 import { Resource, extractUuidKind } from "models/resource";
 import { getResource } from "store/resources/resources";
 import { ResourcesState } from "store/resources/resources";
-import { ContextMenuAction, ContextMenuActionSet } from "views-components/context-menu/context-menu-action-set";
+import { ContextMenuAction, ContextMenuActionSet, DynamicContextMenuAction } from "views-components/context-menu/context-menu-action-set";
 import { RestoreFromTrashIcon, TrashIcon } from "components/icon/icon";
 import { multiselectActionsFilters, TMultiselectActionsFilters, contextMenuActionConsts } from "./ms-toolbar-action-filters";
 import { kindToActionSet, findActionByName } from "./ms-kind-action-differentiator";
@@ -34,8 +34,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         transition: "width 150ms",
     },
     button: {
-        width: "1rem",
-        margin: "auto 5px",
+        width: "2.5rem",
+        height: "2.5rem ",
     },
 });
 
@@ -63,15 +63,17 @@ export const MultiselectToolbar = connect(
             <React.Fragment>
                 <Toolbar
                     className={classes.root}
-                    style={{ width: `${buttons.length * 2.12}rem` }}>
+                    style={{ width: `${buttons.length * 2.5}rem` }}
+                >
                     {buttons.length ? (
                         buttons.map((btn, i) =>
-                            btn.name === "ToggleTrashAction" ? (
+                            btn.defaultText ? (
                                 <Tooltip
                                     className={classes.button}
-                                    title={currentPathIsTrash ? "Restore selected" : "Move to trash"}
+                                    title={!currentPathIsTrash ? btn.defaultText: btn.altText}
                                     key={i}
-                                    disableFocusListener>
+                                    disableFocusListener
+                                >
                                     <IconButton onClick={() => props.executeMulti(btn, checkedList, props.resources)}>
                                         {currentPathIsTrash ? <RestoreFromTrashIcon /> : <TrashIcon />}
                                     </IconButton>
@@ -81,10 +83,9 @@ export const MultiselectToolbar = connect(
                                     className={classes.button}
                                     title={btn.name}
                                     key={i}
-                                    disableFocusListener>
-                                    <IconButton onClick={() => props.executeMulti(btn, checkedList, props.resources)}>
-                                        {btn.icon ? btn.icon({}) : <></>}
-                                    </IconButton>
+                                    disableFocusListener
+                                >
+                                    <IconButton onClick={() => props.executeMulti(btn, checkedList, props.resources)}>{btn.icon ? btn.icon({}) : <></>}</IconButton>
                                 </Tooltip>
                             )
                         )
@@ -93,7 +94,7 @@ export const MultiselectToolbar = connect(
                     )}
                 </Toolbar>
             </React.Fragment>
-        );
+        )
     })
 );
 
@@ -132,9 +133,9 @@ function filterActions(actionArray: ContextMenuActionSet, filters: Set<string>):
 }
 
 function selectActionsByKind(currentResourceKinds: Array<string>, filterSet: TMultiselectActionsFilters) {
-    const rawResult: Set<ContextMenuAction> = new Set();
+    const rawResult: Set<DynamicContextMenuAction> = new Set();
     const resultNames = new Set();
-    const allFiltersArray: ContextMenuAction[][] = [];
+    const allFiltersArray: DynamicContextMenuAction[][] = []
     currentResourceKinds.forEach(kind => {
         if (filterSet[kind]) {
             const actions = filterActions(...filterSet[kind]);