feat(xo-web/xoa): display proxy licenses (#4944)

There are three license states:
- license bound to an `XOA` which **is** linked to a proxy: display proxy link
- license bound to an `XOA` which **isn't** linked to a proxy: display `License attached to an unknown proxy` 
- license not bound to any `XOA`: display `No proxy attached`

CHANGELOG.unreleased.md

@@ -8,6 +8,7 @@
 > Users must be able to say: “Nice enhancement, I'm eager to test it”
 
 - [VM] Move boot order setting from Disk tab to Advanced tab [#1523](https://github.com/vatesfr/xen-orchestra/issues/1523#issuecomment-563141573) (PR [#4975](https://github.com/vatesfr/xen-orchestra/pull/4975))
+- [XOA/licenses] Display proxy licenses (PR [#4944](https://github.com/vatesfr/xen-orchestra/pull/4944))
 
 ### Bug fixes
 
@@ -34,4 +35,4 @@
 
 - @xen-orchestra/fs patch
 - xo-server patch
-- xo-web patch
+- xo-web minor

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

@@ -2287,7 +2287,9 @@ const messages = {
   licensePurchaserYou: 'You',
   productSupport: 'Support',
   licenseNotBoundXosan: 'No XOSAN attached',
+  licenseNotBoundProxy: 'No proxy attached',
   licenseBoundUnknownXosan: 'License attached to an unknown XOSAN',
+  licenseBoundUnknownProxy: 'License attached to an unknown proxy',
   licensesManage: 'Manage the licenses',
   newLicense: 'New license',
   refreshLicenses: 'Refresh',

packages/xo-web/src/common/render-xo-item.js

@@ -382,11 +382,20 @@ export const Proxy = decorate([
     proxy: cb =>
       subscribeProxies(proxies => cb(proxies.find(proxy => proxy.id === id))),
   })),
-  ({ id, proxy }) =>
+  ({ id, proxy, link, newTab }) =>
     proxy !== undefined ? (
-      <span>
+      <LinkWrapper
+        link={link}
+        newTab={newTab}
+        to={{
+          pathname: '/proxies',
+          query: {
+            s: `id:${id}`,
+          },
+        }}
+      >
         <Icon icon='proxy' /> {proxy.name || proxy.address}
-      </span>
+      </LinkWrapper>
     ) : (
       unknowItem(id, 'proxy')
     ),
@@ -394,6 +403,13 @@ export const Proxy = decorate([
 
 Proxy.propTypes = {
   id: PropTypes.string.isRequired,
+  link: PropTypes.bool,
+  newTab: PropTypes.bool,
+}
+
+Proxy.defaultProps = {
+  link: false,
+  newTab: false,
 }
 
 // ===================================================================

packages/xo-web/src/xo-app/xoa/licenses/index.js

@@ -1,10 +1,11 @@
 import _ from 'intl'
 import ActionButton from 'action-button'
 import Component from 'base-component'
+import decorate from 'apply-decorators'
 import Icon from 'icon'
 import Link from 'link'
 import React from 'react'
-import renderXoItem from 'render-xo-item'
+import renderXoItem, { Proxy } from 'render-xo-item'
 import SortedTable from 'sorted-table'
 import { addSubscriptions, adminOnly, connectStore, ShortDate } from 'utils'
 import { CURRENT, productId2Plan, getXoaPlan } from 'xoa-plans'
@@ -16,6 +17,7 @@ import {
   getLicenses,
   selfBindLicense,
   subscribePlugins,
+  subscribeProxies,
   subscribeSelfLicenses,
 } from 'xo'
 
@@ -23,6 +25,25 @@ import Xosan from './xosan'
 
 // -----------------------------------------------------------------------------
 
+const ProxyLicense = decorate([
+  addSubscriptions(({ license }) => ({
+    proxy: cb =>
+      subscribeProxies(proxies =>
+        cb(
+          license.vmId && proxies.find(({ vmUuid }) => vmUuid === license.vmId)
+        )
+      ),
+  })),
+  ({ license, proxy }) =>
+    license.vmId === undefined ? (
+      _('licenseNotBoundProxy')
+    ) : proxy !== undefined ? (
+      <Proxy id={proxy.id} link newTab />
+    ) : (
+      _('licenseBoundUnknownProxy')
+    ),
+])
+
 const LicenseManager = ({ item, userData }) => {
   const { type } = item
 
@@ -75,6 +96,10 @@ const LicenseManager = ({ item, userData }) => {
     return <span>{_('licenseBoundToOtherXoa')}</span>
   }
 
+  if (type === 'proxy') {
+    return <ProxyLicense license={item} />
+  }
+
   console.warn('encountered unsupported license type')
   return null
 }
@@ -144,15 +169,23 @@ export default class Licenses extends Component {
 
     return getLicenses()
       .then(licenses => {
-        const { xoa, xosan } = groupBy(licenses, license =>
+        const { proxy, xoa, xosan } = groupBy(licenses, license => {
-          license.productTypes.includes('xo')
+          for (const productType of license.productTypes) {
-            ? 'xoa'
+            if (productType === 'xo') {
-            : license.productTypes.includes('xosan')
+              return 'xoa'
-            ? 'xosan'
+            }
-            : 'other'
+            if (productType === 'xosan') {
-        )
+              return 'xosan'
+            }
+            if (productType === 'xoproxy') {
+              return 'proxy'
+            }
+          }
+          return 'other'
+        })
         this.setState({
           licenses: {
+            proxy,
             xoa,
             xosan,
           },
@@ -207,6 +240,21 @@ export default class Licenses extends Component {
         }
       })
 
+      // --- proxy ---
+      forEach(licenses.proxy, license => {
+        // When `expires` is undefined, the license isn't expired
+        if (!(license.expires < now)) {
+          products.push({
+            buyer: license.buyer,
+            expires: license.expires,
+            id: license.id,
+            product: _('proxy'),
+            type: 'proxy',
+            vmId: license.boundObjectId,
+          })
+        }
+      })
+
       return products
     }
   )