From 367dab927766f6f6fe47e8e74f2c4dc11e51f07f Mon Sep 17 00:00:00 2001
From: Alyssa Wang <alyssa.c.wang@gmail.com>
Date: Tue, 19 Dec 2023 12:10:20 -0500
Subject: [PATCH] FI-2383: Force page reroute in header (#419)

* force page reroute

* add workaround for routing reload bug

---------

Co-authored-by: Alyssa Wang <awang@mitre.org>
---
 client/src/components/Header/Header.tsx         | 17 +++++++++++------
 .../SuiteOptionsPage/SuiteOptionsPage.tsx       |  5 ++++-
 .../_common/SelectionPanel/SelectionPanel.tsx   |  4 ++--
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
index 08c0a9d21..885ac1434 100644
--- 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
index 65c06f047..b5a1ca331 100644
--- 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
index c64b89c0b..b0e8fb7fe 100644
--- 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()}
           >