feat(xo-web/vm): move the copy clipboard of the VM's UUID to the header (#3248)

Fixes #3221

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - [Remotes] Make SMB subfolder field optional [#3249](https://github.com/vatesfr/xen-orchestra/issues/3249) (PR [#3250](https://github.com/vatesfr/xen-orchestra/pull/3250))
 - [Backup NG form] Make the smart mode's toggle more visible [#2711](https://github.com/vatesfr/xen-orchestra/issues/2711) (PR [#3263](https://github.com/vatesfr/xen-orchestra/pull/3263))
+- Move the copy clipboard of the VM's UUID to the header [#3221](https://github.com/vatesfr/xen-orchestra/issues/3221) (PR [#3248](https://github.com/vatesfr/xen-orchestra/pull/3248))
 
 ### Bug fixes
 

packages/xo-web/src/xo-app/vm/index.js

@@ -1,5 +1,6 @@
 import _ from 'intl'
 import BaseComponent from 'base-component'
+import Copiable from 'copiable'
 import Icon from 'icon'
 import Link from 'link'
 import { NavLink, NavTabs } from 'nav'
@@ -175,14 +176,17 @@ export default class Vm extends BaseComponent {
       <Container>
         <Row>
           <Col mediumSize={6} className='header-title'>
-            <h2>
-              {isEmpty(vm.current_operations) ? (
-                <Icon icon={`vm-${vm.power_state.toLowerCase()}`} />
-              ) : (
-                <Icon icon='vm-busy' />
-              )}{' '}
-              <Text value={vm.name_label} onChange={this._setNameLabel} />
-            </h2>
+            <Copiable tagName='div'>
+              <h2 style={{ display: 'inline' }}>
+                {isEmpty(vm.current_operations) ? (
+                  <Icon icon={`vm-${vm.power_state.toLowerCase()}`} />
+                ) : (
+                  <Icon icon='vm-busy' />
+                )}{' '}
+                <Text value={vm.name_label} onChange={this._setNameLabel} />
+              </h2>{' '}
+              (<strong>{_('uuid')}</strong>: {vm.uuid})
+            </Copiable>
             <span>
               <Text
                 value={vm.name_description}

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

@@ -1,7 +1,6 @@
 import _ from 'intl'
 import ActionButton from 'action-button'
 import Component from 'base-component'
-import Copiable from 'copiable'
 import defined from 'xo-defined'
 import getEventValue from 'get-event-value'
 import Icon from 'icon'
@@ -385,10 +384,6 @@ export default class TabAdvanced extends Component {
             <h3>{_('xenSettingsLabel')}</h3>
             <table className='table'>
               <tbody>
-                <tr>
-                  <th>{_('uuid')}</th>
-                  <Copiable tagName='td'>{vm.uuid}</Copiable>
-                </tr>
                 <tr>
                   <th>{_('virtualizationMode')}</th>
                   <td>