toolbar selects for appropriate buttons, just not very well Arvados-DCO-1.1-Signed...

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 508413ffe480a6c062ebf5e4cf023c43e21c7f72..67c6e748aeb72fadfdc94d5d68780351eb787551 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -232,7 +232,7 @@ export const DataExplorer = withStyles(styles)(
                                         )}
                                     </Toolbar>
                                     {/* {isMSToolbarVisible && <MultiselectToolbar buttons={defaultActions} />} */}
-                                    <MultiselectToolbar buttons={defaultActions} />
+                                    <MultiselectToolbar actions={defaultActions} />
                                 </Grid>
                             )}
                         </div>

diff --git a/src/components/multiselectToolbar/MultiselectToolbar.tsx b/src/components/multiselectToolbar/MultiselectToolbar.tsx
index c0d3f564d7750a2fffe1d957cff0726333d7117a..4cec2d6d0837ca3b0a88ec4cda9cea6dcc16ca61 100644 (file)
--- a/src/components/multiselectToolbar/MultiselectToolbar.tsx
+++ b/src/components/multiselectToolbar/MultiselectToolbar.tsx
@@ -14,6 +14,7 @@ import { openRemoveProcessDialog, openRemoveManyProcessesDialog } from 'store/pr
 import { processResourceActionSet } from '../../views-components/context-menu/action-sets/process-resource-action-set';
 import { ContextMenuResource } from 'store/context-menu/context-menu-actions';
 import { toggleTrashed } from 'store/trash/trash-actions';
+import { ResourceKind, extractUuidKind } from 'models/resource';
 
 type CssRules = 'root' | 'expanded' | 'button';
 
@@ -21,25 +22,21 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
         display: 'flex',
         flexDirection: 'row',
-        justifyContent: 'start',
-        width: '0px',
+        width: 0,
         padding: 0,
         margin: '1rem auto auto 0.5rem',
         overflow: 'hidden',
-        transition: 'width 150ms',
-        transitionTimingFunction: 'ease',
     },
     expanded: {
         transition: 'width 150ms',
         transitionTimingFunction: 'ease-in',
-        width: '40%',
     },
     button: {
         backgroundColor: '#017ead',
         color: 'white',
         fontSize: '0.75rem',
-        width: 'fit-content',
-        margin: '2px',
+        width: 'auto',
+        margin: 'auto',
         padding: '1px',
     },
 });
@@ -47,25 +44,29 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 type MultiselectToolbarAction = {
     name: string;
     action: string;
+    relevantKinds: Array<ResourceKind>;
 };
 
 export const defaultActions: Array<MultiselectToolbarAction> = [
     {
         name: 'copy',
         action: 'copySelected',
+        relevantKinds: [ResourceKind.COLLECTION],
     },
     {
         name: 'move',
         action: 'moveSelected',
+        relevantKinds: [ResourceKind.COLLECTION, ResourceKind.PROCESS],
     },
     {
         name: 'remove',
         action: 'removeSelected',
+        relevantKinds: [ResourceKind.COLLECTION],
     },
 ];
 
 export type MultiselectToolbarProps = {
-    buttons: Array<MultiselectToolbarAction>;
+    actions: Array<MultiselectToolbarAction>;
     isVisible: boolean;
     checkedList: TCheckedList;
     copySelected: () => void;
@@ -79,14 +80,32 @@ export const MultiselectToolbar = connect(
 )(
     withStyles(styles)((props: MultiselectToolbarProps & WithStyles<CssRules>) => {
         // console.log(props);
-        const { classes, buttons, isVisible, checkedList } = props;
+        const { classes, actions, isVisible, checkedList } = props;
+
+        //include any action that can be applied to all selected elements
+
+        const currentResourceKinds = new Set(selectedToArray(checkedList).map((element) => extractUuidKind(element) as string));
+        console.log('CURRENT_KINDS', currentResourceKinds);
+        const buttons = actions.filter((action) => {
+            // console.log('ACTION.KINDS', action.relevantKinds);
+            return action.relevantKinds.every((kind) => {
+                // console.log('KIND', kind);
+                // console.log('setHasKind', currentResourceKinds.has(kind));
+                return currentResourceKinds.has(kind);
+            });
+        });
+        // console.log('BUTTONS', buttons);
         return (
-            <Toolbar className={isVisible ? `${classes.root} ${classes.expanded}` : classes.root}>
-                {buttons.map((btn) => (
-                    <Button key={btn.name} className={`${classes.button} ${classes.expanded}`} onClick={() => props[btn.action](checkedList)}>
-                        {btn.name}
-                    </Button>
-                ))}
+            <Toolbar className={isVisible && buttons.length ? `${classes.root} ${classes.expanded}` : classes.root} style={{ width: `${buttons.length * 5.8}rem` }}>
+                {buttons.length ? (
+                    buttons.map((btn) => (
+                        <Button key={btn.name} className={`${classes.button} ${classes.expanded}`} onClick={() => props[btn.action](checkedList)}>
+                            {btn.name}
+                        </Button>
+                    ))
+                ) : (
+                    <></>
+                )}
             </Toolbar>
         );
     })
@@ -102,8 +121,8 @@ function selectedToString(checkedList: TCheckedList) {
     return stringifiedSelectedList.slice(0, -1);
 }
 
-function selectedToArray<T>(checkedList: TCheckedList): Array<T | string> {
-    const arrayifiedSelectedList: Array<T | string> = [];
+function selectedToArray<T>(checkedList: TCheckedList): Array<string> {
+    const arrayifiedSelectedList: Array<string> = [];
     for (const [key, value] of Object.entries(checkedList)) {
         if (value === true) {
             arrayifiedSelectedList.push(key);