Remove clipboard library

Improve copy button behaviour Clean up comments Signed-off-by: Tim Etchells <tetchell@redhat.com>
argoproj · Oct 1, 2020 · 88bbb65 · 88bbb65
1 parent 3f0762a
commit 88bbb65
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 61 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -50,7 +50,6 @@
     "raw-loader": "^0.5.1",
     "react": "^16.8.3",
     "react-autocomplete": "^1.8.1",
-    "react-copy-to-clipboard": "^5.0.2",
     "react-diff-view": "^2.1.4",
     "react-dom": "^16.8.3",
     "react-form": "2.16.0",
@@ -88,7 +87,6 @@
     "@babel/preset-typescript": "^7.7.2",
     "@beyonk/google-fonts-webpack-plugin": "^1.5.0",
     "@types/jest": "^24.0.13",
-    "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-test-renderer": "^16.8.3",
     "add": "^2.0.6",
     "babel-jest": "^24.9.0",

diff --git a/ui/src/app/version-info/components/version-info-button.tsx b/ui/src/app/version-info/components/version-info-button.tsx
@@ -20,7 +20,7 @@ export class VersionButton extends React.Component<VersionButtonProps> {
                 {version => (
                     <React.Fragment>
                         <Tooltip content={version.Version}>
-                            <span className='version-info-button' onClick={this.props.onClick}>
+                            <span className='version-info-btn' onClick={this.props.onClick}>
                                 {version.Version}
                             </span>
                         </Tooltip>

diff --git a/ui/src/app/version-info/components/version-info-panel.tsx b/ui/src/app/version-info/components/version-info-panel.tsx
@@ -1,6 +1,5 @@
 import {DataLoader, SlidingPanel, Tooltip} from 'argo-ui';
 import * as React from 'react';
-import * as CopyToClipboard from 'react-copy-to-clipboard';
 import {VersionMessage} from '../../shared/models';
 
 import './version-info.scss';
@@ -11,12 +10,14 @@ interface VersionPanelProps {
     version: Promise<VersionMessage>;
 }
 
-export class VersionPanel extends React.Component<VersionPanelProps, {justCopied: boolean}> {
+type CopyState = 'success' | 'failed' | undefined;
+
+export class VersionPanel extends React.Component<VersionPanelProps, {copyState: CopyState}> {
     private readonly header = 'Argo CD Server Version';
 
     constructor(props: VersionPanelProps) {
         super(props);
-        this.state = {justCopied: false};
+        this.state = {copyState: undefined};
     }
 
     public render() {
@@ -25,24 +26,9 @@ export class VersionPanel extends React.Component<VersionPanelProps, {justCopied
                 {version => {
                     return (
                         <SlidingPanel header={this.header} isShown={this.props.isShown} onClose={() => this.props.onClose()} hasCloseButton={true} isNarrow={true}>
-                            <div className='version-info-table argo-table-list'>
-                                {/* <div className='argo-table-list__head'>
-                                    <div className='row'>
-                                        <div className='columns small-4'>Tool</div>
-                                        <div className='columns small-4'>Version</div>
-                                    </div>
-                                </div> */}
-                                {this.buildVersionTable(version)}
-                            </div>
+                            <div className='version-info-table argo-table-list'>{this.buildVersionTable(version)}</div>
                             <div className='version-copy-btn-container'>
-                                <Tooltip content='Copy all version info as JSON'>
-                                    <CopyToClipboard text={JSON.stringify(version, undefined, 4)} onCopy={() => this.onCopy()}>
-                                        <button className='argo-button argo-button--base'>
-                                            <i className={'fa ' + (this.state.justCopied ? 'fa-check' : 'fa-copy')} />
-                                            Copy JSON
-                                        </button>
-                                    </CopyToClipboard>
-                                </Tooltip>
+                                <Tooltip content='Copy all version info as JSON'>{this.getCopyButton(version)}</Tooltip>
                             </div>
                         </SlidingPanel>
                     );
@@ -61,8 +47,6 @@ export class VersionPanel extends React.Component<VersionPanelProps, {justCopied
         const formattedVersion = {
             'Argo CD': version.Version,
             'Build Date': version.BuildDate,
-            // 'Git Commit':
-            // 'Git Tree State':
             'Go': version.GoVersion,
             'Compiler': version.Compiler,
             'Platform': version.Platform,
@@ -94,10 +78,39 @@ export class VersionPanel extends React.Component<VersionPanelProps, {justCopied
         );
     }
 
-    private onCopy(): void {
-        this.setState({justCopied: true});
+    private getCopyButton(version: VersionMessage): JSX.Element {
+        let img: string;
+        let text: string;
+        if (this.state.copyState === 'success') {
+            img = 'fa-check';
+            text = 'Copied';
+        } else if (this.state.copyState === 'failed') {
+            img = 'fa-times';
+            text = 'Copy Failed';
+        } else {
+            img = 'fa-copy';
+            text = 'Copy JSON';
+        }
+
+        return (
+            <button className='argo-button argo-button--base' onClick={() => this.onCopy(version)}>
+                <i className={'fa ' + img} />
+                {text}
+            </button>
+        );
+    }
+
+    private async onCopy(version: VersionMessage): Promise<void> {
+        const stringifiedVersion = JSON.stringify(version, undefined, 4);
+        try {
+            await navigator.clipboard.writeText(stringifiedVersion);
+            this.setState({copyState: 'success'});
+        } catch (err) {
+            this.setState({copyState: 'failed'});
+        }
+
         setTimeout(() => {
-            this.setState({justCopied: false});
-        }, 500);
+            this.setState({copyState: undefined});
+        }, 750);
     }
 }
diff --git a/ui/src/app/version-info/components/version-info.scss b/ui/src/app/version-info/components/version-info.scss
@@ -1,6 +1,4 @@
-@import 'node_modules/argo-ui/src/styles/config';
-
-.version-info-button {
+.version-info-btn {
     white-space: nowrap;
     cursor: pointer;
 
@@ -10,11 +8,12 @@
 }
 
 .version-copy-btn-container {
-    margin-top: 15px;   // half of the panel's padding
+    margin-top: 15px;
     display: flex;
     flex-direction: row-reverse;
 
     & button {
+        min-width: 20ch;
         & i {
             text-align: center;
             margin-right: 0.5em;

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -1246,13 +1246,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-copy-to-clipboard@^4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-4.3.0.tgz#8e07becb4f11cfced4bd36038cb5bdf5c2658be5"
-  integrity sha512-iideNPRyroENqsOFh1i2Dv3zkviYS9r/9qD9Uh3Z9NNoAAqqa2x53i7iGndGNnJFIo20wIu7Hgh77tx1io8bgw==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-dom@16.8.2":
   version "16.8.2"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.2.tgz#9bd7d33f908b243ff0692846ef36c81d4941ad12"
@@ -2766,13 +2759,6 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-copy-to-clipboard@^3:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
-  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
-  dependencies:
-    toggle-selection "^1.0.6"
-
 copy-webpack-plugin@^4.3.1:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.6.0.tgz#e7f40dd8a68477d405dd1b7a854aae324b158bae"
@@ -7185,7 +7171,7 @@ prompts@^2.0.1:
     kleur "^3.0.2"
     sisteransi "^1.0.0"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7352,14 +7338,6 @@ react-autocomplete@^1.8.1:
     dom-scroll-into-view "1.0.1"
     prop-types "^15.5.10"
 
-react-copy-to-clipboard@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz#d82a437e081e68dfca3761fbd57dbf2abdda1316"
-  integrity sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==
-  dependencies:
-    copy-to-clipboard "^3"
-    prop-types "^15.5.8"
-
 react-deep-force-update@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.1.3.tgz#740612322e617bcced38f61794a4af75dc3d98e7"
@@ -8925,11 +8903,6 @@ to-single-quotes@^2.0.0:
   resolved "https://registry.yarnpkg.com/to-single-quotes/-/to-single-quotes-2.0.1.tgz#7cc29151f0f5f2c41946f119f5932fe554170125"
   integrity sha1-fMKRUfD18sQZRvEZ9ZMv5VQXASU=
 
-toggle-selection@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
-  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
-
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"