v4.7.3 Release PR

.github/pull_request_template.md

@@ -36,5 +36,6 @@ Notes for the reviewer. How to test this change?
 - ✅ Provide tests for your changes.
 - 📝 Use descriptive commit messages.
 - 📗 Update any related documentation and include any relevant screenshots.
+- 🔠 Does this PR introduce or change any environment variables? If so, make sure to specify this change in the description. 
 
 ## [optional] What gif best describes this PR or how it makes you feel?

docs/sysadmins/ci-cd.md

@@ -10,7 +10,7 @@ We use CircleCI to manage Continuous Integration and Continuous Deployment.
 | TeachOSM            | deployment/teachosm-tasking-manager     |
 | Indonesia           | deployment/id-tasking-manager           |
 
-Each environment has its own set of environment variables which are stored as secrets in the CircleCI Organization Settings under Contexts.
+Each environment has its own set of environment variables which are stored as secrets in the CircleCI Organization Settings under Contexts. At the moment, these variables are for the frontend builds only. See the [deployment docs](deployment.md) for updating backend variables. 
 
 - OPSGENIE_API
 - TM_APP_API_URL

docs/sysadmins/deployment.md

@@ -36,7 +36,7 @@ aws s3 sync build/ <TaskingManagerReactBucket> --delete
 When deploying updates to the infrastructure or code, follow the steps below.
 
 #### Backup Database
