import { Resource, ResourceKind, extractUuidKind } from "models/resource";
import { getResource } from "store/resources/resources";
import { ResourcesState } from "store/resources/resources";
-import { MultiSelectMenuAction, MultiSelectMenuActionSet, MultiSelectMenuActionNames } from "views-components/multiselect-toolbar/ms-menu-actions";
+import { MultiSelectMenuAction, MultiSelectMenuActionSet } from "views-components/multiselect-toolbar/ms-menu-actions";
+import { MultiSelectMenuActionNames } from "views-components/multiselect-toolbar/ms-menu-actions";
import { ContextMenuAction } from "views-components/context-menu/context-menu-action-set";
import { multiselectActionsFilters, TMultiselectActionsFilters, msMenuResourceKind } from "./ms-toolbar-action-filters";
import { kindToActionSet, findActionByName } from "./ms-kind-action-differentiator";
import { getProcess } from "store/processes/process";
import { Process } from "store/processes/process";
import { PublicFavoritesState } from "store/public-favorites/public-favorites-reducer";
+import { isExactlyOneSelected } from "store/multiselect/multiselect-actions";
type CssRules = "root" | "button" | "iconContainer";
display: "flex",
flexDirection: "row",
width: 0,
+ height: '2.7rem',
padding: 0,
margin: "1rem auto auto 0.5rem",
- overflowY: 'scroll',
+ overflowY: 'auto',
transition: "width 150ms",
+ scrollBehavior: 'smooth',
+ '&::-webkit-scrollbar': {
+ width: 0,
+ height: 2
+ },
+ '&::-webkit-scrollbar-track': {
+ width: 0,
+ height: 2
+ },
+ '&::-webkit-scrollbar-thumb': {
+ backgroundColor: '#757575',
+ borderRadius: 2
+ }
},
button: {
width: "2.5rem",
mapDispatchToProps
)(
withStyles(styles)((props: MultiselectToolbarProps & WithStyles<CssRules>) => {
- const { classes, checkedList, singleSelectedUuid, iconProps, user , disabledButtons} = props;
+ const { classes, checkedList, singleSelectedUuid, iconProps, user, disabledButtons } = props;
const singleResourceKind = singleSelectedUuid ? [resourceToMsResourceKind(singleSelectedUuid, iconProps.resources, user)] : null
const currentResourceKinds = singleResourceKind ? singleResourceKind : Array.from(selectedToKindSet(checkedList));
const currentPathIsTrash = window.location.pathname === "/trash";
<Toolbar
className={classes.root}
style={{ width: `${(actions.length * 2.5) + 1}rem` }}
+ data-cy='multiselect-toolbar'
>
{actions.length ? (
actions.map((action, i) =>{
const { hasAlts, useAlts, name, altName, icon, altIcon } = action;
return hasAlts ? (
<Tooltip
- className={classes.button}
- title={currentPathIsTrash || useAlts && useAlts(singleSelectedUuid, iconProps) ? action.altName : action.name}
- key={i}
- disableFocusListener
+ className={classes.button}
+ title={currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altName : name}
+ key={i}
+ disableFocusListener
+ >
+ <span className={classes.iconContainer}>
+ <IconButton
+ data-cy='multiselect-button'
+ disabled={disabledButtons.has(name)}
+ onClick={() => props.executeMulti(action, checkedList, iconProps.resources)}
+ >
+ {currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altIcon && altIcon({}) : icon({})}
+ </IconButton>
+ </span>
+ </Tooltip>
+ ) : (
+ <Tooltip
+ className={classes.button}
+ title={action.name}
+ key={i}
+ disableFocusListener
>
- <span className={classes.iconContainer}>
- <IconButton disabled={disabledButtons.has(name)} onClick={() => props.executeMulti(action, checkedList, iconProps.resources)}>
- {currentPathIsTrash || useAlts && useAlts(singleSelectedUuid, iconProps) ? altIcon && altIcon({}) : icon({})}
- </IconButton>
- </span>
- </Tooltip>
- ) : (
- <Tooltip
- className={classes.button}
- title={action.name}
- key={i}
- disableFocusListener
- >
- <span className={classes.iconContainer}>
- <IconButton onClick={() => props.executeMulti(action, checkedList, iconProps.resources)}>{action.icon({})}</IconButton>
- </span>
- </Tooltip>
- )
+ <span className={classes.iconContainer}>
+ <IconButton
+ data-cy='multiselect-button'
+ onClick={() => props.executeMulti(action, checkedList, iconProps.resources)}
+ >
+ {action.icon({})}
+ </IconButton>
+ </span>
+ </Tooltip>
+ );
})
) : (
<></>
});
}
-export const isExactlyOneSelected = (checkedList: TCheckedList) => {
- let tally = 0;
- let current = '';
- for (const uuid in checkedList) {
- if (checkedList[uuid] === true) {
- tally++;
- current = uuid;
- }
- }
- return tally === 1 ? current : null
-};
//--------------------------------------------------//