chore(frontend): migrate to TypeScript and Vite

.circleci/config.yml

@@ -33,7 +33,7 @@ jobs:
           no_output_timeout: 20m
           command: |
             cd ${CIRCLE_WORKING_DIRECTORY}/frontend/
-            CI=true yarn test -w 1 --silent
+            CI=true yarn test --silent
             CI=true GENERATE_SOURCEMAP=false yarn build
 
   backend-code-check-PEP8:
@@ -452,7 +452,7 @@ workflows:
               value: << pipeline.git.branch >>
         - or:
           ## - equal: [ develop, << pipeline.git.branch >> ] # Disabled while we use dev setup for e2e testing
-          - equal: [ dev-switch-to-sandbox, << pipeline.git.branch >> ]
+          - equal: [ typescript-vite, << pipeline.git.branch >> ]
     jobs:
       - database-backup:
           name: Backup development database

.gitignore

@@ -4,7 +4,7 @@ tasking-manager*.env
 
 # Generated frontend #
 frontend/node_modules/
-frontend/build/
+frontend/dist/
 frontend/public/static/
 frontend/assets/styles/
 frontend/package-lock.json

frontend/.env.expand

@@ -2,47 +2,47 @@
 # Variables that are available for the frontend.
 # Usually doesn't need to be modified
 #
