Migrate date management from momentjs to dayjs

.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.10.0
           yarn workspace client lighthouse

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;

client/components/App/App.jsx

@@ -2,7 +2,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 +59,7 @@ const App = () => {
                         id="basic-navbar-nav"
                         className="justify-content-end"
                     >
-                        <ul>
+                        <Nav>
                             <li>
                                 <Nav.Link
                                     as={Link}
@@ -157,7 +159,7 @@ const App = () => {
                                     </Nav.Link>
                                 </li>
                             )}
-                        </ul>
+                        </Nav>
                     </Navbar.Collapse>
                 </Navbar>
             </Container>

client/components/CandidateTests/CandidateModals/ProvideFeedbackModal/ProvideFeedbackModal.css

@@ -59,6 +59,7 @@
 .radio-text {
     padding-bottom: 10px;
     color: #656565;
+    display: block;
 }
 
 .sr-only {

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';

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;

client/components/CandidateTests/CandidateTestPlanRun/index.jsx

@@ -10,7 +10,11 @@ import {
     CANDIDATE_REPORTS_QUERY,
     PROMOTE_VENDOR_REVIEW_STATUS_REPORT_MUTATION
 } from './queries';
-import { Badge, Container, Row, Col, Button } from 'react-bootstrap';
+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, Redirect, useHistory } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import './CandidateTestPlanRun.css';
@@ -456,7 +460,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 +512,7 @@ const CandidateTestPlanRun = () => {
                 ]}
                 stacked
             ></DisclosureComponent>
-        </>
+        </div>
     );
 
     const requestChangesUrl = generateGithubUrl(true, 'changes-requested');

client/components/ManageTestQueue/index.jsx

@@ -508,12 +508,11 @@ const ManageTestQueue = ({
                             versions in the ARIA-AT App
                         </span>
                         <div className="disclosure-row-manage-ats">
-                            <Form.Group className="ats-container">
+                            <Form.Group className="ats-container form-group">
                                 <Form.Label className="disclosure-form-label">
                                     Assistive Technology
                                 </Form.Label>
-                                <Form.Control
-                                    as="select"
+                                <Form.Select
                                     value={selectedManageAtId}
                                     onChange={onManageAtChange}
                                 >
@@ -525,15 +524,14 @@ const ManageTestQueue = ({
                                             {item.name}
                                         </option>
                                     ))}
-                                </Form.Control>
+                                </Form.Select>
                             </Form.Group>
                             <div className="at-versions-container">
-                                <Form.Group>
+                                <Form.Group className="form-group">
                                     <Form.Label className="disclosure-form-label">
                                         Available Versions
                                     </Form.Label>
-                                    <Form.Control
-                                        as="select"
+                                    <Form.Select
                                         value={selectedManageAtVersionId}
                                         onChange={onManageAtVersionChange}
                                     >
@@ -545,7 +543,7 @@ const ManageTestQueue = ({
                                                 {item.name}
                                             </option>
                                         ))}
-                                    </Form.Control>
+                                    </Form.Select>
                                 </Form.Group>
                                 <div className="disclosure-buttons-row">
                                     <button
@@ -584,12 +582,11 @@ const ManageTestQueue = ({
                             Technology and Browser to add it to the Test Queue
                         </span>
                         <div className="disclosure-row-test-plans">
-                            <Form.Group>
+                            <Form.Group className="form-group">
                                 <Form.Label className="disclosure-form-label">
                                     Test Plan
                                 </Form.Label>
-                                <Form.Control
-                                    as="select"
+                                <Form.Select
                                     onChange={e => {
                                         const { value } = e.target;
                                         updateMatchingTestPlanVersions(
@@ -610,14 +607,13 @@ const ManageTestQueue = ({
                                                 `"${item.testPlan.directory}"`}
                                         </option>
                                     ))}
-                                </Form.Control>
+                                </Form.Select>
                             </Form.Group>
-                            <Form.Group>
+                            <Form.Group className="form-group">
                                 <Form.Label className="disclosure-form-label">
                                     Test Plan Version
                                 </Form.Label>
-                                <Form.Control
-                                    as="select"
+                                <Form.Select
                                     value={selectedTestPlanVersionId}
                                     onChange={onTestPlanVersionChange}
                                 >
@@ -633,14 +629,13 @@ const ManageTestQueue = ({
                                             {item.gitSha.substring(0, 7)})
                                         </option>
                                     ))}
-                                </Form.Control>
+                                </Form.Select>
                             </Form.Group>
-                            <Form.Group>
+                            <Form.Group className="form-group">
                                 <Form.Label className="disclosure-form-label">
                                     Assistive Technology
                                 </Form.Label>
-                                <Form.Control
-                                    as="select"
+                                <Form.Select
                                     value={selectedAtId}
                                     onChange={onAtChange}
                                 >
@@ -655,14 +650,13 @@ const ManageTestQueue = ({
                                             {item.name}
                                         </option>
                                     ))}