-Before updating it's always recommended to backup the database. You can make a snapshot in AWS RDS console, or run the database dump directly. Make sure you have set your security group to allow access to the database on your local machine.
+Before updating it's always recommended to backup the database. You can make a snapshot in AWS RDS console, or run the database dump directly. You will need sufficient access to a server on the same VPC as the RDS instance in order to connect to it directly. 
 
 ```
 PGPASSWORD=<PostgresPassword> pg_dump -Fc \
@@ -48,7 +48,7 @@ PGPASSWORD=<PostgresPassword> pg_dump -Fc \
 
 #### Update backend infrastructure
 
-If the deployment contains any changes to the cloudformation template, then we must update the infrastructure prior to deployment. These changes are deliberately outside the CI/CD process to prevent accidental deletion of data.
+If the deployment contains any changes to the cloudformation template, including new or changes to environment variables, then we must update the infrastructure prior to deployment. These changes are deliberately set outside the CI/CD process to prevent accidental deletion of data. For the HOT Tasking Manager, only staff with sufficient AWS privileges have the ability to perform these functions. 
 
 1. Pull the latest changes locally
 2. Run the `cfn-config update` command, keeping in mind to update any new parameters that were added.

frontend/src/api/projects.js

@@ -7,7 +7,7 @@ import { remapParamsToAPI } from '../utils/remapParamsToAPI';
 import api from './apiClient';
 import { UNDERPASS_URL } from '../config';
 
-export const useProjectsQuery = (fullProjectsQuery, action) => {
+export const useProjectsQuery = (fullProjectsQuery, action, queryOptions) => {
   const token = useSelector((state) => state.auth.token);
   const locale = useSelector((state) => state.preferences['locale']);
 
@@ -35,6 +35,7 @@ export const useProjectsQuery = (fullProjectsQuery, action) => {
     queryKey: ['projects', fullProjectsQuery, action],
     queryFn: ({ signal, queryKey }) => fetchProjects(signal, queryKey),
     keepPreviousData: true,
+    ...queryOptions,
   });
 };
 

frontend/src/components/header/index.js

@@ -89,7 +89,7 @@ export const Header = () => {
     ) : null;
 
   return (
-    <header className="w-100 bb b--grey-light">
+    <header id="top-header" className="w-100 bb b--grey-light">
       <UpdateDialog />
       {checkUserEmail()}
       {showOrgBar && (

frontend/src/components/projectCreate/index.js

@@ -191,6 +191,14 @@ const ProjectCreate = () => {
 
   const handleCreate = useCallback(
     (cloneProjectData) => {
+      if (!metadata.projectName.trim()) {
+        setErr({ error: true, message: intl.formatMessage(messages.noProjectName) });
+        throw new Error('Missing project name.');
+      }
+      if (!/^[a-zA-Z]/.test(metadata.projectName)) {
+        setErr({ error: true, message: intl.formatMessage(messages.projectNameValidationError) });
+        throw new Error('Project name validation error.');
+      }
       if (!metadata.geom) {
         setErr({ error: true, message: intl.formatMessage(messages.noGeometry) });
         throw new Error('Missing geom.');

frontend/src/components/projectCreate/messages.js

@@ -123,6 +123,14 @@ export default defineMessages({
     id: 'management.projects.create.errors.closed_linestring',
     defaultMessage: 'Points do not form a closed linestring',
   },
+  noProjectName: {
+    id: 'management.projects.create.errors.no_project_name',
+    defaultMessage: 'Name is a required field.',
+  },
+  projectNameValidationError: {
+    id: 'management.projects.create.errors.project_name_validation_error',
+    defaultMessage: 'Project name should start with an alphabet.',
+  },
   noGeometry: {
     id: 'management.projects.create.errors.no_geometry',
     defaultMessage: "You need to define the project's area of interest.",

frontend/src/components/projectCreate/projectCreationMap.js

@@ -7,7 +7,9 @@ import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
 import { useDropzone } from 'react-dropzone';
+
 import { mapboxLayerDefn } from '../projects/projectsMap';
+import useMapboxSupportedLanguage from '../../hooks/UseMapboxSupportedLanguage';
 
 import {
   MAPBOX_TOKEN,
@@ -31,7 +33,7 @@ try {
 
 const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step, uploadFile }) => {
   const mapRef = createRef();
-  const locale = useSelector((state) => state.preferences['locale']);
+  const mapboxSupportedLanguage = useMapboxSupportedLanguage();
   const token = useSelector((state) => state.auth.token);
   const [showProjectsAOILayer, setShowProjectsAOILayer] = useState(true);
   const [aoiCanBeActivated, setAOICanBeActivated] = useState(false);
@@ -85,7 +87,7 @@ const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step,
       attributionControl: false,
     })
       .addControl(new mapboxgl.AttributionControl({ compact: false }))
-      .addControl(new MapboxLanguage({ defaultLanguage: locale.substr(0, 2) || 'en' }))
+      .addControl(new MapboxLanguage({ defaultLanguage: mapboxSupportedLanguage }))
       .addControl(new mapboxgl.ScaleControl({ unit: 'metric' }));
     if (MAPBOX_TOKEN) {
       map.addControl(
@@ -94,7 +96,7 @@ const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step,
           mapboxgl: mapboxgl,
           marker: false,
           collapsed: true,
-          language: locale.substr(0, 2) || 'en',
+          language: mapboxSupportedLanguage,
         }),
         'top-right',
       );

frontend/src/components/projectEdit/messages.js

@@ -1,5 +1,7 @@
 import { defineMessages } from 'react-intl';
 
+import projectCreateMessages from '../projectCreate/messages';
+
 /**
  * Internationalized messages for use on project edit.
  */
@@ -439,6 +441,7 @@ export default defineMessages({
     id: 'projects.formInputs.name',
     defaultMessage: 'Name of the project',
   },
+  projectNameValidationError: { ...projectCreateMessages.projectNameValidationError },
   dueDate: {
     id: 'projects.formInputs.dueDate',
     defaultMessage: 'Due date',

frontend/src/components/projectEdit/priorityAreasForm.js

@@ -1,5 +1,4 @@
 import { useState, useContext, useLayoutEffect, createRef } from 'react';
-import { useSelector } from 'react-redux';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
@@ -25,6 +24,7 @@ import {
 import { getErrorMsg } from '../projectCreate/fileUploadErrors';
 import { Alert } from '../alert';
 import WebglUnsupported from '../webglUnsupported';
+import useMapboxSupportedLanguage from '../../hooks/UseMapboxSupportedLanguage';
 
 mapboxgl.accessToken = MAPBOX_TOKEN;
 try {
@@ -35,7 +35,7 @@ try {
 
 export const PriorityAreasForm = () => {
   const { projectInfo, setProjectInfo } = useContext(StateContext);
-  const locale = useSelector((state) => state.preferences['locale']);
+  const mapboxSupportedLanguage = useMapboxSupportedLanguage();
   const mapRef = createRef();
   const [error, setError] = useState({ error: false, message: null });
 
@@ -129,7 +129,7 @@ export const PriorityAreasForm = () => {
         attributionControl: false,
       })
         .addControl(new mapboxgl.AttributionControl({ compact: false }))
-        .addControl(new MapboxLanguage({ defaultLanguage: locale.substr(0, 2) || 'en' }))
+        .addControl(new MapboxLanguage({ defaultLanguage: mapboxSupportedLanguage }))
         .addControl(new mapboxgl.NavigationControl());
 
     setMapObj({ ...mapObj, map: map });

frontend/src/components/projects/moreFiltersForm.js

@@ -115,7 +115,7 @@ export const MoreFiltersForm = (props) => {
           />
         </fieldset>
       )}
-      <div className="tr w-100 mt3">
+      <div className="tr w-100 mt3 pb3 ph2">
         <Link to="/explore">
           <Button className="bg-white blue-dark mr1 f6 pv2">
             <FormattedMessage {...messages.clear} />

frontend/src/components/projects/projectNav.js

@@ -115,7 +115,7 @@ export const ProjectNav = (props) => {
   // onSelectedItemChange={(changes) => console.log(changes)}
   return (
     /* mb1 mb2-ns (removed for map, but now small gap for more-filters) */
-    <header className="bt bb b--tan w-100 ">
+    <header id="explore-nav" className="bt bb b--tan w-100 ">
       <div className="mt2 mb1 ph3 dib lh-copy w-100 cf">
         <div className="w-80-l w-90-m w-100 fl dib">
           <div className="dib">
@@ -125,6 +125,7 @@ export const ProjectNav = (props) => {
             <ProjectsActionFilter setQuery={setQuery} fullProjectsQuery={fullProjectsQuery} />
             <Link
               to={filterRouteToggled}
+              id="more-filter-id"
               className={`dn mr3 dib-l lh-title f6 ${linkCombo} ${moreFiltersCurrentActiveStyle} blue-dark`}
             >
               <FormattedMessage {...messages.moreFilters} />

frontend/src/components/projects/projectsMap.js

@@ -1,12 +1,12 @@
 import { createRef, useLayoutEffect, useState, useCallback } from 'react';
-import { useSelector } from 'react-redux';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
 
 import WebglUnsupported from '../webglUnsupported';
 import { MAPBOX_TOKEN, MAP_STYLE, MAPBOX_RTL_PLUGIN_URL } from '../../config';
 import mapMarker from '../../assets/img/mapMarker.png';
+import useMapboxSupportedLanguage from '../../hooks/UseMapboxSupportedLanguage';
 
 let markerIcon = new Image(17, 20);
 markerIcon.src = mapMarker;
@@ -97,8 +97,8 @@ export const mapboxLayerDefn = (map, mapResults, clickOnProjectID, disablePoiCli
 
 export const ProjectsMap = ({ mapResults, fullProjectsQuery, setQuery, className }) => {
   const mapRef = createRef();
-  const locale = useSelector((state) => state.preferences['locale']);
   const [map, setMapObj] = useState(null);
+  const mapboxSupportedLanguage = useMapboxSupportedLanguage();
 
   const clickOnProjectID = useCallback(
     (projectIdSearch) =>
@@ -131,7 +131,7 @@ export const ProjectsMap = ({ mapResults, fullProjectsQuery, setQuery, className
           attributionControl: false,
         })
           .addControl(new mapboxgl.AttributionControl({ compact: false }))
-          .addControl(new MapboxLanguage({ defaultLanguage: locale.substr(0, 2) || 'en' })),
+          .addControl(new MapboxLanguage({ defaultLanguage: mapboxSupportedLanguage })),
       );
 
     return () => {

frontend/src/components/taskSelection/map.js

@@ -11,6 +11,7 @@ import messages from './messages';
 import { MAPBOX_TOKEN, TASK_COLOURS, MAP_STYLE, MAPBOX_RTL_PLUGIN_URL } from '../../config';
 import lock from '../../assets/img/lock.png';
 import redlock from '../../assets/img/red-lock.png';
+import useMapboxSupportedLanguage from '../../hooks/UseMapboxSupportedLanguage';
 
 let lockIcon = new Image(17, 20);
 lockIcon.src = lock;
@@ -42,7 +43,7 @@ export const TasksMap = ({
 }) => {
   const intl = useIntl();
   const mapRef = createRef();
-  const locale = useSelector((state) => state.preferences['locale']);
+  const mapboxSupportedLanguage = useMapboxSupportedLanguage();
   const authDetails = useSelector((state) => state.auth.userDetails);
   const [hoveredTaskId, setHoveredTaskId] = useState(null);
 
@@ -62,7 +63,7 @@ export const TasksMap = ({
           attributionControl: false,
         })
           .addControl(new mapboxgl.AttributionControl({ compact: false }))
-          .addControl(new MapboxLanguage({ defaultLanguage: locale.substr(0, 2) || 'en' })),
+          .addControl(new MapboxLanguage({ defaultLanguage: mapboxSupportedLanguage })),
       );
 
     return () => {

frontend/src/components/userDetail/countriesMapped.js

@@ -1,5 +1,4 @@
 import { createRef, useLayoutEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import mapboxgl from 'mapbox-gl';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
@@ -10,6 +9,7 @@ import { MAPBOX_TOKEN, MAP_STYLE, MAPBOX_RTL_PLUGIN_URL } from '../../config';
 import { mapboxLayerDefn } from '../projects/projectsMap';
 import { BarListChart } from './barListChart';
 import WebglUnsupported from '../webglUnsupported';
+import useMapboxSupportedLanguage from '../../hooks/UseMapboxSupportedLanguage';
 
 mapboxgl.accessToken = MAPBOX_TOKEN;
 try {
@@ -20,7 +20,7 @@ try {
 
 const UserCountriesMap = ({ projects }) => {
   const navigate = useNavigate();
-  const locale = useSelector((state) => state.preferences['locale']);
+  const mapboxSupportedLanguage = useMapboxSupportedLanguage();
 
   const [map, setMap] = useState(null);
   const mapRef = createRef();
@@ -36,7 +36,7 @@ const UserCountriesMap = ({ projects }) => {
           attributionControl: false,
         })
           .addControl(new mapboxgl.AttributionControl({ compact: false }))
-          .addControl(new MapboxLanguage({ defaultLanguage: locale.substr(0, 2) || 'en' })),
+          .addControl(new MapboxLanguage({ defaultLanguage: mapboxSupportedLanguage })),
       );
 
     return () => {

frontend/src/hooks/UseMapboxSupportedLanguage.js

@@ -0,0 +1,23 @@
+import { useSelector } from 'react-redux';
+import MapboxLanguage from '@mapbox/mapbox-gl-language';
+
+const { supportedLanguages } = new MapboxLanguage();
+
+const defaultLocale = 'en';
+
+/**
+ * A React custom hook to check if the locale language is supported by Mapbox GL or not
+ *
+ * Returns `en` if the locale is not supported, else returns preferred locale
+ *
+ */
+export default function useMapboxSupportedLanguage() {
+  const locale = useSelector((state) => state.preferences.locale);
+
+  if (!locale) return defaultLocale;
+
+  const language = locale.substr(0, 2);
+  if (supportedLanguages.includes(language)) return language;
+
+  return defaultLocale;
+}

frontend/src/utils/countries.js

@@ -2,7 +2,7 @@ import { getCountries, getCountry, getSupportedLangs } from '@hotosm/iso-countri
 
 export function translateCountry(name, locale) {
   const code = getCountryCode(name);
-  if (code && isLangSupported(locale)) return getCountry(locale.split('-')[0], code);
+  if (code && isLangSupported(locale)) return getCountry(locale.split(/[-_]/)[0], code);
   return name;
 }
 
@@ -20,13 +20,14 @@ export function getCountryCode(name) {
 }
 
 export function isLangSupported(code) {
-  if (getSupportedLangs().includes(code.split('-')[0])) return true;
+  // split with `-` or `_` to get the language initials
+  if (getSupportedLangs().includes(code.split(/[-_]/)[0])) return true;
   return false;
 }
 
 export function formatCountryList(locale) {
   if (locale && isLangSupported(locale)) {
-    const countries = getCountries(locale.split('-')[0]);
+    const countries = getCountries(locale.split(/[-_]/)[0]);
     return Object.keys(countries).map((key) => ({ label: countries[key], value: key }));
   }
 }

frontend/src/utils/internationalization.js

@@ -24,7 +24,7 @@ const supportedLocales = [
   { value: 'ko', label: '한국어' },
   // { value: 'mg', label: 'Malagasy' },
   // { value: 'ml', label: 'Malayalam' },
-  { value: 'nl', label: 'Nederlands' },
+  { value: 'nl_NL', label: 'Nederlands' },
   { value: 'pt', label: 'Português' },
   { value: 'pt-BR', label: 'Português (Brasil)' },
   // { value: 'ru', label: 'Русский язык' },

frontend/src/utils/tests/internationalization.test.js

@@ -31,7 +31,7 @@ describe('getSupportedLocale', () => {
   it('returns a generic supported locale if the variation is not supported', () => {
     expect(getSupportedLocale('en-gb')).toEqual({ label: 'English', value: 'en' });
     expect(getSupportedLocale('es-AR')).toEqual({ label: 'Español', value: 'es' });
-    expect(getSupportedLocale('nl-NL')).toEqual({ label: 'Nederlands', value: 'nl' });
+    expect(getSupportedLocale('nl_NL')).toEqual({ label: 'Nederlands', value: 'nl_NL' });
   });
   it('returns the default locale if the code is not supported and does not have a variation', () => {
     expect(getSupportedLocale('xt')).toEqual({ label: 'English', value: 'en' });