Added copy to clipboard component

kubevious · Aug 3, 2020 · 90f4902 · 90f4902
1 parent c140af6
commit 90f4902
Show file tree

Hide file tree

Showing 7 changed files with 432 additions and 253 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -5,6 +5,7 @@
   "proxy": "http://localhost:5001",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-regular-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-fontawesome": "^0.1.9",
     "axios": "^0.19.2",

diff --git a/client/src/components/ClusterScreen/index.js b/client/src/components/ClusterScreen/index.js
@@ -5,6 +5,7 @@ import { isEmptyArray } from '../../utils/util';
 import cx from 'classnames'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import CopyClipboard from '../CopyClipboard';
 
 class ClusterScreen extends BaseComponent {
     constructor(props) {
@@ -113,6 +114,7 @@ class ClusterScreen extends BaseComponent {
                             </div>
 
                             <pre className="command-box">
+                                <CopyClipboard text={selectedCommand.command} />
                                 {selectedCommand.command}
                             </pre>
                         </div>

diff --git a/client/src/components/ClusterScreen/styles.scss b/client/src/components/ClusterScreen/styles.scss
@@ -98,6 +98,7 @@
           border-bottom: none;
           margin-bottom: -1px;
           background: #35373f;
+          z-index: 1;
         }
 
         &:hover {
@@ -111,6 +112,8 @@
       padding: 10px;
       color: white;
       background: #35373f;
+      position: relative;
+      overflow: unset;
     }
   }
 
@@ -126,4 +129,9 @@
       background: #35373E;
     }
   }
+
+  .icon-wrapper {
+    position: absolute;
+    right: 30px;
+  }
 }
diff --git a/client/src/components/CopyClipboard/index.js b/client/src/components/CopyClipboard/index.js
@@ -0,0 +1,41 @@
+/*** UNDER NO CIRCUMSTANCES DO NOT EDIT THIS FILE. THIS FILE IS COPIED                                    ***/
+/*** FROM OSS UI. ANY CHANGES TO BE MADE IN KUBEVIOUS OSS UI.                                             ***/
+/*** SOURCE: ../ui/src/src/components/CopyClipboard/index.js                                              ***/
+
+import React, { useState } from 'react';
+import { faClone as farClone } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import './styles.scss'
+
+const CopyClipboard = ({ text }) => {
+    const [copied, setCopied] = useState(false)
+
+    const copyText = () => {
+        const textField = document.createElement('textarea')
+        textField.value = text
+        document.body.appendChild(textField)
+        textField.select()
+        document.execCommand('copy')
+        setCopied(true)
+        textField.remove()
+
+        setTimeout(() => {
+            setCopied(false)
+        }, 3000)
+    }
+
+    return (
+        <div className="icon-wrapper">
+            {copied && <div className="copied-container">
+                Copied to clipboard
+                <div className="caret" />
+            </div>}
+
+            <FontAwesomeIcon className="copy-icon" icon={farClone} onClick={() => copyText()}
+                             title="Copy to clipboard" />
+        </div>
+    )
+}
+
+export default CopyClipboard
diff --git a/client/src/components/CopyClipboard/styles.scss b/client/src/components/CopyClipboard/styles.scss
@@ -0,0 +1,44 @@
+/*** UNDER NO CIRCUMSTANCES DO NOT EDIT THIS FILE. THIS FILE IS COPIED                                    ***/
+/*** FROM OSS UI. ANY CHANGES TO BE MADE IN KUBEVIOUS OSS UI.                                             ***/
+/*** SOURCE: ../ui/src/src/components/CopyClipboard/styles.scss                                           ***/
+
+.icon-wrapper {
+  margin-left: 10px;
+  color: #999999;
+  position: relative;
+
+  .copy-icon {
+    color: #999999;
+    position: absolute;
+    font-size: 16px;
+    z-index: 10;
+
+    &:hover {
+      color: white;
+      cursor: pointer;
+    }
+  }
+
+  .copied-container {
+    position: absolute;
+    top: -35px;
+    left: -70px;
+    width: 160px;
+    display: flex;
+    justify-content: center;
+    background: #4ECD77;
+    border-radius: 3px;
+    color: white;
+    z-index: 1001;
+    font-size: 14px;
+
+    .caret {
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      background: #4ECD77;
+      bottom: -5px;
+      transform: rotate(45deg);
+    }
+  }
+}
diff --git a/tools/sync-from-ui.sh b/tools/sync-from-ui.sh
@@ -19,6 +19,9 @@ sync "src/components/Alerts/styles.scss" "src/components/Alerts/styles.scss"
 sync "src/components/BurgerMenu/index.js" "src/components/BurgerMenu/index.js"
 sync "src/components/BurgerMenu/styles.scss" "src/components/BurgerMenu/styles.scss"
 
+sync "src/components/CopyClipboard/index.js" "src/components/CopyClipboard/index.js"
+sync "src/components/CopyClipboard/styles.scss" "src/components/CopyClipboard/styles.scss"
+
 sync "src/components/Diagram/index.js" "src/components/Diagram/index.js"
 #sync "src/components/Diagram/visual-view.js" "src/components/Diagram/visual-view.js"
 #sync "src/components/Diagram/visual-node.js" "src/components/Diagram/visual-node.js"