feat: Hide profile and storage link if settings app not installed

It will be useful in some env from special client where settings app is not installed.

It was easier to reuse existing react-redux logic.

Author: zatteo

src/components/UserMenu/UserMenuContent.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import cx from 'classnames'
+import { connect } from 'react-redux'
 
 import flag from 'cozy-flags'
 import { useWebviewIntent } from 'cozy-intent'
@@ -21,12 +22,19 @@ import Button from 'cozy-ui/transpiled/react/Buttons'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
+import { getIsSettingsAppInstalled } from 'lib/reducers'
 import useI18n from 'components/useI18n'
 import styles from 'styles/user-menu.styl'
 import AvatarMyself from './components/AvatarMyself'
 import { getSettingsLink, logOut } from './helpers'
 
-const UserMenuContent = ({ onLogOut, instance, diskUsage, closeMenu }) => {
+const UserMenuContent = ({
+  onLogOut,
+  instance,
+  diskUsage,
+  isSettingsAppInstalled,
+  closeMenu
+}) => {
   const webviewIntent = useWebviewIntent()
 
   const client = useClient()
@@ -63,19 +71,21 @@ const UserMenuContent = ({ onLogOut, instance, diskUsage, closeMenu }) => {
         )}
       </div>
       <List className="u-pb-0">
-        <ListItem
-          button
-          gutters={gutters}
-          size="small"
-          component="a"
-          href={profileLink}
-          onClick={closeMenu}
-        >
-          <ListItemIcon>
-            <Icon icon={FromUserIcon} />
-          </ListItemIcon>
-          <ListItemText primary={t('userMenu.manageProfile')} />
-        </ListItem>
+        {isSettingsAppInstalled && (
+          <ListItem
+            button
+            gutters={gutters}
+            size="small"
+            component="a"
+            href={profileLink}
+            onClick={closeMenu}
+          >
+            <ListItemIcon>
+              <Icon icon={FromUserIcon} />
+            </ListItemIcon>
+            <ListItemText primary={t('userMenu.manageProfile')} />
+          </ListItem>
+        )}
         {flag('cozy.b2b.enabled') && (
           <ListItem
             button
@@ -91,28 +101,30 @@ const UserMenuContent = ({ onLogOut, instance, diskUsage, closeMenu }) => {
             <ListItemText primary={t('userMenu.createBusinessAccount')} />
           </ListItem>
         )}
-        <ListItem
-          button
-          gutters={gutters}
-          size="small"
-          component="a"
-          href={storageLink}
-          onClick={closeMenu}
-        >
-          <ListItemIcon>
-            <Icon icon={CloudRainbowIcon} />
-          </ListItemIcon>
-          <ListItemText
-            primary={t('userMenu.storage')}
-            secondary={t(
-              'userMenu.storageAvailable',
-              humanDiskQuota - humanDiskUsage
-            )}
-          />
-          <ListItemIcon>
-            <Icon icon={RightIcon} />
-          </ListItemIcon>
-        </ListItem>
+        {isSettingsAppInstalled && (
+          <ListItem
+            button
+            gutters={gutters}
+            size="small"
+            component="a"
+            href={storageLink}
+            onClick={closeMenu}
+          >
+            <ListItemIcon>
+              <Icon icon={CloudRainbowIcon} />
+            </ListItemIcon>
+            <ListItemText
+              primary={t('userMenu.storage')}
+              secondary={t(
+                'userMenu.storageAvailable',
+                humanDiskQuota - humanDiskUsage
+              )}
+            />
+            <ListItemIcon>
+              <Icon icon={RightIcon} />
+            </ListItemIcon>
+          </ListItem>
+        )}
 
         <Divider component="li" variant="inset" />
 
@@ -132,4 +144,8 @@ const UserMenuContent = ({ onLogOut, instance, diskUsage, closeMenu }) => {
   )
 }
 
-export default UserMenuContent
+const mapStateToProps = state => ({
+  isSettingsAppInstalled: getIsSettingsAppInstalled(state)
+})
+
+export default connect(mapStateToProps)(UserMenuContent)

src/lib/reducers/apps.js

@@ -11,6 +11,7 @@ const FETCH_APPS = 'FETCH_APPS'
 const FETCH_APPS_FAILURE = 'FETCH_APPS_FAILURE'
 const FETCH_APPS_SUCCESS = 'FETCH_APPS_SUCCESS'
 const SET_INFOS = 'SET_INFOS'
+const SET_IS_SETTINGS_APP_INSTALLED = 'SET_IS_SETTINGS_APP_INSTALLED'
 
 export const isCurrentApp = (state, app) => app.slug === state.appSlug
 
@@ -28,6 +29,10 @@ export const isFetchingApps = state => {
   return state ? state.isFetching : false
 }
 
+export const getIsSettingsAppInstalled = state => {
+  return state ? state.isSettingsAppInstalled : false
+}
+
 export const hasFetched = state => state.hasFetched
 
 // actions
@@ -41,18 +46,29 @@ export const setInfos = (appName, appNamePrefix, appSlug) => ({
   appNamePrefix,
   appSlug
 })
+export const setIsSettingsAppInstalled = isSettingsAppInstalled => ({
+  type: SET_IS_SETTINGS_APP_INSTALLED,
+  isSettingsAppInstalled
+})
 
 // actions async
 export const fetchApps = () => async dispatch => {
   try {
     dispatch({ type: FETCH_APPS })
     const rawAppList = await stack.get.apps()
+    if (!rawAppList.length)
+      throw new Error('No installed apps found by the bar')
+
+    // We need to store if settings app is installed because it maybe be filtered because of apps.hidden
+    const isSettingsAppInstalled = rawAppList.some(
+      app => app?.attributes?.slug === 'settings'
+    )
+    await dispatch(setIsSettingsAppInstalled(isSettingsAppInstalled))
+
     const excludedApps = flag('apps.hidden') || []
     const apps = rawAppList
       .map(mapApp)
       .filter(app => !excludedApps.includes(app.slug))
-    if (!rawAppList.length)
-      throw new Error('No installed apps found by the bar')
     // TODO load only one time icons
     await dispatch(setDefaultApp(apps))
     await dispatch(receiveAppList(apps))
@@ -89,7 +105,8 @@ const defaultState = {
   appName: null,
   appNamePrefix: null,
   appSlug: null,
-  hasFetched: false
+  hasFetched: false,
+  isSettingsAppInstalled: false
 }
 
 const reducer = (state = defaultState, action) => {
@@ -137,6 +154,11 @@ const reducer = (state = defaultState, action) => {
         appNamePrefix: action.appNamePrefix,
         appSlug: action.appSlug
       }
+    case SET_IS_SETTINGS_APP_INSTALLED:
+      return {
+        ...state,
+        isSettingsAppInstalled: action.isSettingsAppInstalled
+      }
     default:
       return state
   }

src/lib/reducers/index.js

@@ -16,6 +16,10 @@ const logOut = settings.logOut
 const fetchContext = context.fetchContext
 export { fetchApps, setInfos, fetchSettingsData, logOut, fetchContext }
 
+export const getIsSettingsAppInstalled = proxy(
+  'apps',
+  apps.getIsSettingsAppInstalled
+)
 export const getApps = proxy('apps', apps.getApps)
 export const getHomeApp = proxy('apps', apps.getHomeApp)
 export const isFetchingApps = proxy('apps', apps.isFetchingApps)