-REACT_APP_BASE_URL=$TM_APP_BASE_URL
-REACT_APP_API_URL=$TM_APP_API_URL
-REACT_APP_API_VERSION=$TM_APP_API_VERSION
-REACT_APP_ORG_NAME=$TM_ORG_NAME
-REACT_APP_ORG_CODE=$TM_ORG_CODE
-REACT_APP_ORG_URL=$TM_ORG_URL
-REACT_APP_ORG_LOGO=$TM_ORG_LOGO
-REACT_APP_ORG_PRIVACY_POLICY_URL=$TM_ORG_PRIVACY_POLICY_URL
-REACT_APP_ORG_TWITTER=$TM_ORG_TWITTER
-REACT_APP_ORG_FB=$TM_ORG_FB
-REACT_APP_ORG_INSTAGRAM=$TM_ORG_INSTAGRAM
-REACT_APP_ORG_YOUTUBE=$TM_ORG_YOUTUBE
-REACT_APP_ORG_GITHUB=$TM_ORG_GITHUB
-REACT_APP_DEFAULT_LOCALE=$TM_DEFAULT_LOCALE
-REACT_APP_TM_MAPPER_LEVEL_INTERMEDIATE=$TM_MAPPER_LEVEL_INTERMEDIATE
-REACT_APP_TM_MAPPER_LEVEL_ADVANCED=$TM_MAPPER_LEVEL_ADVANCED
-REACT_APP_MATOMO_ID=$TM_MATOMO_ID
-REACT_APP_MATOMO_ENDPOINT=$TM_MATOMO_ENDPOINT
-REACT_APP_SERVICE_DESK=$TM_SERVICE_DESK
-REACT_APP_IMAGE_UPLOAD_API_URL=$TM_IMAGE_UPLOAD_API_URL
-REACT_APP_HOMEPAGE_VIDEO_URL=$TM_HOMEPAGE_VIDEO_URL
-REACT_APP_HOMEPAGE_IMG_HIGH=$TM_HOMEPAGE_IMG_HIGH
-REACT_APP_HOMEPAGE_IMG_LOW=$TM_HOMEPAGE_IMG_LOW
-REACT_APP_MAPBOX_TOKEN=$TM_MAPBOX_TOKEN
-REACT_APP_ENABLE_SERVICEWORKER=$TM_ENABLE_SERVICEWORKER
-REACT_APP_MAX_FILESIZE=$TM_IMPORT_MAX_FILESIZE
-REACT_APP_MAX_AOI_AREA=$TM_MAX_AOI_AREA
-REACT_APP_OHSOME_STATS_BASE_URL=$OHSOME_STATS_BASE_URL
-REACT_APP_OHSOME_STATS_TOKEN=$OHSOME_STATS_TOKEN
-REACT_APP_OSM_CLIENT_ID=$TM_CLIENT_ID
-REACT_APP_OSM_CLIENT_SECRET=$TM_CLIENT_SECRET
-REACT_APP_OSM_REDIRECT_URI=$TM_REDIRECT_URI
-REACT_APP_OSM_SERVER_URL=$OSM_SERVER_URL
-REACT_APP_OSM_SERVER_API_URL=$OSM_SERVER_API_URL
-REACT_APP_TM_ORG_NAME=$TM_ORG_NAME
-REACT_APP_OSM_REGISTER_URL=$OSM_REGISTER_URL
-REACT_APP_ID_EDITOR_URL=$ID_EDITOR_URL
-REACT_APP_POTLATCH2_EDITOR_URL=$POTLATCH2_EDITOR_URL
-REACT_APP_SENTRY_FRONTEND_DSN=$TM_SENTRY_FRONTEND_DSN
-REACT_APP_ENVIRONMENT=$TM_ENVIRONMENT
-REACT_APP_TM_DEFAULT_CHANGESET_COMMENT=$TM_DEFAULT_CHANGESET_COMMENT
-REACT_APP_RAPID_EDITOR_URL=$RAPID_EDITOR_URL
-REACT_APP_EXPORT_TOOL_S3_URL=$EXPORT_TOOL_S3_URL
-REACT_APP_ENABLE_EXPORT_TOOL=$ENABLE_EXPORT_TOOL
+VITE_BASE_URL=$TM_APP_BASE_URL
+VITE_API_URL=$TM_APP_API_URL
+VITE_API_VERSION=$TM_APP_API_VERSION
+VITE_ORG_NAME=$TM_ORG_NAME
+VITE_ORG_CODE=$TM_ORG_CODE
+VITE_ORG_URL=$TM_ORG_URL
+VITE_ORG_LOGO=$TM_ORG_LOGO
+VITE_ORG_PRIVACY_POLICY_URL=$TM_ORG_PRIVACY_POLICY_URL
+VITE_ORG_TWITTER=$TM_ORG_TWITTER
+VITE_ORG_FB=$TM_ORG_FB
+VITE_ORG_INSTAGRAM=$TM_ORG_INSTAGRAM
+VITE_ORG_YOUTUBE=$TM_ORG_YOUTUBE
+VITE_ORG_GITHUB=$TM_ORG_GITHUB
+VITE_DEFAULT_LOCALE=$TM_DEFAULT_LOCALE
+VITE_TM_MAPPER_LEVEL_INTERMEDIATE=$TM_MAPPER_LEVEL_INTERMEDIATE
+VITE_TM_MAPPER_LEVEL_ADVANCED=$TM_MAPPER_LEVEL_ADVANCED
+VITE_MATOMO_ID=$TM_MATOMO_ID
+VITE_MATOMO_ENDPOINT=$TM_MATOMO_ENDPOINT
+VITE_SERVICE_DESK=$TM_SERVICE_DESK
+VITE_IMAGE_UPLOAD_API_URL=$TM_IMAGE_UPLOAD_API_URL
+VITE_HOMEPAGE_VIDEO_URL=$TM_HOMEPAGE_VIDEO_URL
+VITE_HOMEPAGE_IMG_HIGH=$TM_HOMEPAGE_IMG_HIGH
+VITE_HOMEPAGE_IMG_LOW=$TM_HOMEPAGE_IMG_LOW
+VITE_MAPBOX_TOKEN=$TM_MAPBOX_TOKEN
+VITE_ENABLE_SERVICEWORKER=$TM_ENABLE_SERVICEWORKER
+VITE_MAX_FILESIZE=$TM_IMPORT_MAX_FILESIZE
+VITE_MAX_AOI_AREA=$TM_MAX_AOI_AREA
+VITE_OHSOME_STATS_BASE_URL=$OHSOME_STATS_BASE_URL
+VITE_OHSOME_STATS_TOKEN=$OHSOME_STATS_TOKEN
+VITE_OSM_CLIENT_ID=$TM_CLIENT_ID
+VITE_OSM_CLIENT_SECRET=$TM_CLIENT_SECRET
+VITE_OSM_REDIRECT_URI=$TM_REDIRECT_URI
+VITE_OSM_SERVER_URL=$OSM_SERVER_URL
+VITE_OSM_SERVER_API_URL=$OSM_SERVER_API_URL
+VITE_TM_ORG_NAME=$TM_ORG_NAME
+VITE_OSM_REGISTER_URL=$OSM_REGISTER_URL
+VITE_ID_EDITOR_URL=$ID_EDITOR_URL
+VITE_POTLATCH2_EDITOR_URL=$POTLATCH2_EDITOR_URL
+VITE_SENTRY_FRONTEND_DSN=$TM_SENTRY_FRONTEND_DSN
+VITE_ENVIRONMENT=$TM_ENVIRONMENT
+VITE_TM_DEFAULT_CHANGESET_COMMENT=$TM_DEFAULT_CHANGESET_COMMENT
+VITE_RAPID_EDITOR_URL=$RAPID_EDITOR_URL
+VITE_EXPORT_TOOL_S3_URL=$EXPORT_TOOL_S3_URL
+VITE_ENABLE_EXPORT_TOOL=$ENABLE_EXPORT_TOOL

