1577 - Upgrade frontend deps

[jtimpe]

Summary of Changes

Pull request closes #1577

The goal of this was primarily to get react-scripts updated to version 5. I took the opportunity to bump all the dependencies to the latest possible (downgrading a select few only to avoid conflicts). Along the way, the following tasks were also necessary

• Upgrading SASS and changing all imports to match the new module syntax
• Upgrading USWDS to version 3 (with support for the new SASS module syntax). Also required changing the import syntax for many components.
• A small set of changes to implement React 18
• Replace the file-type library (requires node runtime, no longer compatible) with file-type-checker (browser runtime)
• Configure jest to ignore the node/browser conflict for some packages (uswds and axios)
• Changing the linter configuration to ignore new es6 rules (trailing comma)

A tech memo was drafted covering the upgrade process, as well as errors and resolutions experienced during the dependency upgrade.

The following tickets were created as follow-on work

• Frontend dependency security vulnerabilities - Resolve vulnerabilities in frontend dependencies after React upgrade #3328
• Frontend testing library deprecations - Resolve deprecation warnings in unit tests #3329
• Frontend defaultprops deprecation - Resolve defaultProps deprecation after react-scripts upgrade #3330
• Frontend span warning - Fix DOM nesting warning for empty-state labels in <table> components #3331
• Frontend a11y and ux
  • Tab/screen-reader focus issues on Data Files page - Fix accessibility issue with search results header in Reports page #3352
  • GovBanner open by default - Fix GovBanner component behavior after React upgrade #3353
  • Disappearing files bug - Fix Data File search results not loading on first click #3354
• Frontend router deprecations - Update relative route implementation for react-router v7 deprecation #3332
• Frontend fetch to replace axios - Replace axios with native Fetch API for HTTP requests #3333
• Update uswds again to resolve sass deprecations - Update USWDS to resolve SASS deprecations #3334
• Remove duplicate defaults from src/assets/uswds/_uswds-theme-general - Remove duplicate default values from USWDS theme file #3335

How to Test

cd tdrs-backend && docker compose up --build
cd tdrs-frontend && docker compose up --build

1. Open http://localhost:3000/ and sign in.
2. Navigate the frontend and test critical features (file upload, download, search form behaviors, navigation)
3. Test a11y compliance

Deliverables

More details on how deliverables herein are assessed included here.

Deliverable 1: Accepted Features

Checklist of ACs:

• react-scripts is updated to latest major version
• file-type is updated to latest major version replaced with a browser-runtime-compatible alternative
• package.json is updated
• package-lock.json is updated
• lfrohlich and/or adpennington confirmed that ACs are met.

Deliverable 2: Tested Code

• Are all areas of code introduced in this PR meaningfully tested?
  • If this PR introduces backend code changes, are they meaningfully tested?
  • If this PR introduces frontend code changes, are they meaningfully tested?
• Are code coverage minimums met?
  • Frontend coverage: [insert coverage %] (see CodeCov Report comment in PR)
  • Backend coverage: [insert coverage %] (see CodeCov Report comment in PR)

Deliverable 3: Properly Styled Code

• Are backend code style checks passing on CircleCI?
• Are frontend code style checks passing on CircleCI?
• Are code maintainability principles being followed?

Deliverable 4: Accessible

• Does this PR complete the epic?
• Are links included to any other gov-approved PRs associated with epic?
• Does PR include documentation for Raft's a11y review?
• Did automated and manual testing with iamjolly and ttran-hub using Accessibility Insights reveal any errors introduced in this PR?

@ttran-hub is OOO, so I recommend pair-testing with @reitermb upon return.

Deliverable 5: Deployed

• Was the code successfully deployed via automated CircleCI process to development on Cloud.gov?

Deliverable 6: Documented

• Does this PR provide background for why coding decisions were made?
• If this PR introduces backend code, is that code easy to understand and sufficiently documented, both inline and overall?
• If this PR introduces frontend code, is that code easy to understand and sufficiently documented, both inline and overall?
• If this PR introduces dependencies, are their licenses documented?
• Can reviewer explain and take ownership of these elements presented in this code review?

Deliverable 7: Secure

• Does the OWASP Scan pass on CircleCI?
  follow-on ticket Resolve vulnerabilities in frontend dependencies after React upgrade #3328
• Do manual code review and manual testing detect any new security issues?
• If new issues detected, is investigation and/or remediation plan documented?

Deliverable 8: User Research

Research product(s) clearly articulate(s):

• the purpose of the research
• methods used to conduct the research
• who participated in the research
• what was tested and how
• impact of research on TDP
• (if applicable) final design mockups produced for TDP development

[codecov]

Codecov Report

Attention: Patch coverage is 70.00000% with 3 lines in your changes missing coverage. Please review.

Project coverage is 91.45%. Comparing base (ff01121) to head (f38c881).
Report is 3 commits behind head on develop.

