Merge branch 'master' into 14604-ui-improvements

[arvados-workbench2.git] / src / views-components / process-command-dialog / process-command-dialog.tsx

diff --git a/src/views-components/process-command-dialog/process-command-dialog.tsx b/src/views-components/process-command-dialog/process-command-dialog.tsx
index 4bde68d8be42776c5a2ca891d73db6ce712c9458..f6f02a5bfba0cb1e95f049524b977157827f2a46 100644 (file)
--- a/src/views-components/process-command-dialog/process-command-dialog.tsx
+++ b/src/views-components/process-command-dialog/process-command-dialog.tsx
@@ -3,20 +3,25 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from "react";
-import { Dialog, DialogTitle, DialogActions, Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import { Dialog, DialogActions, Button, StyleRulesCallback, WithStyles, withStyles, Tooltip, IconButton, CardHeader } from '@material-ui/core';
 import { withDialog } from "~/store/dialog/with-dialog";
 import { PROCESS_COMMAND_DIALOG_NAME } from '~/store/processes/process-command-actions';
 import { WithDialogProps } from '~/store/dialog/with-dialog';
 import { ProcessCommandDialogData } from '~/store/processes/process-command-actions';
 import { DefaultCodeSnippet } from "~/components/default-code-snippet/default-code-snippet";
 import { compose } from 'redux';
+import * as CopyToClipboard from "react-copy-to-clipboard";
+import { CopyIcon } from '~/components/icon/icon';
 
-type CssRules = 'codeSnippet';
+type CssRules = 'codeSnippet' | 'copyToClipboard';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     codeSnippet: {
         marginLeft: theme.spacing.unit * 3,
         marginRight: theme.spacing.unit * 3,
+    },
+    copyToClipboard: {
+        marginRight: theme.spacing.unit,
     }
 });
 
@@ -30,13 +35,23 @@ export const ProcessCommandDialog = compose(
             maxWidth="md"
             onClose={props.closeDialog}
             style={{ alignSelf: 'stretch' }}>
-            <DialogTitle>{`Command - ${props.data.processName}`}</DialogTitle>
+            <CardHeader
+                title={`Command - ${props.data.processName}`}
+                action={
+                    <Tooltip title="Copy to clipboard">
+                        <CopyToClipboard text={props.data.command}>
+                            <IconButton className={props.classes.copyToClipboard}>
+                                <CopyIcon />
+                            </IconButton>
+                        </CopyToClipboard>
+                    </Tooltip>
+                } />
             <DefaultCodeSnippet
                 className={props.classes.codeSnippet}
                 lines={[props.data.command]} />
             <DialogActions>
                 <Button
-                    variant='flat'
+                    variant='text'
                     color='primary'
                     onClick={props.closeDialog}>
                     Close