frontend/public/index.html → frontend/index.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon.ico" />
+    <link rel="shortcut icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- for Google -->
@@ -14,20 +14,20 @@
     <meta name="application-name" content="Tasking Manager" />
 
     <!-- for Facebook -->
-    <meta property="og:title" content="%REACT_APP_ORG_CODE% Tasking Manager" />
-    <meta property="og:site_name" content="%REACT_APP_ORG_CODE% Tasking Manager" />
+    <meta property="og:title" content="%VITE_ORG_CODE% Tasking Manager" />
+    <meta property="og:site_name" content="%VITE_ORG_CODE% Tasking Manager" />
     <meta property="og:type" content="website" />
     <meta property="og:description" content="Collaborative mapping for humanitarian action." />
 
     <!-- for Twitter -->
     <meta name="twitter:card" content="summary" />
-    <meta name="twitter:title" content="%REACT_APP_ORG_CODE% Tasking Manager" />
+    <meta name="twitter:title" content="%VITE_ORG_CODE% Tasking Manager" />
     <meta name="twitter:description" content="Collaborative mapping for humanitarian action." />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -36,12 +36,15 @@
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
+
+      %PUBLIC_URL% is now no longer used, it is automatically refactored to the correct path during the build process.
     -->
-    <title>%REACT_APP_ORG_CODE% Tasking Manager</title>
+    <title>%VITE_ORG_CODE% Tasking Manager</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
     <div
       id="action-root"
       class="w-100 h-100 vh-minus-122-ns"
@@ -56,10 +59,10 @@
       _paq.push(['trackPageView']);
       _paq.push(['enableLinkTracking']); // Tracks downloads
       _paq.push(['trackVisibleContentImpressions']); // Tracks content blocks
