Add copy button on builder view

Author: vivekweb2013

frontend/src/components/Builder.js

@@ -8,6 +8,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import './Builder.scss';
 import DynamicTextInput from './common/DynamicTextInput';
 import PermissionInput from './common/PermissionInput';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import ToastMaker from 'toastmaker';
 
 class Builder extends Component {
     state = {
@@ -163,9 +165,18 @@ class Builder extends Component {
                 <div className="header" ref={this.headerDiv}>
                     <div className="text">
                         <code>
-                            {generatedCommand != null && (<span>{generatedCommand}</span>)}
+                            {generatedCommand != null && <span>{generatedCommand}</span>}
                         </code>
                     </div>
+                    <CopyToClipboard text={generatedCommand}>
+                        <button className="copy" onClick={(e) => ToastMaker("Copied!")}>
+                            <span className="copy-icon" title="copy">
+                                <FontAwesomeIcon icon="copy" color="white" size="lg" />
+                            </span><br />
+                            <span className="copy-label">COPY</span>
+                        </button>
+                    </CopyToClipboard>
+
                 </div>
 
                 <div className="content" ref={this.contentDiv}>

frontend/src/components/Builder.scss

@@ -4,6 +4,7 @@ $builder-header-min-height: 50px;
 $header-padding-vertical: 5px;
 $checkbox-size: 30px;
 $form-bottom-button-spacing: 15px;
+$command-copy-button-width: 50px;
 
 .builder {
   > .header {
@@ -16,12 +17,32 @@ $form-bottom-button-spacing: 15px;
     min-height: $builder-header-min-height;
     min-width: auto;
     padding: $header-padding-vertical 10px;
+    padding-right: $command-copy-button-width;
     position: fixed;
     text-align: center;
     width: 100%;
     z-index: 100;
     .text {
       width: 100%;
+      user-select: none;
+    }
+    button.copy {
+      background-color: $color-primary;
+      border: none;
+      border-left: 1px solid lighten($color-primary, 50%);
+      outline: none;
+      position: absolute;
+      right: 0;
+      height: 100%;
+      width: $command-copy-button-width;
+      cursor: pointer;
+      .copy-icon {
+        padding: 2px;
+      }
+      .copy-label {
+        font-size: xx-small;
+        color: white;
+      }
     }
   }
   > .content {