Update react-scripts to 5.0.0 #3209

nickclyde · 2022-01-11T21:59:00Z

Related Issue or Background Info

Part of Dependency updates: React #2908
We are actually already on the latest stable version of react, 17.0.2. However, React 18 is in rc and release is imminent. I will be keeping an eye out to see if it releases in the next few days.
In the meantime, this PR updates react-scripts, along with a slew of other packages that need updating along with it, including uswds
Resolves Dependency updates: USWDS #2909

Changes Proposed

Update react-scripts to 5.0.0
Removed craco. We only use it to allow sass mixins in component sass files, which we only did in one file. See Get Sass resources to work when imported into the component #1676 and Update to dart-sass and use mixins at the component level #1681. I decided to remove since it reduces our build complexity, and we don't really have any sass/uswds experts on the team anymore, so it seems unlikely that we will use mixins anyways.
Update testing library packages since react-scripts upgraded jest
Fix three tests that broke after the upgrades, luckily nothing too crazy needed to change
Since react-scripts also updated eslint to 8.x, needed to update some eslint plugins and change some eslint configuration, including adding a typescript parser for it, see more here
Because of the update to webpack 5, needed to update uswds to 2.13.0 as well. Along with this I had to change the way we import some uswds icons
Update sass to 1.47.0. Along with the uswds upgrade this seems to have finally cleared out all the useless deprecation warnings and changelog notes we get when running the frontend!! 🎉
Updated typescript to 4.5.4, and fixed a whole bunch of ts errors in our tests
Update various storybook packages so that storybook can use webpack 5
Deleted some components that we never ended up using (for okta login and password reset)

Additional Information

The updates seemed to change our CSS output in a few places, so I'm working through making sure there are no UI changes (thanks Chromatic!)

Screenshots / Demos

Checklist for Author and Reviewer

Infrastructure

Consult the results of the terraform-plan job inside the "Terraform Checks" workflow run for this PR. Confirm that there are no unexpected changes!

Design

Any UI/UX changes have a designer as a reviewer, and changes have been approved
Any large-scale changes have been deployed to test, dev, or pentest and smoke-tested by both the engineering and design teams

Content

Any content changes (including new error messages) have been approved by content team

Support

Any changes that might generate new support requests have been flagged to the support team
Any changes to support infrastructure have been demo'd to support team

Testing

Includes a summary of what a code reviewer should verify

Changes are Backwards Compatible

Database changes are submitted as a separate PR
- Any new tables that do not contain PII are accompanied by a GRANT SELECT to the no-PHI user
- Any changes to tables that have custom no-PHI views are accompanied by changes to those views
  (including re-granting permission to the no-PHI user if need be)
- Liquibase rollback has been tested locally using ./gradlew liquibaseRollbackSQL or liquibaseRollback
- Each new changeset has a corresponding tag
GraphQL schema changes are backward compatible with older version of the front-end

Security

Changes with security implications have been approved by a security engineer (changes to authentication, encryption, handling of PII, etc.)
Any dependencies introduced have been vetted and discussed

Cloud

DevOps team has been notified if PR requires ops support
If there are changes that cannot be tested locally, this has been deployed to our Azure test, dev, or pentest environment for verification

sonarcloud · 2022-01-13T21:21:55Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

nickclyde · 2022-01-13T22:01:42Z

This should be ready for review now! There were 8 UI changes in Chromatic, but I honestly couldn't tell the difference by visual inspection, so I just went ahead and accepted them. I'm gonna go ahead and deploy to dev and do some smoke testing to make sure nothing looks off.

emmastephenson

LGTM!

nathancrtr · 2022-01-14T19:04:26Z

frontend/src/app/Settings/Facility/FacilityForm.tsx

@@ -48,7 +48,7 @@ export const useFacilityValidation = (facility: Facility) => {
            orderingProviderIsRequired: requiresOrderProvider(facility.state),
          },
        });
