Frontend dependency updates

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

@@ -4,71 +4,68 @@
   "license": "BSD-2-Clause",
   "private": false,
   "dependencies": {
-    "@formatjs/intl-locale": "^3.3.2",
-    "@formatjs/intl-pluralrules": "^5.2.4",
-    "@formatjs/intl-relativetimeformat": "^11.2.4",
-    "@formatjs/macro": "^0.2.8",
     "@hotosm/id": "^2.21.1",
     "@hotosm/underpass-ui": "^0.0.4",
     "@hotosm/iso-countries-languages": "^1.1.2",
-    "@mapbox/mapbox-gl-draw": "^1.4.1",
-    "@mapbox/mapbox-gl-geocoder": "^5.0.1",
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
+    "@mapbox/mapbox-gl-geocoder": "^5.0.2",
     "@mapbox/mapbox-gl-language": "^0.10.1",
-    "@placemarkio/geo-viewport": "^1.0.1",
+    "@placemarkio/geo-viewport": "^1.0.2",
     "@rapideditor/rapid": "^2.1.1",
-    "@sentry/react": "^7.60.1",
-    "@tmcw/togeojson": "^4.7.0",
+    "@sentry/react": "^7.102.0",
     "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-query-devtools": "^4.29.7",
+    "@tmcw/togeojson": "^5.8.1",
     "@turf/area": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/bbox-polygon": "^6.5.0",
+    "@turf/centroid": "^6.5.0",
     "@turf/helpers": "^6.5.0",
     "@turf/intersect": "^6.5.0",
     "@turf/line-to-polygon": "^6.5.0",
     "@turf/transform-scale": "^6.5.0",
     "@turf/truncate": "^6.5.0",
     "@uiw/react-md-editor": "^3.22.0",
     "axios": "^1.6.7",
-    "chart.js": "^3.7.1",
+    "chart.js": "^4.4.1",
     "chartjs-adapter-date-fns": "^3.0.0",
     "date-fns": "^2.30.0",
-    "dompurify": "^2.4.5",
+    "dompurify": "^3.0.9",
     "downshift-hooks": "^0.8.1",
-    "final-form": "^4.20.9",
+    "final-form": "^4.20.10",
     "fromentries": "^1.3.2",
-    "humanize-duration": "^3.28.0",
+    "humanize-duration": "^3.31.0",
     "mapbox-gl": "^1.13.3",
     "mapbox-gl-draw-rectangle-mode": "^1.0.4",
     "marked": "^4.3.0",
     "osmtogeojson": "^3.0.0-beta.5",
-    "query-string": "^7.1.3",
-    "react": "^17.0.2",
-    "react-accessible-accordion": "^4.0.0",
+    "prop-types": "^15.8.1",
+    "query-string": "^8.2.0",
+    "react": "^18.2.0",
+    "react-accessible-accordion": "^5.0.0",
     "react-calendar-heatmap": "^1.9.0",
-    "react-chartjs-2": "^4.1.0",
+    "react-chartjs-2": "^5.2.0",
     "react-datepicker": "^4.14.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-error-boundary": "^4.0.4",
+    "react-error-boundary": "^4.0.12",
     "react-final-form": "^6.5.9",
     "react-hot-toast": "^2.4.1",
     "react-intl": "^6.4.4",
     "react-meta-elements": "^1.0.0",
     "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",
+    "react-tooltip": "^5.26.3",
+    "reactjs-popup": "^2.0.6",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.2",
-    "sass": "^1.63.5",
+    "sass": "^1.71.0",
     "short-number": "^1.0.7",
     "shpjs": "^4.0.4",
-    "slug": "^8.2.2",
+    "slug": "^8.2.3",
     "tachyons": "^4.12.0",
     "tributejs": "^5.1.3",
     "use-query-params": "^2.2.1",
@@ -87,11 +84,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"
@@ -113,20 +110,27 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@sentry/cli": "^2.20.5",
+    "@craco/craco": "^7.1.0",
+    "@sentry/cli": "^2.28.6",
     "@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/react": "^14.2.1",
     "@testing-library/user-event": "^14.4.3",
     "combine-react-intl-messages": "^4.0.0",
-    "jest-canvas-mock": "^2.5.1",
-    "msw": "0.49.2",
+    "jest-canvas-mock": "^2.5.2",
+    "msw": "^1.3.2",
     "prettier": "^2.8.8",
+    "react-scripts": "^5.0.1",
     "react-select-event": "^5.5.1",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.2.0",
     "source-map-explorer": "^2.5.3"
   },
