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 ea00860d26f38ca12de85dc9e4679039203c6887..94570c6c7ddc3bb319a539f09a92fbba8de75680 100644 (file)
--- a/src/components/multiselectToolbar/MultiselectToolbar.tsx
+++ b/src/components/multiselectToolbar/MultiselectToolbar.tsx
@@ -2,51 +2,60 @@
 //
 // 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';
+import { TCheckedList } from 'components/data-table/data-table';
 
-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',
     },
 });
 
 type MultiselectToolbarAction = {
-    name: string;
-    fn: () => void;
+    fn: (checkedList) => ReactElement;
 };
 
-export type MultiselectToolbarActions = {
-    actions: Array<MultiselectToolbarAction>;
+export type MultiselectToolbarProps = {
+    buttons: Array<MultiselectToolbarAction>;
+    checkedList: TCheckedList;
 };
 
 export const defaultActions: Array<MultiselectToolbarAction> = [
     {
-        name: 'foo',
-        fn: () => console.log('yo'),
+        fn: (checkedList) => MSToolbarCopyButton(checkedList),
     },
 ];
 
-type MultiselectToolbarProps = MultiselectToolbarActions & WithStyles<CssRules>;
+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>} />;
+};
 
 export const MultiselectToolbar = connect(mapStateToProps)(
-    withStyles(styles)((props: MultiselectToolbarProps) => {
-        const { classes, actions } = props;
+    withStyles(styles)((props: MultiselectToolbarProps & WithStyles<CssRules>) => {
+        const { classes, buttons, checkedList } = props;
         return (
             <Toolbar className={classes.root}>
-                {actions.map((action, i) => (
-                    <Button key={i} onClick={action.fn}>
-                        {action.name}
+                {buttons.map((btn, i) => (
+                    <Button key={i} className={classes.button}>
+                        {btn.fn(checkedList)}
                     </Button>
                 ))}
             </Toolbar>
@@ -56,6 +65,6 @@ export const MultiselectToolbar = connect(mapStateToProps)(
 
 function mapStateToProps(state: RootState) {
     return {
-        state: state,
+        checkedList: state.multiselect.checkedList,
     };
 }