[risk=low][RW-7729] Upgrade react-scripts to 5.x (#6753)

* bump react-scripts to 5.0.0
* bump react-app-rewired to include timarney/react-app-rewired#589
* polyfill querystring -> querystring-es3
* install url
* add eslint-plugin-react-hooks
* can remove a few forced resolutions
* un-alias ansi-html-community to fix compile issue
* await fix
* test fix
* filter out CssMinimizerPlugin
* rm mutationobserver-shim to silence warning
* bump webpack

ui/config-overrides.js

@@ -1,5 +1,18 @@
 const webpack = require('webpack');
 
+// removes the minimizer CssMinimizerPlugin() which has a bug
+// see https://github.com/all-of-us/workbench/pull/6753#issuecomment-1150407055
+const removeCssMinimizer = (original) => {
+  const filtered = original.filter(m => m.options.minimizer.options.parse?.ecma);
+  const minimizersRemoved = original.length = filtered.length;
+
+  if (minimizersRemoved !== 1) {
+    throw new Error(`expected to remove exactly one minimizer (CssMinimizerPlugin), actually removed ${minimizersRemoved}`);
+  }
+
+  return filtered;
+}
+
 module.exports = {
   webpack: function(config, env) {
     let environmentFilePath = 'environment.localtest.ts'
@@ -16,6 +29,8 @@ module.exports = {
             environmentFilePath
         )
     );
+   config.optimization.minimizer = removeCssMinimizer(config.optimization.minimizer);
+
     return config;
   },
   jest: function(config) {

ui/package.json

@@ -58,7 +58,6 @@
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.21",
     "moment": "^2.24.0",
-    "mutationobserver-shim": "^0.3.2",
     "ngx-popper": "^5.1.7",
     "node-forge": "^1.0.0",
     "nouislider": "^14.1.1",
@@ -67,6 +66,7 @@
     "portable-fetch": "^3.0.0",
     "primeicons": "^1.0.0",
     "primereact": "^4.2.0",
+    "querystring-es3": "^0.2.1",
     "react": "^16.13.1",
     "react-calendar": "^2.18.1",
     "react-dom": "^16.13.1",
@@ -100,6 +100,7 @@
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
     "jasmine-core": "~3.10.1",
     "jasmine-spec-reporter": "~4.2.1",
@@ -114,22 +115,20 @@
     "karma-webdriver-launcher": "^1.0.5",
     "lolex": "^3.0.0",
     "prettier": "^2.0.4",
-    "react-app-rewired": "2.1.8",
-    "react-scripts": "4.0.3",
+    "react-app-rewired": "^2.1.9",
+    "react-scripts": "^5.0.0",
     "react-test-renderer": "^16.6.3",
     "ts-jest": "^26.5.4",
     "ts-node": "~3.0.4",
-    "wd": "^1.12.1",
-    "webpack": "4.44.2"
+    "url": "^0.11.0",
+    "wd": "^1.12.1"
   },
   "resolutions": {
-    "ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41",
     "ansi-regex": "^5.0.1",
     "browserslist": "^4.16.5",
     "ejs": "^3.1.7",
     "eventsource": "^2.0.2",
     "glob-parent": "^5.1.2",
-    "immer": "^9.0.6",
     "node-fetch": "^2.6.1",
     "node-forge": "^1.0.0",
     "nth-check": "^2.0.1",

ui/src/app/components/app-router.spec.tsx

@@ -145,9 +145,9 @@ describe('AppRouter', () => {
     expect(wrapper.find('span').first().text()).toEqual('Punting');
   });
 
-  it('redirects to not found page when no route is matched', () => {
+  it('redirects to not found page when no route is matched', async () => {
     const wrapper = component(['/wharrgarbl'], 0);
-    waitOneTickAndUpdate(wrapper);
+    await waitOneTickAndUpdate(wrapper);
     expect(wrapper.find('span').first().text()).toEqual('Not Found');
   });
 

ui/src/app/components/ct-available-banner-maybe.spec.tsx

@@ -8,7 +8,6 @@ import { AccessTierShortNames } from 'app/utils/access-tiers';
 import { DATA_ACCESS_REQUIREMENTS_PATH } from 'app/utils/access-utils';
 import { cdrVersionStore, profileStore } from 'app/utils/stores';
 
-import { waitOneTickAndUpdate } from 'testing/react-test-helpers';
 import { cdrVersionTiersResponse } from 'testing/stubs/cdr-versions-api-stub';
 import { ProfileStubVariables } from 'testing/stubs/profile-api-stub';
 
@@ -22,9 +21,9 @@ describe('CTAvailableBannerMaybe', () => {
   const reload = jest.fn();
   const updateCache = jest.fn();
 
-  const component = () => {
+  const component = (path: string = '/') => {
     return mount(
-      <MemoryRouter>
+      <MemoryRouter initialEntries={[path]}>
         <CTAvailableBannerMaybe />
       </MemoryRouter>
     );
@@ -87,9 +86,6 @@ describe('CTAvailableBannerMaybe', () => {
       defaultCdrVersionCreationTime: TIME2,
     };
 
-    // the user is not currently visiting the DAR page
-    window.location.pathname = '/';
-
     updateProfile({ newTierEligibilities, newUserTiers, newFirstSignIn });
     updateCdrVersions(controlledTierCdrVersions);
   };
@@ -135,28 +131,22 @@ describe('CTAvailableBannerMaybe', () => {
   const userIsNew = () => {
     updateProfile({ newFirstSignIn: TIME3 });
   };
-  const darActive = () => {
-    window.location.pathname = DATA_ACCESS_REQUIREMENTS_PATH;
-  };
+  const darActive = () => component(DATA_ACCESS_REQUIREMENTS_PATH);
 
   test.each([
-    ['the user is not CT eligible', userIneligible, () => {}],
-    ['the user has CT access already', ctAccess, () => {}],
-    ['the user is too new', userIsNew, () => {}],
+    ['the user is not CT eligible', userIneligible, component],
+    ['the user has CT access already', ctAccess, component],
+    ['the user is too new', userIsNew, component],
     ['the user is currently visiting the DAR', () => {}, darActive],
   ])(
     'should not render if all of the requirements are met, except that %s',
-    (desc, preMountModifier, postMountModifier) => {
+    (desc, preMountModifier, initWrapper) => {
       fulfillAllBannerRequirements();
 
       preMountModifier();
 
-      const wrapper = component();
+      const wrapper = initWrapper();
       expect(wrapper.exists()).toBeTruthy();
-
-      postMountModifier();
-      waitOneTickAndUpdate(wrapper);
-
       expect(ctBannerExists(wrapper)).toBeFalsy();
     }
   );

ui/src/app/components/ct-available-banner-maybe.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import { CdrVersionTier, Profile } from 'generated/fetch';
 
@@ -22,7 +23,8 @@ const CT_COOKIE_KEY = 'controlled-tier-available';
 
 const shouldShowBanner = (
   profile: Profile,
-  cdrVersionTiers: CdrVersionTier[]
+  cdrVersionTiers: CdrVersionTier[],
+  pathname: string
 ) => {
   const ctCdrVersions = cdrVersionTiers?.find(
     (v) => v.accessTierShortName === AccessTierShortNames.Controlled
@@ -39,7 +41,7 @@ const shouldShowBanner = (
     // the user's first sign-in time was before the release of the default CT CDR Version
     profile.firstSignInTime < ctCdrVersions.defaultCdrVersionCreationTime &&
     // the user is not currently visiting the DAR page
-    window.location.pathname !== DATA_ACCESS_REQUIREMENTS_PATH;
+    pathname !== DATA_ACCESS_REQUIREMENTS_PATH;
 
   if (cookiesEnabled()) {
     const cookie = localStorage.getItem(CT_COOKIE_KEY);
@@ -53,10 +55,11 @@ export const CTAvailableBannerMaybe = () => {
   const [showBanner, setShowBanner] = useState(false);
   const { profile } = useStore(profileStore);
   const { tiers } = useStore(cdrVersionStore);
+  const { pathname } = useLocation();
 
   useEffect(
-    () => setShowBanner(shouldShowBanner(profile, tiers)),
-    [profile, tiers]
+    () => setShowBanner(shouldShowBanner(profile, tiers, pathname)),
+    [profile, tiers, pathname]
   );
 
   const acknowledgeBanner = () => {

ui/src/app/pages/data/cohort/cohort-actions.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import * as fp from 'lodash/fp';
-import * as querystring from 'querystring';
+import * as querystring from 'querystring-es3';
 
 import { Cohort } from 'generated/fetch';
 

ui/src/app/utils/navigation.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
-import * as querystring from 'querystring';
+import * as querystring from 'querystring-es3';
 
 import {
   Cohort,

ui/src/index.ts

@@ -6,7 +6,6 @@ import '@clr/icons/clr-icons.min.css';
 import '@clr/icons/clr-icons.min.js';
 import '@clr/ui/clr-ui.min.css';
 import '@webcomponents/custom-elements/custom-elements.min.js';
-import 'mutationobserver-shim/dist/mutationobserver.min.js';
 import 'nouislider/distribute/nouislider.min.css';
 import 'outdated-browser-rework/dist/style.css';
 import 'primeicons/primeicons.css';

ui/src/setupTests.js

@@ -1,16 +1,14 @@
-require('mutationobserver-shim');
-
 /**
  * Defines the React 16 Adapter for Enzyme.
  *
  * @link http://airbnb.io/enzyme/docs/installation/#working-with-react-16
  * @copyright 2017 Airbnb, Inc.
  */
-const enzyme = require("enzyme");
-const Adapter = require("enzyme-adapter-react-16");
+const enzyme = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
 
-const {setupCustomValidators} = require('app/services/setup');
-const {stubPopupDimensions} = require('app/components/popups');
+const { setupCustomValidators } = require('app/services/setup');
+const { stubPopupDimensions } = require('app/components/popups');
 
 setupCustomValidators();
 stubPopupDimensions();
@@ -52,7 +50,7 @@ global.beforeEach(() => {
 
 global.afterEach(() => {
   // Unmount react components after each test
-  unmountCallbacks.forEach(unmount => unmount());
+  unmountCallbacks.forEach((unmount) => unmount());
   unmountCallbacks.splice();
 
   // Remove this last, as unmounting may check the popup root.
@@ -62,9 +60,7 @@ global.afterEach(() => {
 
 enzyme.configure({ adapter: new ReactAdapterWithMountTracking() });
 
-
 module.exports = {
   mockNavigate: mockNavigate,
-  mockNavigateByUrl: mockNavigateByUrl
+  mockNavigateByUrl: mockNavigateByUrl,
 };
-