From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Tue, 25 Sep 2018 12:39:53 +0000 (+0200)
Subject: Make use of ahell-quote lib in command window, add copy command button
X-Git-Tag: 1.3.0~79^2
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/06454ba23d896ba99d1f8ddca101088b96806966

Make use of ahell-quote lib in command window, add copy command button

Feature #14224

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
---

diff --git a/package.json b/package.json
index 620ff5a6..811e4a07 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@types/react-copy-to-clipboard": "4.2.6",
     "@types/react-dropzone": "4.2.2",
     "@types/redux-form": "7.4.5",
+    "@types/shell-quote": "1.6.0",
     "axios": "0.18.0",
     "classnames": "2.2.6",
     "lodash": "4.17.10",
@@ -25,6 +26,7 @@
     "react-transition-group": "2.4.0",
     "redux": "4.0.0",
     "redux-thunk": "2.3.0",
+    "shell-quote": "1.6.1",
     "unionize": "2.1.2",
     "uuid": "3.3.2"
   },
diff --git a/src/store/processes/process-command-actions.ts b/src/store/processes/process-command-actions.ts
index de55a2cb..6c765568 100644
--- a/src/store/processes/process-command-actions.ts
+++ b/src/store/processes/process-command-actions.ts
@@ -6,6 +6,7 @@ import { dialogActions } from '~/store/dialog/dialog-actions';
 import { RootState } from '../store';
 import { Dispatch } from 'redux';
 import { getProcess } from '~/store/processes/process';
+import { quote } from 'shell-quote';
 
 export const PROCESS_COMMAND_DIALOG_NAME = 'processCommandDialog';
 
@@ -19,7 +20,7 @@ export const openProcessCommandDialog = (processUuid: string) =>
         const process = getProcess(processUuid)(getState().resources);
         if (process) {
             const data: ProcessCommandDialogData = {
-                command: process.containerRequest.command.join(' '),
+                command: quote(process.containerRequest.command),
                 processName: process.containerRequest.name,
             };
             dispatch(dialogActions.OPEN_DIALOG({ id: PROCESS_COMMAND_DIALOG_NAME, data }));
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 4bde68d8..81022ea5 100644
--- 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, DialogTitle, DialogActions, Button, StyleRulesCallback, WithStyles, withStyles, Tooltip, IconButton, Grid, 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,7 +35,17 @@ 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]} />
diff --git a/yarn.lock b/yarn.lock
index 30e94bde..c8148433 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -188,6 +188,10 @@
     "@types/react" "*"
     redux "^3.6.0 || ^4.0.0"
 
+"@types/shell-quote@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@types/shell-quote/-/shell-quote-1.6.0.tgz#537b2949a2ebdcb0d353e448fee45b081021963f"
+
 "@types/uuid@3.4.4":
   version "3.4.4"
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.4.tgz#7af69360fa65ef0decb41fd150bf4ca5c0cefdf5"