-      } catch (e) {
+      } catch (e: any) {


Thanks for getting rid of these red squiggles in VSCode 🙂

nathancrtr · 2022-01-14T19:04:37Z

frontend/src/app/utils/clia.test.ts

@@ -4,12 +4,12 @@ describe("isValidCLIANumber::string -> boolean", () => {
  test("valid number returns `true`", () => {
    const cliaNumber = "12D4567890";

-    expect(isValidCLIANumber(cliaNumber)).toBe(true);
+    expect(isValidCLIANumber(cliaNumber, "VA")).toBe(true);


nathancrtr

So many great improvements Nick, thanks for this! 🚀

There are some CSS changes that I can't visualize but this LGTM assuming happy results from your smoke testing & Chromatic review.

rin-skylight

LGTM! I also checked the terraform plan output, and things look stable from an infrastructure perspective. Thank you for this huge amount of work!

nickclyde added 24 commits January 10, 2022 14:31

Frontend dependency updates - patch upgrades only

9fb28f6

Add depcheck and remove some unused dependencies

a3aae56

Move devDependencies back for better diff

0efc08d

Yarn install and codegen

87b1c35

Update react-scripts and related dependencies

19ebc5d

Disable import/no-named-as-default rule

3b6b843

Merge branch 'main' into nick/update-react-scripts

75aa466

Update uswds and fix a whole bunch of typescript errors

770d446

Lint

4932010

Update sass

f6a4f8e

Update yarn cache step in test workflow

ce2a63a

Slight ts fix

2b9fb78

Merge branch 'main' into nick/update-react-scripts

8e6749d

More ts fixes

1f7ad19

Update storybook packages

cf661da

Storybook fixes

0596681

Remove some unused components

3f775a0

Fix RadioGroup label tag

d05989a

Remove craco and usage of mixins in component sass files

7d98ddd

Fix MFA select css

14ae004

More CSS fixes

b98623a

Even more CSS fixes

981e6f0

Remove font-size inherit from tooltip

87c499f

Moooore CSS fixes

3192297

nickclyde changed the title ~~[WIP] Update react-scripts to 5.0.0~~ Update react-scripts to 5.0.0 Jan 13, 2022

nickclyde requested review from nathancrtr, emmastephenson, jdorothy and rin-skylight January 13, 2022 21:57

nickclyde temporarily deployed to Dev January 13, 2022 22:09 Inactive

emmastephenson approved these changes Jan 13, 2022

View reviewed changes

nickclyde requested review from zdeveloper and alismx January 14, 2022 17:56

nathancrtr reviewed Jan 14, 2022

View reviewed changes

nathancrtr approved these changes Jan 14, 2022

View reviewed changes

rin-skylight approved these changes Jan 14, 2022

View reviewed changes

nickclyde merged commit 0e893a8 into main Jan 14, 2022

nickclyde deleted the nick/update-react-scripts branch January 14, 2022 19:39

nickclyde mentioned this pull request Jan 28, 2022

[Snyk] Security upgrade react-scripts from 4.0.3 to 5.0.0 #3113

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update react-scripts to 5.0.0 #3209

Update react-scripts to 5.0.0 #3209

nickclyde commented Jan 11, 2022 •

edited by rin-skylight

Loading

sonarcloud bot commented Jan 13, 2022

nickclyde commented Jan 13, 2022

emmastephenson left a comment

nathancrtr Jan 14, 2022

nathancrtr Jan 14, 2022

nathancrtr left a comment

rin-skylight left a comment

Update react-scripts to 5.0.0 #3209

Update react-scripts to 5.0.0 #3209

Conversation

nickclyde commented Jan 11, 2022 • edited by rin-skylight Loading

Related Issue or Background Info

Changes Proposed

Additional Information

Screenshots / Demos

Checklist for Author and Reviewer

Infrastructure

Design

Content

Support

Testing

Changes are Backwards Compatible

Security

Cloud

sonarcloud bot commented Jan 13, 2022

nickclyde commented Jan 13, 2022

emmastephenson left a comment

Choose a reason for hiding this comment

nathancrtr Jan 14, 2022

Choose a reason for hiding this comment

nathancrtr Jan 14, 2022

Choose a reason for hiding this comment

nathancrtr left a comment

Choose a reason for hiding this comment

rin-skylight left a comment

Choose a reason for hiding this comment

nickclyde commented Jan 11, 2022 •

edited by rin-skylight

Loading