fix(xo-web/menu/xoa): display icon when no notifications nor updates (#4068)

Fixes #4012

CHANGELOG.unreleased.md

@@ -13,6 +13,7 @@
 - [Continuous Replication] Fix VHD size guess for empty files [#4105](https://github.com/vatesfr/xen-orchestra/issues/4105)  (PR [#4107](https://github.com/vatesfr/xen-orchestra/pull/4107))
 - [Backup NG] Only display full backup interval in case of a delta backup (PR [#4125](https://github.com/vatesfr/xen-orchestra/pull/4107))
 - [Dashboard/Health] fix 'an error has occurred' on the storage state table [#4128](https://github.com/vatesfr/xen-orchestra/issues/4128)  (PR [#4132](https://github.com/vatesfr/xen-orchestra/pull/4132))
+- [Menu] XOA: Fixed empty slot when menu is collapsed [#4012](https://github.com/vatesfr/xen-orchestra/issues/4012) (PR [#4068](https://github.com/vatesfr/xen-orchestra/pull/4068)
 
 ### Released packages
 

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

@@ -213,6 +213,8 @@ export const getStatus = state => state.status
 
 export const getUser = state => state.user
 
+export const getXoaState = state => state.xoaUpdaterState
+
 export const getCheckPermissions = invoke(() => {
   const getPredicate = create(
     state => state.permissions,

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

@@ -2,9 +2,7 @@ import _ from 'intl'
 import classNames from 'classnames'
 import Component from 'base-component'
 import Icon from 'icon'
-import isEmpty from 'lodash/isEmpty'
 import Link from 'link'
-import map from 'lodash/map'
 import React from 'react'
 import Tooltip from 'tooltip'
 import { UpdateTag } from '../xoa/update'
@@ -13,6 +11,7 @@ import { addSubscriptions, connectStore, getXoaPlan, noop } from 'utils'
 import {
   connect,
   signOut,
+  subscribeNotifications,
   subscribePermissions,
   subscribeResourceSets,
 } from 'xo'
@@ -23,8 +22,10 @@ import {
   getIsPoolAdmin,
   getStatus,
   getUser,
+  getXoaState,
   isAdmin,
 } from 'selectors'
+import { every, identity, isEmpty, map } from 'lodash'
 
 import styles from './index.css'
 
@@ -34,20 +35,22 @@ const returnTrue = () => true
   () => ({
     isAdmin,
     isPoolAdmin: getIsPoolAdmin,
+    nHosts: createGetObjectsOfType('host').count(),
     nTasks: createGetObjectsOfType('task').count([
       task => task.status === 'pending',
     ]),
     pools: createGetObjectsOfType('pool'),
-    nHosts: createGetObjectsOfType('host').count(),
     srs: createGetObjectsOfType('SR'),
     status: getStatus,
     user: getUser,
+    xoaState: getXoaState,
   }),
   {
     withRef: true,
   }
 )
 @addSubscriptions({
+  notifications: subscribeNotifications,
   permissions: subscribePermissions,
   resourceSets: subscribeResourceSets,
 })
@@ -88,6 +91,11 @@ export default class Menu extends Component {
     isEmpty
   )
 
+  _getNoNotifications = createSelector(
+    () => this.props.notifications,
+    notifications => every(notifications, { read: true })
+  )
+
   get height() {
     return this.refs.content.offsetHeight
   }
@@ -118,9 +126,11 @@ export default class Menu extends Component {
       pools,
       nHosts,
       srs,
+      xoaState,
     } = this.props
     const noOperatablePools = this._getNoOperatablePools()
     const noResourceSets = this._getNoResourceSets()
+    const noNotifications = this._getNoNotifications()
 
     /* eslint-disable object-property-newline */
     const items = [
@@ -247,16 +257,12 @@ export default class Menu extends Component {
         to: isAdmin ? 'xoa/update' : 'xoa/notifications',
         icon: 'menu-xoa',
         label: 'xoa',
-        extra: (
-          <span>
-            {isAdmin && (
-              <span>
-                <UpdateTag />{' '}
-              </span>
-            )}
-            <NotificationTag />
-          </span>
-        ),
+        extra: [
+          !isAdmin || xoaState === 'upToDate' ? null : (
+            <UpdateTag key='update' />
+          ),
+          noNotifications ? null : <NotificationTag key='notification' />,
+        ],
         subMenu: [
           isAdmin && {
             to: 'xoa/update',
@@ -528,6 +534,7 @@ export default class Menu extends Component {
 const MenuLinkItem = props => {
   const { item } = props
   const { to, icon, label, subMenu, pill, extra } = item
+  const _extra = extra !== undefined ? extra.find(e => e !== null) : undefined
 
   return (
     <li className='nav-item xo-menu-item'>
@@ -537,7 +544,7 @@ const MenuLinkItem = props => {
         to={to}
       >
         <Icon
-          className={classNames((pill || extra) && styles.hiddenCollapsed)}
+          className={classNames((pill || _extra) && styles.hiddenCollapsed)}
           icon={`${icon}`}
           size='lg'
           fixedWidth
@@ -548,7 +555,10 @@ const MenuLinkItem = props => {
           &nbsp;
         </span>
         {pill > 0 && <span className='tag tag-pill tag-primary'>{pill}</span>}
-        {extra}
+        <span className={styles.hiddenUncollapsed}>{_extra}</span>
+        <span className={styles.hiddenCollapsed}>
+          {extra !== undefined && extra.map(identity)}
+        </span>
       </Link>
       {subMenu && <SubMenu items={subMenu} />}
     </li>