Update dependencies to support Node 18+ (#482)

* Update some major dependencies, webpack config and proxy management for "Open Test Page button" * Update icon packs * Webpack config changes * Update bootstrap * Update eslint & jest * Update connect-pg-simple * Update css * Remove query-string dependency * jest.setup.js update * Update runtest.yml to use Node v18 * Updating form text (#485) * Update dependencies test (#484) * Updating jest environment and babel configuration * New github config to fix builds * Upgrade lighthouse * Remove nodegit dependency * Address PR feedback * Fix files affected by revert on source branch * Update React * Fix fake data seeder * Remove sass dependency * Fix files affected by revert on source branch * Fix misspellings in the readme (#490) * Fix misspellings in the readme --------- Co-authored-by: Howard Edwards <[email protected]> * Update sequelize * Update gitUpdatedDateToString function arguments * Updating react deps (#502) * Update React * Updating jest environment and babel configuration * New github config to fix builds * Cacheing nodegit and fixing failing tests * update react in package.json * Updating React-Testing-Library and removing acts (default now) * adding text encoder, which is not added to jsdom * updating react testing library dom * Updating jest environment and babel configuration * update react in package.json * adding text encoder, which is not added to jsdom * cleaning up confirmAuth + candidateTests + routes index.js * descendent routing in progress * fixed candidate tests + test reports. TODO: test queue * fixing typo: propotypes --> proptypes * Undoing irrelevant commits * Undoing uneccesary whitespaces * Removing unnecessary imports * cleaning up confirmAuth + candidateTests + routes index.js * descendent routing in progress * undoing irrelevant commits * undoing uneccesary whitespaces * removing unnecessary imports * Update yarn.lock * report fixings * fixing jest test expected * removing unused import * updated runtest.yml * removing resize observer * confirmed test expected is different per machine, reverting * fixing resize-observer * check for null | undefined testplanreports * summarizetestplanversion reverts * Re-enabling test on App.test.jsx * updated testing library * adding yarn lock * yarn prettier * Removing comment --------- Co-authored-by: Howard Edwards <[email protected]> Co-authored-by: Erika Miguel <[email protected]> * Update rest of dependencies 2 (#503) * Upgrade prettier * update babel * Updating babel and prettier correctly * Upgrade ua-parser-js and lighthouse cli * Moving babel deps to dev dependencies * updating prettier config * prettier changes * Update sequelize-cli version (#508) * Update sequelize-cli version * Update dependencies * Updating More Dependencies (#506) * untested changes * fixed storybook * alphabetical * changing to dev deps * Implement fixes for support tables * Upgrade vagrant environment (#492) * Vagrant environment changes * adding memory increase and cron job * Automatically upgrade to Node 18 and fix cron job on Vagrant environment * Adding cores to Vagrant machine * Adding environment variable to differentiate between deployment environments in embed.js * Changing permissions to /vagrant/server folder * separating out upgrade tasks * explicitly adding patch-package to root * removing DEPLOY_ENVIRONMENT variable * remove DEPLOY_ENVIRONMENT from vagrant config * adding ALLOW_FAKE_ROLE env variable to vagrant env * World write rsync permission on server folder on vagrant machine * Document new Vagrant configuration * Remove obviated Ansible Task The directory is now made world-writable every time it is synchronized with the host. --------- Co-authored-by: Mike Pennisi <[email protected]> * Update yarn.lock --------- Co-authored-by: Erika Miguel <[email protected]> Co-authored-by: alflennik <[email protected]> Co-authored-by: Paul Clue <[email protected]> Co-authored-by: Aleena <[email protected]> Co-authored-by: Mike Pennisi <[email protected]>
w3c · Mar 8, 2023 · 76c4924 · 76c4924
1 parent eb5894f
commit 76c4924
Show file tree

Hide file tree

Showing 105 changed files with 7,608 additions and 10,337 deletions.
diff --git a/.github/workflows/runtest.yml b/.github/workflows/runtest.yml
@@ -8,10 +8,11 @@ jobs:
     steps:
       - name: Checkout the repository
         uses: actions/checkout@v2
-      - name: Install NodeJS 14
-        uses: actions/setup-node@v2
+      - name: Install NodeJS 18
+        uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '18'
+          cache: 'npm'
       - run: yarn --version
       - name: Install PostgreSQL 12
         run: |
@@ -42,5 +43,5 @@ jobs:
         run: yarn test
       - name: lighthouseci
         run: |
-          npm install -g @lhci/cli@0.8.x
+          npm install -g @lhci/cli@0.11.0
           yarn workspace client lighthouse
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,6 @@
 {
   "singleQuote": true,
-  "tabWidth": 4
+  "tabWidth": 4,
+  "arrowParens": "avoid",
+  "trailingComma": "none"
 }
diff --git a/Vagrantfile b/Vagrantfile
@@ -6,8 +6,18 @@ VAGRANTFILE_API_VERSION = '2'
 Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
   config.vm.box = 'debian/buster64'
 
+  config.vm.provider "virtualbox" do |v|
+    v.memory = 4096
+    v.cpus = 2
+  end
+
   config.vm.synced_folder '.', '/vagrant', type: 'rsync',
-    rsync__exclude: ['node_modules/', 'client/dist/']
+    rsync__exclude: ['node_modules/', 'client/dist/'],
+    # Because Vagrant sets the owner of the synced folders to be the `vagrant`
+    # user, the `aria-bot` user (which runs the server process) will not be
+    # able to write to the `server` directory by default. The following
+    # configuration makes the directory world-writable to enable this.
+    rsync__args: ['-r', '--perms', '--chmod=Du=rwx,Dg=rwx,Do=rwx,Fu=rwx,Fg=rwx,Fo=rwx', './server']
 
   # Ideally, this IP will be unique, so the entry added to /etc/hosts won't
   # conflict with that of another project.

diff --git a/client/.storybook/main.js b/client/.storybook/main.js
@@ -1,4 +1,7 @@
 module.exports = {
+    core: {
+        builder: 'webpack5',
+      },
     stories: ['../stories/*.stories.jsx'],
     addons: ['@storybook/addon-a11y', '@storybook/addon-controls']
 };
diff --git a/client/.storybook/preview.js b/client/.storybook/preview.js
@@ -1,4 +1,4 @@
 import '../../node_modules/bootstrap/dist/css/bootstrap.css';
 import '../../node_modules/@fortawesome/fontawesome-svg-core/styles.css';
-import '!style-loader!css-loader!sass-loader!../scss/custom.scss'; // using inline webpack loaders for scss
+import '../../node_modules/bootstrap/dist/css/bootstrap.css';
 import '../static/index.css';
diff --git a/client/.babelrc → client/babel.config.json b/client/.babelrc → client/babel.config.json
diff --git a/client/components/App/App.css b/client/components/App/App.css
@@ -43,6 +43,11 @@ nav.navbar {
 
 .nav-link:hover {
     color: #000;
+    text-decoration: none;
+}
+
+a.nav-link {
+    color: #0b60ab;
 }
 
 .nav-link[aria-current='true'] {
@@ -107,10 +112,12 @@ nav .logo.navbar-brand {
 
 a {
     color: #0b60ab;
+    text-decoration: none;
 }
 
 a:hover {
     color: #214e86;
+    text-decoration: underline;
 }
 
 h1 {
@@ -148,9 +155,6 @@ button {
 
 .table thead th {
     border-bottom: 0;
-}
-
-table thead th {
     background: #e9ebee;
 }
 
@@ -172,6 +176,10 @@ table tbody tr:nth-of-type(odd),
     border: 1px solid #d2d5d9;
 }
 
+.table td {
+    padding: 0.75rem;
+}
+
 table.table-hover tbody tr:hover,
 table tbody tr:hover {
     background-color: #f6f8fa;
@@ -298,6 +306,10 @@ ul li {
     color: #d52a49;
 }
 
+.form-group {
+    margin-bottom: 1rem;
+}
+
 /* STATUS LABELS */
 
 .status-wrapper {
@@ -444,6 +456,10 @@ img {
     padding-bottom: 2em;
 }
 
+ol.breadcrumb {
+    padding: 0.75rem 1rem;
+}
+
 @media (min-width: 700px) {
     nav.navbar {
         padding: 0.5rem 3rem;

diff --git a/client/components/App/App.jsx b/client/components/App/App.jsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { useQuery } from '@apollo/client';
-import { renderRoutes } from 'react-router-config';
 import { Link, useLocation } from 'react-router-dom';
-import { Container, Navbar, Nav } from 'react-bootstrap';
+import Container from 'react-bootstrap/Container';
+import Navbar from 'react-bootstrap/Navbar';
+import Nav from 'react-bootstrap/Nav';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
 import { evaluateAuth } from '../../utils/evaluateAuth';
@@ -57,7 +58,7 @@ const App = () => {
                         id="basic-navbar-nav"
                         className="justify-content-end"
                     >
-                        <ul>
+                        <Nav>
                             <li>
                                 <Nav.Link
                                     as={Link}
@@ -157,13 +158,11 @@ const App = () => {
                                     </Nav.Link>
                                 </li>
                             )}
-                        </ul>
+                        </Nav>
                     </Navbar.Collapse>
                 </Navbar>
             </Container>
-            <Container fluid>
-                <div>{renderRoutes(routes)}</div>
-            </Container>
+            <Container fluid>{routes()}</Container>
         </ScrollFixer>
     );
 };

diff --git a/client/components/App/useSigninUrl.js b/client/components/App/useSigninUrl.js
@@ -6,10 +6,7 @@ const useSigninUrl = () => {
     if (matchedFakeRole) {
         dataFromFrontend += `fakeRole-${matchedFakeRole[1]}`;
     }
-    return (
-        `${process.env.API_SERVER}/api/auth/oauth?dataFromFrontend=` +
-        dataFromFrontend
-    );
+    return `/api/auth/oauth?dataFromFrontend=` + dataFromFrontend;
 };
 
 export default useSigninUrl;
diff --git a/...t/components/CandidateTests/CandidateModals/ProvideFeedbackModal/ProvideFeedbackModal.css b/...t/components/CandidateTests/CandidateModals/ProvideFeedbackModal/ProvideFeedbackModal.css
@@ -59,6 +59,7 @@
 .radio-text {
     padding-bottom: 10px;
     color: #656565;
+    display: block;
 }
 
 .sr-only {

diff --git a/client/components/CandidateTests/CandidateModals/ProvideFeedbackModal/index.jsx b/client/components/CandidateTests/CandidateModals/ProvideFeedbackModal/index.jsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import BasicModal from '../../../common/BasicModal';
 import PropTypes from 'prop-types';
-import { Form, FormCheck } from 'react-bootstrap';
+import Form from 'react-bootstrap/Form';
+import FormCheck from 'react-bootstrap/FormCheck';
 import '../common.css';
 import './ProvideFeedbackModal.css';
 import FeedbackListItem from '../../FeedbackListItem';

diff --git a/client/components/CandidateTests/CandidateTestPlanRun/CandidateTestPlanRun.css b/client/components/CandidateTests/CandidateTestPlanRun/CandidateTestPlanRun.css
@@ -123,6 +123,10 @@
     padding: 1em;
 }
 
+.results-container {
+    padding: 0;
+}
+
 .options-feedback {
     top: 35px;
 }
@@ -146,7 +150,7 @@
 }
 
 .viewed-badge {
-    background-color: #e5e5e5;
+    background-color: #e5e5e5 !important;
     color: black;
     font-size: 15px;
     font-weight: 400;

diff --git a/client/components/CandidateTests/CandidateTestPlanRun/index.jsx b/client/components/CandidateTests/CandidateTestPlanRun/index.jsx
@@ -10,8 +10,12 @@ import {
     CANDIDATE_REPORTS_QUERY,
     PROMOTE_VENDOR_REVIEW_STATUS_REPORT_MUTATION
 } from './queries';
-import { Badge, Container, Row, Col, Button } from 'react-bootstrap';
-import { useParams, Redirect, useHistory } from 'react-router-dom';
+import Badge from 'react-bootstrap/Badge';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Button from 'react-bootstrap/Button';
+import { useParams, useNavigate, Navigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import './CandidateTestPlanRun.css';
 import '../../TestRun/TestRun.css';
@@ -41,7 +45,7 @@ function useSize(target) {
 
 const CandidateTestPlanRun = () => {
     const { atId, testPlanVersionId } = useParams();
-    const history = useHistory();
+    const navigate = useNavigate();
 
     const { loading, data, error, refetch } = useQuery(
         CANDIDATE_REPORTS_QUERY,
@@ -250,7 +254,7 @@ const CandidateTestPlanRun = () => {
     const at = atMap[atId];
 
     const testPlanReports = data.testPlanReports;
-    if (testPlanReports.length === 0) return <Redirect to="/404" />;
+    if (testPlanReports.length === 0) return <Navigate to="/404" replace />;
 
     const testPlanReport = testPlanReports.find(
         each => each.testPlanVersion.id === testPlanVersionId
@@ -263,11 +267,8 @@ const CandidateTestPlanRun = () => {
     }));
 
     const currentTest = tests[currentTestIndex];
-    const {
-        testPlanVersion,
-        vendorReviewStatus,
-        recommendedStatusTargetDate
-    } = testPlanReport;
+    const { testPlanVersion, vendorReviewStatus, recommendedStatusTargetDate } =
+        testPlanReport;
 
     const vendorReviewStatusMap = {
         READY: 'Ready',
@@ -376,9 +377,11 @@ const CandidateTestPlanRun = () => {
             <div className="test-info-entity apg-example-name">
                 <div className="info-label">
                     <b>Candidate Test Plan:</b>{' '}
-                    {`${testPlanVersion.title ||
+                    {`${
+                        testPlanVersion.title ||
                         testPlanVersion.testPlan?.directory ||
-                        ''}`}
+                        ''
+                    }`}
                 </div>
             </div>
             <div className="test-info-entity review-status">
@@ -456,7 +459,7 @@ const CandidateTestPlanRun = () => {
     );
 
     const results = (
-        <>
+        <div className="results-container">
             <h1 className="current-test-title">{currentTest.title}</h1>
             <DisclosureComponent
                 componentId="test-instructions-and-results"
@@ -508,7 +511,7 @@ const CandidateTestPlanRun = () => {
                 ]}
                 stacked
             ></DisclosureComponent>
-        </>
+        </div>
     );
 
     const requestChangesUrl = generateGithubUrl(true, 'changes-requested');
@@ -695,7 +698,7 @@ const CandidateTestPlanRun = () => {
                     show={true}
                     handleAction={async () => {
                         setThankYouModalShowing(false);
-                        history.push('/candidate-tests');
+                        navigate('/candidate-tests');
                     }}
                     githubUrl={generateGithubUrl(
                         false,