Draft: FI-1990: Update landing page layout

client/src/components/App/Router.tsx

@@ -1,33 +1,24 @@
 import React from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 import LandingPage from '~/components/LandingPage';
-import SuiteOptionsPage from '~/components/SuiteOptionsPage';
 import TestSessionWrapper from '~/components/TestSuite/TestSessionWrapper';
 import { basePath } from '~/api/infernoApiService';
 import Page from '~/components/App/Page';
 import { TestSuite } from '~/models/testSuiteModels';
 
 export const router = (testSuites: TestSuite[]) => {
+  const landingPageRoutes = ['/', ':test_suite_id'].map((route) => ({
+    path: route,
+    element: (
+      <Page title={`Inferno Test Suites`}>
+        <LandingPage testSuites={testSuites} />
+      </Page>
+    ),
+  }));
+
   return createBrowserRouter(
     [
-      {
-        path: '/',
-        element: (
-          <Page title={`Inferno Test Suites`}>
-            <LandingPage testSuites={testSuites} />
-          </Page>
-        ),
-      },
-      {
-        path: ':test_suite_id',
-        element: <Page title="Options" />,
-        loader: ({ params }) => {
-          if (testSuites.length === 0) return <></>;
-          const suiteId: string = params.test_suite_id || '';
-          const suite = testSuites.find((suite) => suite.id === suiteId);
-          return <SuiteOptionsPage testSuite={suite} />;
-        },
-      },
+      ...landingPageRoutes,
       {
         // Title for TestSessionWrapper is set in the component
         // because testSession is not set at the time of render

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',
   },
 }));

client/src/components/LandingPage/LandingPage.tsx

