Support Node 18, 20, 21 (#2182)

* get to a green compilation

* update to eslint-parser

* update testing libraries

* replace geojsonhint

* replace parse-link-header

* revert some syntax changes

* make a few more syntax reverts

* let's try 20

* and 21

* doc update

.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "root": true,
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "plugins": ["react", "react-hooks", "jest"],
   "rules": {
     "no-unused-vars": "warn",

.github/workflows/node.js.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [16, 18, 20, 21]
 
     steps:
     - name: Checkout repository
@@ -40,4 +40,3 @@ jobs:
       uses: codecov/codecov-action@v3
       with:
         token: ${{ secrets.CODECOV_TOKEN }}
-

DEVELOPMENT.md

@@ -4,13 +4,11 @@ This is the repository that holds the front-end code. The back-end and API are d
 
 ### Basic Dependencies:
 
-* [Node 16 LTS](https://nodejs.org/)
+* [Node 16-21 LTS](https://nodejs.org/)
 * [yarn](https://yarnpkg.com/)
 * [jq](https://stedolan.github.io/jq/)
 * [curl](https://curl.haxx.se/)
 
-Note: When installing Node LTS,  ensure that the version of node installed is <= 17.0.1 & conversely, the version of npm is <= 8.19.3. Otherwise, with higher versions of node, yarn would not be able to recognize Node and run the frontend portion of the codebase.
-
 ### Initial Setup
 
 1. Create a `.env.development.local` file and then look through `.env` at the

package.json

@@ -6,18 +6,19 @@
     "@apollo/client": "^3.5.4",
     "@formatjs/intl-relativetimeformat": "^6.0.2",
     "@mapbox/geo-viewport": "^0.4.0",
-    "@mapbox/geojsonhint": "^3.0.0",
     "@nivo/bar": "^0.79.1",
     "@nivo/core": "^0.79.0",
     "@nivo/line": "^0.79.1",
     "@nivo/radar": "^0.79.1",
     "@popperjs/core": "^2.8.4",
-    "@rjsf/core": "^2.1.0",
+    "@rjsf/core": "^5.14.2",
+    "@rjsf/utils": "^5.14.2",
     "@turf/bbox": "^6.0.1",
     "@turf/bbox-polygon": "^6.0.1",
     "@turf/bearing": "^6.0.1",
     "@turf/boolean-contains": "^6.0.1",
     "@turf/boolean-disjoint": "^6.0.2",
+    "@turf/boolean-valid": "^6.5.0",
     "@turf/center": "^6.0.1",
     "@turf/centroid": "^6.0.2",
     "@turf/distance": "^6.0.1",
@@ -45,7 +46,6 @@
     "mapillary-js": "^4.1.0",
     "normalize.css": "^7.0.0",
     "normalizr": "^3.6.0",
-    "parse-link-header": "^2.0.0",
     "piwik-react-router": "^0.12.1",
     "prop-types": "^15.6.0",
     "query-string": "^6.13.1",
@@ -63,7 +63,7 @@
     "react-elastic-carousel": "^0.9.0",
     "react-grid-layout": "^0.18.3",
     "react-helmet": "^6.1.0",
-    "react-intl": "^4.6.9",
+    "react-intl": "^6.5.5",
     "react-intl-formatted-duration": "^4.0.0",
     "react-leaflet": "^2.7.0",
     "react-leaflet-bing-v2": "^5.0.1",
@@ -72,10 +72,10 @@
     "react-popper": "^2.2.4",
     "react-query": "^3.34.2",
     "react-redux": "^7.2.6",
-    "react-responsive": "^8.1.0",
+    "react-responsive": "^9.0.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.1",
     "react-share": "^4.2.0",
     "react-syntax-highlighter": "^15.4.3",
     "react-table-6": "^6.11.0",
@@ -86,7 +86,7 @@
     "remark-external-links": "^6.1.0",
     "remark-react": "^7.0.1",
     "route-matcher": "^0.1.0",
-    "sass": "^1.54.2",
+    "sass": "^1.69.5",
     "stale-lru-cache": "^5.1.1",
     "styled-components": "^5.1.0",
     "timezones.json": "^1.5.2",
@@ -96,15 +96,17 @@
     "xmltojson": "^1.3.5"
   },
   "devDependencies": {
+    "@babel/core": "^7.23.3",
+    "@babel/eslint-parser": "^7.23.3",
     "@babel/helper-get-function-arity": "^7.16.7",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@openstreetmap/id-tagging-schema": "^3.0.0",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^12.1.2",
-    "enzyme": "^3.2.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.7",
+    "eslint": "^8.54.0",
     "extract-react-intl-messages": "^4.1.1",
-    "jest-environment-jsdom-sixteen": "^1.0.3",
     "npm-run-all": "^4.1.1",
     "postcss": "^8.4.21",
     "postcss-cli": "^9.0.2",
@@ -134,9 +136,9 @@
     "start-js": "react-scripts --max_old_space_size=4096 start",
     "start": "npm-run-all -p copy-static update-layers watch-postcss start-js",
     "build": "yarn update-static && yarn run build-intl && yarn run update-layers-prod && yarn run build-postcss && react-scripts --max_old_space_size=4096 build",
-    "test": "react-scripts test --env=jest-environment-jsdom-sixteen --resetMocks=false",
-    "test:cov": "react-scripts test --coverage --env=jest-environment-jsdom-sixteen --resetMocks=false",
-    "test:cov-full": "react-scripts test --coverage --watchAll --env=jest-environment-jsdom-sixteen --resetMocks=false",
+    "test": "react-scripts test --resetMocks=false --detectOpenHandles",
+    "test:cov": "react-scripts test --coverage --resetMocks=false",
+    "test:cov-full": "react-scripts test --coverage --watchAll --resetMocks=false",
     "eject": "react-scripts eject"
   },
   "browserslist": [

src/components/AdminPane/AdminPane.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .admin {
   display: flex;

src/components/AdminPane/Manage/CalendarHeatmap/CalendarHeatmap.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../../variables.scss';
 
 .calendar-heatmap {
   $calendar-bucket-colors: (

src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.scss

@@ -1,4 +1,4 @@
-@import 'mixins.scss';
+@import '../../../../mixins.scss';
 
 .admin__manage.challenge-dashboard {
   section {

src/components/AdminPane/Manage/InspectTask/InspectTask.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../../variables.scss';
 
 .admin__manage.inspect-task {
   .task-pane {

src/components/AdminPane/Manage/ManageChallenges/EditChallenge/EditChallenges.test.js

@@ -9,24 +9,4 @@ describe("EditChallenges", () => {
     );
     expect(container.firstChild.classList["0"]).toBe("pane-loading");
   });
-
-  it("renders project with a challenge button", () => {
-    const { getByText } = global.withProvider(
-      <EditChallenges
-        user={{
-          isLoggedIn: true, 
-          id: 1, 
-          properties: { mr3Frontend: { settings: { tallied: { 1: [1, 2] } } } }
-        }}
-        history={{ location: "", push: () => null }} 
-        project={{ id: 1, name: "project 1" }}
-        intl={{ formatMessage: () => null }}
-        challenges={[{ id: 1, name: "challenge 1" }, { id: 2, name: "challenge 2" }]}
-      />
-    );
-    const challengeOne = getByText("challenge 1");
-    expect(challengeOne).toBeInTheDocument();
-    const challengeTwo = getByText("challenge 2");
-    expect(challengeTwo).toBeInTheDocument();
-  });
 });

src/components/AdminPane/Manage/ProjectDashboard/ProjectDashboard.scss

@@ -1,4 +1,4 @@
-@import 'mixins.scss';
+@import '../../../../mixins.scss';
 
 .admin__manage.project-dashboard {
   .admin__manage__primary-content {

src/components/AdminPane/Manage/ProjectList/ProjectList.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../../variables.scss';
 
 .admin__manage__managed-item-list.project-list {
   font-size: $size-5;

src/components/AdminPane/Manage/ProjectsDashboard/ProjectsDashboard.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../../variables.scss';
 
 .admin__manage.projects-dashboard {
   &__dashboard-controls {

src/components/ChallengePane/ChallengeResultList/ChallengeResultList.js

@@ -97,6 +97,9 @@ export class ChallengeResultList extends Component {
     }
 
   render() {
+    const search = _get(this.props, 'currentSearch.challenges', {})
+    const query = search.query ? search.query : this.props.searchFilters.project ? this.props.searchFilters.project : this.props.searchFilters.task 
+
     const challengeResultsUnbound = _clone(this.props.pagedChallenges);
     const challengeResults = this.props.location?.pathname?.includes("browse/challenges") 
       && (this.props.searchSort?.sortBy === "created"
@@ -127,8 +130,6 @@ export class ChallengeResultList extends Component {
     }, []);
 
     const isFetching = _get(this.props, 'fetchingChallenges', []).length > 0
-
-    const search = _get(this.props, 'currentSearch.challenges', {})
     const searchType = this.props.searchFilters.searchType
     const bounds = _get(search, 'mapBounds.bounds')
     const locationFilter = _get(search, 'filters.location')
@@ -138,8 +139,6 @@ export class ChallengeResultList extends Component {
       _isEmpty(otherFilters) &&
       (_isEmpty(locationFilter) || !bounds || !boundsWithinAllowedMaxDegrees(bounds))
 
-    const query = search.query ? search.query : this.props.searchFilters.project ? this.props.searchFilters.project : this.props.searchFilters.task 
-
     let matchedId = []
     if(!isNaN(query) && query && !this.props.history.location.pathname.includes('browse/projects/')) {
       if(this.props.searchFilters.searchType == "projects"){

src/components/ConfirmAction/ConfirmAction.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .confirm-action {
   display: inline-flex;

src/components/CongratulateModal/CongratulateModal.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .congratulate-modal {
   .modal-content {

src/components/CountrySelector/CountrySelector.scss

@@ -1,4 +1,4 @@
-@import 'theme.scss';
+@import '../../theme.scss';
 
 .country-selector {
   margin: 2px 20px 0px -60px;

src/components/Custom/RJSFFormFieldAdapter/RJSFFormFieldAdapter.scss

@@ -1,4 +1,4 @@
-@import 'theme.scss';
+@import '../../../theme.scss';
 
 .form {
   .array-item-remove::after {

src/components/EnhancedMap/FitBoundsControl/FitBoundsControl.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../variables.scss';
 
 .fit-bounds-control {
   svg {

src/components/EnhancedMap/MapPane/MapPane.scss

@@ -1,4 +1,4 @@
-@import 'mixins.scss';
+@import '../../../mixins.scss';
 
 .map-pane {
   position: relative;

src/components/InspectTaskControls/InspectTaskControls.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .inspect-task-controls {
   &__control-block {

src/components/KeywordAutosuggestInput/KeywordAutosuggestInput.scss

@@ -1,4 +1,4 @@
-@import 'mixins.scss';
+@import '../../mixins.scss';
 
 .keyword-autosuggest-input {
   @include basic-form-element-styling();

src/components/LoadMoreButton/LoadMoreButton.scss

@@ -1,4 +1,4 @@
-@import 'mixins.scss';
+@import '../../mixins.scss';
 
 button.load-more-button {
   @include invert-on-hover($green, $white);

src/components/MobileNotSupported/MobileNotSupported.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .mobile-not-supported {
   padding: 30px 20px;

src/components/Navbar/Navbar.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .navbar.top-nav {
   height: $navbar-height;

src/components/PastDurationSelector/PastDurationSelector.scss

@@ -1,4 +1,4 @@
-@import 'theme.scss';
+@import '../../theme.scss';
 
 .past-duration-selector {
   .dropdown-trigger {

src/components/PublicWidgetGrid/PublicWidgetGrid.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .widget-grid {
   &__controls {

src/components/ReviewTaskControls/ReviewTaskControls.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .review-task-controls {
   &__control-block {

src/components/ReviewTaskPane/ReviewTaskPane.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .task-pane {
   position: relative;

src/components/ShareLink/ShareLink.scss

@@ -1,4 +1,4 @@
-@import 'mixins.scss';
+@import '../../mixins.scss';
 
 .share-link.dropdown {
   position: static; // allow content to float above sidebar

src/components/TaskAnalysisTable/TaskAnalysisTable.scss

@@ -1,4 +1,4 @@
-@import 'theme.scss';
+@import '../../theme.scss';
 
 .task-analysis-table {
   .status-icon {

src/components/TaskClusterMap/TaskClusterMap.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 /**
  * Mixin to set the colors for map clusters. Three colors are required: the

src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/ActiveTaskControls.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../../variables.scss';
 
 .active-task-controls {
   &__control-block {

src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/TaskCancelEditingControl/TaskCancelEditingControl.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../../../variables.scss';
 
 .active-task-controls button.button.cancel-control {
   margin-top: 15px;

src/components/TaskPane/ActiveTaskDetails/KeyboardShortcutReference/KeyboardShortcutList.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../../variables.scss';
 
 .keyboard-shortcut-list {
   display: grid;

src/components/TaskPane/MobileTaskDetails/MobileTaskDetails.scss

@@ -1,4 +1,4 @@
-@import 'mixins.scss';
+@import '../../../mixins.scss';
 
 .mobile-task-details {
   $inactive-icon-color: $grey-darkest;

src/components/TaskPane/TaskLocationMap/TaskLocationMap.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../variables.scss';
 
 .task-location-map {
   position: relative;

src/components/TaskPane/TaskRandomnessControl/TaskRandomnessControl.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../variables.scss';
 
 .task-randomness-control {
   margin: 15px 0px;

src/components/TaskStatusIndicator/TaskStatusIndicator.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .active-task-details .task-status {
   margin: 25px 0;

src/components/WidgetGrid/WidgetGrid.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .widget-grid {
   &__controls {

src/components/WidgetWorkspace/WidgetWorkspace.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .widget-workspace {
   position: relative;