Implemented the ability to copy the execution ID to clipboard CORWEB-59

src/components/Helper/Helper.js

@@ -49,6 +49,40 @@ class Helper extends Component {
   static convertCloudLabel(label) {
     return cloudLabels[label] || label
   }
+
+  /**
+   * Copies specified text to clipboard
+   * @param {string} text The text to copy
+   * @return True if successful, false otherwise
+   */
+  static copyTextToClipboard(text) {
+    let textArea = document.createElement("textarea");
+    textArea.style.position = 'fixed';
+    textArea.style.top = 0;
+    textArea.style.left = 0;
+    textArea.style.width = '2em';
+    textArea.style.height = '2em';
+    textArea.style.padding = 0;
+    textArea.style.border = 'none';
+    textArea.style.outline = 'none';
+    textArea.style.boxShadow = 'none';
+    textArea.style.background = 'transparent';
+
+    textArea.value = text;
+
+    document.body.appendChild(textArea);
+
+    textArea.select();
+
+    let successful;
+
+    try {
+      successful = document.execCommand('copy');
+    } finally {
+      document.body.removeChild(textArea);
+      return successful
+    }
+  }
 }
 
 export default Helper;

src/components/Tasks/Tasks.js

@@ -21,6 +21,7 @@ import moment from 'moment';
 import Table from '../Table';
 import s from './Tasks.scss';
 import TextTruncate from 'react-text-truncate';
+import NotificationActions from '../../actions/NotificationActions'
 import LoadingIcon from "../LoadingIcon/LoadingIcon";
 import ProgressBar from '../ProgressBar';
 import Helper from '../Helper';
@@ -113,7 +114,13 @@ class Tasks extends Component {
           </div>
           <div className={s.group}>
             <div className={s.detailTitle}>ID</div>
-            <div className={s.detailValue}>{item.id}</div>
+            <div className={s.detailValue}>{item.id}
+               <span className={s.copyButton}
+                 onMouseDown={e => e.stopPropagation()}
+                 onMouseUp={e => e.stopPropagation()}
+                 onClick={e => this.copyIdClick(e, item)}
+               ></span>
+            </div>
           </div>
           <div className={s.group}>
             <div className={s.detailTitle}>Exception details</div>
@@ -153,6 +160,21 @@ class Tasks extends Component {
     this.setState({ listItems: listItems, execution: newProps.execution })
   }
 
+  copyIdClick(e, item) {
+    e.preventDefault()
+    e.nativeEvent.preventDefault();
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+
+    let succesful = Helper.copyTextToClipboard(item.id)
+
+    if (succesful) {
+      NotificationActions.notify('The ID was copied to clipboard.')
+    } else {
+      NotificationActions.notify('The ID couldn\'t be copied', 'error')
+    }
+  }
+
   render() {
     return (
       <div className={s.root}>