feat(Menu): display when disconnected

Fixes vatesfr/xo-web#1417

src/common/intl/locales/fr.js

@@ -8,6 +8,9 @@ addLocaleData(reactIntlData)
 // ===================================================================
 
 export default {
+  statusConnecting: 'Connexion…',
+  statusDisconnected: 'Déconnecté',
+
   editableLongClickPlaceholder: 'Clic long pour éditer',
   editableClickPlaceholder: 'Cliquer pour éditer',
 

src/common/intl/messages.js

@@ -5,6 +5,9 @@ var forEach = require('lodash/forEach')
 var isString = require('lodash/isString')
 
 var messages = {
+  statusConnecting: 'Connecting',
+  statusDisconnected: 'Disconnected',
+
   editableLongClickPlaceholder: 'Long click to edit',
   editableClickPlaceholder: 'Click to edit',
 

src/common/selectors.js

@@ -212,6 +212,8 @@ const _getId = (state, { routeParams, id }) => routeParams
 
 export const getLang = state => state.lang
 
+export const getStatus = state => state.status
+
 export const getUser = state => state.user
 
 const _getPermissionsPredicate = invoke(() => {

src/common/xo/index.js

@@ -49,6 +49,12 @@ export const signOut = () => {
   window.location.reload(true)
 }
 
+export const connect = () => {
+  xo.open(createBackoff()).catch(error => {
+    logError(error, 'failed to connect to xo-server')
+  })
+}
+
 const xo = invoke(() => {
   const token = cookies.get('token')
   if (!token) {
@@ -60,13 +66,6 @@ const xo = invoke(() => {
     credentials: { token }
   })
 
-  const connect = () => {
-    xo.open(createBackoff()).catch(error => {
-      logError(error, 'failed to connect to xo-server')
-    })
-  }
-  connect()
-
   xo.on('scheduledAttempt', ({ delay }) => {
     console.warn('next attempt in %s ms', delay)
   })
@@ -75,6 +74,7 @@ const xo = invoke(() => {
 
   return xo
 })
+connect()
 
 const _signIn = new Promise(resolve => xo.once('authenticated', resolve))
 

src/xo-app/menu/index.js

@@ -9,13 +9,19 @@ import React from 'react'
 import Tooltip from 'tooltip'
 import { Button } from 'react-bootstrap-4/lib'
 import { connectStore, noop, getXoaPlan } from 'utils'
-import { signOut, subscribePermissions, subscribeResourceSets } from 'xo'
 import { UpdateTag } from '../xoa-updates'
+import {
+  connect,
+  signOut,
+  subscribePermissions,
+  subscribeResourceSets
+} from 'xo'
 import {
   createFilter,
   createGetObjectsOfType,
   createSelector,
   getLang,
+  getStatus,
   getUser
 } from 'selectors'
 
@@ -31,6 +37,7 @@ import styles from './index.css'
     [ task => task.status === 'pending' ]
   ),
   pools: createGetObjectsOfType('pool'),
+  status: getStatus,
   user: getUser
 }), {
   withRef: true
@@ -88,7 +95,7 @@ export default class Menu extends Component {
   }
 
   render () {
-    const { nTasks, user } = this.props
+    const { nTasks, status, user } = this.props
     const isAdmin = user && user.permission === 'admin'
     const noOperatablePools = this._getNoOperatablePools()
     const noResourceSets = isEmpty(this.state.resourceSets)
@@ -201,15 +208,24 @@ export default class Menu extends Component {
             <span className={styles.hiddenCollapsed}>{' '}{_('signOut')}</span>
           </Button>
         </li>
-        <li className='nav-item'>
-          <Link className='nav-link' style={{display: 'flex'}} to={'/user'}>
-            <div style={{margin: 'auto'}}>
-              <Tooltip content={user ? user.email : ''}>
-                <Icon icon='user' size='lg' />
-              </Tooltip>
-            </div>
+        <li className='nav-item xo-menu-item'>
+          <Link className='nav-link text-xs-center' to={'/user'}>
+            <Tooltip content={user ? user.email : ''}>
+              <Icon icon='user' size='lg' />
+            </Tooltip>
           </Link>
         </li>
+        <li>&nbsp;</li>
+        <li>&nbsp;</li>
+        {status === 'connecting'
+          ? <li className='nav-item text-xs-center'>{_('statusConnecting')}</li>
+          : status === 'disconnected' &&
+            <li className='nav-item text-xs-center xo-menu-item'>
+              <Button className='nav-link' onClick={connect}>
+                {_('statusDisconnected')}
+              </Button>
+            </li>
+        }
       </ul>
     </div>
   }