15768: copy button copies foo Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox...

diff --git a/src/components/multiselectToolbar/MultiselectToolbar.tsx b/src/components/multiselectToolbar/MultiselectToolbar.tsx
index ea00860d26f38ca12de85dc9e4679039203c6887..d857d7ffa07dae596ffc999bbd6209ec958c5e07 100644 (file)
--- a/src/components/multiselectToolbar/MultiselectToolbar.tsx
+++ b/src/components/multiselectToolbar/MultiselectToolbar.tsx
@@ -2,20 +2,21 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { connect } from 'react-redux';
 import { StyleRulesCallback, withStyles, WithStyles, Toolbar, Button } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
 import { RootState } from 'store/store';
+import { CopyToClipboardSnackbar } from 'components/copy-to-clipboard-snackbar/copy-to-clipboard-snackbar';
 
-type CssRules = 'root' | 'item';
+type CssRules = 'root' | 'button';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
         display: 'flex',
         flexDirection: 'row',
     },
-    item: {
+    button: {
         color: theme.palette.text.primary,
         margin: '0.5rem',
     },
@@ -23,7 +24,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 
 type MultiselectToolbarAction = {
     name: string;
-    fn: () => void;
+    fn: () => ReactElement;
 };
 
 export type MultiselectToolbarActions = {
@@ -33,10 +34,18 @@ export type MultiselectToolbarActions = {
 export const defaultActions: Array<MultiselectToolbarAction> = [
     {
         name: 'foo',
-        fn: () => console.log('yo'),
+        fn: () => MSToolbarCopyButton({ button: { border: '1px solid blue' } }),
     },
 ];
 
+const MSToolbarCopyButton = (classes) => {
+    return (
+        <Button className={classes.button}>
+            <CopyToClipboardSnackbar value='foo' children={<div>Copy</div>} />
+        </Button>
+    );
+};
+
 type MultiselectToolbarProps = MultiselectToolbarActions & WithStyles<CssRules>;
 
 export const MultiselectToolbar = connect(mapStateToProps)(
@@ -45,10 +54,12 @@ export const MultiselectToolbar = connect(mapStateToProps)(
         return (
             <Toolbar className={classes.root}>
                 {actions.map((action, i) => (
-                    <Button key={i} onClick={action.fn}>
+                    <Button key={i} className={classes.button} onClick={action.fn}>
                         {action.name}
                     </Button>
                 ))}
+                <MSToolbarCopyButton />
+                {/* <CopyToClipboardSnackbar value='foo' children={<div>test</div>} /> */}
             </Toolbar>
         );
     })
@@ -56,6 +67,6 @@ export const MultiselectToolbar = connect(mapStateToProps)(
 
 function mapStateToProps(state: RootState) {
     return {
-        state: state,
+        // state: state,
     };
 }