feat: XOA registration notification (#3808)

Fixes #3803

CHANGELOG.md

@@ -17,6 +17,7 @@
 - [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))
 - [Backup NG / logs] Merge the job log status with the display details button [#3797](https://github.com/vatesfr/xen-orchestra/issues/3797) (PR [#3800](https://github.com/vatesfr/xen-orchestra/pull/3800))
+- [XOA] Notification banner when XOA is not registered [#3803](https://github.com/vatesfr/xen-orchestra/issues/3803) (PR [#3808](https://github.com/vatesfr/xen-orchestra/pull/3808))
 
 ### Bug fixes
 

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

@@ -1755,6 +1755,11 @@ const messages = {
     "If you are a company, it's better to use it with our appliance + pro support included:",
   disclaimerText3:
     'This version is not bundled with any support nor updates. Use it with caution for critical tasks.',
+  notRegisteredDisclaimerInfo:
+    'You are not registered. Your XOA may not be up to date.',
+  notRegisteredDisclaimerCreateAccount: 'Click here to create an account.',
+  notRegisteredDisclaimerRegister:
+    'Click here to register and update your XOA.',
 
   // ----- PIF -----
   connectPif: 'Connect PIF',

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

@@ -3,6 +3,7 @@ import cookies from 'cookies-js'
 import DocumentTitle from 'react-document-title'
 import Icon from 'icon'
 import isArray from 'lodash/isArray'
+import Link from 'link'
 import map from 'lodash/map'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -96,6 +97,7 @@ const BODY_STYLE = {
 @connectStore(state => {
   return {
     trial: state.xoaTrialState,
+    registerNeeded: state.xoaUpdaterState === 'registerNeeded',
     signedUp: !!state.user,
   }
 })
@@ -197,36 +199,53 @@ export default class XoApp extends Component {
   }
 
   render() {
-    const { signedUp, trial } = this.props
+    const { signedUp, trial, registerNeeded } = this.props
     const blocked = signedUp && blockXoaAccess(trial) // If we are under expired or unstable trial (signed up only)
 
     return (
       <IntlProvider>
         <ThemeProvider theme={themes.base}>
           <DocumentTitle title='Xen Orchestra'>
-            <div style={CONTAINER_STYLE}>
-              <Shortcuts
-                name='XoApp'
-                handler={this._shortcutsHandler}
-                targetNodeSelector='body'
-                stopPropagation={false}
-              />
-              <Menu ref='menu' />
-              <div ref='bodyWrapper' style={BODY_WRAPPER_STYLE}>
-                <div style={BODY_STYLE}>
-                  {blocked ? (
-                    <XoaUpdates />
-                  ) : signedUp ? (
-                    this.props.children
-                  ) : (
-                    <p>Still loading</p>
-                  )}
+            <div>
+              {process.env.XOA_PLAN < 5 && registerNeeded && (
+                <div className='alert alert-danger mb-0'>
+                  {_('notRegisteredDisclaimerInfo')}{' '}
+                  <a
+                    href='https://xen-orchestra.com/#!/signup'
+                    rel='noopener noreferrer'
+                    target='_blank'
+                  >
+                    {_('notRegisteredDisclaimerCreateAccount')}
+                  </a>{' '}
+                  <Link to='/xoa/update'>
+                    {_('notRegisteredDisclaimerRegister')}
+                  </Link>
                 </div>
+              )}
+              <div style={CONTAINER_STYLE}>
+                <Shortcuts
+                  name='XoApp'
+                  handler={this._shortcutsHandler}
+                  targetNodeSelector='body'
+                  stopPropagation={false}
+                />
+                <Menu ref='menu' />
+                <div ref='bodyWrapper' style={BODY_WRAPPER_STYLE}>
+                  <div style={BODY_STYLE}>
+                    {blocked ? (
+                      <XoaUpdates />
+                    ) : signedUp ? (
+                      this.props.children
+                    ) : (
+                      <p>Still loading</p>
+                    )}
+                  </div>
+                </div>
+                <Modal />
+                <FormModal />
+                <Notification />
+                <TooltipViewer />
               </div>
-              <Modal />
-              <FormModal />
-              <Notification />
-              <TooltipViewer />
             </div>
           </DocumentTitle>
         </ThemeProvider>

packages/xo-web/src/xo-app/self/index.js

@@ -660,7 +660,7 @@ class ResourceSet extends Component {
   }
 
   _autoExpand = ref => {
-    if (ref && ref.scrollIntoView) {
+    if (ref && ref.scrollIntoView && this.props.autoExpand) {
       ref.scrollIntoView()
     }
   }
@@ -703,7 +703,7 @@ export default class Self extends Component {
     this.state = {}
   }
 
-  render () {
+  render() {
     const { showNewResourceSetForm } = this.state
     const { resolvedResourceSets, location } = this.props