21128: created ms-menu-action-set and moved name consts into it Arvados-DCO-1.1-Signe...

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

diff --git a/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index 2406ef6271dfb396562c4924d2a7881ae716798f..185f8e0f4ad5b6f0aa2cf829a32e545ac40f9595 100644 (file)
--- a/src/components/multiselect-toolbar/MultiselectToolbar.tsx
+++ b/src/components/multiselect-toolbar/MultiselectToolbar.tsx
@@ -13,12 +13,13 @@ 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 { MultiSelectMenuAction, MultiSelectMenuActionNames } from "views-components/multiselect-toolbar/ms-menu-action-set";
 import { ContextMenuAction, ContextMenuActionSet } 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 { multiselectActionsFilters, TMultiselectActionsFilters } from "./ms-toolbar-action-filters";
 import { kindToActionSet, findActionByName } from "./ms-kind-action-differentiator";
-import { toggleTrashAction } from "views-components/context-menu/action-sets/project-action-set";
+import { msToggleTrashAction } from "views-components/multiselect-toolbar/ms-project-action-set";
 import { copyToClipboardAction } from "store/open-in-new-tab/open-in-new-tab.actions";
+import { ContainerRequestResource } from "models/container-request";
 
 type CssRules = "root" | "button";
 
@@ -33,13 +34,12 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         transition: "width 150ms",
     },
     button: {
-        width: "1rem",
-        margin: "auto 5px",
+        width: "2.5rem",
+        height: "2.5rem ",
     },
 });
 
 export type MultiselectToolbarProps = {
-    isVisible: boolean;
     checkedList: TCheckedList;
     resources: ResourcesState;
     executeMulti: (action: ContextMenuAction, checkedList: TCheckedList, resources: ResourcesState) => void;
@@ -56,42 +56,45 @@ export const MultiselectToolbar = connect(
         const currentPathIsTrash = window.location.pathname === "/trash";
         const buttons =
             currentPathIsTrash && selectedToKindSet(checkedList).size
-                ? [toggleTrashAction]
+                ? [msToggleTrashAction]
                 : selectActionsByKind(currentResourceKinds, multiselectActionsFilters);
 
         return (
-            <Toolbar
-                className={classes.root}
-                style={{ width: `${buttons.length * 2.12}rem` }}>
-                {buttons.length ? (
-                    buttons.map((btn, i) =>
-                        btn.name === "ToggleTrashAction" ? (
-                            <Tooltip
-                                className={classes.button}
-                                title={currentPathIsTrash ? "Restore selected" : "Move to trash"}
-                                key={i}
-                                disableFocusListener>
-                                <IconButton onClick={() => props.executeMulti(btn, checkedList, props.resources)}>
-                                    {currentPathIsTrash ? <RestoreFromTrashIcon /> : <TrashIcon />}
-                                </IconButton>
-                            </Tooltip>
-                        ) : (
-                            <Tooltip
-                                className={classes.button}
-                                title={btn.name}
-                                key={i}
-                                disableFocusListener>
-                                <IconButton onClick={() => props.executeMulti(btn, checkedList, props.resources)}>
-                                    {btn.icon ? btn.icon({}) : <></>}
-                                </IconButton>
-                            </Tooltip>
+            <React.Fragment>
+                <Toolbar
+                    className={classes.root}
+                    style={{ width: `${buttons.length * 2.5}rem` }}
+                >
+                    {buttons.length ? (
+                        buttons.map((btn, i) =>
+                            btn.defaultText ? (
+                                <Tooltip
+                                    className={classes.button}
+                                    title={!currentPathIsTrash ? btn.defaultText : btn.altText}
+                                    key={i}
+                                    disableFocusListener
+                                >
+                                    <IconButton onClick={() => props.executeMulti(btn, checkedList, props.resources)}>
+                                        {!currentPathIsTrash ? btn.icon({}) : btn.altIcon({})}
+                                    </IconButton>
+                                </Tooltip>
+                            ) : (
+                                <Tooltip
+                                    className={classes.button}
+                                    title={btn.name}
+                                    key={i}
+                                    disableFocusListener
+                                >
+                                    <IconButton onClick={() => props.executeMulti(btn, checkedList, props.resources)}>{btn.icon ? btn.icon({}) : <></>}</IconButton>
+                                </Tooltip>
+                            )
                         )
-                    )
-                ) : (
-                    <></>
-                )}
-            </Toolbar>
-        );
+                    ) : (
+                        <></>
+                    )}
+                </Toolbar>
+            </React.Fragment>
+        )
     })
 );
 
@@ -118,7 +121,7 @@ export function selectedToKindSet(checkedList: TCheckedList): Set<string> {
 function groupByKind(checkedList: TCheckedList, resources: ResourcesState): Record<string, ContextMenuResource[]> {
     const result = {};
     selectedToArray(checkedList).forEach(uuid => {
-        const resource = getResource(uuid)(resources) as Resource;
+        const resource = getResource(uuid)(resources) as ContainerRequestResource | Resource;
         if (!result[resource.kind]) result[resource.kind] = [];
         result[resource.kind].push(resource);
     });
@@ -130,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<MultiSelectMenuAction> = new Set();
     const resultNames = new Set();
-    const allFiltersArray: ContextMenuAction[][] = [];
+    const allFiltersArray: MultiSelectMenuAction[][] = []
     currentResourceKinds.forEach(kind => {
         if (filterSet[kind]) {
             const actions = filterActions(...filterSet[kind]);
@@ -175,11 +178,8 @@ function selectActionsByKind(currentResourceKinds: Array<string>, filterSet: TMu
 //--------------------------------------------------//
 
 function mapStateToProps(state: RootState) {
-    const { isVisible, checkedList } = state.multiselect;
-    // if (Object.keys(state.dialog).length) console.log("latest dialog", state.dialog); //here
     return {
-        isVisible: isVisible,
-        checkedList: checkedList as TCheckedList,
+        checkedList: state.multiselect.checkedList as TCheckedList,
         resources: state.resources,
     };
 }
@@ -189,13 +189,13 @@ function mapDispatchToProps(dispatch: Dispatch) {
         executeMulti: (selectedAction: ContextMenuAction, checkedList: TCheckedList, resources: ResourcesState): void => {
             const kindGroups = groupByKind(checkedList, resources);
             switch (selectedAction.name) {
-                case contextMenuActionConsts.MOVE_TO:
-                case contextMenuActionConsts.REMOVE:
-                    const firstResource = getResource(selectedToArray(checkedList)[0])(resources) as Resource;
+                case MultiSelectMenuActionNames.MOVE_TO:
+                case MultiSelectMenuActionNames.REMOVE:
+                    const firstResource = getResource(selectedToArray(checkedList)[0])(resources) as ContainerRequestResource | Resource;
                     const action = findActionByName(selectedAction.name as string, kindToActionSet[firstResource.kind]);
                     if (action) action.execute(dispatch, kindGroups[firstResource.kind]);
                     break;
-                case contextMenuActionConsts.COPY_TO_CLIPBOARD:
+                case MultiSelectMenuActionNames.COPY_TO_CLIPBOARD:
                     const selectedResources = selectedToArray(checkedList).map(uuid => getResource(uuid)(resources));
                     dispatch<any>(copyToClipboardAction(selectedResources));
                     break;