FI-1980: Refactor selection components

client/src/components/LandingPage/LandingPage.tsx

@@ -1,21 +1,20 @@
 import React, { FC, useEffect } from 'react';
-import {
-  Typography,
-  Container,
-  Button,
-  Paper,
-  List,
-  ListItemText,
-  ListItemButton,
-  Box,
-} from '@mui/material';
-import { TestSuite, TestSession } from 'models/testSuiteModels';
-import useStyles from './styles';
 import { useNavigate } from 'react-router-dom';
-import { postTestSessions } from 'api/TestSessionApi';
+import { Typography, Container, Box } from '@mui/material';
+import { useSnackbar } from 'notistack';
+import { TestSuite, TestSession } from '~/models/testSuiteModels';
+import {
+  ListOptionSelection,
+  RadioOptionSelection,
+  isListOptionSelection,
+} from '~/models/selectionModels';
+import { postTestSessions } from '~/api/TestSessionApi';
+import { getStaticPath } from '~/api/infernoApiService';
 import { useAppStore } from '~/store/app';
+import infernoLogo from '~/images/inferno_logo.png';
+import SelectionPanel from '~/components/_common/SelectionPanel/SelectionPanel';
 import lightTheme from '~/styles/theme';
-import { useSnackbar } from 'notistack';
+import useStyles from './styles';
 
 export interface LandingPageProps {
   testSuites: TestSuite[] | undefined;
@@ -25,7 +24,7 @@ const LandingPage: FC<LandingPageProps> = ({ testSuites }) => {
   const navigate = useNavigate();
   const { classes } = useStyles();
   const { enqueueSnackbar } = useSnackbar();
-  const [testSuiteChosen, setTestSuiteChosen] = React.useState('');
+  const [testSuiteChosen, setTestSuiteChosen] = React.useState<ListOptionSelection>('');
   const windowIsSmall = useAppStore((state) => state.windowIsSmall);
 
   useEffect(() => {
@@ -35,6 +34,11 @@ const LandingPage: FC<LandingPageProps> = ({ testSuites }) => {
     }
   }, []);
 
+  const setSelected = (selection: ListOptionSelection | RadioOptionSelection[]) => {
+    // Check if list option to avoid type errors
+    if (isListOptionSelection(selection)) setTestSuiteChosen(selection);
+  };
+
   const startTestingClick = (suite?: TestSuite) => {
     if (suite && suite.suite_options && suite.suite_options.length > 0) {
       navigate(`${suite.id}`);
@@ -53,55 +57,47 @@ const LandingPage: FC<LandingPageProps> = ({ testSuites }) => {
     }
   };
 
-  const renderOption = (testSuite: TestSuite) => {
-    return (
-      // Use li to resolve a11y error
-      <li key={testSuite.id}>
-        <ListItemButton
-          data-testid="testing-suite-option"
-          selected={testSuiteChosen === testSuite.id}
-          onClick={() => setTestSuiteChosen(testSuite.id)}
-          classes={{ selected: classes.selectedItem }}
-        >
-          <ListItemText primary={testSuite.title} />
-        </ListItemButton>
-      </li>
-    );
-  };
-
   return (
     <Container
-      maxWidth="lg"
+      maxWidth={false}
       role="main"
       className={classes.main}
       sx={
-        !windowIsSmall
-          ? {
+        windowIsSmall
+          ? {}
+          : {
               minHeight: '400px',
-              height: '100%',
               maxHeight: '100vh',
               py: 10,
             }
-          : {}
       }
     >
       <Box
         display="flex"
         flexDirection="column"
-        justifyContent="center"
+        justifyContent={windowIsSmall ? 'center' : 'flex-end'}
         alignItems="center"
         overflow="initial"
-        minHeight="400px"
-        pb={windowIsSmall ? 0 : 10}
+        minHeight="300px"
+        pb={windowIsSmall ? 0 : 2}
+        px={2}
       >
         <Box my={2} alignItems="center" maxWidth="800px">
+          <Box display="flex" alignItems="center" justifyContent="center">
+            <img
+              src={getStaticPath(infernoLogo as string)}
+              alt="Inferno Logo"
+              style={{ height: windowIsSmall ? '5em' : '8em' }}
+            />
+          </Box>
           <Typography
-            variant="h2"
+            variant="h4"
             component="h1"
             align="center"
             sx={{
-              color: lightTheme.palette.common.orangeDarker,
+              color: lightTheme.palette.common.grayDark,
               fontSize: windowIsSmall ? '2rem' : 'auto',
+              fontWeight: 'bolder',
             }}
           >
             FHIR Testing with Inferno
@@ -120,49 +116,29 @@ const LandingPage: FC<LandingPageProps> = ({ testSuites }) => {
             standards.
           </Typography>
         </Box>
-        <Paper
-          elevation={4}
-          className={classes.optionsList}
-          sx={{ width: windowIsSmall ? 'auto' : '400px', maxWidth: '400px' }}
-        >
-          <Typography
-            variant="h4"
-            component="h2"
-            align="center"
-            sx={{ fontSize: windowIsSmall ? '1.8rem' : 'auto' }}
-          >
-            Test Suites
-          </Typography>
-          <Box>
-            <List>
-              {testSuites ? (
-                testSuites
-                  .sort((testSuite1: TestSuite, testSuite2: TestSuite): number =>
-                    testSuite1.title.localeCompare(testSuite2.title)
-                  )
-                  .map((testSuite: TestSuite) => renderOption(testSuite))
-              ) : (
-                <Typography my={2}> No suites available.</Typography>
-              )}
-            </List>
-          </Box>
-          <Button
-            variant="contained"
-            size="large"
-            color="primary"
-            fullWidth
-            disabled={!testSuiteChosen}
-            data-testid="go-button"
-            sx={{ fontWeight: 600 }}
-            onClick={() =>
-              startTestingClick(
-                testSuites?.find((suite: TestSuite) => suite.id === testSuiteChosen)
-              )
-            }
-          >
-            Select Suite
-          </Button>
-        </Paper>
+      </Box>
+      <Box
+        display="flex"
+        flexDirection="column"
+        justifyContent="flex-start"
+        alignItems="center"
+        overflow="initial"
+        width="100%"
+        minHeight="200px"
+        py={2}
+        sx={{ backgroundColor: lightTheme.palette.common.grayLightest }}
+      >
+        <SelectionPanel
+          title="Test Suites"
+          options={(testSuites || []).sort((testSuite1: TestSuite, testSuite2: TestSuite): number =>
+            testSuite1.title.localeCompare(testSuite2.title)
+          )}
+          setSelection={setSelected}
+          submitAction={() =>
+            startTestingClick(testSuites?.find((suite: TestSuite) => suite.id === testSuiteChosen))
+          }
+          submitText="Select Suite"
+        />
       </Box>
     </Container>
   );

client/src/components/LandingPage/styles.tsx

@@ -1,24 +1,12 @@
-import { Theme } from '@mui/material/styles';
 import { makeStyles } from 'tss-react/mui';
 
-export default makeStyles()((theme: Theme) => ({
-  container: {
-    backgroundColor: theme.palette.common.white,
-  },
+export default makeStyles()(() => ({
   main: {
     display: 'flex',
     flexWrap: 'wrap',
-    alignItems: 'center',
+    alignItems: 'initial',
     justifyContent: 'space-evenly',
-  },
-  selectedItem: {
-    backgroundColor: 'rgba(248, 139, 48, 0.2) !important',
-  },
-  optionsList: {
-    display: 'flex',
-    flexDirection: 'column',
-    margin: '20px',
-    padding: '16px',
-    borderRadius: '16px',
+    height: '100%',
+    padding: '0 !important',
   },
 }));