15768: copy button copies string of selected uuids Arvados-DCO-1.1-Signed-off-by...

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

diff --git a/src/components/multiselectToolbar/MultiselectToolbar.tsx b/src/components/multiselectToolbar/MultiselectToolbar.tsx
index 6620792e11787de49bff66cc91ce614d3c40c675..94570c6c7ddc3bb319a539f09a92fbba8de75680 100644 (file)
--- a/src/components/multiselectToolbar/MultiselectToolbar.tsx
+++ b/src/components/multiselectToolbar/MultiselectToolbar.tsx
@@ -8,6 +8,7 @@ import { StyleRulesCallback, withStyles, WithStyles, Toolbar, Button } from '@ma
 import { ArvadosTheme } from 'common/custom-theme';
 import { RootState } from 'store/store';
 import { CopyToClipboardSnackbar } from 'components/copy-to-clipboard-snackbar/copy-to-clipboard-snackbar';
+import { TCheckedList } from 'components/data-table/data-table';
 
 type CssRules = 'root' | 'button';
 
@@ -23,38 +24,47 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 });
 
 type MultiselectToolbarAction = {
-    fn: (classes, i) => ReactElement;
+    fn: (checkedList) => ReactElement;
 };
 
-export type MultiselectToolbarActions = {
+export type MultiselectToolbarProps = {
     buttons: Array<MultiselectToolbarAction>;
+    checkedList: TCheckedList;
 };
 
 export const defaultActions: Array<MultiselectToolbarAction> = [
     {
-        fn: (classes, i) => MSToolbarCopyButton(classes, i),
+        fn: (checkedList) => MSToolbarCopyButton(checkedList),
     },
 ];
 
-const MSToolbarCopyButton = (classes, i) => {
-    return (
-        <Button key={i} className={classes.button}>
-            <CopyToClipboardSnackbar value='foo' children={<div>Copy</div>} />
-        </Button>
-    );
+const MSToolbarCopyButton = (checkedList) => {
+    let stringifiedSelectedList: string = '';
+    for (const [key, value] of Object.entries(checkedList)) {
+        if (value === true) {
+            stringifiedSelectedList += key + '\n';
+        }
+    }
+    return <CopyToClipboardSnackbar value={stringifiedSelectedList} children={<div>Copy</div>} />;
 };
 
-type MultiselectToolbarProps = MultiselectToolbarActions & WithStyles<CssRules>;
-
 export const MultiselectToolbar = connect(mapStateToProps)(
-    withStyles(styles)((props: MultiselectToolbarProps) => {
-        const { classes, buttons } = props;
-        return <Toolbar className={classes.root}>{buttons.map((btn, i) => btn.fn(classes, i))}</Toolbar>;
+    withStyles(styles)((props: MultiselectToolbarProps & WithStyles<CssRules>) => {
+        const { classes, buttons, checkedList } = props;
+        return (
+            <Toolbar className={classes.root}>
+                {buttons.map((btn, i) => (
+                    <Button key={i} className={classes.button}>
+                        {btn.fn(checkedList)}
+                    </Button>
+                ))}
+            </Toolbar>
+        );
     })
 );
 
 function mapStateToProps(state: RootState) {
     return {
-        // state: state,
+        checkedList: state.multiselect.checkedList,
     };
 }