From 0d87f3426ed56416b84aeaba7f9739e6d0b2a71b Mon Sep 17 00:00:00 2001
From: Thomas <thomas.j.johnson@associates.cisa.dhs.gov>
Date: Mon, 15 Apr 2024 14:46:30 -0400
Subject: [PATCH] Added new default side nav component, updated Side Nav to
 display categories, updated Header for MVP Demo.

---
 .../components/ReadySetCyber/RSCDashboard.tsx |  13 +-
 .../ReadySetCyber/RSCDefaultSideNav.tsx       |  24 ++
 .../components/ReadySetCyber/RSCDetail.tsx    |   2 +-
 .../components/ReadySetCyber/RSCHeader.tsx    | 349 +++++++++++++++++-
 .../components/ReadySetCyber/RSCSideNav.tsx   |  17 +-
 5 files changed, 380 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/components/ReadySetCyber/RSCDefaultSideNav.tsx

diff --git a/frontend/src/components/ReadySetCyber/RSCDashboard.tsx b/frontend/src/components/ReadySetCyber/RSCDashboard.tsx
index d2310dfa..6f6d4cfa 100644
--- a/frontend/src/components/ReadySetCyber/RSCDashboard.tsx
+++ b/frontend/src/components/ReadySetCyber/RSCDashboard.tsx
@@ -4,6 +4,7 @@ import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
 import { RSCSideNav } from './RSCSideNav';
+import { RSCDefaultSideNav } from './RSCDefaultSideNav';
 import { RSCResult } from './RSCResult';
 import { useAuthContext } from 'context';
 
