--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from 'react';
+import { ReactElementLike } from 'prop-types';
+import copy from 'copy-to-clipboard';
+
+interface CopyToClipboardProps {
+ getText: (() => string);
+ children: ReactElementLike;
+ onCopy?(text: string, result: boolean): void;
+ options?: {
+ debug?: boolean;
+ message?: string;
+ format?: string; // MIME type
+ };
+}
+
+export default class CopyResultToClipboard extends React.PureComponent<CopyToClipboardProps> {
+ static defaultProps = {
+ onCopy: undefined,
+ options: undefined
+ };
+
+ onClick = event => {
+ const {
+ getText,
+ onCopy,
+ children,
+ options
+ } = this.props;
+
+ const elem = React.Children.only(children);
+
+ const text = getText();
+
+ const result = copy(text, options);
+
+ if (onCopy) {
+ onCopy(text, result);
+ }
+
+ // Bypass onClick if it was present
+ if (elem && elem.props && typeof elem.props.onClick === 'function') {
+ elem.props.onClick(event);
+ }
+ };
+
+
+ render() {
+ const {
+ getText: _getText,
+ onCopy: _onCopy,
+ options: _options,
+ children,
+ ...props
+ } = this.props;
+ const elem = React.Children.only(children);
+
+ return React.cloneElement(elem, {...props, onClick: this.onClick});
+ }
+}
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';
return `${indent}${line}${lineBreak}`;
};
+ const formatClipboardText = (command: string[]) => (): string => (
+ command.map((v) =>
+ shellescape([v]) // Escape each arg separately
+ ).join(' ')
+ );
+
return (
<Card className={classes.card}>
<CardHeader
<Grid item>
<Tooltip title="Copy link to clipboard" disableFocusListener>
<IconButton>
- <CopyToClipboard
- text={" "}
+ <CopyResultToClipboard
+ getText={formatClipboardText(process.containerRequest.command)}
onCopy={() => onCopy("Command copied to clipboard")}
>
<CopyIcon />
- </CopyToClipboard>
+ </CopyResultToClipboard>
</IconButton>
</Tooltip>
</Grid>