-                                </Form.Control>
+                                </Form.Select>
                             </Form.Group>
-                            <Form.Group>
+                            <Form.Group className="form-group">
                                 <Form.Label className="disclosure-form-label">
                                     Browser
                                 </Form.Label>
-                                <Form.Control
-                                    as="select"
+                                <Form.Select
                                     value={selectedBrowserId}
                                     onChange={onBrowserChange}
                                 >
@@ -677,7 +671,7 @@ const ManageTestQueue = ({
                                             {item.name}
                                         </option>
                                     ))}
-                                </Form.Control>
+                                </Form.Select>
                             </Form.Group>
                         </div>
                         <Button

client/components/Reports/SummarizeTestPlanReport.jsx

@@ -166,6 +166,7 @@ const SummarizeTestPlanReport = ({ testPlanReport }) => {
                                 >
                                     <FontAwesomeIcon
                                         icon={faExclamationCircle}
+                                        color="#94979b"
                                     />
                                     Raise an Issue
                                 </Button>
@@ -175,7 +176,10 @@ const SummarizeTestPlanReport = ({ testPlanReport }) => {
                                     href={modifiedRenderedUrl}
                                     variant="secondary"
                                 >
-                                    <FontAwesomeIcon icon={faExternalLinkAlt} />
+                                    <FontAwesomeIcon
+                                        icon={faExternalLinkAlt}
+                                        color="#94979b"
+                                    />
                                     Open Test
                                 </Button>
                             </div>

client/components/TestQueue/TestQueue.css

@@ -38,6 +38,10 @@ main.container-fluid table .col-md-3 {
     margin-top: 0.75em;
 }
 
+.test-queue.table th {
+    padding: 0.75rem;
+}
+
 .test-queue.table th.testers {
     width: 225px;
 }

client/components/TestQueue/index.jsx

@@ -106,9 +106,8 @@ const TestQueue = () => {
                 <Table
                     className="test-queue"
                     aria-labelledby={tableId}
-                    striped
                     bordered
-                    hover
+                    responsive
                 >
                     <thead>
                         <tr>

client/components/TestQueueRow/index.jsx

@@ -12,7 +12,6 @@ import { Button, Dropdown } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import ATAlert from '../ATAlert';
 import { capitalizeEachWord } from '../../utils/formatter';
-import './TestQueueRow.css';
 import {
     TEST_PLAN_REPORT_QUERY,
     ASSIGN_TESTER_MUTATION,
@@ -25,7 +24,7 @@ import { gitUpdatedDateToString } from '../../utils/gitUtils';
 import TestPlanUpdaterModal from '../TestPlanUpdater/TestPlanUpdaterModal';
 import BasicThemedModal from '../common/BasicThemedModal';
 import { LoadingStatus, useTriggerLoad } from '../common/LoadingStatus';
-
+import './TestQueueRow.css';
 const TestQueueRow = ({
     user = {},
     testers = [],

client/components/TestRenderer/index.jsx

@@ -127,6 +127,7 @@ const Fieldset = styled.fieldset`
     > legend {
         display: block;
 
+        float: inherit;
         width: auto;
         margin: 0;
         font-size: initial;

client/components/TestRun/OptionButton.js

@@ -12,7 +12,7 @@ const OptionButton = ({
 }) => {
     return (
         <Button
-            className="btn-block"
+            className="btn-options"
             variant="secondary"
             onClick={onClick}
             disabled={disabled}