Update react scripts

.circleci/config.yml

@@ -10,7 +10,7 @@ jobs:
   frontend-code-test:
     resource_class: large
     docker:
-      - image: cimg/node:16.20
+      - image: cimg/node:18.19
     working_directory: /home/circleci/tasking-manager
     steps:
       - checkout
@@ -184,7 +184,7 @@ jobs:
     working_directory: /home/circleci/tasking-manager
     resource_class: medium
     docker:
-      - image: cimg/python:3.10.7-node
+      - image: cimg/python:3.10-node
     steps:
       - checkout
       - aws-cli/setup:
@@ -236,7 +236,7 @@ jobs:
     working_directory: /home/circleci/tasking-manager
     resource_class: large
     docker:
-      - image: cimg/python:3.10.7-node
+      - image: cimg/python:3.10-node
     parameters:
       stack_name:
         description: "the name of the stack for cfn-config"

frontend/craco.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+  webpack: {
+    configure: (webpackConfig, { env, paths }) => {
+      // Fix CRA #11770
+      const rules = webpackConfig.module.rules;
+      for (const rule of rules) {
+        if (Object.hasOwn(rule, 'oneOf')) {
+          rule.oneOf.filter((currentValue, index, arr) => {
+            const toRemove =
+              currentValue.test instanceof RegExp && currentValue.test.test('something.svg');
+            if (toRemove) {
+              arr.splice(index, 1);
+            }
+            return toRemove;
+          });
+          rule.oneOf.push({
+            test: /\.svg$/i,
+            issuer: {
+              and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+            },
+            type: 'asset',
+          });
+        }
+      }
+      return webpackConfig;
+    },
+  },
+};

frontend/package.json

@@ -16,9 +16,9 @@
     "@placemarkio/geo-viewport": "^1.0.1",
     "@rapideditor/rapid": "^2.1.1",
     "@sentry/react": "^7.60.1",
-    "@tmcw/togeojson": "^4.7.0",
     "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-query-devtools": "^4.29.7",
+    "@tmcw/togeojson": "^4.7.0",
     "@turf/area": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/bbox-polygon": "^6.5.0",
@@ -57,7 +57,6 @@
     "react-placeholder": "^4.1.0",
     "react-redux": "^8.1.1",
     "react-router-dom": "^6.13.0",
-    "react-scripts": "^4.0.3",
     "react-select": "^5.7.3",
     "react-tooltip": "^4.2.21",
     "reactjs-popup": "^2.0.5",
@@ -86,11 +85,11 @@
     "patch-id": "bash -c \"cp patch/imagery.min.json public/static/id/data\"",
     "patch-rapid": "bash -c \"cp patch/rapid-imagery.min.json public/static/rapid/data/imagery.min.json\"",
     "preparation": "bash -c \"if (test -a ../tasking-manager.env); then grep -hs ^ ../tasking-manager.env .env.expand > .env; else cp .env.expand .env; fi\"",
-    "start": "npm run preparation && npm run copy-static && npm run patch-id && npm run patch-rapid && react-scripts start",
-    "build": "npm run preparation && npm run update-static && npm run patch-id && npm run patch-rapid && react-scripts build && npm run sentry:sourcemaps",
+    "start": "npm run preparation && npm run copy-static && npm run patch-id && npm run patch-rapid && craco start",
+    "build": "npm run preparation && npm run update-static && npm run patch-id && npm run patch-rapid && craco build && npm run sentry:sourcemaps",
     "prettier": "prettier --write 'src/**/*.js'",
     "lint": "eslint src",
-    "test": "npm run lint && react-scripts test --env=jsdom",
+    "test": "npm run lint && craco test --env=jsdom",
     "coverage": "npm run test -- --coverage --watchAll=false",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "sentry:sourcemaps": "if sentry-cli info; then sentry-cli sourcemaps inject --org humanitarian-openstreetmap-tea --project taskingmanager-frontend ./build && sentry-cli sourcemaps upload --org humanitarian-openstreetmap-tea --project taskingmanager-frontend ./build; fi"
@@ -112,16 +111,19 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@craco/craco": "^7.1.0",
     "@sentry/cli": "^2.20.5",
     "@tanstack/eslint-plugin-query": "^4.29.8",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "combine-react-intl-messages": "^4.0.0",
+    "jest": "^29.6.3",
     "jest-canvas-mock": "^2.5.1",
     "msw": "0.49.2",
     "prettier": "^2.8.8",
+    "react-scripts": "^5.0.1",
     "react-select-event": "^5.5.1",
     "react-test-renderer": "^17.0.2",
     "source-map-explorer": "^2.5.3"

