[RHOAIENG-1154]: Apply modal to alert user error

check for 403 status code

add cypress test

update test title

format

format

format

remove it.only

fix relative import

PR feedback from Christian, WIP Cypress throwing error on shouldBeOpen

fix tests, fix linting issues

revert find() function

revert find, update comment

format

frontend/src/__tests__/cypress/cypress/pages/components/Modal.ts

@@ -12,7 +12,7 @@ export class Modal {
   }
 
   find(): Cypress.Chainable<JQuery<HTMLElement>> {
-    // FIXME Remove `hidden: true` once issue with PF modals is fixed.
+    // FIXME Remove `hidden: true` once PF version is upgraded to 6.1.0.
     // https://issues.redhat.com/browse/RHOAIENG-11946
     // https://github.com/patternfly/patternfly-react/issues/11041
     return cy.findByRole('dialog', { name: this.title, hidden: true });

frontend/src/__tests__/cypress/cypress/pages/loginDialog.ts

@@ -0,0 +1,20 @@
+import { Modal } from '~/__tests__/cypress/cypress/pages/components/Modal';
+
+class LoginDialog extends Modal {
+  protected testId;
+
+  constructor(title: string, testId: string) {
+    super(title);
+    this.testId = testId;
+  }
+
+  find() {
+    return cy.findByTestId(this.testId);
+  }
+
+  findLoginButton() {
+    return this.findFooter().findByTestId('modal-login-button');
+  }
+}
+
+export const loginDialog = new LoginDialog('Session Expired', 'session-expired-modal');

frontend/src/__tests__/cypress/cypress/tests/mocked/application.cy.ts

@@ -7,6 +7,7 @@ import {
 import { mockDashboardConfig } from '~/__mocks__';
 import { aboutDialog } from '~/__tests__/cypress/cypress/pages/aboutDialog';
 import { mockConsoleLinks } from '~/__mocks__/mockConsoleLinks';
+import { loginDialog } from '~/__tests__/cypress/cypress/pages/loginDialog';
 
 describe('Application', () => {
   it('should disallow access to the dashboard', () => {
@@ -113,4 +114,28 @@ describe('Application', () => {
     aboutDialog.findText().should('contain.text', 'OpenShift');
     aboutDialog.findProductName().should('contain.text', 'OpenShift AI');
   });
+  it('should show the login modal when receiving a 403 status code', () => {
+    // Mock the intercept to return a 403 status code
+    cy.interceptOdh('GET /api/config', {
+      statusCode: 403,
+    }).as('getData403');
+
+    // Set up the sign-out intercept before visiting the page
+    cy.intercept('GET', '/oauth/sign_out').as('signOut');
+
+    // Visit the page where the request is triggered
+    cy.visit('/');
+
+    // Wait for the intercept to be triggered
+    cy.wait('@getData403');
+
+    // Verify that the login modal is displayed
+    loginDialog.shouldBeOpen();
+
+    // Simulate clicking the Log in button
+    loginDialog.findLoginButton().click();
+
+    // Wait for the sign out intercept to be triggered
+    cy.wait('@signOut');
+  });
 });

frontend/src/app/App.tsx

@@ -34,6 +34,7 @@ import TelemetrySetup from './TelemetrySetup';
 import { logout } from './appUtils';
 import QuickStarts from './QuickStarts';
 import DevFeatureFlagsBanner from './DevFeatureFlagsBanner';
+import SessionExpiredModal from './SessionExpiredModal';
 
 import './App.scss';
 
@@ -68,9 +69,21 @@ const App: React.FC = () => {
     [buildStatuses, dashboardConfig, storageClasses],
   );
 
+  const isUnauthorized = React.useMemo(() => {
+    if (fetchConfigError?.request?.status === 403) {
+      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 <SessionExpiredModal />;
+    }
+
+    // Default error handling for other cases
     return (
       <Page>
         <PageSection hasBodyWrapper={false}>

frontend/src/app/SessionExpiredModal.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import {
+  Modal,
+  ModalVariant,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+} from '@patternfly/react-core';
+import { logout } from './appUtils';
+
+const SessionExpiredModal: React.FC = () => (
+  <Modal
+    data-testid="session-expired-modal"
+    variant={ModalVariant.small}
+    isOpen
+    ouiaId="BasicModal"
+    aria-labelledby="session-expired-modal-title"
+  >
+    <ModalHeader
+      title="Session Expired"
+      titleIconVariant="warning"
+      labelId="session-expired-modal-title"
+    />
+    <ModalBody data-testid="timeout-text">
+      Your session timed out. To continue working, log in.
+    </ModalBody>
+    <ModalFooter>
+      <Button
+        data-testid="modal-login-button"
+        key="confirm"
+        variant="primary"
+        onClick={() => logout().then(() => window.location.reload())}
+      >
+        Log in
+      </Button>
+    </ModalFooter>
+  </Modal>
+);
+
+export default SessionExpiredModal;

frontend/src/app/useApplicationSettings.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { AxiosError } from 'axios';
 import { DashboardConfigKind } from '~/k8sTypes';
 import { POLL_INTERVAL } from '~/utilities/const';
 import { useDeepCompareMemoize } from '~/utilities/useDeepCompareMemoize';
@@ -8,10 +9,10 @@ import useTimeBasedRefresh from './useTimeBasedRefresh';
 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

@@ -7,6 +7,7 @@ export const fetchDashboardConfig = (): Promise<DashboardConfigKind> => {
     .get(url)
     .then((response) => response.data)
     .catch((e) => {
-      throw new Error(e.response.data.message);
+      // Throw the AxiosError with status code
+      throw e;
     });
 };