21224: css tweaks Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

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

diff --git a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index 2a4f3f09e3e45111554194703b05b92b7d953a48..ceefb34a2ed3d3e845b071b183958493be788b57 100644 (file)
--- a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
@@ -45,18 +45,16 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         display: "flex",
         flexDirection: "row",
         width: 0,
-        height: '2.7rem',
+        height: '2.5rem',
         padding: 0,
-        margin: "1rem auto auto 0.3rem",
         transition: `width ${WIDTH_TRANSITION}ms`,
         overflow: 'hidden',
     },
     transition: {
         display: "flex",
         flexDirection: "row",
-        height: '2.7rem',
+        height: '2.5rem',
         padding: 0,
-        margin: "1rem auto auto 0.3rem",
         overflow: 'hidden',
         transition: `width ${WIDTH_TRANSITION}ms`,
     },
@@ -82,7 +80,8 @@ export type MultiselectToolbarProps = {
     disabledButtons: Set<string>
     auth: AuthState;
     location: string;
-    executeMulti: (action: ContextMenuAction | MultiSelectMenuAction, inputSelectedUuid: string | null, checkedList: TCheckedList, resources: ResourcesState) => void;
+    isSubPanel?: boolean;
+    executeMulti: (action: ContextMenuAction | MultiSelectMenuAction, checkedList: TCheckedList, resources: ResourcesState) => void;
 };
 
 type IconProps = {
@@ -91,13 +90,25 @@ type IconProps = {
     publicFavorites: PublicFavoritesState;
 }
 
+const disallowedPaths = [
+    "/favorites",
+    "/public-favorites",
+    "/trash",
+    "/group",
+]
+
+const isPathDisallowed = (location: string): boolean => {
+    return disallowedPaths.some(path => location.includes(path))
+}
+
 export const MultiselectToolbar = connect(
     mapStateToProps,
     mapDispatchToProps
 )(
     withStyles(styles)((props: MultiselectToolbarProps & WithStyles<CssRules>) => {
-        const { classes, checkedList, iconProps, user, disabledButtons, selectedResourceUuid, location } = props;
-        const singleResourceKind = selectedResourceUuid ? [resourceToMsResourceKind(selectedResourceUuid, iconProps.resources, user)] : null
+        const { classes, checkedList, iconProps, user, disabledButtons, location, isSubPanel } = props;
+        const selectedResourceUuid = isPathDisallowed(location) ? null : props.selectedResourceUuid;
+        const singleResourceKind = selectedResourceUuid && !isSubPanel ? [resourceToMsResourceKind(selectedResourceUuid, iconProps.resources, user)] : null
         const currentResourceKinds = singleResourceKind ? singleResourceKind : Array.from(selectedToKindSet(checkedList));
         const currentPathIsTrash = location.includes("/trash");
         const [isTransitioning, setIsTransitioning] = useState(false);
@@ -125,11 +136,13 @@ export const MultiselectToolbar = connect(
                         selectedResourceUuid === null ? action.isForMulti : true
                     );
 
+        const targetResources = selectedResourceUuid ? {[selectedResourceUuid]: true} as TCheckedList : checkedList
+
         return (
             <React.Fragment>
                 <Toolbar
                     className={isTransitioning ? classes.transition: classes.root}
-                    style={{ width: `${(actions.length * 2.5) + 6}rem`}}
+                    style={{ width: `${(actions.length * 2.5) + 2}rem`}}
                     data-cy='multiselect-toolbar'
                     >
                     {actions.length ? (
@@ -148,7 +161,7 @@ export const MultiselectToolbar = connect(
                                         <IconButton
                                             data-cy='multiselect-button'
                                             disabled={disabledButtons.has(name)}
-                                            onClick={() => props.executeMulti(action, selectedResourceUuid, checkedList, iconProps.resources)}
+                                            onClick={() => props.executeMulti(action, targetResources, iconProps.resources)}
                                             className={classes.icon}
                                         >
                                             {currentPathIsTrash || (useAlts && useAlts(selectedResourceUuid, iconProps)) ? altIcon && altIcon({}) : icon({})}
@@ -167,7 +180,7 @@ export const MultiselectToolbar = connect(
                                         <IconButton
                                             data-cy='multiselect-button'
                                             onClick={() => {
-                                                props.executeMulti(action, selectedResourceUuid, checkedList, iconProps.resources)}}
+                                                props.executeMulti(action, targetResources, iconProps.resources)}}
                                             className={classes.icon}
                                         >
                                             {action.icon({})}
@@ -226,7 +239,7 @@ const resourceToMsResourceKind = (uuid: string, resources: ResourcesState, user:
     const { isAdmin } = user;
     const kind = extractUuidKind(uuid);
 
-    const isFrozen = resourceIsFrozen(resource, resources);
+    const isFrozen = resource?.kind && resource.kind === ResourceKind.PROJECT ? resourceIsFrozen(resource, resources) : false;
     const isEditable = (user.isAdmin || (resource || ({} as EditableResource)).isEditable) && !readonly && !isFrozen;
 
     switch (kind) {
@@ -345,9 +358,9 @@ function mapStateToProps({auth, multiselect, resources, favorites, publicFavorit
 
 function mapDispatchToProps(dispatch: Dispatch) {
     return {
-        executeMulti: (selectedAction: ContextMenuAction, inputSelectedUuid: string | null, checkedList: TCheckedList, resources: ResourcesState): void => {
-            const kindGroups = inputSelectedUuid ? groupByKind({[inputSelectedUuid]: true}, resources) : groupByKind(checkedList, resources);
-            const currentList = inputSelectedUuid ? [inputSelectedUuid] : selectedToArray(checkedList)
+        executeMulti: (selectedAction: ContextMenuAction, checkedList: TCheckedList, resources: ResourcesState): void => {
+            const kindGroups = groupByKind(checkedList, resources);
+            const currentList = selectedToArray(checkedList)
             switch (selectedAction.name) {
                 case MultiSelectMenuActionNames.MOVE_TO:
                 case MultiSelectMenuActionNames.REMOVE: