fix(xo-web/license): display the license product ID in SelectLicense (#6512)

See zammad#10750

CHANGELOG.unreleased.md

@@ -11,6 +11,7 @@
 - [Proxy] Can now upgrade proxies in VMs not connected to XO
 - [REST API] Expose VM snapshots and templates
 - [REST API] Expose VDI snapshots
+- [Select license] Display product type in the options (PR [#6512](https://github.com/vatesfr/xen-orchestra/pull/6512))
 
 ### Bug fixes
 
@@ -35,7 +36,7 @@
 
 <!--packages-start-->
 
-- xo-web patch
 - xo-server minor
+- xo-web minor
 
 <!--packages-end-->

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

@@ -2409,7 +2409,7 @@ const messages = {
 
   // Licenses
   allHostsMustBeBound: 'All hosts must be bound to a license',
-  bound: 'Bound',
+  boundSelectLicense: 'Bound (Plan (ID), expiration date, host - pool)',
   bindXcpngLicenses: 'Bind XCP-ng licenses',
   confirmBindingOnUnsupportedHost:
     'You are about to bind {nLicenses, number} professional support license{nLicenses, plural, one {} other {s}} on older and unsupported XCP-ng version{nLicenses, plural, one {} other {s}}. Are you sure you want to continue?',
@@ -2417,7 +2417,7 @@ const messages = {
   licenses: 'Licenses',
   licensesBinding: 'Licenses binding',
   notEnoughXcpngLicenses: 'Not enough XCP-ng licenses',
-  notBound: 'Not bound',
+  notBoundSelectLicense: 'Not bound (Plan (ID), expiration date)',
   xosanUnregisteredDisclaimer:
     'You are not registered and therefore will not be able to create or manage your XOSAN SRs. {link}',
   xosanSourcesDisclaimer:

packages/xo-web/src/common/select-license.js

@@ -8,27 +8,18 @@ import { map } from 'lodash'
 
 import { renderXoItemFromId } from './render-xo-item'
 
-const LicenseOptions = ({ license, formatTime }) =>
+const LicenseOptions = ({ license, formatDate }) => {
-  _(
+  const productId = license.productId.split('-')[1]
-    'expiresOn',
+  return (
-    {
+    <option value={license.id}>
-      date:
+      <span>
-        license.expires !== undefined
+        {productId.charAt(0).toUpperCase() + productId.slice(1)} ({license.id.slice(-4)}),{' '}
-          ? formatTime(license.expires, {
+        {license.expires !== undefined ? formatDate(license.expires) : '-'}
-              day: 'numeric',
+        {license.boundObjectId !== undefined && <span>, {renderXoItemFromId(license.boundObjectId)}</span>}
-              month: 'numeric',
+      </span>
-              year: 'numeric',
+    </option>
-            })
-          : '',
-    },
-    expirationDate => (
-      <option value={license.id}>
-        <span>
-          {license.id.slice(-4)} {expirationDate} {license.boundObjectId && renderXoItemFromId(license.boundObjectId)}
-        </span>
-      </option>
-    )
   )
+}
 
 const SelectLicense = decorate([
   injectIntl,
@@ -53,7 +44,7 @@ const SelectLicense = decorate([
     },
   }),
   injectState,
-  ({ state: { licenses }, intl: { formatTime }, onChange, showBoundLicenses }) =>
+  ({ state: { licenses }, intl: { formatDate }, onChange, showBoundLicenses }) =>
     licenses?.licenseError !== undefined ? (
       <span>
         <em className='text-danger'>{_('getLicensesError')}</em>
@@ -66,18 +57,18 @@ const SelectLicense = decorate([
           </option>
         ))}
 
-        {_('notBound', i18nNotBound => (
+        {_('notBoundSelectLicense', i18nNotBound => (
           <optgroup label={i18nNotBound}>
             {map(licenses?.notBound, license => (
-              <LicenseOptions formatTime={formatTime} key={license.id} license={license} />
+              <LicenseOptions formatDate={formatDate} key={license.id} license={license} />
             ))}
           </optgroup>
         ))}
         {showBoundLicenses &&
-          _('bound', i18nBound => (
+          _('boundSelectLicense', i18nBound => (
             <optgroup label={i18nBound}>
               {map(licenses?.bound, license => (
-                <LicenseOptions formatTime={formatTime} key={license.id} license={license} />
+                <LicenseOptions formatDate={formatDate} key={license.id} license={license} />
               ))}
             </optgroup>
           ))}