import { ArvadosTheme } from 'common/custom-theme';
import { CloseIcon, CommandIcon, CopyIcon } from 'components/icon/icon';
import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
-import { DefaultCodeSnippet } from 'components/default-code-snippet/default-code-snippet';
+import { DefaultVirtualCodeSnippet } from 'components/default-code-snippet/default-virtual-code-snippet';
import { Process } from 'store/processes/process';
import shellescape from 'shell-escape';
-import CopyToClipboard from 'react-copy-to-clipboard';
+import CopyResultToClipboard from 'components/copy-to-clipboard/copy-result-to-clipboard';
type CssRules = 'card' | 'content' | 'title' | 'header' | 'avatar' | 'iconHeader';
},
header: {
paddingTop: theme.spacing.unit,
- paddingBottom: theme.spacing.unit,
+ paddingBottom: 0,
},
iconHeader: {
fontSize: '1.875rem',
paddingTop: theme.spacing.unit * 0.5
},
content: {
+ height: `calc(100% - ${theme.spacing.unit * 6}px)`,
padding: theme.spacing.unit * 1.0,
- paddingTop: theme.spacing.unit * 0.5,
+ paddingTop: 0,
'&:last-child': {
paddingBottom: theme.spacing.unit * 1,
}
overflow: 'hidden',
paddingTop: theme.spacing.unit * 0.5,
color: theme.customs.colors.greyD,
- fontSize: '1.875rem'
+ fontSize: '1.875rem'
},
});
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}`;
+ };
+
+ const formatClipboardText = (command: string[]) => (): string => (
+ command.map((v) =>
+ shellescape([v]) // Escape each arg separately
+ ).join(' ')
+ );
return (
<Card className={classes.card}>
action={
<Grid container direction="row" alignItems="center">
<Grid item>
- <Tooltip title="Copy to clipboard" disableFocusListener>
+ <Tooltip title="Copy link to clipboard" disableFocusListener>
<IconButton>
- <CopyToClipboard
- text={command.join(" ")}
+ <CopyResultToClipboard
+ getText={formatClipboardText(process.containerRequest.command)}
onCopy={() => onCopy("Command copied to clipboard")}
>
<CopyIcon />
- </CopyToClipboard>
+ </CopyResultToClipboard>
</IconButton>
</Tooltip>
</Grid>
}
/>
<CardContent className={classes.content}>
- <DefaultCodeSnippet lines={formattedCommand} linked />
+ <DefaultVirtualCodeSnippet
+ lines={process.containerRequest.command}
+ lineFormatter={formatLine}
+ linked
+ />
</CardContent>
</Card>
);