feat: UI Add copy to clipboard shortcut (argoproj#10958)

* feat: UI Add copy to clipboard shortcut argoproj#10803 Signed-off-by: tramanathan <thirunavukkarasu_ramanathan@intuit.com> * fix: Use os.PathSeparator instead of hard-coded string to resolve local file paths (argoproj#10945) (argoproj#10946) fix: Use os.PathSeparator instead of hard-coded string to resolve local file paths (argoproj#10945) (argoproj#10946) Signed-off-by: tramanathan <thirunavukkarasu_ramanathan@intuit.com> * feat: UI Add copy to clipboard shortcut Signed-off-by: tramanathan <thirunavukkarasu_ramanathan@intuit.com> Signed-off-by: tramanathan <thirunavukkarasu_ramanathan@intuit.com> Co-authored-by: tramanathan <thirunavukkarasu_ramanathan@intuit.com> Co-authored-by: Chris Davis <chris@codeflow.org.uk> Signed-off-by: Nicholas Johnson <nbjohnson10@gmail.com>
nbjohnson · Oct 18, 2022 · d69ef99 · d69ef99
1 parent e09d795
commit d69ef99
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/ui/src/app/applications/components/application-node-info/application-node-info.tsx b/ui/src/app/applications/components/application-node-info/application-node-info.tsx
@@ -3,7 +3,7 @@ import * as deepMerge from 'deepmerge';
 import * as moment from 'moment';
 import * as React from 'react';
 
-import {YamlEditor} from '../../../shared/components';
+import {YamlEditor, ClipboardText} from '../../../shared/components';
 import * as models from '../../../shared/models';
 import {services} from '../../../shared/services';
 import {ApplicationResourcesDiff} from '../application-resources-diff/application-resources-diff';
@@ -19,8 +19,8 @@ export const ApplicationNodeInfo = (props: {
 }) => {
     const attributes: {title: string; value: any}[] = [
         {title: 'KIND', value: props.node.kind},
-        {title: 'NAME', value: props.node.name},
-        {title: 'NAMESPACE', value: props.node.namespace}
+        {title: 'NAME', value: <ClipboardText text={props.node.name} />},
+        {title: 'NAMESPACE', value: <ClipboardText text={props.node.namespace} />}
     ];
     if (props.node.createdAt) {
         attributes.push({

diff --git a/ui/src/app/shared/components/clipboard-text.tsx b/ui/src/app/shared/components/clipboard-text.tsx
@@ -0,0 +1,30 @@
+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);
+
+    if (!text) {
+        return <></>;
+    }
+
+    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/shared/components/index.ts b/ui/src/app/shared/components/index.ts
@@ -25,3 +25,4 @@ export * from './timestamp';
 export * from './spinner';
 export * from './badge-panel/badge-panel';
 export * from './number-field';
+export * from './clipboard-text';