fix: improve error handling and re-routing (#607)

* fix: improve error handling and re-routing

* fix: improve global error clearing logic

---------

Co-authored-by: svcAPLBot <174728082+svcAPLBot@users.noreply.github.com>

Author: ferruhcihan

src/components/Error.tsx

@@ -93,7 +93,11 @@ export default function ({ error }: Props): React.ReactElement {
     }
 
     return (
-      <Button variant='contained' color='primary' onClick={() => (globalError ? clearError() : window.history.back())}>
+      <Button
+        variant='contained'
+        color='primary'
+        onClick={() => (globalError.status === 409 ? clearError() : window.history.back())}
+      >
         {t('Back', { ns: 'error' })}
       </Button>
     )

src/components/Header.tsx

@@ -8,6 +8,7 @@ import { useHistory, useLocation } from 'react-router-dom'
 import { useGetTeamsQuery } from 'redux/otomiApi'
 import useSettings from 'hooks/useSettings'
 import React from 'react'
+import { useLocalStorage } from 'hooks/useLocalStorage'
 import AccountPopover from './AccountPopover'
 import { IconButtonAnimate } from './animate'
 import Iconify from './Iconify'
@@ -62,9 +63,11 @@ export default function Header({ onOpenSidebar, isCollapse = false, verticalLayo
   const { pathname } = useLocation()
   const {
     user: { email, teams: userTeams, isPlatformAdmin },
-    oboTeamId,
+    oboTeamId: sessionOboTeamId,
     setOboTeamId,
   } = useSession()
+  const [localOboTeamId] = useLocalStorage<string>('oboTeamId', undefined)
+  const oboTeamId = sessionOboTeamId || localOboTeamId || undefined
   const { data: allTeams } = useGetTeamsQuery(!isPlatformAdmin && skipToken)
   // END HOOKs
   let teams: string[] = []
@@ -108,6 +111,7 @@ export default function Header({ onOpenSidebar, isCollapse = false, verticalLayo
     history.push(nextPathname)
     event.preventDefault()
   }
+  if (!teams && oboTeamId) teams = [oboTeamId]
 
   return (
     <RootStyle

src/components/NavConfig.tsx

@@ -2,6 +2,7 @@ import generateDownloadLink from 'generate-download-link'
 import SvgIconStyle from 'components/SvgIconStyle'
 import { useSession } from 'providers/Session'
 import { canDo } from 'utils/permission'
+import { useLocalStorage } from 'hooks/useLocalStorage'
 
 const getIcon = (name: string) => <SvgIconStyle src={`/assets/${name}`} sx={{ width: 1, height: 1 }} />
 
@@ -10,7 +11,9 @@ const getIcon = (name: string) => <SvgIconStyle src={`/assets/${name}`} sx={{ wi
 // it's SVG format.
 
 export default function NavConfig() {
-  const { ca, appsEnabled, oboTeamId, user, settings } = useSession()
+  const { ca, appsEnabled, oboTeamId: sessionOboTeamId, user, settings } = useSession()
+  const [localOboTeamId] = useLocalStorage<string>('oboTeamId', undefined)
+  const oboTeamId = sessionOboTeamId || localOboTeamId || undefined
   const hasExternalIDP = settings?.otomi?.hasExternalIDP ?? false
   const isManaged = settings?.otomi?.isPreInstalled ?? false
   const hasApiServerConfigured = settings?.cluster?.apiServer ?? false

src/layouts/Paper.tsx

@@ -21,20 +21,18 @@ export default function ({ loading, comp, title, children }: Props): React.React
   const dashboardStyle =
     location.pathname === '/' ? { backgroundColor: 'background.contrast' } : { backgroundColor: 'transparent' }
   const dispatch = useAppDispatch()
-  const error = useAppSelector(({ global: { error } }) => error)
+  const globalError = useAppSelector(({ global: { error } }) => error)
   useEffect(() => {
-    return () => {
-      // clear 409 Conflict error when navigating away from the page to prevent it from reappearing
-      if (error && error.status === 409) dispatch(setError(undefined))
-    }
-  }, [error])
+    // clear global error when pathname changes to prevent the error from reappearing
+    if (globalError) dispatch(setError(undefined))
+  }, [location.pathname])
   return (
     <MainLayout title={title}>
       <Container maxWidth='lg'>
         <Card sx={{ ...dashboardStyle }}>
           <Error />
-          {loading && <LoadingScreen />}
-          <Box sx={{ display: error && 'none' }}>
+          {loading && !globalError && <LoadingScreen />}
+          <Box sx={{ display: globalError && 'none' }}>
             {!loading && comp}
             {children}
           </Box>

src/pages/Error.tsx

@@ -1,14 +1,34 @@
 import { Card, Container } from '@mui/material'
 import Error from 'components/Error'
 import MainLayout from 'layouts/Base'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import { useAppDispatch } from 'redux/hooks'
+import { setError } from 'redux/reducers'
 import { HttpError } from 'utils/error'
 
 interface Props {
   error?: HttpError
 }
 
 export default function ({ error }: Props): React.ReactElement {
+  const [prevPath, setPrevPath] = useState<string | undefined>(undefined)
+  const location = useLocation()
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    if (error) setPrevPath(location.pathname)
+  }, [error])
+
+  useEffect(() => {
+    // clear the error when navigating to a different page
+    // reload the page to prevent the error from reappearing
+    if (prevPath && prevPath !== location.pathname) {
+      dispatch(setError(undefined))
+      window.location.reload()
+    }
+  }, [location.pathname])
+
   return (
     <MainLayout title='Error Boundary'>
       <Container maxWidth='lg'>