[TTAHUB-2652] upgrade to nodejs 20

.circleci/config.yml

@@ -5,10 +5,10 @@ executors:
   docker-executor:
     # for docker you must specify an image to use for the primary container
     docker:
-      - image: cimg/node:18.19.1-browsers
+      - image: cimg/node:20.12.2-browsers
   docker-postgres-executor:
     docker:
-      - image: cimg/node:18.19.1-browsers
+      - image: cimg/node:20.12.2-browsers
         environment:
           DATABASE_URL: postgresql://postgres@localhost/ttasmarthub
       - image: circleci/postgres:12.4-ram
@@ -21,7 +21,7 @@ executors:
       - image: cimg/python:3.9.18
   docker-postgres-elasticsearch-executor:
     docker:
-      - image: cimg/node:18.19.1-browsers
+      - image: cimg/node:20.12.2-browsers
         environment:
           DATABASE_URL: postgresql://postgres@localhost/ttasmarthub
       - image: circleci/postgres:12.4-ram

.nvmrc

@@ -1 +1 @@
-18.19.1
+20.12.2

Dockerfile

@@ -1,3 +1,3 @@
-FROM node:18.19.1
+FROM node:20.12.2
 WORKDIR /app
 RUN apt-get update && apt-get install lcov -y

frontend/package.json

@@ -10,7 +10,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@hookform/error-message": "^0.0.5",
     "@react-hook/resize-observer": "^1.2.6",
-    "@trussworks/react-uswds": "4.1.1",
+    "@trussworks/react-uswds": "9.0.0",
     "@ttahub/common": "^2.1.3",
     "@use-it/interval": "^1.0.0",
     "async": "^3.2.3",
