Vite + Upgrade arcgis to 4.30 + esri-loader => @arcgis/loader (#691)

* Remove popup header from map popups

* Update css and fix popups

* Fix Protected areas modal in Future places AOI

* Use new popup methods to open and close

* Remove extra padding on popups

* Fix eternal loading in WDPAs with no data

* Move from react-app-rewired to vite

* Move to @arcgis/core. Import scss variables as css variables. Make build work

* Fix colors import. Rename yarn start to yarn dev. Put back Onboarding Tooltip

* Remove extra parenthesis

* Remove unneded dependencies and update documentation. Use build as build directory

* Fix build

* Remove node:sass

* Update vite config

* Update react and fix vite config

* Use dist directory as build and change it in temporary vercel.json

* Fix map not loading at first and landing scene

* Update public links URL

* yarn lock update

* Fix race conditions with registered redux modules

* React import on each file is not needed anymore in React 17

* Remove outdated comment

* Remove unused export colors

* Compress images

.env.sample

@@ -1,19 +1,18 @@
 NODE_PATH=
-REACT_APP_DATA_GLOBE_SCENE_ID=
-REACT_APP_FEATURED_GLOBE_SCENE_ID=
-REACT_APP_ARGISJS_API_VERSION=
-REACT_APP_CONTENTFUL_SPACE_ID=
-REACT_APP_CONTENTFUL_TOKEN=
-REACT_APP_GA_MEASUREMENT_ID=
-REACT_APP_VERCEL_ENV=development
+VITE_APP_DATA_GLOBE_SCENE_ID=
+VITE_APP_FEATURED_GLOBE_SCENE_ID=
+VITE_APP_ARGISJS_API_VERSION=
+VITE_APP_CONTENTFUL_SPACE_ID=
+VITE_APP_CONTENTFUL_TOKEN=
+VITE_APP_GA_MEASUREMENT_ID=
+VITE_APP_VERCEL_ENV=development
 
-REACT_APP_TRANSIFEX_TOKEN=
-REACT_APP_TRANSIFEX_SECRET=
+VITE_APP_TRANSIFEX_TOKEN=
+VITE_APP_TRANSIFEX_SECRET=
 TRANSIFEX_TOKEN=
 TRANSIFEX_SECRET=
 
-SKIP_PREFLIGHT_CHECK=
 GENERATE_SOURCEMAP=
 
-REACT_APP_FEATURE_SPECIFIC_REGIONS_AOI=
-REACT_APP_FEATURE_ALLOWED_LANGUAGES=en,es,pt,fr
+VITE_APP_FEATURE_SPECIFIC_REGIONS_AOI=
+VITE_APP_FEATURE_ALLOWED_LANGUAGES=en,es,pt,fr

.eslintrc.js

@@ -105,12 +105,6 @@ module.exports = {
             pattern: 'redux_modules/**',
             group: 'builtin',
           },
-
-          {
-            pattern: 'esri-loader',
-            group: 'builtin',
-            position: 'after',
-          },
           {
             pattern: 'router',
             group: 'builtin',

.gitignore

@@ -7,6 +7,7 @@
 
 # production
 /build
+/dist
 
 # local jekyll docs
 /_site

README.md

@@ -1,9 +1,6 @@
 # Half Earth
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-And [`rewired`](https://github.com/timarney/react-app-rewired) instead of [`ejected`](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject)
-
-Arcgis JS is consumed as React components through [esri-loader](https://github.com/esri/esri-loader)
+This project is using [Vite](https://vitejs.dev/) as the build tool and [React](https://reactjs.org/) as the main library. The map is built using [Arcgis JS](https://developers.arcgis.com/javascript/) with the [@arcgis/core](https://www.npmjs.com/package/@arcgis/core) package.
 
 Clone the repo and run `yarn install` to install the needed dependencies.
 
@@ -16,7 +13,7 @@ It uses github pages and the content is generated from the `_docs` folder.
 
 In the project directory, you can run:
 
-### `yarn start`
+### `yarn dev`
 
 Runs the app in the development mode.<br>
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@@ -29,7 +26,6 @@ You will also see any lint errors in the console.
 ### `yarn test`
 
 Launches the test runner in the interactive watch mode.<br>
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
 ### `yarn run build`
 
@@ -39,10 +35,4 @@ It correctly bundles React in production mode and optimizes the build for the be
 The build is minified and the filenames include the hashes.<br>
 Your app is ready to be deployed!
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `config-overrides`
-
-This file is ised to override/extend the default `create-react-app` webpack configuration.
-
-Since `create-react-app` version 2 is used under the hoods no configuration to allow the use of [`CSSModules`](https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet) is needed. Just have in mind that for it to work the file naming convention `file-name.module.scss` should be followed.
+See the section about [build](https://vitejs.dev/guide/build) for more information.

_docs/dev/env.md

@@ -12,26 +12,25 @@ If the features are always showing independently from the env try to remove the
 Current env variables
 
 NODE_ENV=
-# env variables on create react app should start with REACT_APP to be available
-# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#docsNav
-REACT_APP_DATA_GLOBE_SCENE_ID= Esri Scene Id for the data globe
-REACT_APP_FEATURED_GLOBE_SCENE_ID= Esri Scene Id for the featured globe
-REACT_APP_ARGISJS_API_VERSION= ArcGis js version
-REACT_APP_CONTENTFUL_SPACE_ID= Contentful space id for featured globe and metadata
-REACT_APP_TRANSIFEX_TOKEN= Transifex token for translation
+# env variables on create react app should start with VITE_APP to be available
+# https://vitejs.dev/guide/env-and-mode
+VITE_APP_DATA_GLOBE_SCENE_ID= Esri Scene Id for the data globe
+VITE_APP_FEATURED_GLOBE_SCENE_ID= Esri Scene Id for the featured globe
+VITE_APP_ARGISJS_API_VERSION= ArcGis js version
+VITE_APP_CONTENTFUL_SPACE_ID= Contentful space id for featured globe and metadata
+VITE_APP_TRANSIFEX_TOKEN= Transifex token for translation
 TRANSIFEX_TOKEN= Transifex token for translation (Same as the react app one)
 TRANSIFEX_SECRET= Transifex secret for translation (Same as the react app one)
-REACT_APP_TRANSIFEX_SECRET= Transifex secret for translation (Same as the react app one)
-REACT_APP_CONTENTFUL_TOKEN= Contentful token
-REACT_APP_GA_MEASUREMENT_ID= Google analytics code
+VITE_APP_TRANSIFEX_SECRET= Transifex secret for translation (Same as the react app one)
+VITE_APP_CONTENTFUL_TOKEN= Contentful token
+VITE_APP_GA_MEASUREMENT_ID= Google analytics code
 
-SKIP_PREFLIGHT_CHECK=true keep true, CRA does'nt support different versions of eslint https://github.com/facebook/create-react-app/issues/5247
 GENERATE_SOURCEMAP=false keep false. This is a fix for a problem with react-scripts 5 not handling the sourcemaps correctly and having some warnings
 
 
-REACT_APP_VERCEL_ENV= Current environment, provided by vercel
+VITE_APP_VERCEL_ENV= Current environment, provided by vercel
 
-REACT_APP_FEATURE_SPECIFIC_REGIONS_AOI= Show specific regions as an option in analyze areas
-REACT_APP_FEATURE_ALLOWED_LANGUAGES= Languages showing in language switcher
+VITE_APP_FEATURE_SPECIFIC_REGIONS_AOI= Show specific regions as an option in analyze areas
+VITE_APP_FEATURE_ALLOWED_LANGUAGES= Languages showing in language switcher
 
 Temporal

_docs/scientists/pr-reviewing.md

@@ -7,12 +7,12 @@ permalink: /_docs/science/sci-fe
 
 # Science `Pull Requests` reviewing
 
-The metadata is controlled by the back end (arcGIS online), but some elements of the data are in the FE code. Most of the code reviews from Science involve checking the name of the layers that are shown on the sidebar and the legend. When reviewing follow the `suggest` approach described in [this article](https://haacked.com/archive/2019/06/03/suggested-changes/){:target="_blank"}. 
+The metadata is controlled by the back end (arcGIS online), but some elements of the data are in the FE code. Most of the code reviews from Science involve checking the name of the layers that are shown on the sidebar and the legend. When reviewing follow the `suggest` approach described in [this article](https://haacked.com/archive/2019/06/03/suggested-changes/){:target="_blank"}.
 ### Code files to check
-- The file that contains the layers config that shows information on the side bar and legend is `src/constants/-layers-urls.js`. 
+- The file that contains the layers config that shows information on the side bar and legend is `src/constants/-layers-urls.js`.
 
 ### How to run the app in local
-Always seek advice from the Tech Lead. As an initial resource, there is a [Blogin post](https://vizzuality.blogin.co/posts/how-to-have-half-earth-in-your-computer-in-less-than-50-min-102803) telling the story of setting up the app in local. Key elements to keep in mind is to request the `.env` file from the Front End team. The `.env` file is ignored by git. This file is updated every time the ArcGIS Javascript API is updated (`REACT_APP_ARGISJS_API_VERSION=`). Check the `public/index.html` file to see which version is being used. The code line:
+Always seek advice from the Tech Lead. As an initial resource, there is a [Blogin post](https://vizzuality.blogin.co/posts/how-to-have-half-earth-in-your-computer-in-less-than-50-min-102803) telling the story of setting up the app in local. Key elements to keep in mind is to request the `.env` file from the Front End team. The `.env` file is ignored by git. This file is updated every time the ArcGIS Javascript API is updated (`VITE_APP_ARGISJS_API_VERSION=`). Check the `public/index.html` file to see which version is being used. The code line:
 ```
 <link rel="stylesheet" href="https://js.arcgis.com/<argis javascript API version>/esri/css/main.css">
 ```

declarations/declarations.d.ts

@@ -5,5 +5,6 @@ declare module '*.scss' {
 
 declare module '*.svg';
 declare module '*.svg?sprite';
+declare module '*.svg?react';
 declare module '*.png';
 declare module '*.jpg';

index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/css/main.css">
+    <link rel="stylesheet"
+      href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
+    <!-- Fonts -->
+    <!-- ivipresto Adobe font -->
+    <link href="https://use.typekit.net/yql8sej.css" rel="stylesheet">
+
+    <!-- Transifex -->
+    <script type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/@transifex/native/dist/browser.native.min.js"></script>
+
+    <title>Half-Earth Project Map</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>