17782: Merge branch 'main' into 17782-react-scripts-ts-migration

[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..7695837e6ff44768c1b9e747e67bc4f63c29b141 100644 (file)
--- a/src/views-components/process-command-dialog/process-command-dialog.tsx
+++ b/src/views-components/process-command-dialog/process-command-dialog.tsx
@@ -2,21 +2,26 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from "react";
-import { Dialog, DialogTitle, DialogActions, Button, StyleRulesCallback, WithStyles, withStyles } 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 React from "react";
+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 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