@@ -38,7 +39,7 @@ export const RSCDashboard: React.FC = () => {
     <Box sx={{ flexGrow: 1, padding: 2 }}>
       <Grid container spacing={2}>
         <Grid item xs={4}>
-          <RSCSideNav />
+          <RSCDefaultSideNav />
         </Grid>
         <Grid item xs={8}>
           <Box sx={{ flexGrow: 1, padding: 2, backgroundColor: 'white' }}>
@@ -57,18 +58,18 @@ export const RSCDashboard: React.FC = () => {
                 platform, for free vulnerability scanning services to kickstart
                 or enhance your cybersecurity measures.
               </p>
-              {results.map((result) => (
-                <Stack key={result.id} spacing={2}>
+              <Stack spacing={2}>
+                {results.map((result) => (
                   <RSCResult
+                    key={result.id}
                     id={result.id}
                     type={result.type}
                     createdAt={result.createdAt}
                     updatedAt={result.updatedAt}
                     rscID={result.rscID}
                   />
-                  <Divider />
-                </Stack>
-              ))}
+                ))}
+              </Stack>
             </Stack>
           </Box>
         </Grid>
diff --git a/frontend/src/components/ReadySetCyber/RSCDefaultSideNav.tsx b/frontend/src/components/ReadySetCyber/RSCDefaultSideNav.tsx
new file mode 100644
index 00000000..64ea6e37
--- /dev/null
+++ b/frontend/src/components/ReadySetCyber/RSCDefaultSideNav.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Divider from '@mui/material/Divider';
+
+export const RSCDefaultSideNav: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+
+  return (
+    <div>
+      <Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
+        <List>
+          <ListItem>Welcome User</ListItem>
+          <Divider component="li" />
+          <ListItem>Take Questionnaire Again</ListItem>
+          <Divider component="li" />
+          <ListItem>Logout</ListItem>
+        </List>
+      </Box>
+    </div>
+  );
+};
diff --git a/frontend/src/components/ReadySetCyber/RSCDetail.tsx b/frontend/src/components/ReadySetCyber/RSCDetail.tsx
index a4d37131..8538765c 100644
--- a/frontend/src/components/ReadySetCyber/RSCDetail.tsx
+++ b/frontend/src/components/ReadySetCyber/RSCDetail.tsx
@@ -46,7 +46,7 @@ export const RSCDetail: React.FC = () => {
     <Box sx={{ flexGrow: 1, padding: 2 }}>
       <Grid container spacing={2}>
         <Grid item xs={4}>
-          <RSCSideNav />
+          <RSCSideNav categories={categories} />
         </Grid>
         <Grid item xs={8}>
           <Box sx={{ flexGrow: 1, padding: 2, backgroundColor: 'white' }}>
diff --git a/frontend/src/components/ReadySetCyber/RSCHeader.tsx b/frontend/src/components/ReadySetCyber/RSCHeader.tsx
index f3896b28..b06a200c 100644
--- a/frontend/src/components/ReadySetCyber/RSCHeader.tsx
+++ b/frontend/src/components/ReadySetCyber/RSCHeader.tsx
@@ -1,21 +1,348 @@
 import React from 'react';
-import { AppBar } from '@mui/material';
-import { Toolbar } from '@mui/material';
-import { Typography } from '@mui/material';
 import { useHistory } from 'react-router-dom';
+import { useAuthContext } from 'context';
+import {
+  AppBar,
+  Toolbar,
+  Container,
+  Box,
+  Typography,
+  IconButton,
+  Menu,
+  MenuItem,
+  Tooltip
+} from '@mui/material';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import MenuIcon from '@mui/icons-material/Menu';
+import RSCLogo from 'components/ReadySetCyber/assets/ReadySetCyberLogo.png';
 
 export const RSCHeader: React.FC = () => {
   const history = useHistory();
-  const handleClick = () => {
+  const handleNavHome = () => {
     history.push('/readysetcyber');
   };
+  const { logout, user } = useAuthContext();
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
+    null
+  );
+
+  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElNav(event.currentTarget);
+  };
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
   return (
-    <AppBar position="static">
-      <Toolbar>
-        <Typography variant="h6" onClick={handleClick}>
-          Ready Set Cyber
-        </Typography>
-      </Toolbar>
-    </AppBar>
+    <Box>
+      <AppBar position="static" sx={{ bgcolor: 'white' }}>
+        <Container maxWidth="xl">
+          <Toolbar disableGutters>
+            <Tooltip title="Go to Ready Set Cyber" arrow>
+              <IconButton
+                onClick={handleNavHome}
+                sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }}
+                style={{ backgroundColor: 'white', outline: 'none' }}
+                disableFocusRipple
+              >
+                <img
+                  src={RSCLogo}
+                  alt="Ready Set Cyber Logo"
+                  style={{
+                    width: '4em',
+                    height: '2em'
+                  }}
+                />
+              </IconButton>
+            </Tooltip>
+            <Typography
+              variant="h6"
+              component="div"
+              sx={{
+                flexGrow: 1,
+                color: '#07648D',
+                display: { xs: 'none', md: 'flex' },
+                mr: 2
+              }}
+            >
+              Dashboard
+            </Typography>
+            <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+              <Tooltip title="Go to Ready Set Cyber" arrow>
+                <IconButton
+                  onClick={handleNavHome}
+                  sx={{ display: { xs: 'flex', md: 'none' }, mr: 0 }}
+                  style={{ backgroundColor: 'white', outline: 'none' }}
+                >
+                  <img
+                    src={RSCLogo}
+                    alt="Ready Set Cyber Logo"
+                    style={{
+                      width: '4em',
+                      height: '2em'
+                    }}
+                  />
+                </IconButton>
+              </Tooltip>
+            </Box>
+            {user && (
+              <>
+                <IconButton
+                  size="large"
+                  aria-label="nav menu"
+                  aria-controls="menu-navbar"
+                  aria-haspopup="true"
+                  color="primary"
+                  onClick={handleOpenNavMenu}
+                  style={{ outline: 'none' }}
+                  sx={{ display: { xs: 'block', md: 'none' } }}
+                >
+                  <MenuIcon />
+                </IconButton>
+                <Menu
+                  id="menu-appbar"
+                  anchorEl={anchorElNav}
+                  anchorOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right'
+                  }}
+                  keepMounted
+                  transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right'
+                  }}
+                  open={Boolean(anchorElNav)}
+                  onClose={handleCloseNavMenu}
+                  sx={{ display: { xs: 'block', md: 'none' } }}
+                >
+                  <MenuItem style={{ outline: 'none' }}>
+                    {' '}
+                    Welcome, user
+                  </MenuItem>
+                  <MenuItem style={{ outline: 'none' }} onClick={handleNavHome}>
+                    Dashboard
+                  </MenuItem>
+                  <MenuItem style={{ outline: 'none' }}>
+                    {' '}
+                    Take Questionnaire Again{' '}
+                  </MenuItem>
+                  <MenuItem style={{ outline: 'none' }} onClick={logout}>
+                    Logout
+                  </MenuItem>
+                </Menu>
+              </>
+            )}
+            {user && (
+              <Box sx={{ flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>
+                <Tooltip title="Open Menu" arrow>
+                  <IconButton
+                    sx={{ p: 0 }}
+                    size="large"
+                    aria-label="account of current user"
+                    aria-controls="menu-appbar"
+                    aria-haspopup="true"
+                    color="primary"
+                    onClick={handleMenu}
+                    style={{ outline: 'none' }}
+                  >
+                    <AccountCircle />
+                  </IconButton>
+                </Tooltip>
+                <Menu
+                  sx={{ marginTop: '40px' }}
+                  id="menu-appbar"
+                  anchorEl={anchorEl}
+                  anchorOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right'
+                  }}
+                  keepMounted
+                  transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right'
+                  }}
+                  open={Boolean(anchorEl)}
+                  onClose={handleClose}
+                >
+                  <MenuItem style={{ outline: 'none' }} onClick={logout}>
+                    Logout
+                  </MenuItem>
+                </Menu>
+              </Box>
+            )}
+          </Toolbar>
+        </Container>
+      </AppBar>
+    </Box>
   );
 };
