FI-2270: Migrate FI-1990, fix flicker (#409)

* prevent component rendering if no options * prevent action modal from rendering * set default selection panel width --------- Co-authored-by: Alyssa Wang <[email protected]>
inferno-framework · Dec 19, 2023 · 3ac23dc · 3ac23dc
1 parent 59af6a0
commit 3ac23dc
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/client/src/components/Header/styles.tsx b/client/src/components/Header/styles.tsx
@@ -4,7 +4,6 @@
 
 import { Theme } from '@mui/material/styles';
 import { makeStyles } from 'tss-react/mui';
-import lightTheme from '~/styles/theme';
 
 export default makeStyles()((theme: Theme) => ({
   appbar: {
@@ -36,7 +35,7 @@ export default makeStyles()((theme: Theme) => ({
     fontStyle: 'italic',
   },
   homeLink: {
-    color: lightTheme.palette.common.orangeDarker,
+    color: theme.palette.common.orangeDarker,
     textDecoration: 'none',
   },
 }));
diff --git a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
@@ -36,6 +36,7 @@ const SuiteOptionsPage: FC<SuiteOptionsPageProps> = ({ testSuite }) => {
     initialSelectedSuiteOptions || []
   );
   const [descriptionWidth, setDescriptionWidth] = React.useState<string>('');
+  const [showPage, setShowPage] = React.useState<boolean>(false);
   const selectionPanel = useRef<HTMLElement>(null);
 
   useEffect(() => {
@@ -45,12 +46,15 @@ const SuiteOptionsPage: FC<SuiteOptionsPageProps> = ({ testSuite }) => {
       (!testSuite?.suite_options || testSuite?.suite_options.length === 0)
     ) {
       createTestSession(null);
+    } else {
+      setShowPage(true);
+      getDescriptionWidth();
     }
   }, []);
 
   useEffect(() => {
     getDescriptionWidth();
-  }, [windowIsSmall]);
+  }, [windowIsSmall, selectionPanel.current]);
 
   const getDescriptionWidth = () => {
     if (windowIsSmall) {
@@ -96,6 +100,11 @@ const SuiteOptionsPage: FC<SuiteOptionsPageProps> = ({ testSuite }) => {
     );
   };
 
+  if (!showPage) {
+    // 432px = 400 (default width of SelectionPanel Paper component) + 16px margin on each side
+    return <Box ref={selectionPanel} width="432px" />;
+  }
+
   return (
     <Container
       maxWidth={false}

diff --git a/client/src/components/TestSuite/TestSession.tsx b/client/src/components/TestSuite/TestSession.tsx
@@ -147,15 +147,15 @@ const TestSessionComponent: FC<TestSessionComponentProps> = ({
   }, [testSession]);
 
   useEffect(() => {
-    let waitingTestId = null;
+    let waitingId = null;
     if (testRun?.status === 'waiting') {
       resultsMap.forEach((result) => {
         if (result.test_id && result.result === 'wait') {
-          waitingTestId = result.test_id;
+          waitingId = result.test_id;
         }
       });
     }
-    setWaitingTestId(waitingTestId);
+    setWaitingTestId(waitingId);
   }, [resultsMap]);
 
   // when leaving the TestSession, we want to cancel the poller
@@ -411,7 +411,7 @@ const TestSessionComponent: FC<TestSessionComponentProps> = ({
           <ActionModal
             cancelTestRun={cancelTestRun}
             message={waitingTestId ? resultsMap.get(waitingTestId)?.result_message : ''}
-            modalVisible={waitingTestId !== null}
+            modalVisible={!!waitingTestId}
           />
         </Box>
       </main>