@@ -60,7 +60,7 @@
     "uuid": "^8.3.2"
   },
   "engines": {
-    "node": "18.19.1"
+    "node": "20.12.2"
   },
   "scripts": {
     "start": "cross-env DISABLE_ESLINT_PLUGIN=true react-scripts start",
@@ -180,6 +180,7 @@
     "eslint-plugin-react": "^7.20.5",
     "eslint-plugin-react-hooks": "^4.0.8",
     "eslint-plugin-testing-library": "^3.10.1",
+    "focus-trap-react": "^10.2.3",
     "fetch-mock": "^9.11.0",
     "history": "4.10.1",
     "jest-fetch-mock": "^3.0.3",

frontend/src/components/GoalCards/GoalsCardsHeader.js

@@ -2,7 +2,7 @@ import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { DECIMAL_BASE } from '@ttahub/common';
 import {
-  Checkbox, Button, Dropdown, Alert,
+  Checkbox, Button, Select, Alert,
 } from '@trussworks/react-uswds';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
@@ -112,7 +112,7 @@ export default function GoalCardsHeader({
         <div className="desktop:display-flex flex-align-center">
           {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
           <label className="display-block margin-right-1" style={{ minWidth: 'max-content' }} htmlFor="sortBy">Sort by</label>
-          <Dropdown
+          <Select
             onChange={setSortBy}
             value={`${sortConfig.sortBy}-${sortConfig.direction}`}
             className="margin-top-0"
@@ -124,7 +124,7 @@ export default function GoalCardsHeader({
             <option value="createdOn-asc">creation date (oldest to newest) </option>
             <option value="goalStatus-asc">goal status (drafts first)</option>
             <option value="goalStatus-desc">goal status (closed first) </option>
-          </Dropdown>
+          </Select>
         </div>
         {!hidePagination && (
         <div className="smart-hub--table-nav">

frontend/src/components/GoalForm/GoalSource.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
 import {
-  Dropdown,
+  Select,
   FormGroup, Label,
 } from '@trussworks/react-uswds';
 import { GOAL_SOURCES } from '@ttahub/common';
@@ -41,7 +41,7 @@ export default function GoalSource({
           </>
         </Label>
         {error}
-        <Dropdown
+        <Select
           id={inputName}
           name={inputName}
           onChange={onChange}
@@ -56,7 +56,7 @@ export default function GoalSource({
           {GOAL_SOURCES.map((s) => (
             <option key={uuid()}>{s}</option>
           ))}
-        </Dropdown>
+        </Select>
 
       </FormGroup>
     </>

frontend/src/components/GoalForm/ObjectiveStatus.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, Label, Dropdown } from '@trussworks/react-uswds';
+import { FormGroup, Label, Select } from '@trussworks/react-uswds';
 import { uniqueId } from 'lodash';
 import useValidObjectiveStatuses from '../../hooks/useValidObjectiveStatuses';
 
@@ -37,15 +37,15 @@ export default function ObjectiveStatus({
         <Label htmlFor={inputName}>
           Objective status
         </Label>
-        <Dropdown
+        <Select
           name={inputName}
           onChange={onChange}
           value={status}
           id={inputName}
           disabled={isLoading}
         >
           {options}
-        </Dropdown>
+        </Select>
       </FormGroup>
     );
   }

frontend/src/components/ObjectiveSupportType.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { SUPPORT_TYPES } from '@ttahub/common';
-import { FormGroup, Label, Dropdown } from '@trussworks/react-uswds';
+import { FormGroup, Label, Select } from '@trussworks/react-uswds';
 import Req from './Req';
 import SupportTypeDrawer from './SupportTypeDrawer';
 import DrawerTriggerButton from './DrawerTriggerButton';
@@ -30,7 +30,7 @@ export default function ObjectiveSupportType({
           Get help choosing a support type
         </DrawerTriggerButton>
       </div>
-      <Dropdown
+      <Select
         onChange={(e) => onChangeSupportType(e.target.value)}
         id={inputName}
         name={inputName}
@@ -39,7 +39,7 @@ export default function ObjectiveSupportType({
       >
         <option disabled hidden value="">Select one</option>
         {SUPPORT_TYPES.map((option) => (<option key={option}>{option}</option>))}
-      </Dropdown>
+      </Select>
     </FormGroup>
 
   );

frontend/src/components/RecipientsWithGroups.js

@@ -4,7 +4,7 @@ import React, {
 } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import {
-  Dropdown,
+  Select,
   Checkbox,
 } from '@trussworks/react-uswds';
 import { DECIMAL_BASE } from '@ttahub/common';
@@ -163,7 +163,7 @@ const RecipientsWithGroups = () => {
               label="Group name"
               name="recipientGroup"
             >
-              <Dropdown
+              <Select
                 required
                 control={control}
                 id="recipientGroup"
@@ -176,7 +176,7 @@ const RecipientsWithGroups = () => {
                 {groups.map((group) => (
                   <option key={group.id} value={group.id}>{group.name}</option>
                 ))}
-              </Dropdown>
+              </Select>
             </FormItem>
           </div>
         )

frontend/src/components/RegionDropdown.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  Label, Dropdown,
+  Label, Select,
 } from '@trussworks/react-uswds';
 
 import { ALL_REGIONS, REGIONS } from '../Constants';
@@ -17,7 +17,7 @@ function RegionDropdown({
   return (
     <>
       <Label htmlFor={id}>Region</Label>
-      <Dropdown id={id} name={name} value={value} onChange={onChange}>
+      <Select id={id} name={name} value={value} onChange={onChange}>
         <option name="default" disabled hidden value={0}>Select a region...</option>
         {REGIONS.map((number) => (
           <option key={number} value={number}>{number}</option>
@@ -26,7 +26,7 @@ function RegionDropdown({
         && <option name="central-office" value={14}>Central Office</option>}
         {includeAll
         && <option name="central-office" value={ALL_REGIONS}>All</option>}
-      </Dropdown>
+      </Select>
     </>
   );
 }

frontend/src/components/SelectPagination.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Pagination from 'react-js-pagination';
-import { Dropdown } from '@trussworks/react-uswds';
+import { Select } from '@trussworks/react-uswds';
 
 function SelectPagination({
   title,
@@ -36,7 +36,7 @@ function SelectPagination({
           count,
         )}`}
       >
-        <Dropdown
+        <Select
           className="margin-top-0 margin-right-1 width-auto"
           id="perPage"
           name="perPage"
@@ -48,7 +48,7 @@ function SelectPagination({
           <option value="25">25</option>
           <option value="50">50</option>
           <option value={count}>all</option>
-        </Dropdown>
+        </Select>
         <span>{renderTotal(title, offset, perPage, activePage, count)}</span>
         <Pagination
           innerClass="pagination desktop:margin-x-0 margin-top-0 margin-x-2"

frontend/src/components/filter/FilterDateRange.js

@@ -3,7 +3,7 @@ import React, { useRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import {
   DatePicker,
-  Dropdown,
+  Select,
 } from '@trussworks/react-uswds';
 import moment from 'moment';
 import DateRangePicker from './DateRangePicker';
@@ -78,7 +78,7 @@ export default function FilterDateRange({
           <label htmlFor="filter-date-range" className="sr-only">
             date
           </label>
-          <Dropdown
+          <Select
             id="filter-date-range"
             name="filter-date-range"
             onChange={isOnChange}
@@ -93,7 +93,7 @@ export default function FilterDateRange({
                 </option>
               ),
             )}
-          </Dropdown>
+          </Select>
         </>
       );
 

frontend/src/components/filter/FilterRegionSelect.js

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown } from '@trussworks/react-uswds';
+import { Select } from '@trussworks/react-uswds';
 import UserContext from '../../UserContext';
 import { getUserRegions } from '../../permissions';
 
@@ -34,15 +34,15 @@ export default function FilterRegionalSelect({ onApply, appliedRegion }) {
     <>
       { /* eslint-disable-next-line jsx-a11y/label-has-associated-control */ }
       <label className="sr-only" htmlFor="region">Select region to filter by</label>
-      <Dropdown name="region" id="region" value={appliedRegion} onChange={onApplyRegion}>
+      <Select name="region" id="region" value={appliedRegion} onChange={onApplyRegion}>
         {regions.map((region) => (
           <option key={region} value={region}>
             Region
             {' '}
             {region}
           </option>
         ))}
-      </Dropdown>
+      </Select>
     </>
   );
 }

frontend/src/components/filter/FilterSingleOrMultiRecipientsSelect.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { isArray } from 'lodash';
 import PropTypes from 'prop-types';
-import { Dropdown } from '@trussworks/react-uswds';
+import { Select } from '@trussworks/react-uswds';
 
 export function mapDisplayValue(value) {
   const valueToMape = isArray(value) ? value[0] : value;
@@ -29,14 +29,14 @@ export default function FilterSingleOrMultiRecipientsSelect({
     <>
       { /* eslint-disable-next-line jsx-a11y/label-has-associated-control */ }
       <label className="sr-only" htmlFor={inputId}>Select single or multiple recipients to filter by</label>
-      <Dropdown name={inputId} id={inputId} value={query} onChange={onApplySingleOrMulti}>
+      <Select name={inputId} id={inputId} value={query} onChange={onApplySingleOrMulti}>
         <option value="single-recipient">
           Single recipient reports
         </option>
         <option value="multi-recipients">
           Multiple recipient reports
         </option>
-      </Dropdown>
+      </Select>
     </>
   );
 }

frontend/src/components/filter/FilterTTAType.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown } from '@trussworks/react-uswds';
+import { Select } from '@trussworks/react-uswds';
 
 export function displayTtaTypeQuery(q) {
   if (q === 'training') {
@@ -28,7 +28,7 @@ export default function FilterTTAType({ onApply, query, inputId }) {
     <>
       { /* eslint-disable-next-line jsx-a11y/label-has-associated-control */ }
       <label className="sr-only" htmlFor={inputId}>Select tta type to filter by</label>
-      <Dropdown name={inputId} id={inputId} value={query} onChange={onApplyTTAType}>
+      <Select name={inputId} id={inputId} value={query} onChange={onApplyTTAType}>
         <option value="training">
           Training
         </option>
@@ -38,7 +38,7 @@ export default function FilterTTAType({ onApply, query, inputId }) {
         <option value="training,technical-assistance">
           Training and technical assistance
         </option>
-      </Dropdown>
+      </Select>
     </>
   );
 }

frontend/src/pages/AccountManagement/index.js

@@ -4,7 +4,7 @@ import { Helmet } from 'react-helmet';
 import {
   Alert,
   Button,
-  Dropdown,
+  Select,
   Fieldset,
   Form,
   Grid,
@@ -146,7 +146,7 @@ function CustomizeEmailPreferencesForm({ disabled, roles }) {
               </div>
             </Grid>
             <Grid tablet={{ col: 12 }} desktop={{ col: 3 }}>
-              <Dropdown
+              <Select
                 id={keyName}
                 name={keyName}
                 data-testid={`${keyName}-dropdown`}
@@ -157,7 +157,7 @@ function CustomizeEmailPreferencesForm({ disabled, roles }) {
                     {label}
                   </option>
                 ))}
-              </Dropdown>
+              </Select>
               <p className="usa-error-message">{errors[keyName] && errors[keyName].message}</p>
             </Grid>
           </Grid>