check for 403 status code

frontend/src/app/App.tsx

@@ -7,6 +7,9 @@ import {
   Bullseye,
   Button,
   Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
   Page,
   PageSection,
@@ -69,9 +72,35 @@ const App: React.FC = () => {
     [buildStatuses, dashboardConfig, storageClasses],
   );
 
+  const isUnauthorized = React.useMemo(() => {
+    if (fetchConfigError?.request?.status === 500) {
+      return true;
+    }
+    return false;
+  }, [fetchConfigError]);
+
   // We lack the critical data to startup the app
   if (userError || fetchConfigError) {
-    // There was an error fetching critical data
+    // Check for unauthorized state
+    if (isUnauthorized) {
+      return (
+        <Modal variant={ModalVariant.small} isOpen ouiaId="BasicModal">
+          <ModalHeader title="Session Expired" titleIconVariant="warning" />
+          <ModalBody>Your session timed out. To continue working, log in.</ModalBody>
+          <ModalFooter>
+            <Button
+              key="confirm"
+              variant="primary"
+              onClick={() => logout().then(() => window.location.reload())}
+            >
+              Log in
+            </Button>
+          </ModalFooter>
+        </Modal>
+      );
+    }
+
+    // Default error handling for other cases
     return (
       <Page>
         <PageSection hasBodyWrapper={false}>

frontend/src/app/useApplicationSettings.tsx

@@ -4,14 +4,15 @@ import { POLL_INTERVAL } from '~/utilities/const';
 import { useDeepCompareMemoize } from '~/utilities/useDeepCompareMemoize';
 import { fetchDashboardConfig } from '~/services/dashboardConfigService';
 import useTimeBasedRefresh from './useTimeBasedRefresh';
+import { AxiosError } from "axios";
 
 export const useApplicationSettings = (): {
   dashboardConfig: DashboardConfigKind | null;
   loaded: boolean;
-  loadError: Error | undefined;
+  loadError: AxiosError | undefined;
 } => {
   const [loaded, setLoaded] = React.useState(false);
-  const [loadError, setLoadError] = React.useState<Error>();
+  const [loadError, setLoadError] = React.useState<AxiosError>();
   const [dashboardConfig, setDashboardConfig] = React.useState<DashboardConfigKind | null>(null);
   const setRefreshMarker = useTimeBasedRefresh();
 
@@ -29,7 +30,7 @@ export const useApplicationSettings = (): {
           setLoadError(undefined);
         })
         .catch((e) => {
-          if (e?.message?.includes('Error getting Oauth Info for user')) {
+          if (e?.response?.data?.message?.includes('Error getting Oauth Info for user')) {
             // NOTE: this endpoint only requests oauth because of the security layer, this is not an ironclad use-case
             // Something went wrong on the server with the Oauth, let us just log them out and refresh for them
             /* eslint-disable-next-line no-console */

frontend/src/services/dashboardConfigService.ts

@@ -1,12 +1,22 @@
 import axios from '~/utilities/axios';
 import { DashboardConfigKind } from '~/k8sTypes';
+import { AxiosError } from 'axios';
 
 export const fetchDashboardConfig = (): Promise<DashboardConfigKind> => {
   const url = '/api/config';
   return axios
     .get(url)
     .then((response) => response.data)
     .catch((e) => {
-      throw new Error(e.response.data.message);
+      const message = e.response.data?.message;
+
+      // Throw the AxiosError with status code
+      throw new AxiosError(
+        message, // Error message from the server
+        message, // The error message also serves as the "code" argument for AxiosError
+        undefined, // Optional: request config that was used
+        e.response, // Optional: the full response object
+        e
+      );
     });
 };