Add copy id to clipboard to replica and migration detail view CORWEB-59

Widen the copy click area to include the whole id value.
Show the copy icon only on id value hover.

src/components/MigrationDetail/MigrationDetail.js

@@ -19,6 +19,8 @@ import React, { Component, PropTypes } from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './MigrationDetail.scss';
 import Moment from 'react-moment';
+import Helper from "../Helper"
+import NotificationActions from '../../actions/NotificationActions'
 import Location from '../../core/Location';
 import EndpointLink from '../EndpointLink';
 import ConfirmationDialog from '../ConfirmationDialog'
@@ -72,6 +74,16 @@ class MigrationDetail extends Component {
     })
   }
 
+  copyIdClick(item) {
+    let succesful = Helper.copyTextToClipboard(item.id)
+
+    if (succesful) {
+      NotificationActions.notify('The ID has been copied to clipboard.')
+    } else {
+      NotificationActions.notify('The ID couldn\'t be copied', 'error')
+    }
+  }
+
   render() {
     let item = this.props.migration
     let output = null
@@ -138,8 +150,13 @@ class MigrationDetail extends Component {
                 <div className={s.titleIp}>
                   Id
                 </div>
-                <div className={s.value}>
+                <div className={s.value + ' ' + s.idValue}
+                  onClick={() => this.copyIdClick(item)}
+                  onMouseDown={e => e.stopPropagation()}
+                  onMouseUp={e => e.stopPropagation()}
+                >
                   <a>{item.id}</a>
+                  <span className="copyButton"></span>
                 </div>
               </div>
             </div>

src/components/MigrationDetail/MigrationDetail.scss

@@ -70,6 +70,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     a {
       color: $blue;
     }
+     &.idValue {
+      cursor: pointer;
+      display: inline-block;
+    }
+    &:hover :global(.copyButton) {
+      opacity: 1;
+    }
   }
 }
 .cloudImg {

src/components/ReplicaDetail/ReplicaDetail.js

@@ -20,6 +20,7 @@ import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './ReplicaDetail.scss';
 import Moment from 'react-moment';
 import Helper from "../Helper";
+import NotificationActions from '../../actions/NotificationActions'
 import Location from '../../core/Location';
 import EndpointLink from '../EndpointLink';
 import ConfirmationDialog from '../ConfirmationDialog'
@@ -73,6 +74,16 @@ class MigrationDetail extends Component {
     })
   }
 
+  copyIdClick(item) {
+    let succesful = Helper.copyTextToClipboard(item.id)
+
+    if (succesful) {
+      NotificationActions.notify('The ID has been copied to clipboard.')
+    } else {
+      NotificationActions.notify('The ID couldn\'t be copied', 'error')
+    }
+  }
+
   render() {
     let item = this.props.replica
     let output = null
@@ -141,8 +152,13 @@ class MigrationDetail extends Component {
                 <div className={s.titleIp}>
                   Id
                 </div>
-                <div className={s.value}>
+                <div className={s.value + ' ' + s.idValue}
+                  onClick={() => this.copyIdClick(item)}
+                  onMouseDown={e => e.stopPropagation()}
+                  onMouseUp={e => e.stopPropagation()}
+                >
                   <a>{item.id}</a>
+                  <span className="copyButton"></span>
                 </div>
               </div>
             </div>

src/components/ReplicaDetail/ReplicaDetail.scss

@@ -67,6 +67,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     font-weight: $weight-regular;
     font-size: 14px;
     color: $black;
+    &.idValue {
+      cursor: pointer;
+      display: inline-block;
+    }
+    &:hover :global(.copyButton) {
+      opacity: 1;
+    }
     a {
       color: $blue;
     }

src/components/Tasks/Tasks.js

@@ -114,12 +114,12 @@ class Tasks extends Component {
           </div>
           <div className={s.group}>
             <div className={s.detailTitle}>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 className={s.detailValue + ' ' + s.detailIdValue}
+              onClick={() => this.copyIdClick(item)}
+              onMouseDown={e => e.stopPropagation()}
+              onMouseUp={e => e.stopPropagation()}
+            >{item.id}
+               <span className="copyButton"></span>
             </div>
           </div>
           <div className={s.group}>
@@ -160,7 +160,7 @@ class Tasks extends Component {
     this.setState({ listItems: listItems, execution: newProps.execution })
   }
 
-  copyIdClick(e, item) {
+  copyIdClick(item) {
     let succesful = Helper.copyTextToClipboard(item.id)
 
     if (succesful) {