feat(ui): Add copy to clipboard shortcut (argoproj#6217)

Signed-off-by: Simon Behar <[email protected]>
AlbeeSo · Jun 24, 2021 · 631b0bc · 631b0bc
1 parent 8d3627d
commit 631b0bc
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/ui/src/app/shared/components/clipboard-text.tsx b/ui/src/app/shared/components/clipboard-text.tsx
@@ -0,0 +1,26 @@
+import {Tooltip} from 'argo-ui';
+import * as React from 'react';
+import {useState} from 'react';
+
+export const ClipboardText = ({text}: {text: string}) => {
+    const [justClicked, setJustClicked] = useState<boolean>(false);
+
+    return (
+        <>
+            {text}
+            &nbsp; &nbsp;
+            <Tooltip content={justClicked ? 'Copied!' : 'Copy to clipboard'}>
+                <a>
+                    <i
+                        className={'fa fa-clipboard'}
+                        onClick={() => {
+                            setJustClicked(true);
+                            navigator.clipboard.writeText(text);
+                            setInterval(() => setJustClicked(false), 2000);
+                        }}
+                    />
+                </a>
+            </Tooltip>
+        </>
+    );
+};
diff --git a/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx b/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
 import * as models from '../../../../models';
 import {Artifact, NodeStatus, Workflow} from '../../../../models';
 import {Button} from '../../../shared/components/button';
+import {ClipboardText} from '../../../shared/components/clipboard-text';
 import {DropDownButton} from '../../../shared/components/drop-down-button';
 import {DurationPanel} from '../../../shared/components/duration-panel';
 import {InlineTable} from '../../../shared/components/inline-table/inline-table';
@@ -61,7 +62,7 @@ const AttributeRows = (props: {attributes: {title: string; value: any}[]}) => (
 
 const WorkflowNodeSummary = (props: Props) => {
     const attributes = [
-        {title: 'NAME', value: props.node.name},
+        {title: 'NAME', value: <ClipboardText text={props.node.name} />},
         {title: 'TYPE', value: props.node.type},
         {
             title: 'PHASE',
@@ -112,10 +113,10 @@ const WorkflowNodeSummary = (props: Props) => {
         attributes.splice(
             2,
             0,
-            {title: 'POD NAME', value: props.node.id},
+            {title: 'POD NAME', value: <ClipboardText text={props.node.id} />},
             {
                 title: 'HOST NODE NAME',
-                value: props.node.hostNodeName
+                value: <ClipboardText text={props.node.hostNodeName} />
             }
         );
     }