Files with missing lines	Patch %	Lines
...-frontend/src/components/FileUpload/FileUpload.jsx	70.00%	2 Missing and 1 partial ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #3327      +/-   ##
===========================================
- Coverage    91.48%   91.45%   -0.03%     
===========================================
  Files          299      299              
  Lines         8595     8605      +10     
  Branches       636      638       +2     
===========================================
+ Hits          7863     7870       +7     
- Misses         615      617       +2     
- Partials       117      118       +1     

Flag	Coverage Δ
dev-backend	91.32% <ø> (ø)
dev-frontend	92.44% <70.00%> (-0.22%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
tdrs-frontend/src/components/ComboBox/ComboBox.jsx	100.00% <ø> (ø)
...rs-frontend/src/components/GovBanner/GovBanner.jsx	80.00% <ø> (ø)
tdrs-frontend/src/components/Header/Header.jsx	95.65% <ø> (ø)
...-frontend/src/components/SplashPage/SplashPage.jsx	100.00% <ø> (ø)
...ntend/src/components/UploadReport/UploadReport.jsx	90.62% <ø> (ø)
tdrs-frontend/src/mirage.data.js	100.00% <ø> (ø)
...-frontend/src/components/FileUpload/FileUpload.jsx	92.59% <70.00%> (-5.14%)	⬇️

... and 1 file with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0984b95...f38c881. Read the comment docs.

[reitermb]

I want to spend more time with this and test across a few different devices/OSes but for the most part this is already looking pretty good!

Automated scans I've run so far are showing up clear and I've only turned up a handful of issues (mix of a11y and general QA) with initial manual testing:

https://app.mural.co/t/raft2792/m/raft2792/1733347565459/e9b8748c8dbe09f65e57d9c07d07b506daf102e0?sender=ufa4902beba666df5bec09412

I'll confirm for sure in a subsequent review but it looks like this has fixed #2307 as expected.

[jtimpe]

thank you @reitermb! i've reviewed your findings and made three tickets. The usa-hero padding was an easy enough fix, so i went ahead and pushed that

• Tab/screen-reader focus issues on Data Files page - Fix accessibility issue with search results header in Reports page #3352
• GovBanner open by default - Fix GovBanner component behavior after React upgrade #3353
• Disappearing files bug - Fix Data File search results not loading on first click #3354

[elipe17]

I didn't find any other issues. Everything that I tried worked like a charm and didn't look weird! Great work on this!

[elipe17]

Love how much nicer this all is now!

[raftmsohani]

all good!

[raftmsohani]

Not related to this specific file but I am getting error on some of the CSS and JS assets, my best guess is that new changes want these to be available in the frontend, but we are relaying all /static files to backend (maybe?!!):

[reitermb]

thank you @reitermb! i've reviewed your findings and made three tickets. The usa-hero padding was an easy enough fix, so i went ahead and pushed that

• Tab/screen-reader focus issues on Data Files page - Reports.jsx search result header does not tab focus #3352
• GovBanner open by default - GovBanner Component is open by default #3353
• Disappearing files bug - Data Files page search results don't load the first time #3354

Thanks @jtimpe! Just to make sure it's here too I'm good signing off of the padding fix. Just to track some of the more complicated followup a11y testing, in terms of next steps is the plan to merge this or keep it open until the spinoff fixes are added?

[jtimpe]

Thanks @jtimpe! Just to make sure it's here too I'm good signing off of the padding fix. Just to track some of the more complicated followup a11y testing, in terms of next steps is the plan to merge this or keep it open until the spinoff fixes are added?

Thanks @reitermb! And that's a good question. Perhaps @andrew-jameson or @ADPennington could weigh in. My assumption was that we'd merge/close this and work the follow-on tickets based on priority.

[ADPennington]

Thanks @jtimpe! Just to make sure it's here too I'm good signing off of the padding fix. Just to track some of the more complicated followup a11y testing, in terms of next steps is the plan to merge this or keep it open until the spinoff fixes are added?

Thanks @reitermb! And that's a good question. Perhaps @andrew-jameson or @ADPennington could weigh in. My assumption was that we'd merge/close this and work the follow-on tickets based on priority.

I tested the userflows for acf and non-acf users for sign-in, request access, and data submission, and viewing error reports. LGTM 🚀 This can be merged. In terms of priority of the follow-on tickets:

1. Resolve vulnerabilities in frontend dependencies after React upgrade #3328 (security fix)
2. Fix GovBanner component behavior after React upgrade #3353 (distracting user experience)
3. Fix Data File search results not loading on first click #3354 (pre-existing bug)
4. Fix accessibility issue with search results header in Reports page #3352 (pre-existing bug)

@reitermb please schedule a time next week with @ttran-hub for pair- a11y testing and review a11y-related tickets coming out of this PR. This will not block approval/merge.