+  "resolutions": {
+    "dom-accessibility-api": "0.5.14"
+  },
+  "overrides": {
+    "dom-accessibility-api": "0.5.14"
+  },
   "jest": {
     "coverageReporters": [
       "html"

frontend/src/App.js

@@ -1,10 +1,10 @@
-import React, { Suspense, useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 import ReactPlaceholder from 'react-placeholder';
 import { useMeta } from 'react-meta-elements';
 import { useSelector } from 'react-redux';
-import * as Sentry from '@sentry/react';
+import { ErrorBoundary } from '@sentry/react';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
@@ -49,7 +49,7 @@ const App = () => {
   }, []);
 
   return (
-    <Sentry.ErrorBoundary fallback={<FallbackComponent />}>
+    <ErrorBoundary fallback={<FallbackComponent />}>
       {isLoading ? (
         <Preloader />
       ) : (
@@ -77,7 +77,7 @@ const App = () => {
           />
         </div>
       )}
-    </Sentry.ErrorBoundary>
+    </ErrorBoundary>
   );
 };
 

frontend/src/api/stats.js

@@ -87,7 +87,7 @@ export const useUserOsmStatsQuery = (id) => {
 
 export const useOsmStatsMetadataQuery = () => {
   const fetchOsmStatsMetadata = () => {
-    return fetchExternalJSONAPI(`${OHSOME_STATS_BASE_URL}/metadata`, true);
+    return fetchExternalJSONAPI(`${OHSOME_STATS_BASE_URL}/metadata`);
   };
 
   return useQuery({

frontend/src/assets/styles/_extra.scss

@@ -309,7 +309,7 @@ a[href="https://www.mapbox.com/map-feedback/"]
   object-fit: contain;
 }
 
-#shareProject {
+#shareProjectTooltip {
   background-color: $white;
   color: $blue-dark;
   border-color: $blue-dark;

frontend/src/components/banner/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';

frontend/src/components/banner/topBanner.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useLocation } from 'react-router-dom';
 import { useFetchWithAbort } from '../../hooks/UseFetch';
 import { htmlFromMarkdown } from '../../utils/htmlFromMarkdown';

frontend/src/components/basemapMenu.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { MAPBOX_TOKEN, BASEMAP_OPTIONS } from '../config';
 

frontend/src/components/checkCircle.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CheckIcon } from './svgIcons';
 
 export const CheckCircle = ({ className }: Object) => (

frontend/src/components/comments/commentInput.js

@@ -1,8 +1,8 @@
-import React, { useRef, useEffect, useState } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import MDEditor from '@uiw/react-md-editor';
 import Tribute from 'tributejs';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { useDropzone } from 'react-dropzone';
 
 import 'tributejs/tribute.css';
@@ -18,7 +18,7 @@ import { iconConfig } from './editorIconConfig';
 import messages from './messages';
 import { CurrentUserAvatar } from '../user/avatar';
 
-export const CommentInputField = ({
+function CommentInputField({
   comment,
   setComment,
   contributors,
@@ -29,7 +29,7 @@ export const CommentInputField = ({
   isShowUserPicture = false,
   placeholderMsg = messages.leaveAComment,
   markdownTextareaProps = {},
-}: Object) => {
+}: Object) {
   const token = useSelector((state) => state.auth.token);
   const textareaRef = useRef();
   const isBundle = useRef(false);
@@ -115,26 +115,22 @@ export const CommentInputField = ({
         </div>
       )}
       <div className={`${isShowPreview ? 'dn' : ''} bg-white`} data-color-mode="light">
-        <FormattedMessage {...placeholderMsg}>
-          {(val) => (
-            <MDEditor
-              ref={textareaRef}
-              preview="edit"
-              commands={Object.keys(iconConfig).map((key) => iconConfig[key])}
-              extraCommands={[]}
-              height={200}
-              value={comment}
-              onChange={setComment}
-              textareaProps={{
-                ...getInputProps(),
-                spellCheck: 'true',
-                placeholder: val,
-                ...markdownTextareaProps,
-              }}
-              defaultTabEnable
-            />
-          )}
-        </FormattedMessage>
+        <MDEditor
+          ref={textareaRef}
+          preview="edit"
+          commands={Object.keys(iconConfig).map((key) => iconConfig[key])}
+          extraCommands={[]}
+          height={200}
+          value={comment}
+          onChange={setComment}
+          textareaProps={{
+            ...getInputProps(),
+            spellCheck: 'true',
+            placeholder: useIntl().formatMessage(placeholderMsg),
+            ...markdownTextareaProps,
+          }}
+          defaultTabEnable
+        />
         <input
           type="file"
           id="image_picker"
@@ -189,4 +185,6 @@ export const CommentInputField = ({
       <FileRejections files={fileRejections} />
     </div>
   );
-};
+}
+
+export default CommentInputField;

frontend/src/components/comments/editorIconConfig.js

@@ -1,10 +1,18 @@
-import { commands, selectWord } from '@uiw/react-md-editor';
+import {
+  bold,
+  italic,
+  quote,
+  link,
+  unorderedListCommand,
+  selectWord,
+  orderedListCommand,
+} from '@uiw/react-md-editor';
 
 const ICON_SIZE = 14;
 
 export const iconConfig = {
   bold: {
-    ...commands.bold,
+    ...bold,
     icon: (
       <svg role="img" width={ICON_SIZE} height={ICON_SIZE} viewBox="0 0 384 512">
         <path
@@ -15,7 +23,7 @@ export const iconConfig = {
     ),
   },
   italic: {
-    ...commands.italic,
+    ...italic,
     icon: (
       <svg data-name="italic" width={ICON_SIZE} height={ICON_SIZE} role="img" viewBox="0 0 320 512">
         <path
@@ -26,7 +34,7 @@ export const iconConfig = {
     ),
   },
   quote: {
-    ...commands.quote,
+    ...quote,
     icon: (
       <svg width={ICON_SIZE} height={ICON_SIZE} viewBox="0 0 520 520">
         <path
@@ -37,7 +45,7 @@ export const iconConfig = {
     ),
   },
   link: {
-    ...commands.link,
+    ...link,
     icon: (
       <svg data-name="italic" width={ICON_SIZE} height={ICON_SIZE} role="img" viewBox="0 0 520 520">
         <path
@@ -48,7 +56,7 @@ export const iconConfig = {
     ),
   },
   unorderedListCommand: {
-    ...commands.unorderedListCommand,
+    ...unorderedListCommand,
     icon: (
       <svg data-name="unordered-list" width={ICON_SIZE} height={ICON_SIZE} viewBox="0 0 512 512">
         <path
@@ -59,7 +67,7 @@ export const iconConfig = {
     ),
   },
   orderedListCommand: {
-    ...commands.orderedListCommand,
+    ...orderedListCommand,
     icon: (
       <svg
         data-name="ordered-list"

frontend/src/components/comments/fileRejections.js

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const FileRejections = ({ files }: Object) => {
   // Component that receives the rejected files from Dropzone
   return (

frontend/src/components/comments/hashtagPaste.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useIntl } from 'react-intl';
 
 import messages from './messages';