21651: Add line formatter to VirtualCodeSnippet to do cmd card line processing

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/services/workbench2/src/components/code-snippet/virtual-code-snippet.tsx b/services/workbench2/src/components/code-snippet/virtual-code-snippet.tsx
index bc43d5d9f2608a792875836176723d547eff02e6..09db2c04261caeaf0ebd87e18203b56fbda5c4a8 100644 (file)
--- a/services/workbench2/src/components/code-snippet/virtual-code-snippet.tsx
+++ b/services/workbench2/src/components/code-snippet/virtual-code-snippet.tsx
@@ -32,7 +32,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 
 export interface CodeSnippetDataProps {
     lines: string[];
-    lineTransformer?: (line: string) => string;
+    lineFormatter?: (lines: string[], index: number) => string;
     className?: string;
     apiResponse?: boolean;
     linked?: boolean;
@@ -49,10 +49,11 @@ const mapStateToProps = (state: RootState): CodeSnippetAuthProps => ({
 });
 
 export const VirtualCodeSnippet = withStyles(styles)(connect(mapStateToProps)(
-    ({ classes, lines, linked, className, apiResponse, dispatch, auth }: CodeSnippetProps & CodeSnippetAuthProps & DispatchProp) => {
-        const RenderRow = ({index, style}) => (
-            <span style={style}>{linked ? renderLinks(auth, dispatch)(lines[index]) : lines[index]}</span>
-        );
+    ({ classes, lines, lineFormatter, linked, className, apiResponse, dispatch, auth }: CodeSnippetProps & CodeSnippetAuthProps & DispatchProp) => {
+        const RenderRow = ({index, style}) => {
+            const lineContents = lineFormatter ? lineFormatter(lines, index) : lines[index];
+            return <span style={style}>{linked ? renderLinks(auth, dispatch)(lineContents) : lineContents}</span>
+        };
 
         return <Typography
             component="div"

diff --git a/services/workbench2/src/views/process-panel/process-cmd-card.tsx b/services/workbench2/src/views/process-panel/process-cmd-card.tsx
index d7b47653e60d0fc113b2b7c4fff76a192a05ad9a..488b8d7fb4a740db444478e0cb28ae45ec279ada 100644 (file)
--- a/services/workbench2/src/views/process-panel/process-cmd-card.tsx
+++ b/services/workbench2/src/views/process-panel/process-cmd-card.tsx
@@ -71,18 +71,17 @@ export const ProcessCmdCard = withStyles(styles)(
     classes,
     doHidePanel,
   }: ProcessCmdCardProps) => {
-    const command = process.containerRequest.command.map((v) =>
-      shellescape([v]) // Escape each arg separately
-    );
 
-    let formattedCommand = [...command];
-    formattedCommand.forEach((item, i, arr) => {
+    const formatLine = (lines: string[], index: number): string => {
+      // Escape each arg separately
+      let line = shellescape([lines[index]])
       // Indent lines after the first
-      const indent = i > 0 ? '  ' : '';
-      // Escape newlines on every non-last arg when there are multiple lines
-      const lineBreak = arr.length > 1 && i < arr.length - 1 ? ' \\' : '';
-      arr[i] = `${indent}${item}${lineBreak}`;
-    });
+      const indent = index > 0 ? '  ' : '';
+      // Add backslash "escaped linebreak"
+      const lineBreak = lines.length > 1 && index < lines.length - 1 ? ' \\' : '';
+
+      return `${indent}${line}${lineBreak}`;
+    };
 
     return (
       <Card className={classes.card}>
@@ -104,7 +103,7 @@ export const ProcessCmdCard = withStyles(styles)(
                 <Tooltip title="Copy link to clipboard" disableFocusListener>
                   <IconButton>
                     <CopyToClipboard
-                      text={command.join(" ")}
+                      text={" "}
                       onCopy={() => onCopy("Command copied to clipboard")}
                     >
                       <CopyIcon />
@@ -128,7 +127,11 @@ export const ProcessCmdCard = withStyles(styles)(
           }
         />
         <CardContent className={classes.content}>
-          <DefaultVirtualCodeSnippet lines={formattedCommand} linked />
+          <DefaultVirtualCodeSnippet
+            lines={process.containerRequest.command}
+            lineFormatter={formatLine}
+            linked
+          />
         </CardContent>
       </Card>
     );