Merge branch 'develop' into 20-merge-lz-infra

cisagov · May 13, 2024 · 6d55207 · 6d55207
2 parents d251bdb + aafa88b
commit 6d55207
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 42 deletions.
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -8,16 +8,9 @@ on:
 defaults:
   run:
     working-directory: ./playwright
-env:
-  PW_XFD_2FA_ISSUER: ${{ secrets._PW_XFD_2FA_ISSUER }}
-  PW_XFD_2FA_SECRET: ${{ secrets.PW_XFD_2FA_SECRET }}
-  PW_XFD_PASSWORD: ${{ secrets.PW_XFD_PASSWORD }}
-  PW_XFD_URL: ${{ env.PW_XFD_URL }}
-  PW_XFD_USER_ROLE: ${{ env.PW_XFD_USER_ROLE }}
-  PW_XFD_USERNAME: ${{ secrets.PW_XFD_USERNAME }}
-
 jobs:
   test:
+    environment: staging
     timeout-minutes: 60
     runs-on: ubuntu-latest
     container:
@@ -30,6 +23,15 @@ jobs:
           node-version: 18
       - name: Install dependencies
         run: npm ci
+      - name: Create env file
+        run: |
+          touch .env
+          echo PW_XFD_2FA_ISSUER=${{ secrets.PW_XFD_2FA_ISSUER }} >> .env
+          echo PW_XFD_2FA_SECRET=${{ secrets.PW_XFD_2FA_SECRET }} >> .env
+          echo PW_XFD_PASSWORD=${{ secrets.PW_XFD_PASSWORD }} >> .env
+          echo PW_XFD_URL=${{ vars.PW_XFD_URL }}>> .env
+          echo PW_XFD_USER_ROLE=${{ vars.PW_XFD_USER_ROLE }} >> .env
+          echo PW_XFD_USERNAME=${{ secrets.PW_XFD_USERNAME }} >> .env
       - name: Run your tests
         run: npx playwright test
         env:

diff --git a/frontend/src/components/ReadySetCyber/RSCDefaultSideNav.tsx b/frontend/src/components/ReadySetCyber/RSCDefaultSideNav.tsx
@@ -35,9 +35,7 @@ export const RSCDefaultSideNav: React.FC = () => {
             Take Questionnaire Again
           </ListItemButton>
           <Divider component="li" />
-          <ListItemButton style={{ outline: 'none' }} onClick={logout}>
-            Logout
-          </ListItemButton>
+          <ListItemButton onClick={logout}>Logout</ListItemButton>
         </List>
       </Box>
     </Box>

diff --git a/frontend/src/components/ReadySetCyber/RSCDetail.tsx b/frontend/src/components/ReadySetCyber/RSCDetail.tsx
@@ -90,6 +90,7 @@ export const RSCDetail: React.FC = () => {
                       variant="contained"
                       color="success"
                       onClick={handleDownloadPDF}
+                      sx={{ '@media print': { display: 'none' } }}
                     >
                       Download PDF
                     </Button>

diff --git a/frontend/src/components/ReadySetCyber/RSCHeader.tsx b/frontend/src/components/ReadySetCyber/RSCHeader.tsx
@@ -53,7 +53,7 @@ export const RSCHeader: React.FC = () => {
               <IconButton
                 onClick={handleNavHome}
                 sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }}
-                style={{ backgroundColor: 'white', outline: 'none' }}
+                style={{ backgroundColor: 'white' }}
                 disableFocusRipple
               >
                 <img
@@ -83,7 +83,7 @@ export const RSCHeader: React.FC = () => {
                 <IconButton
                   onClick={handleNavHome}
                   sx={{ display: { xs: 'flex', md: 'none' }, mr: 0 }}
-                  style={{ backgroundColor: 'white', outline: 'none' }}
+                  style={{ backgroundColor: 'white' }}
                 >
                   <img
                     src={RSCLogo}

diff --git a/frontend/src/components/ReadySetCyber/RSCNavItem.tsx b/frontend/src/components/ReadySetCyber/RSCNavItem.tsx
@@ -12,14 +12,11 @@ export const RSCNavItem: React.FC<Props> = (props) => {
     <HashLink
       style={{
         textDecoration: 'none',
-        color: 'black',
-        outline: 'none'
+        color: 'black'
       }}
       to={`#${name}`}
     >
-      <ListItemButton divider style={{ outline: 'none' }}>
-        {name}
-      </ListItemButton>
+      <ListItemButton divider>{name}</ListItemButton>
     </HashLink>
   );
 };
diff --git a/frontend/src/components/ReadySetCyber/RSCQuestion.tsx b/frontend/src/components/ReadySetCyber/RSCQuestion.tsx
@@ -41,7 +41,13 @@ export const RSCQuestion: React.FC<Props> = ({ categories }) => {
   return (
     <Box>
       {categories.map((category, catIndex) => (
-        <Box key={catIndex} sx={{ marginBottom: 4 }}>
+        <Box
+          key={catIndex}
+          sx={{
+            marginBottom: 4,
+            pageBreakInside: 'avoid' // Prevent page breaks inside categories for PDF
+          }}
+        >
           <Typography
             variant="h5"
             gutterBottom
@@ -61,13 +67,25 @@ export const RSCQuestion: React.FC<Props> = ({ categories }) => {
                 padding: 2,
                 borderRadius: 2,
                 marginBottom: 2,
-                border: '.1rem solid #B8D9E8'
+                border: '.1rem solid #B8D9E8',
+                pageBreakInside: 'avoid', // Prevent page breaks inside questions for PDF
+                '@media print': {
+                  marginBottom: 4 // Increase this value to add more space between questions in the PDF only
+                }
               }}
             >
               <Typography
                 variant="h6"
                 gutterBottom
                 style={{ color: '#003E67' }}
+                sx={{
+                  marginTop: 2,
+                  color: '#1976d2',
+                  '&:focus': {
+                    outline: '2px solid #000' // Change this to the desired outline style
+                  }
+                }}
+                tabIndex={0}
               >
                 Question {questionNumber(entry.question.number)}
               </Typography>
@@ -160,7 +178,12 @@ export const RSCQuestion: React.FC<Props> = ({ categories }) => {
                               color: 'white',
                               backgroundColor: '#0078ae'
                             }}
-                            sx={{ width: 'fit-content' }}
+                            sx={{
+                              width: 'fit-content',
+                              '@media print': {
+                                boxShadow: 'none' // Remove shadows when printing
+                              }
+                            }}
                           >
                             Visit Resource
                           </Button>

diff --git a/frontend/src/components/ReadySetCyber/RSCResult.tsx b/frontend/src/components/ReadySetCyber/RSCResult.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Card from '@mui/material/Card';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
-import { Typography } from '@mui/material';
+import { ButtonBase, Typography } from '@mui/material';
 import { useHistory } from 'react-router-dom';
 
 interface Props {
@@ -38,19 +38,24 @@ export const RSCResult: React.FC<Props> = (props) => {
   };
 
   return (
-    <Card onClick={handleClick}>
-      <Box sx={{ width: '100%', bgcolor: 'background.paper', p: 2 }}>
-        <Stack
-          direction="row"
-          justifyContent={'space-between'}
-          alignItems="center"
-        >
-          <Typography variant="h6" component="div">
-            {formatName(type)}
-          </Typography>
-          <Typography variant="h6">Created: {formatDate}</Typography>
-        </Stack>
-      </Box>
-    </Card>
+    <ButtonBase onClick={handleClick}>
+      <Card
+        style={{ outline: 'standard', cursor: 'pointer' }}
+        sx={{ width: '100%' }}
+      >
+        <Box sx={{ width: '100%', bgcolor: 'background.paper', p: 2 }}>
+          <Stack
+            direction="row"
+            justifyContent={'space-between'}
+            alignItems="center"
+          >
+            <Typography variant="h6" component="div">
+              {formatName(type)}
+            </Typography>
+            <Typography variant="h6">Created: {formatDate}</Typography>
+          </Stack>
+        </Box>
+      </Card>
+    </ButtonBase>
   );
 };
diff --git a/frontend/src/components/ReadySetCyber/RSCSideNav.tsx b/frontend/src/components/ReadySetCyber/RSCSideNav.tsx
@@ -33,13 +33,9 @@ export const RSCSideNav: React.FC<Props> = ({ categories }) => {
           {categories.map((category, index) => (
             <RSCNavItem key={index} name={category.name} />
           ))}
-          <ListItemButton style={{ outline: 'none' }}>
-            Take Questionnaire Again
-          </ListItemButton>
+          <ListItemButton>Take Questionnaire Again</ListItemButton>
           <Divider component="li" />
-          <ListItemButton style={{ outline: 'none' }} onClick={logout}>
-            Logout
-          </ListItemButton>
+          <ListItemButton onClick={logout}>Logout</ListItemButton>
         </List>
       </Box>
     </Box>