feat(xo-web/backup-ng/overview): ability to copy schedule/job id to clipboard (#3791)

Fixes #3753

CHANGELOG.md

@@ -15,6 +15,7 @@
 - [Backup NG] Disable HA on replicated VM (CR, DR) [#2359](https://github.com/vatesfr/xen-orchestra/issues/2359) (PR [#3755](https://github.com/vatesfr/xen-orchestra/pull/3755))
 - [Backup NG] Display the last run status for each schedule with the possibility to show the associated log [#3769](https://github.com/vatesfr/xen-orchestra/issues/3769) (PR [#3779](https://github.com/vatesfr/xen-orchestra/pull/3779))
 - [Backup NG] Add a link to the documentation [#3789](https://github.com/vatesfr/xen-orchestra/issues/3789) (PR [#3790](https://github.com/vatesfr/xen-orchestra/pull/3790))
+- [Backup NG] Ability to copy schedule/job id to the clipboard [#3753](https://github.com/vatesfr/xen-orchestra/issues/3753) (PR [#3791](https://github.com/vatesfr/xen-orchestra/pull/3791))
 
 ### Bug fixes
 

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

@@ -1338,6 +1338,7 @@ const messages = {
   scheduleCron: 'Cron pattern',
   scheduleLastRun: 'Click to display last run details',
   scheduleName: 'Name',
+  scheduleCopyId: 'Copy ID {id}',
   scheduleTimezone: 'Timezone',
   scheduleExportRetention: 'Backup ret.',
   scheduleCopyRetention: 'Replication ret.',

packages/xo-web/src/xo-app/backup-ng/index.js

@@ -1,12 +1,16 @@
 import _ from 'intl'
 import ActionButton from 'action-button'
 import addSubscriptions from 'add-subscriptions'
+import Button from 'button'
+import Copiable from 'copiable'
+import CopyToClipboard from 'react-copy-to-clipboard'
 import decorate from 'apply-decorators'
 import Icon from 'icon'
 import PropTypes from 'prop-types'
 import React from 'react'
 import SortedTable from 'sorted-table'
 import StateButton from 'state-button'
+import Tooltip from 'tooltip'
 import { Card, CardHeader, CardBlock } from 'card'
 import { confirm } from 'modal'
 import { constructQueryString } from 'smart-backup'
@@ -74,11 +78,18 @@ const SchedulePreviewBody = decorate([
   })),
   ({ job, schedule, lastRunLog }) => (
     <Ul>
-      {schedule.name ? (
-        <Li>{_.keyValue(_('scheduleName'), schedule.name)}</Li>
-      ) : (
-        <Li>{_.keyValue(_('scheduleCron'), schedule.cron)}</Li>
-      )}
+      <Li>
+        {schedule.name
+          ? _.keyValue(_('scheduleName'), schedule.name)
+          : _.keyValue(_('scheduleCron'), schedule.cron)}{' '}
+        <Tooltip content={_('scheduleCopyId', { id: schedule.id.slice(4, 8) })}>
+          <CopyToClipboard text={schedule.id}>
+            <Button size='small'>
+              <Icon icon='clipboard' />
+            </Button>
+          </CopyToClipboard>
+        </Tooltip>
+      </Li>
       <Li>
         <StateButton
           disabledLabel={_('stateDisabled')}
@@ -181,7 +192,11 @@ class JobsTable extends React.Component {
     ],
     columns: [
       {
-        itemRenderer: _ => _.id.slice(4, 8),
+        itemRenderer: ({ id }) => (
+          <Copiable data={id} tagName='p'>
+            {id.slice(4, 8)}
+          </Copiable>
+        ),
         name: _('jobId'),
       },
       {