fix: org breadcrumb shows wrong name for non-admin users (#7234)

Author: talissoncosta

frontend/common/hooks/useSelectedOrganisation.ts

@@ -0,0 +1,17 @@
+import { useSelector } from 'react-redux'
+import { useGetOrganisationsQuery } from 'common/services/useOrganisation'
+import { StoreStateType } from 'common/store'
+
+const useSelectedOrganisation = () => {
+  const selectedId = useSelector(
+    (state: StoreStateType) => state.selectedOrganisation?.id,
+  )
+  const { data: organisationsData } = useGetOrganisationsQuery({})
+  const organisation = organisationsData?.results?.find(
+    (org) => org.id === selectedId,
+  )
+
+  return organisation
+}
+
+export default useSelectedOrganisation

frontend/common/selectedOrganisationSlice.ts

@@ -0,0 +1,22 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+type SelectedOrganisationState = {
+  id: number | undefined
+}
+
+const initialState: SelectedOrganisationState = {
+  id: undefined,
+}
+
+const selectedOrganisationSlice = createSlice({
+  initialState,
+  name: 'selectedOrganisation',
+  reducers: {
+    setSelectedOrganisationId(state, action: PayloadAction<number>) {
+      state.id = action.payload
+    },
+  },
+})
+
+export const { setSelectedOrganisationId } = selectedOrganisationSlice.actions
+export default selectedOrganisationSlice.reducer

frontend/common/store.ts

@@ -13,10 +13,12 @@ import {
 import storage from 'redux-persist/lib/storage'
 import { Persistor } from 'redux-persist/es/types'
 import { service } from './service'
+import selectedOrganisationReducer from './selectedOrganisationSlice'
 // END OF IMPORTS
 const createStore = () => {
   const reducer = combineReducers({
     [service.reducerPath]: service.reducer,
+    selectedOrganisation: selectedOrganisationReducer,
     // END OF REDUCERS
   })
 

frontend/common/stores/account-store.js

@@ -12,6 +12,7 @@ import dataRelay from 'data-relay'
 import { sortBy } from 'lodash'
 import Project from 'common/project'
 import { getStore } from 'common/store'
+import { setSelectedOrganisationId } from 'common/selectedOrganisationSlice'
 import { service } from 'common/service'
 import { getBuildVersion } from 'common/services/useBuildVersion'
 import { createOnboardingSupportOptIn } from 'common/services/useOnboardingSupportOptIn'
@@ -309,6 +310,7 @@ const controller = {
   selectOrganisation: (id) => {
     API.setCookie('organisation', `${id}`)
     store.organisation = find(store.model.organisations, { id })
+    getStore().dispatch(setSelectedOrganisationId(id))
     store.changed()
   },
 
@@ -344,6 +346,9 @@ const controller = {
             AppActions.getOrganisation(orgId)
           }
         }
+        if (store.organisation?.id) {
+          getStore().dispatch(setSelectedOrganisationId(store.organisation.id))
+        }
       }
 
       AsyncStorage.setItem('user', JSON.stringify(store.model))

frontend/web/components/BreadcrumbSeparator.tsx

@@ -13,7 +13,6 @@ import AccountStore from 'common/stores/account-store'
 import { useGetProjectsQuery } from 'common/services/useProject'
 import { useGetOrganisationsQuery } from 'common/services/useOrganisation'
 import { useHistory } from 'react-router-dom'
-import OrganisationStore from 'common/stores/organisation-store'
 import AppActions from 'common/dispatcher/app-actions'
 import Utils from 'common/utils/utils'
 import { getStore } from 'common/store'
@@ -177,7 +176,7 @@ const BreadcrumbSeparator: FC<BreadcrumbSeparatorType> = ({
     }
     AccountStore.on('change', onChangeAccountStore)
     return () => {
-      OrganisationStore.off('change', onChangeAccountStore)
+      AccountStore.off('change', onChangeAccountStore)
     }
     //eslint-disable-next-line
   }, [])

frontend/web/components/navigation/SelectOrgAndProject.tsx

@@ -1,11 +1,10 @@
 import React, { FC } from 'react'
-import AccountStore from 'common/stores/account-store'
 import { Link, NavLink } from 'react-router-dom'
 import BreadcrumbSeparator from 'components/BreadcrumbSeparator'
 import classNames from 'classnames'
 import Utils from 'common/utils/utils'
 import { Project } from 'common/types/responses'
-import { useGetOrganisationQuery } from 'common/services/useOrganisation'
+import useSelectedOrganisation from 'common/hooks/useSelectedOrganisation'
 import { appLevelPaths } from './constants'
 
 type SelectOrgAndProjectType = {
@@ -18,12 +17,7 @@ const SelectOrgAndProject: FC<SelectOrgAndProjectType> = ({
   projectId,
 }) => {
   const isAppLevelPage = appLevelPaths.includes(document.location.pathname)
-
-  const organisationId = AccountStore.getOrganisation()?.id
-  const { data: organisation } = useGetOrganisationQuery(
-    { id: organisationId as number },
-    { skip: !organisationId },
-  )
+  const organisation = useSelectedOrganisation()
 
   return (
     <Row className='gap-2'>
@@ -57,9 +51,7 @@ const SelectOrgAndProject: FC<SelectOrgAndProjectType> = ({
                 })}
                 to={Utils.getOrganisationHomePage()}
               >
-                <div>
-                  {organisation?.name || AccountStore.getOrganisation()?.name}
-                </div>
+                <div>{organisation?.name}</div>
               </NavLink>
             </BreadcrumbSeparator>
           </div>