finish the PR and test it

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

@@ -3621,7 +3621,8 @@ export const unlockXosan = (licenseId, srId) => _call('xosan.unlock', { licenseI
 
 export const bindLicense = (licenseId, boundObjectId) => _call('xoa.licenses.bind', { licenseId, boundObjectId })
 
-export const rebindItemLicense = () => _call('xoa.licenses.rebindItem')
+export const rebindObjectLicense = (boundObjectId, licenseId, productId) =>
+  _call('xoa.licenses.rebindObject', { boundObjectId, licenseId, productId })
 
 export const bindXcpngLicense = (licenseId, boundObjectId) =>
   bindLicense(licenseId, boundObjectId)::tap(subscribeXcpngLicenses.forceRefresh)

packages/xo-web/src/xo-app/xoa/licenses/license-form.js

@@ -3,7 +3,7 @@ import ActionButton from 'action-button'
 import Component from 'base-component'
 import React from 'react'
 import SelectLicense from 'select-license'
-import { bindLicense, rebindItemLicense } from 'xo'
+import { bindLicense, rebindObjectLicense } from 'xo'
 
 import BulkIcons from '../../../common/bulk-icons'
 
@@ -12,14 +12,15 @@ export default class LicenseForm extends Component {
     licenseId: 'none',
   }
 
-  bind = () => {
+  bind = async () => {
     const { userData, item, itemUuidPath = 'uuid', license } = this.props
     if (license !== undefined) {
-      // item uuid, old license id, new license id
-      return rebindItemLicense(item.uuid, license.id, this.sate.licenseId)
+      await rebindObjectLicense(item[itemUuidPath], this.state.licenseId, license.productId)
+    } else {
+      await bindLicense(this.state.licenseId, item[itemUuidPath])
     }
-
-    return bindLicense(this.state.licenseId, item[itemUuidPath]).then(userData.updateLicenses)
+    userData.updateLicenses()
+    this.setState({ licenseId: 'none' })
   }
 
   render() {
@@ -31,7 +32,11 @@ export default class LicenseForm extends Component {
           <BulkIcons alerts={this.props.alerts} />
         </div>
         <form className='form-inline ml-1'>
-          <SelectLicense onChange={this.linkState('licenseId')} productType={this.props.productType} />
+          <SelectLicense
+            onChange={this.linkState('licenseId')}
+            productType={this.props.productType}
+            value={this.state.licenseId}
+          />
           <ActionButton
             btnStyle='primary'
             className='ml-1'

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

@@ -1,58 +1,69 @@
 import _ from 'intl'
 import Component from 'base-component'
 import decorate from 'apply-decorators'
-import Icon from 'icon'
 import React from 'react'
 import SortedTable from 'sorted-table'
-import Tooltip from 'tooltip'
 import { addSubscriptions } from 'utils'
 import groupBy from 'lodash/groupBy.js'
+import { createSelector } from 'selectors'
 import { injectState, provideState } from 'reaclette'
 import { Proxy, Vm } from 'render-xo-item'
-import { subscribeProxies, bindLicense } from 'xo'
+import { subscribeProxies } from 'xo'
 
 import LicenseForm from './license-form'
 
 class ProxyLicensesForm extends Component {
-  state = {
-    licenseId: 'none',
-  }
+  getAlerts = createSelector(
+    () => this.props.item,
+    () => this.props.userData,
+    (proxy, userData) => {
+      const alerts = []
+      const licenses = userData.licensesByVmUuid[proxy.vmUuid]
 
-  onChangeLicense = event => {
-    this.setState({ licenseId: event.target.value })
-  }
+      if (proxy.vmUuid === undefined) {
+        alerts.push({
+          level: 'danger',
+          render: (
+            <p>
+              {_('proxyUnknownVm')} <a href='https://xen-orchestra.com/'>{_('contactUs')}</a>
+            </p>
+          ),
+        })
+      }
 
-  bind = () => {
-    const { item, userData } = this.props
-    return bindLicense(this.state.licenseId, item.vmUuid).then(userData.updateLicenses)
-  }
+      // Proxy bound to multiple licenses
+      if (licenses?.length > 1) {
+        alerts.push({
+          level: 'danger',
+          render: (
+            <p>
+              {_('proxyMultipleLicenses')}
+              <br />
+              {licenses.map(license => license.id.slice(-4)).join(',')}
+            </p>
+          ),
+        })
+      }
+      return alerts
+    }
+  )
 
   render() {
+    const alerts = this.getAlerts()
     const { item, userData } = this.props
     const licenses = userData.licensesByVmUuid[item.vmUuid]
 
-    if (item.vmUuid === undefined) {
-      return (
-        <span className='text-danger'>
-          {_('proxyUnknownVm')} <a href='https://xen-orchestra.com/'>{_('contactUs')}</a>
-        </span>
-      )
-    }
-
-    // Proxy bound to multiple licenses
-    if (licenses?.length > 1) {
-      return (
-        <div>
-          <span>{licenses.map(license => license.id.slice(-4)).join(',')}</span>{' '}
-          <Tooltip content={_('proxyMultipleLicenses')}>
-            <Icon color='text-danger' icon='alarm' />
-          </Tooltip>
-        </div>
-      )
-    }
-
     const license = licenses?.[0]
-    return <LicenseForm userData={userData} item={item} productType='xoproxy' license={license} itemUuidPath='vmUuid' />
+    return (
+      <LicenseForm
+        alerts={alerts}
+        item={item}
+        itemUuidPath='vmUuid'
+        license={license}
+        productType='xoproxy'
+        userData={userData}
+      />
+    )
   }
 }
 

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

@@ -51,7 +51,7 @@ class XostorLicensesForm extends Component {
     const licenses = userData.licensesByXostorUuid[item.id]
     const license = licenses?.[0]
 
-    return <LicenseForm userData={userData} item={item} productType='xostor' alerts={alerts} license={license} />
+    return <LicenseForm alerts={alerts} item={item} license={license} productType='xostor' userData={userData} />
   }
 }