feat(Copiable)

src/common/copiable/index.css

@@ -0,0 +1,7 @@
+.container .button {
+  visibility: hidden;
+}
+
+.container:hover .button {
+  visibility: visible;
+}

src/common/copiable/index.js

@@ -0,0 +1,27 @@
+import CopyToClipboard from 'react-copy-to-clipboard'
+import classNames from 'classnames'
+import React, { createElement } from 'react'
+
+import Icon from '../icon'
+import { propTypes } from '../utils'
+
+import styles from './index.css'
+
+const Copiable = propTypes({
+  data: propTypes.string,
+  tagName: propTypes.string
+})(props => createElement(
+  props.tagName || 'span',
+  {
+    ...props,
+    className: classNames(styles.container, props.className)
+  },
+  props.children,
+  ' ',
+  <CopyToClipboard text={props.data || props.children}>
+    <button className={classNames('btn btn-sm btn-secondary', styles.button)}>
+      <Icon icon='clipboard' />
+    </button>
+  </CopyToClipboard>
+))
+export { Copiable as default }

src/index.scss

@@ -158,17 +158,6 @@ $select-input-height: 40px; // Bootstrap input height
 
 // GENERAL STYLES ==============================================================
 
-// Hide copy to clipboard Button...
-
-.btn-copy-to-clipboard {
-  visibility: hidden;
-}
-
-// ...And Display it on parent hover
-.copy-to-clipboard:hover .btn-copy-to-clipboard {
-  visibility: visible;
-}
-
 .tag-ip {
   margin-left: 1em;
 }

src/xo-app/host/tab-advanced.js

@@ -1,6 +1,5 @@
 import _ from 'messages'
-import CopyToClipboard from 'react-copy-to-clipboard'
-import Icon from 'icon'
+import Copiable from 'copiable'
 import React from 'react'
 import TabButton from 'tab-button'
 import { Toggle } from 'form'
@@ -49,15 +48,9 @@ export default ({
         <tbody>
           <tr>
             <th>{_('uuid')}</th>
-            <td className='copy-to-clipboard'>
+            <Copiable tagName='td'>
               {host.uuid}
-              {' '}
-              <CopyToClipboard text={host.uuid}>
-                <button className='btn btn-sm btn-secondary btn-copy-to-clipboard'>
-                  <Icon icon='clipboard' />
-                </button>
-              </CopyToClipboard>
-            </td>
+            </Copiable>
           </tr>
           <tr>
             <th>{_('hostAddress')}</th>
@@ -96,15 +89,9 @@ export default ({
           </tr>
           <tr>
             <th>{_('hostIscsiName')}</th>
-            <td>
+            <Copiable tagName='td'>
               {host.iSCSI_name}
-              {' '}
-              <CopyToClipboard text={host.iSCSI_name}>
-                <button className='btn btn-sm btn-secondary btn-copy-to-clipboard'>
-                  <Icon icon='clipboard' />
-                </button>
-              </CopyToClipboard>
-            </td>
+            </Copiable>
           </tr>
         </tbody>
       </table>

src/xo-app/pool/tab-advanced.js

@@ -1,6 +1,5 @@
 import _ from 'messages'
-import CopyToClipboard from 'react-copy-to-clipboard'
-import Icon from 'icon'
+import Copiable from 'copiable'
 import React from 'react'
 import { Container, Row, Col } from 'grid'
 
@@ -14,15 +13,9 @@ export default ({
         <tbody>
           <tr>
             <th>{_('uuid')}</th>
-            <td className='copy-to-clipboard'>
+            <Copiable tagName='td'>
               {pool.uuid}
-              {' '}
-              <CopyToClipboard text={pool.uuid}>
-                <button className='btn btn-sm btn-secondary btn-copy-to-clipboard'>
-                  <Icon icon='clipboard' />
-                </button>
-              </CopyToClipboard>
-            </td>
+            </Copiable>
           </tr>
           <tr>
             <th>{_('poolHaStatus')}</th>

src/xo-app/sr/tab-advanced.js

@@ -1,6 +1,5 @@
 import _ from 'messages'
-import CopyToClipboard from 'react-copy-to-clipboard'
-import Icon from 'icon'
+import Copiable from 'copiable'
 import React from 'react'
 import TabButton from 'tab-button'
 import { deleteSr } from 'xo'
@@ -27,15 +26,9 @@ export default ({
         <tbody>
           <tr>
             <th>{_('uuid')}</th>
-            <td className='copy-to-clipboard'>
+            <Copiable tagName='td'>
               {sr.uuid}
-              {' '}
-              <CopyToClipboard text={sr.uuid}>
-                <button className='btn btn-sm btn-secondary btn-copy-to-clipboard'>
-                  <Icon icon='clipboard' />
-                </button>
-              </CopyToClipboard>
-            </td>
+            </Copiable>
           </tr>
         </tbody>
       </table>

src/xo-app/vm/tab-advanced.js

@@ -1,5 +1,5 @@
 import _ from 'messages'
-import CopyToClipboard from 'react-copy-to-clipboard'
+import Copiable from 'copiable'
 import Icon from 'icon'
 import isEmpty from 'lodash/isEmpty'
 import React from 'react'
@@ -112,15 +112,9 @@ export default ({
         <tbody>
           <tr>
             <th>{_('uuid')}</th>
-            <td className='copy-to-clipboard'>
+            <Copiable tagName='td'>
               {vm.uuid}
-              {' '}
-              <CopyToClipboard text={vm.uuid}>
-                <button className='btn btn-sm btn-secondary btn-copy-to-clipboard'>
-                  <Icon icon='clipboard' />
-                </button>
-              </CopyToClipboard>
-            </td>
+            </Copiable>
           </tr>
           <tr>
             <th>{_('virtualizationMode')}</th>