frontend/src/components/homepage/testimonials.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
+import IfrcImage from '../../assets/img/testimonials/ifrc.jpg';
 // import {RightIcon, LeftIcon} from '../../svgIcons';
 
 export function Testimonials() {
@@ -11,7 +12,7 @@ export function Testimonials() {
       bio: messages.ifrcBio,
       citation: messages.ifrcCitation,
       cssCode: 'ifrc',
-      image: '.../../images/ifrc.png',
+      image: IfrcImage,
     },
   ];
 
@@ -30,11 +31,7 @@ export function Testimonials() {
         <div className="testimony relative" key={person.name}>
           {/* <div key={n} className={`blue-dark testimonial-${person.cssCode} relative`} /> */}
           <div className="testimonial-image-parent">
-            <img
-              className="testimonial-image"
-              src={require('../../assets/img/testimonials/ifrc.jpg').default}
-              alt={person.name}
-            />
+            <img className="testimonial-image" src={person.image} alt={person.name} />
           </div>
           <div className="citation-ctr">
             <p className="bg-red white pv2 pl3 pr1 citation ma0 relative">

frontend/src/components/rapidEditor.js

@@ -7,9 +7,9 @@ import { OSM_CLIENT_ID, OSM_CLIENT_SECRET, OSM_REDIRECT_URI, OSM_SERVER_URL } fr
 import { types } from '../store/actions/editor';
 
 // We import from a CDN using a SEMVER minor version range
-import { version as rapidVersion, name as rapidName } from '@rapideditor/rapid/package.json';
+import rapidPackage from '@rapideditor/rapid/package.json';
 
-const baseCdnUrl = `https://cdn.jsdelivr.net/npm/${rapidName}@~${rapidVersion}/dist/`;
+const baseCdnUrl = `https://cdn.jsdelivr.net/npm/${rapidPackage.name}@~${rapidPackage.version}/dist/`;
 // We currently copy rapid files to the public/static/rapid directory. This should probably remain,
 // since it can be useful for debugging rapid issues in the TM.
 // const baseCdnUrl = '/static/rapid/';

frontend/src/components/statsTimestamp/index.js

@@ -27,15 +27,18 @@ function StatsTimestamp({ messageType }) {
     minute: 'numeric',
   };
 
+  const message = intl.formatMessage(messages[messageType], {
+    formattedDate: intl.formatDate(lastUpdated, dateOptions),
+    timeZone: intl.timeZone,
+  });
+
   return (
     <div>
       <InfoIcon
         className="blue-grey h1 w1 v-mid ml2 pointer"
-        data-tip={intl.formatMessage(messages[messageType], {
-          formattedDate: intl.formatDate(lastUpdated, dateOptions),
-          timeZone: intl.timeZone,
-        })}
+        data-tip={message}
         data-for="ohsome-timestamp"
+        aria-label={message}
       />
       <ReactTooltip id="ohsome-timestamp" place="top" className="mw6" effect="solid" />
     </div>

frontend/src/components/taskSelection/tests/action.test.js

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { screen, waitFor, within } from '@testing-library/react';
+import { act, screen, waitFor, within } from '@testing-library/react';
 
 import { getProjectSummary } from '../../../network/tests/mockData/projects';
 import { userMultipleLockedTasksDetails } from '../../../network/tests/mockData/userStats';
@@ -77,18 +77,18 @@ describe('Task Map Action', () => {
 });
 
 describe('Session Expire Dialogs', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
+  beforeEach(async () => {
+    await act(() => jest.useFakeTimers());
   });
 
-  afterEach(() => {
-    jest.runOnlyPendingTimers();
+  afterEach(async () => {
+    await act(() => jest.runOnlyPendingTimers());
     jest.useRealTimers();
   });
 
   it('should display modal to notify user session about to expire', async () => {
     setup();
-    jest.advanceTimersByTime(6900000);
+    await act(() => jest.advanceTimersByTime(6900000));
     const extendSessionDialog = screen.getByRole('dialog');
     expect(within(extendSessionDialog).getByRole('heading')).toHaveTextContent(
       messages.sessionAboutToExpireTitle.defaultMessage,
@@ -97,7 +97,7 @@ describe('Session Expire Dialogs', () => {
 
   it('should display modal to notify user session has ended', async () => {
     setup();
-    jest.advanceTimersByTime(7200000);
+    await act(() => jest.advanceTimersByTime(7200000));
     const extendSessionDialog = screen.getByRole('dialog');
     expect(within(extendSessionDialog).getByRole('heading')).toHaveTextContent(
       messages.sessionExpiredTitle.defaultMessage,

frontend/src/components/teamsAndOrgs/tests/featureStats.test.js

@@ -26,4 +26,7 @@ test('FeatureStats renders the correct values and labels', async () => {
   // Uncomment the following when POIs and waterways become available
   // expect(screen.getByText('183,011')).toBeInTheDocument();
   // expect(screen.getByText('350,906')).toBeInTheDocument();
+  // We need to wait for network requests to complete -- otherwise, logging the errors to console may cause jest to fail
+  // Note: The time is 2023-10-03T15:47:49Z, but time zones may mess things up (+- 12 hours).
+  await waitFor(() => expect(screen.getByLabelText(/These statistics come from ohsomeNow Stats and were last updated at Oct 0[34], 2023, .{10,}. Missing fields will be made available soon!/)).toBeInTheDocument());
 });

frontend/src/components/tests/dropdown.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import TestRenderer from 'react-test-renderer';
+import TestRenderer, { act } from 'react-test-renderer';
 
 import { CustomButton } from '../button';
 import { Dropdown } from '../dropdown';
@@ -40,10 +40,12 @@ test('dropdown-content is not rendered before the user clicks on the button', ()
 
 test('dropdown-content disappear after click on option', () => {
   const elementInstance = createTestDropdown([{ label: 'English' }, { label: 'Portuguese (pt)' }]);
-  elementInstance.findByType(CustomButton).props.onClick();
-  elementInstance
-    .findAllByProps({ className: 'pa3 nowrap bg-animate bg-white hover-bg-tan' })[0]
-    .children[0].props.onClick();
+  act(() => elementInstance.findByType(CustomButton).props.onClick());
+  act(() =>
+    elementInstance
+      .findAllByProps({ className: 'pa3 nowrap bg-animate bg-white hover-bg-tan' })[0]
+      .children[0].props.onClick(),
+  );
   // dropdown-content should disappear after selecting an option
   expect(() =>
     elementInstance.findByProps({
@@ -62,7 +64,7 @@ test('dropdown behaviour with href props', () => {
     { label: 'B', href: 'http://b.co' },
     { label: 'C', href: 'http://c.co' },
   ]);
-  elementInstance.findByType(CustomButton).props.onClick();
+  act(() => elementInstance.findByType(CustomButton).props.onClick());
   // dropdown-content must be rendered after the click
   expect(
     elementInstance.findByProps({
@@ -99,7 +101,7 @@ test('dropdown behaviour with multi enabled', () => {
     </MemoryRouter>,
   );
   const elementInstance = testElement.root;
-  elementInstance.findByType(CustomButton).props.onClick();
+  act(() => elementInstance.findByType(CustomButton).props.onClick());
   // dropdown-content must be rendered after the click
   expect(
     elementInstance.findByProps({
@@ -132,7 +134,7 @@ test('dropdown with toTop enabled should have bottom-3 class', () => {
     </MemoryRouter>,
   );
   const elementInstance = testElement.root;
-  elementInstance.findByType(CustomButton).props.onClick();
+  act(() => elementInstance.findByType(CustomButton).props.onClick());
   // dropdown-content must be rendered after the click
   expect(
     elementInstance.findByProps({
@@ -169,7 +171,7 @@ test('dropdown with more than 9 options has "h5 overflow-y-scroll" classes', ()
     </MemoryRouter>,
   );
   const elementInstance = testElement.root;
-  elementInstance.findByType(CustomButton).props.onClick();
+  act(() => elementInstance.findByType(CustomButton).props.onClick());
   // dropdown-content must be rendered after the click
   expect(
     elementInstance.findByProps({

frontend/src/components/user/list.js

@@ -152,15 +152,22 @@ export const UsersTable = ({ filters, setFilters }) => {
   const [error, setError] = useState(null);
 
   useEffect(() => {
+    let abort = false;
     const fetchUsers = async (filters) => {
       setLoading(true);
       const url = `users/?${filters}`;
       fetchLocalJSONAPI(url, token)
         .then((res) => {
-          setResponse(res);
-          setLoading(false);
+          if (!abort) {
+            setResponse(res);
+            setLoading(false);
+          }
         })
-        .catch((err) => setError(err));
+        .catch((err) => {
+          if (!abort) {
+            setError(err);
+          }
+        });
     };
 
     // Filter elements according to logic.
@@ -183,6 +190,7 @@ export const UsersTable = ({ filters, setFilters }) => {
       .join('&');
 
     fetchUsers(urlFilters);
+    return () => abort = true;
   }, [filters, token, status]);
 
   return (