+
+// import React from 'react';
+// import { AppBar, Box, Container, Tooltip, IconButton, Menu, MenuItem } from '@mui/material';
+// import { Toolbar } from '@mui/material';
+// import { Typography } from '@mui/material';
+// import { useHistory } from 'react-router-dom';
+// import { useAuthContext } from 'context';
+// import RSCLogo  from '../../assets/ReadySetCyberLogo.png';
+
+// export const RSCHeader: React.FC = () => {
+//   const history = useHistory();
+//   const handleNavHome = () => {
+//     history.push('/readysetcyber');
+//   };
+
+//   const { user, logout } = useAuthContext();
+//   return (
+//     <Box>
+//       <AppBar position="static" sx={{ bgcolor: 'white' }}>
+//         <Container maxWidth="xl">
+//           <Toolbar disableGutters>
+//             <Tooltip title="Go to Ready Set Cyber" arrow>
+//               <IconButton
+//                 onClick={handleNavHome}
+//                 sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }}
+//                 style={{ backgroundColor: 'white', outline: 'none' }}
+//                 disableFocusRipple
+//               >
+//                 <img
+//                   src={RSCLogo}
+//                   alt="Ready Set Cyber Logo"
+//                   style={{
+//                     width: '4em',
+//                     height: '2em'
+//                   }}
+//                 />
+//               </IconButton>
+//             </Tooltip>
+//             <Typography
+//               variant="h6"
+//               component="div"
+//               sx={{
+//                 flexGrow: 1,
+//                 color: '#07648D',
+//                 display: { xs: 'none', md: 'flex' },
+//                 mr: 2
+//               }}
+//             >
+//               Dashboard
+//             </Typography>
+//             <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+//               <Tooltip title="Go to Ready Set Cyber" arrow>
+//                 <IconButton
+//                   onClick={handleNavHome}
+//                   sx={{ display: { xs: 'flex', md: 'none' }, mr: 0 }}
+//                   style={{ backgroundColor: 'white', outline: 'none' }}
+//                 >
+//                   <img
+//                     src={RSCLogo}
+//                     alt="Ready Set Cyber Logo"
+//                     style={{
+//                       width: '4em',
+//                       height: '2em'
+//                     }}
+//                   />
+//                 </IconButton>
+//               </Tooltip>
+//             </Box>
+//             {user && (
+//               <>
+//                 <IconButton
+//                   size="large"
+//                   aria-label="nav menu"
+//                   aria-controls="menu-navbar"
+//                   aria-haspopup="true"
+//                   color="primary"
+//                   onClick={handleOpenNavMenu}
+//                   style={{ outline: 'none' }}
+//                   sx={{ display: { xs: 'block', md: 'none' } }}
+//                 >
+//                   <MenuIcon />
+//                 </IconButton>
+//                 <Menu
+//                   id="menu-appbar"
+//                   anchorEl={anchorElNav}
+//                   anchorOrigin={{
+//                     vertical: 'top',
+//                     horizontal: 'right'
+//                   }}
+//                   keepMounted
+//                   transformOrigin={{
+//                     vertical: 'top',
+//                     horizontal: 'right'
+//                   }}
+//                   open={Boolean(anchorElNav)}
+//                   onClose={handleCloseNavMenu}
+//                   sx={{ display: { xs: 'block', md: 'none' } }}
+//                 >
+//                   <MenuItem style={{ outline: 'none' }}>
+//                     {' '}
+//                     Welcome, user
+//                   </MenuItem>
+//                   <MenuItem style={{ outline: 'none' }} onClick={handleNavHome}>
+//                     Dashboard
+//                   </MenuItem>
+//                   <MenuItem style={{ outline: 'none' }}>
+//                     {' '}
+//                     Take Questionnaire Again{' '}
+//                   </MenuItem>
+//                   <MenuItem style={{ outline: 'none' }} onClick={logout}>
+//                     Logout
+//                   </MenuItem>
+//                 </Menu>
+//               </>
+//             )}
+//             {user && (
+//               <Box sx={{ flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>
+//                 <Tooltip title="Open Menu" arrow>
+//                   <IconButton
+//                     sx={{ p: 0 }}
+//                     size="large"
+//                     aria-label="account of current user"
+//                     aria-controls="menu-appbar"
+//                     aria-haspopup="true"
+//                     color="primary"
+//                     onClick={handleMenu}
+//                     style={{ outline: 'none' }}
+//                   >
+//                     <AccountCircle />
+//                   </IconButton>
+//                 </Tooltip>
+//                 <Menu
+//                   sx={{ marginTop: '40px' }}
+//                   id="menu-appbar"
+//                   anchorEl={anchorEl}
+//                   anchorOrigin={{
+//                     vertical: 'top',
+//                     horizontal: 'right'
+//                   }}
+//                   keepMounted
+//                   transformOrigin={{
+//                     vertical: 'top',
+//                     horizontal: 'right'
+//                   }}
+//                   open={Boolean(anchorEl)}
+//                   onClose={handleClose}
+//                 >
+//                   <MenuItem style={{ outline: 'none' }} onClick={logout}>
+//                     Logout
+//                   </MenuItem>
+//                 </Menu>
+//               </Box>
+//             )}
+//           </Toolbar>
+//         </Container>
+//       </AppBar>
+//     </Box>
+//   );
+// };
diff --git a/frontend/src/components/ReadySetCyber/RSCSideNav.tsx b/frontend/src/components/ReadySetCyber/RSCSideNav.tsx
index e9a38c6f..821fee12 100644
--- a/frontend/src/components/ReadySetCyber/RSCSideNav.tsx
+++ b/frontend/src/components/ReadySetCyber/RSCSideNav.tsx
@@ -5,13 +5,16 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Divider from '@mui/material/Divider';
 import { RSCNavItem } from './RSCNavItem';
-import { dummyResults } from './dummyData';
 
-export const RSCSideNav: React.FC = () => {
-  const { id } = useParams<{ id: string }>();
+interface Props {
+  categories: Category[];
+}
 
-  const categories =
-    dummyResults.find((result) => result.id === parseInt(id))?.categories || [];
+export interface Category {
+  name: string;
+}
+export const RSCSideNav: React.FC<Props> = ({ categories }) => {
+  const { id } = useParams<{ id: string }>();
 
   return (
     <div>
@@ -19,8 +22,8 @@ export const RSCSideNav: React.FC = () => {
         <List>
           <ListItem>Welcome User</ListItem>
           <Divider component="li" />
-          {categories.map((category) => (
-            <RSCNavItem key={category.id} name={category.name} />
+          {categories.map((category, index) => (
+            <RSCNavItem key={index} name={category.name} />
           ))}
           <ListItem>Take Questionnaire Again</ListItem>
           <Divider component="li" />