-      var site_id = '%REACT_APP_MATOMO_ID%';
-      if (site_id && '%REACT_APP_MATOMO_ENDPOINT%') {
+      var site_id = '%VITE_MATOMO_ID%';
+      if (site_id && '%VITE_MATOMO_ENDPOINT%') {
         (function () {
-          var u = '%REACT_APP_MATOMO_ENDPOINT%';
+          var u = '%VITE_MATOMO_ENDPOINT%';
           _paq.push(['setTrackerUrl', u + 'piwik.php']);
           _paq.push(['setSiteId', site_id]);
 

frontend/package.json

@@ -2,7 +2,7 @@
   "name": "TaskingManager-frontend",
   "version": "0.1.0",
   "license": "BSD-2-Clause",
-  "private": false,
+  "type": "module",
   "dependencies": {
     "@hotosm/id": "^2.30.2",
     "@hotosm/iso-countries-languages": "^1.1.2",
@@ -12,9 +12,10 @@
     "@mapbox/mapbox-gl-language": "^0.10.1",
     "@placemarkio/geo-viewport": "^1.0.2",
     "@rapideditor/rapid": "^2.4.2",
+    "@redux-devtools/extension": "^3.3.0",
     "@sentry/react": "^7.102.0",
-    "@tanstack/react-query": "^4.29.7",
-    "@tanstack/react-query-devtools": "^4.29.7",
+    "@tanstack/react-query": "^5.52.0",
+    "@tanstack/react-query-devtools": "^5.62.8",
     "@tanstack/react-table": "^8.20.1",
     "@tmcw/togeojson": "^5.8.1",
     "@turf/area": "^6.5.0",
@@ -30,7 +31,7 @@
     "axios": "^1.6.7",
     "chart.js": "^4.4.1",
     "chartjs-adapter-date-fns": "^3.0.0",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.6.0",
     "dompurify": "^3.0.9",
     "downshift-hooks": "^0.8.1",
     "final-form": "^4.20.10",
@@ -39,7 +40,7 @@
     "humanize-duration": "^3.31.0",
     "mapbox-gl": "^1.13.3",
     "mapbox-gl-draw-rectangle-mode": "^1.0.4",
-    "marked": "^4.3.0",
+    "marked": "^14.0.0",
     "osmtogeojson": "^3.0.0-beta.5",
     "prop-types": "^15.8.1",
     "query-string": "^8.2.0",
@@ -85,12 +86,16 @@
     "copy-static": "bash -c \"mkdir -p public/static/rapid; if ! (test -a public/static/rapid/rapid.js); then cp -R node_modules/@rapideditor/rapid/dist/* public/static/rapid; fi\"",
     "copy-id-static": "bash -c \"mkdir -p public/static/id; if ! (test -a public/static/id/data); then cp -R node_modules/@hotosm/id/dist/data public/static/id && cp -R node_modules/@hotosm/id/dist/img public/static/id && cp -R node_modules/@hotosm/id/dist/locales public/static/id; fi;\"",
     "update-static": "bash -c \"mkdir -p public/static/rapid; cp -R node_modules/@rapideditor/rapid/dist/* public/static/rapid;\"",
-    "update-id-static": "bash -c \"mkdir -p public/static/id; cp -R node_modules/@hotosm/id/dist/data public/static/id && cp -R node_modules/@hotosm/id/dist/img public/static/id && cp -R node_modules/@hotosm/id/dist/locales public/static/id;\"",    "patch-rapid": "bash -c \"cp patch/rapid-imagery.min.json public/static/rapid/data/imagery.min.json\"",
+    "update-id-static": "bash -c \"mkdir -p public/static/id; cp -R node_modules/@hotosm/id/dist/data public/static/id && cp -R node_modules/@hotosm/id/dist/img public/static/id && cp -R node_modules/@hotosm/id/dist/locales public/static/id;\"",
+    "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 copy-id-static && npm run patch-rapid && craco start",
-    "build": "npm run preparation && npm run update-static && npm run update-id-static && npm run patch-rapid && craco build && npm run sentry:sourcemaps",    "prettier": "prettier --write 'src/**/*.js'",
+    "dev": "vite",
+    "start": "npm run preparation && npm run copy-static && npm run copy-id-static && npm run patch-rapid && vite start",
+    "build": "npm run preparation && npm run update-static && npm run update-id-static && npm run patch-rapid && vite build && npm run sentry:sourcemaps",
+    "prettier": "prettier --write 'src/**/*.js'",
     "lint": "eslint src",
-    "test": "npm run lint && craco test --env=jsdom",
+    "test": "npm run lint && vitest",
+    "test:ui": "npm run lint && vitest --ui",
     "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,20 +117,33 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@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": "^14.2.1",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/chart.js": "^2.9.41",
+    "@types/dompurify": "^3.0.5",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@types/react-redux": "^7.1.34",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-test-renderer": "^18.3.0",
+    "@types/slug": "^5.0.9",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "@vitest/ui": "2.1.8",
     "combine-react-intl-messages": "^4.0.0",
     "jest-canvas-mock": "^2.5.2",
-    "msw": "^1.3.2",
+    "msw": "^2.7.0",
     "prettier": "^2.8.8",
     "react-scripts": "^5.0.1",
     "react-select-event": "^5.5.1",
     "react-test-renderer": "^18.2.0",
-    "source-map-explorer": "^2.5.3"
+    "source-map-explorer": "^2.5.3",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.2",
+    "vitest": "^2.1.8"
   },
   "resolutions": {
     "dom-accessibility-api": "0.5.14"
@@ -142,6 +160,7 @@
     ]
   },
   "volta": {
-    "node": "18.19.1"
+    "node": "18.19.1",
+    "yarn": "1.22.19"
   }
 }