FI-2383: Force page reroute in header (#419)

* force page reroute * add workaround for routing reload bug --------- Co-authored-by: Alyssa Wang <[email protected]>
inferno-framework · Dec 19, 2023 · 367dab9 · 367dab9
1 parent 3ac23dc
commit 367dab9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
 import { AppBar, Avatar, Box, Button, IconButton, Toolbar, Typography } from '@mui/material';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { Menu, NoteAdd } from '@mui/icons-material';
-import { getStaticPath } from '~/api/infernoApiService';
+import { basePath, getStaticPath } from '~/api/infernoApiService';
 import { SuiteOptionChoice } from '~/models/testSuiteModels';
 import { useAppStore } from '~/store/app';
 import useStyles from './styles';
@@ -28,12 +28,12 @@ const Header: FC<HeaderProps> = ({
   toggleDrawer,
 }) => {
   const { classes } = useStyles();
-  const navigate = useNavigate();
   const headerHeight = useAppStore((state) => state.headerHeight);
   const windowIsSmall = useAppStore((state) => state.windowIsSmall);
 
+  // Use window navigation instead of React router to trigger new page request
   const startNewSession = () => {
-    navigate('/');
+    window.location.href = `/${basePath}`;
   };
 
   const suiteOptionsString =
@@ -63,7 +63,7 @@ const Header: FC<HeaderProps> = ({
             <Menu fontSize="inherit" />
           </IconButton>
         ) : (
-          <Link to="/" aria-label="Inferno Home">
+          <Link to="/" reloadDocument aria-label="Inferno Home">
             <CustomTooltip title="Return to Suite Selection">
               <img
                 src={getStaticPath(icon as string)}
@@ -86,7 +86,12 @@ const Header: FC<HeaderProps> = ({
         >
           <Box display="flex" flexDirection="row" alignItems="baseline">
             <Typography variant="h5" component="h1" className={classes.title}>
-              <Link to={`/${suiteId || ''}`} aria-label="Inferno Home" className={classes.homeLink}>
+              <Link
+                to={`/${suiteId || ''}`}
+                reloadDocument
+                aria-label="Inferno Home"
+                className={classes.homeLink}
+              >
                 {suiteTitle}
               </Link>
             </Typography>

diff --git a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
@@ -14,6 +14,7 @@ import { useAppStore } from '~/store/app';
 import lightTheme from '~/styles/theme';
 import SelectionPanel from '~/components/_common/SelectionPanel/SelectionPanel';
 import useStyles from './styles';
+import { basePath } from '~/api/infernoApiService';
 
 export interface SuiteOptionsPageProps {
   testSuite?: TestSuite;
@@ -41,7 +42,7 @@ const SuiteOptionsPage: FC<SuiteOptionsPageProps> = ({ testSuite }) => {
 
   useEffect(() => {
     if (
-      // If no suite or no options and no description, then start a test session
+      // If no suite or no options, then start a test session
       !testSuite?.suite_summary &&
       (!testSuite?.suite_options || testSuite?.suite_options.length === 0)
     ) {
@@ -75,6 +76,8 @@ const SuiteOptionsPage: FC<SuiteOptionsPageProps> = ({ testSuite }) => {
       .then((testSession: TestSession | null) => {
         if (testSession && testSession.test_suite) {
           navigate(`/${testSession.test_suite_id}/${testSession.id}`);
+          // Use window navigation as a workaround for router errors
+          window.location.href = `/${basePath}/${testSession.test_suite_id}/${testSession.id}`;
         }
       })
       .catch((e: Error) => {

diff --git a/client/src/components/_common/SelectionPanel/SelectionPanel.tsx b/client/src/components/_common/SelectionPanel/SelectionPanel.tsx
@@ -85,7 +85,7 @@ const SelectionPanel: FC<SelectionPanelProps> = ({
           {showBackButton && <Box minWidth="45px" />}
         </Box>
 
-        <Box overflow="auto">
+        <Box px={2} pb={2} overflow="auto">
           {options && options.length > 0 ? (
             renderSelection()
           ) : (
@@ -100,7 +100,7 @@ const SelectionPanel: FC<SelectionPanelProps> = ({
             color="primary"
             fullWidth
             data-testid="go-button"
-            disabled={!selection}
+            disabled={!selection && options.length !== 0}
             sx={{ fontWeight: 600 }}
             onClick={() => submitAction()}
           >