@@ -1,15 +1,18 @@
 import React, { FC, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { Typography, Container, Box } from '@mui/material';
+import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import { useSnackbar } from 'notistack';
-import { TestSuite, TestSession } from '~/models/testSuiteModels';
+import { TestSuite, TestSession, SuiteOption } from '~/models/testSuiteModels';
 import {
   ListOptionSelection,
   RadioOptionSelection,
   isListOptionSelection,
+  isRadioOptionSelection,
 } from '~/models/selectionModels';
 import { postTestSessions } from '~/api/TestSessionApi';
 import { getStaticPath } from '~/api/infernoApiService';
+import { useEffectOnce } from '~/hooks/useEffectOnce';
 import { useAppStore } from '~/store/app';
 import infernoLogo from '~/images/inferno_logo.png';
 import SelectionPanel from '~/components/_common/SelectionPanel/SelectionPanel';
@@ -21,42 +24,117 @@ export interface LandingPageProps {
 }
 
 const LandingPage: FC<LandingPageProps> = ({ testSuites }) => {
+  const location = useLocation();
   const navigate = useNavigate();
   const { classes } = useStyles();
   const { enqueueSnackbar } = useSnackbar();
-  const [testSuiteChosen, setTestSuiteChosen] = React.useState<ListOptionSelection>('');
+  const { test_suite_id } = useParams<{ test_suite_id: string }>();
+
+  /* Selections and state */
+  const [selectedTestSuiteId, setSelectedTestSuiteId] = React.useState<ListOptionSelection>(
+    test_suite_id || ''
+  );
+  const selectedTestSuite = testSuites?.find(
+    (suite: TestSuite) => suite.id === selectedTestSuiteId
+  );
+  const defaultSuiteOptions = selectedTestSuite?.suite_options?.map((option) => ({
+    // just grab the first to start
+    // perhaps choices should be persisted in the URL to make it easy to share specific options
+    id: option.id,
+    value: option && option.list_options ? option.list_options[0].value : '',
+  }));
+  const [selectedSuiteOptions, setSelectedSuiteOptions] = React.useState<SuiteOption[]>(
+    defaultSuiteOptions || []
+  );
+  const [showLandingPage, setShowLandingPage] = React.useState<boolean>(false);
+  const [showSuiteSelection, setShowSuiteSelection] = React.useState<boolean>(true);
+
+  /* CSS variables */
   const windowIsSmall = useAppStore((state) => state.windowIsSmall);
+  const smallWindowThreshold = useAppStore((state) => state.smallWindowThreshold);
+  const [descriptionWidth, setDescriptionWidth] = React.useState<string>('');
 
-  useEffect(() => {
+  // Only let this trigger once due to async createTestSession
+  useEffectOnce(() => {
     if (testSuites?.length === 1) {
-      setTestSuiteChosen(testSuites[0].id);
+      // If only one suite, then default to that suite
+      setSelectedTestSuiteId(testSuites[0].id);
       startTestingClick(testSuites[0]);
+    } else {
+      // Handle options and descriptions displays
+      const suiteDescriptionExists =
+        selectedTestSuite?.suite_summary || selectedTestSuite?.description;
+      const suiteOptionsExists =
+        selectedTestSuite?.suite_options && selectedTestSuite?.suite_options.length > 0;
+
+      if (selectedTestSuite && !suiteDescriptionExists && !suiteOptionsExists) {
+        // If no description and no options, start a test session
+        startTestingClick(selectedTestSuite);
+      } else if (selectedTestSuite && suiteOptionsExists) {
+        // If options, set selection panel to show options
+        setShowSuiteSelection(false);
+        setShowLandingPage(true);
+      } else {
+        setShowLandingPage(true);
+      }
     }
-  }, []);
+  });
+
+  useEffect(() => {
+    // Handle browser back and forward button behavior
+    setSelectedTestSuiteId(test_suite_id || '');
+  }, [location]);
 
-  const setSelected = (selection: ListOptionSelection | RadioOptionSelection[]) => {
-    // Check if list option to avoid type errors
-    if (isListOptionSelection(selection)) setTestSuiteChosen(selection);
+  useEffect(() => {
+    getDescriptionWidth();
+  }, [windowIsSmall]);
+
+  const getDescriptionWidth = () => {
+    setDescriptionWidth(windowIsSmall ? '100%' : `${smallWindowThreshold / 2}px`);
   };
 
+  // Set selected suite ID and update URL
+  const setSuiteSelected = (selection: ListOptionSelection | RadioOptionSelection[] | null) => {
+    // Check if list option to avoid type errors, allow empty string
+    if (selection !== null && selection !== undefined && isListOptionSelection(selection)) {
+      setSelectedTestSuiteId(selection);
+      navigate(`/${selection}`);
+    }
+  };
+
+  // Set options radio selections
+  const setOptionsSelected = (selection: ListOptionSelection | RadioOptionSelection[] | null) => {
+    // Check if radio option to avoid type errors
+    if (selection && isRadioOptionSelection(selection)) setSelectedSuiteOptions(selection);
+  };
+
+  // Either show options or start test session
   const startTestingClick = (suite?: TestSuite) => {
     if (suite && suite.suite_options && suite.suite_options.length > 0) {
-      navigate(`${suite.id}`);
-    } else if ((suite && suite?.id) || testSuiteChosen) {
-      postTestSessions(suite?.id || testSuiteChosen, null, null)
-        .then((testSession: TestSession | null) => {
-          if (testSession && testSession.test_suite) {
-            navigate(`/${testSession.test_suite_id}/${testSession.id}`);
-          }
-        })
-        .catch((e: Error) => {
-          enqueueSnackbar(`Error while creating test session: ${e.message}`, { variant: 'error' });
-        });
+      setShowSuiteSelection(false);
+      setShowLandingPage(true);
+    } else if (suite && suite.id) {
+      createTestSession(suite.id, null);
     } else {
       enqueueSnackbar(`No test suite selected.`, { variant: 'error' });
     }
   };
 
+  // Start test session
+  const createTestSession = (id: string, options: SuiteOption[] | null = null): void => {
+    postTestSessions(id, null, options)
+      .then((testSession: TestSession | null) => {
+        if (testSession && testSession.test_suite) {
+          navigate(`/${testSession.test_suite_id}/${testSession.id}`);
+          navigate(0); // Refresh page to prevent React Router bug where rerendering fails
+        }
+      })
+      .catch((e: Error) => {
+        enqueueSnackbar(`Error while creating test session: ${e.message}`, { variant: 'error' });
+      });
+  };
+
+  if (!showLandingPage) return <></>;
   return (
     <Container
       maxWidth={false}
@@ -66,79 +144,119 @@ const LandingPage: FC<LandingPageProps> = ({ testSuites }) => {
         windowIsSmall
           ? {}
           : {
-              minHeight: '400px',
-              maxHeight: '100vh',
+              flexDirection: 'column',
+              minHeight: '500px',
               py: 10,
             }
       }
     >
       <Box
-        display="flex"
-        flexDirection="column"
-        justifyContent={windowIsSmall ? 'center' : 'flex-end'}
-        alignItems="center"
-        overflow="initial"
-        minHeight="300px"
-        pb={windowIsSmall ? 0 : 2}
-        px={2}
+        maxWidth={windowIsSmall ? '100%' : '50%'}
+        maxHeight={windowIsSmall ? 'none' : '100%'}
+        minHeight={windowIsSmall ? 'unset' : '100%'}
+        overflow="auto"
+        my={3}
+        className={classes.flexContainer}
       >
-        <Box my={2} alignItems="center" maxWidth="800px">
-          <Box display="flex" alignItems="center" justifyContent="center">
+        <Box
+          maxWidth={descriptionWidth}
+          maxHeight={windowIsSmall ? 'none' : '100%'}
+          my={2}
+          className={classes.flexContainer}
+        >
+          <Box className={classes.flexContainer}>
             <img
               src={getStaticPath(infernoLogo as string)}
               alt="Inferno Logo"
               style={{ height: windowIsSmall ? '5em' : '8em' }}
             />
+            {!selectedTestSuite?.suite_summary && !selectedTestSuite?.description && (
+              <Typography
+                variant="h4"
+                component="h1"
+                align="center"
+                className={classes.title}
+                sx={{ fontSize: windowIsSmall ? '2rem' : 'auto' }}
+              >
+                FHIR Testing with Inferno
+              </Typography>
+            )}
           </Box>
-          <Typography
-            variant="h4"
-            component="h1"
-            align="center"
-            sx={{
-              color: lightTheme.palette.common.grayDark,
-              fontSize: windowIsSmall ? '2rem' : 'auto',
-              fontWeight: 'bolder',
-            }}
-          >
-            FHIR Testing with Inferno
-          </Typography>
         </Box>
-        <Box mb={2} alignItems="center" maxWidth="600px">
-          <Typography
-            variant="h5"
-            component="h2"
-            align="center"
-            sx={{
-              fontSize: windowIsSmall ? '1.2rem' : 'auto',
-            }}
+        {selectedTestSuite?.suite_summary || selectedTestSuite?.description ? (
+          <Box
+            maxWidth={descriptionWidth}
+            overflow="auto"
+            mb={2}
+            px={2}
+            className={classes.leftBorder}
           >
-            Test your server's conformance to authentication, authorization, and FHIR content
-            standards.
-          </Typography>
-        </Box>
+            <Typography variant="h5" component="h1" className={classes.title}>
+              {selectedTestSuite.title}
+            </Typography>
+            <Typography variant="h6" component="h2" sx={{ wordBreak: 'break-word' }}>
+              <ReactMarkdown>
+                {selectedTestSuite?.suite_summary || selectedTestSuite?.description || ''}
+              </ReactMarkdown>
+            </Typography>
+          </Box>
+        ) : (
+          <Box maxWidth={descriptionWidth} mb={2} px={2} className={classes.flexContainer}>
+            <Typography
+              variant="h5"
+              component="h2"
+              align="center"
+              sx={{ fontSize: windowIsSmall ? '1.2rem' : 'revert' }}
+            >
+              Test your server's conformance to authentication, authorization, and FHIR content
+              standards.
+            </Typography>
+          </Box>
+        )}
       </Box>
       <Box
-        display="flex"
-        flexDirection="column"
-        justifyContent="flex-start"
-        alignItems="center"
-        overflow="initial"
-        width="100%"
-        minHeight="200px"
-        py={4}
+        height={windowIsSmall ? 'unset' : '100%'}
+        width={windowIsSmall ? '100%' : 'unset'}
+        maxWidth={windowIsSmall ? '100%' : '50%'}
+        className={classes.flexContainer}
+        py={windowIsSmall ? 3 : 0}
         sx={{ backgroundColor: lightTheme.palette.common.grayLightest }}
       >
-        <SelectionPanel
-          title="Test Suites"
-          options={(testSuites || []).sort((testSuite1: TestSuite, testSuite2: TestSuite): number =>
-            testSuite1.title.localeCompare(testSuite2.title)
+        <Box display="flex" justifyContent="center" maxHeight="100%" mx={3}>
+          {showSuiteSelection ? (
+            // Suite selection
+            <SelectionPanel
+              title="Test Suites"
+              options={(testSuites || []).sort(
+                (testSuite1: TestSuite, testSuite2: TestSuite): number =>
+                  testSuite1.title.localeCompare(testSuite2.title)
+              )}
+              selection={selectedTestSuiteId}
+              setSelection={setSuiteSelected}
+              submitAction={() =>
+                startTestingClick(
+                  testSuites?.find((suite: TestSuite) => suite.id === selectedTestSuiteId)
+                )
+              }
+              submitText="Select Suite"
+            />
+          ) : (
+            // Options selection
+            <SelectionPanel
+              title="Options"
+              options={selectedTestSuite?.suite_options || []}
+              selection={defaultSuiteOptions}
+              setSelection={setOptionsSelected}
+              showBackButton={true}
+              backTooltipText="Back to Suites"
+              backClickHandler={() => {
+                setShowSuiteSelection(true);
+              }}
+              submitAction={() => createTestSession(selectedTestSuiteId, selectedSuiteOptions)}
+              submitText="Start Testing"
+            />
           )}
-          setSelection={setSelected}
-          submitAction={() =>
-            startTestingClick(testSuites?.find((suite: TestSuite) => suite.id === testSuiteChosen))
-          }
-          submitText="Select Suite"
-        />
+        </Box>
       </Box>
     </Container>
   );