feat(xo-web/vm/export): allow to copy the export URL (#5948)

CHANGELOG.unreleased.md

@@ -10,6 +10,7 @@
 - [Tasks] Filter out short tasks using a default filter (PR [#5921](https://github.com/vatesfr/xen-orchestra/pull/5921))
 - [Jobs] Ability to copy a job ID (PR [#5951](https://github.com/vatesfr/xen-orchestra/pull/5951))
 - [Host/advanced] Add button to enable/disable the host (PR [#5952](https://github.com/vatesfr/xen-orchestra/pull/5952))
+- [VM/export] Ability to copy the export URL (PR [#5948](https://github.com/vatesfr/xen-orchestra/pull/5948))
 
 ### Bug fixes
 

packages/xo-web/src/common/intl/messages.js

@@ -714,6 +714,8 @@ const messages = {
 
   // ----- VM actions ------
   cantInterPoolCopy: 'Interpool copy requires at least Enterprise plan',
+  copyExportedUrl: 'Copy the export URL of the VM',
+  downloadVm: 'Download VM',
   startVmLabel: 'Start',
   startVmOnLabel: 'Start on…',
   startVmOnMissingHostTitle: 'No host selected',
@@ -735,6 +737,7 @@ const messages = {
   cloneVmLabel: 'Clone',
   fastCloneVmLabel: 'Fast clone',
   vmConsoleLabel: 'Console',
+  vmExportUrlValidity: 'The URL is valid once for a short period of time.',
   backupLabel: 'Backup',
 
   // ----- SR general tab -----

packages/xo-web/src/common/xo/index.js

@@ -1,5 +1,6 @@
 import asap from 'asap'
 import cookies from 'js-cookie'
+import copy from 'copy-to-clipboard'
 import fpSortBy from 'lodash/fp/sortBy'
 import React from 'react'
 import updater from 'xoa-updater'
@@ -13,6 +14,7 @@ import { filter, forEach, get, includes, isEmpty, isEqual, map, once, size, sort
 import { forbiddenOperation, incorrectState, noHostsAvailable, vmLacksFeature } from 'xo-common/api-errors'
 
 import _ from '../intl'
+import ActionButton from '../action-button'
 import fetch, { post } from '../fetch'
 import invoke from '../invoke'
 import Icon from '../icon'
@@ -1645,18 +1647,35 @@ export const importDisks = (disks, sr) =>
   )
 
 import ExportVmModalBody from './export-vm-modal' // eslint-disable-line import/first
-export const exportVm = vm =>
+export const exportVm = async vm => {
-  confirm({
+  const compress = await confirm({
     body: <ExportVmModalBody vm={vm} />,
     icon: 'export',
     title: _('exportVmLabel'),
-  }).then(compress => {
-    const id = resolveId(vm)
-    info(_('startVmExport'), id)
-    return _call('vm.export', { vm: id, compress }).then(({ $getFrom: url }) => {
-      window.open(`.${url}`)
-    })
   })
+  const id = resolveId(vm)
+  const { $getFrom: url } = await _call('vm.export', { vm: id, compress })
+  const fullUrl = window.location.origin + url
+  const copytoClipboard = () => copy(fullUrl)
+  const _info = () => info(_('startVmExport'), id)
+
+  await confirm({
+    body: (
+      <div>
+        <a href={fullUrl} onClick={_info}>
+          {_('downloadVm')}
+        </a>{' '}
+        <ActionButton handler={copytoClipboard} icon='clipboard' tooltip={_('copyExportedUrl')} size='small' />
+        <br />
+        <Icon icon='info' /> <em>{_('vmExportUrlValidity')}</em>
+      </div>
+    ),
+    icon: 'download',
+    title: _('downloadVm'),
+  })
+  _info()
+  window.open(`.${url}`)
+}
 
 export const exportVdi = vdi => {
   info(_('startVdiExport'), vdi.id)