From 036167b5ef650fe4367f3d4bb34aab8d7b591f44 Mon Sep 17 00:00:00 2001
From: Muhammad Talha Baig <57634631+mtalhabaig3@users.noreply.github.com>
Date: Wed, 21 Jun 2023 17:20:31 +0500
Subject: [PATCH 01/30] made the main page static and enabled scrolling in the
 filters component

---
 frontend/src/views/project.css |  3 +++
 frontend/src/views/project.js  | 26 +++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/views/project.css

diff --git a/frontend/src/views/project.css b/frontend/src/views/project.css
new file mode 100644
index 0000000000..9edce542c6
--- /dev/null
+++ b/frontend/src/views/project.css
@@ -0,0 +1,3 @@
+.scrollable-container::-webkit-scrollbar {
+  width: 0;
+}
diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
index 321bbd8826..889fd9426c 100644
--- a/frontend/src/views/project.js
+++ b/frontend/src/views/project.js
@@ -21,6 +21,7 @@ import { useFetch } from '../hooks/UseFetch';
 import { useSetTitleTag } from '../hooks/UseMetaTags';
 import { NotFound } from './notFound';
 import { ProjectDetailPlaceholder } from '../components/projectDetail/projectDetailPlaceholder';
+import './project.css';
 
 const ProjectCreate = React.lazy(() => import('../components/projectCreate/index'));
 
@@ -152,6 +153,18 @@ export const MoreFilters = () => {
   const navigate = useNavigate();
   const [fullProjectsQuery] = useExploreProjectsQueryParams();
 
+  useEffect(() => {
+    // Disable scrolling outside the component when it appears
+    document.body.style.overflow = 'hidden';
+    document.documentElement.style.overflow = 'hidden';
+
+    return () => {
+      // Restore scrolling when the component is closed
+      document.body.style.overflow = 'auto';
+      document.documentElement.style.overflow = 'auto';
+    };
+  }, []);
+
   const currentUrl = `/explore${
     stringify(fullProjectsQuery) ? ['?', stringify(fullProjectsQuery)].join('') : ''
   }`;
@@ -159,7 +172,18 @@ export const MoreFilters = () => {
   return (
     <>
       <div className="absolute left-0 z-4 mt1 w-40-l w-100 h-100 bg-white h4 ph1 ph5-l">
-        <MoreFiltersForm currentUrl={currentUrl} />
+        <div
+          className="scrollable-container"
+          style={{
+            height: '100%',
+            overflow: 'auto',
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
+          }}
+        >
+          <MoreFiltersForm currentUrl={currentUrl} />
+          <MoreFiltersForm currentUrl={currentUrl} />
+        </div>
       </div>
       <div
         onClick={() => navigate(currentUrl)}

From 88441eaf18bbf42ee52194bf55580de36a059a34 Mon Sep 17 00:00:00 2001
From: Muhammad Talha Baig <57634631+mtalhabaig3@users.noreply.github.com>
Date: Thu, 22 Jun 2023 20:54:18 +0500
Subject: [PATCH 02/30] Solved the height issue of filters menu

---
 frontend/src/assets/styles/_extra.scss        |  4 ++
 frontend/src/components/header/index.js       |  2 +-
 .../src/components/projects/projectNav.js     |  2 +-
 frontend/src/views/project.css                |  3 --
 frontend/src/views/project.js                 | 39 +++++++++++++------
 5 files changed, 33 insertions(+), 17 deletions(-)
 delete mode 100644 frontend/src/views/project.css

diff --git a/frontend/src/assets/styles/_extra.scss b/frontend/src/assets/styles/_extra.scss
index 49359a7bc4..c9964e789b 100644
--- a/frontend/src/assets/styles/_extra.scss
+++ b/frontend/src/assets/styles/_extra.scss
@@ -616,3 +616,7 @@ a[href="https://www.mapbox.com/map-feedback/"]
 .link:focus {
   outline: revert;
 }
+
+.scrollable-container::-webkit-scrollbar {
+  width: 0;
+}
diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js
index 65ab1872f5..49e837a300 100644
--- a/frontend/src/components/header/index.js
+++ b/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 && (
diff --git a/frontend/src/components/projects/projectNav.js b/frontend/src/components/projects/projectNav.js
index 73722c01d2..0a8043f336 100644
--- a/frontend/src/components/projects/projectNav.js
+++ b/frontend/src/components/projects/projectNav.js
@@ -104,7 +104,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">
diff --git a/frontend/src/views/project.css b/frontend/src/views/project.css
deleted file mode 100644
index 9edce542c6..0000000000
--- a/frontend/src/views/project.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.scrollable-container::-webkit-scrollbar {
-  width: 0;
-}
diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
index 889fd9426c..11bd91a850 100644
--- a/frontend/src/views/project.js
+++ b/frontend/src/views/project.js
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import ReactPlaceholder from 'react-placeholder';
 import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';
@@ -21,7 +21,6 @@ import { useFetch } from '../hooks/UseFetch';
 import { useSetTitleTag } from '../hooks/UseMetaTags';
 import { NotFound } from './notFound';
 import { ProjectDetailPlaceholder } from '../components/projectDetail/projectDetailPlaceholder';
-import './project.css';
 
 const ProjectCreate = React.lazy(() => import('../components/projectCreate/index'));
 
@@ -152,6 +151,7 @@ export const ProjectsPageIndex = (props) => {
 export const MoreFilters = () => {
   const navigate = useNavigate();
   const [fullProjectsQuery] = useExploreProjectsQueryParams();
+  const [componentHeight, setComponentHeight] = useState(`${window.innerHeight}px`);
 
   useEffect(() => {
     // Disable scrolling outside the component when it appears
@@ -165,22 +165,37 @@ export const MoreFilters = () => {
     };
   }, []);
 
+  useEffect(() => {
+    const contentHeight =
+      document.getElementById('explore-nav').offsetHeight +
+      document.getElementById('top-header').offsetHeight;
+
+    const handleResize = () => {
+      setComponentHeight(window.innerHeight - contentHeight);
+    };
+
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  });
+
+  console.log(componentHeight);
+
   const currentUrl = `/explore${
     stringify(fullProjectsQuery) ? ['?', stringify(fullProjectsQuery)].join('') : ''
   }`;
 
   return (
     <>
-      <div className="absolute left-0 z-4 mt1 w-40-l w-100 h-100 bg-white h4 ph1 ph5-l">
-        <div
-          className="scrollable-container"
-          style={{
-            height: '100%',
-            overflow: 'auto',
-            scrollbarWidth: 'none',
-            msOverflowStyle: 'none',
-          }}
-        >
+      <div
+        className="absolute left-0 z-4 mt1 w-40-l w-100 bg-white h4 ph1 ph5-l"
+        style={{ height: `${componentHeight}px` }}
+      >
+        <div className="scrollable-container h-100 overflow-auto">
           <MoreFiltersForm currentUrl={currentUrl} />
           <MoreFiltersForm currentUrl={currentUrl} />
         </div>

From fde0541f40419921df9770e87b53634db1e60912 Mon Sep 17 00:00:00 2001
From: Muhammad Talha Baig <57634631+mtalhabaig3@users.noreply.github.com>
Date: Thu, 22 Jun 2023 21:10:10 +0500
Subject: [PATCH 03/30] minor changes

---
 frontend/src/views/project.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
index 11bd91a850..e0b84223ce 100644
--- a/frontend/src/views/project.js
+++ b/frontend/src/views/project.js
@@ -183,8 +183,6 @@ export const MoreFilters = () => {
     };
   });
 
-  console.log(componentHeight);
-
   const currentUrl = `/explore${
     stringify(fullProjectsQuery) ? ['?', stringify(fullProjectsQuery)].join('') : ''
   }`;
@@ -197,7 +195,6 @@ export const MoreFilters = () => {
       >
         <div className="scrollable-container h-100 overflow-auto">
           <MoreFiltersForm currentUrl={currentUrl} />
-          <MoreFiltersForm currentUrl={currentUrl} />
         </div>
       </div>
       <div

From 7625f96f9c7bf03b095f6adf2f78f20662b6a9a0 Mon Sep 17 00:00:00 2001
From: Muhammad Talha Baig <57634631+mtalhabaig3@users.noreply.github.com>
Date: Fri, 23 Jun 2023 17:16:15 +0500
Subject: [PATCH 04/30] added dependency array

---
 frontend/src/views/project.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
index e0b84223ce..fba331da61 100644
--- a/frontend/src/views/project.js
+++ b/frontend/src/views/project.js
@@ -181,7 +181,7 @@ export const MoreFilters = () => {
     return () => {
       window.removeEventListener('resize', handleResize);
     };
-  });
+  }, []);
 
   const currentUrl = `/explore${
     stringify(fullProjectsQuery) ? ['?', stringify(fullProjectsQuery)].join('') : ''

From f211ea005a871d2e29ddf472c2154a0ca03989f8 Mon Sep 17 00:00:00 2001
From: Muhammad Talha Baig <57634631+mtalhabaig3@users.noreply.github.com>
Date: Wed, 28 Jun 2023 21:13:47 +0500
Subject: [PATCH 05/30] remove the css for hiding scroll bar

---
 frontend/src/assets/styles/_extra.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/frontend/src/assets/styles/_extra.scss b/frontend/src/assets/styles/_extra.scss
index c9964e789b..49359a7bc4 100644
--- a/frontend/src/assets/styles/_extra.scss
+++ b/frontend/src/assets/styles/_extra.scss
@@ -616,7 +616,3 @@ a[href="https://www.mapbox.com/map-feedback/"]
 .link:focus {
   outline: revert;
 }
-
-.scrollable-container::-webkit-scrollbar {
-  width: 0;
-}

From 41d270cbaf88c24e61cb0cbc2678a80b2220db92 Mon Sep 17 00:00:00 2001
From: Muhammad Talha Baig <57634631+mtalhabaig3@users.noreply.github.com>
Date: Mon, 10 Jul 2023 20:58:08 +0500
Subject: [PATCH 06/30] Made dropdowns fixed and hide scroll bar

---
 frontend/src/components/projects/filterSelectFields.js | 1 +
 frontend/src/views/project.js                          | 5 +----
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/projects/filterSelectFields.js b/frontend/src/components/projects/filterSelectFields.js
index bbc2fb9b50..3da8cde147 100644
--- a/frontend/src/components/projects/filterSelectFields.js
+++ b/frontend/src/components/projects/filterSelectFields.js
@@ -201,6 +201,7 @@ export const TagFilterPickerAutocomplete = ({
 
   return (
     <Select
+      menuPosition={'fixed'}
       isLoading={tagOptions.isLoading}
       onChange={handleTagChange}
       classNamePrefix="react-select"
diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
index fba331da61..f1e9b8413e 100644
--- a/frontend/src/views/project.js
+++ b/frontend/src/views/project.js
@@ -156,12 +156,9 @@ export const MoreFilters = () => {
   useEffect(() => {
     // Disable scrolling outside the component when it appears
     document.body.style.overflow = 'hidden';
-    document.documentElement.style.overflow = 'hidden';
-
     return () => {
       // Restore scrolling when the component is closed
       document.body.style.overflow = 'auto';
-      document.documentElement.style.overflow = 'auto';
     };
   }, []);
 
@@ -193,7 +190,7 @@ export const MoreFilters = () => {
         className="absolute left-0 z-4 mt1 w-40-l w-100 bg-white h4 ph1 ph5-l"
         style={{ height: `${componentHeight}px` }}
       >
-        <div className="scrollable-container h-100 overflow-auto">
+        <div className="scrollable-container h-100  overflow-x-hidden overflow-y-auto">
           <MoreFiltersForm currentUrl={currentUrl} />
         </div>
       </div>

From e2b332a90f1ae77b51b513baa53d9a63c74170dc Mon Sep 17 00:00:00 2001
From: Muhammad Talha Baig <57634631+mtalhabaig3@users.noreply.github.com>
Date: Tue, 11 Jul 2023 15:40:40 +0500
Subject: [PATCH 07/30] removed comments

---
 frontend/src/views/project.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
index f1e9b8413e..6415adc1ae 100644
--- a/frontend/src/views/project.js
+++ b/frontend/src/views/project.js
@@ -154,10 +154,8 @@ export const MoreFilters = () => {
   const [componentHeight, setComponentHeight] = useState(`${window.innerHeight}px`);
 
   useEffect(() => {
-    // Disable scrolling outside the component when it appears
     document.body.style.overflow = 'hidden';
     return () => {
-      // Restore scrolling when the component is closed
       document.body.style.overflow = 'auto';
     };
   }, []);

From 86112396abe1475a5d04ee363a65b79b8805ab61 Mon Sep 17 00:00:00 2001
From: Muhammad Talha Baig <57634631+mtalhabaig3@users.noreply.github.com>
Date: Thu, 17 Aug 2023 21:56:55 +0500
Subject: [PATCH 08/30] solved the front end test error

---
 frontend/src/views/tests/project.test.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/frontend/src/views/tests/project.test.js b/frontend/src/views/tests/project.test.js
index 74b168d3e8..d3e7cfe7a7 100644
--- a/frontend/src/views/tests/project.test.js
+++ b/frontend/src/views/tests/project.test.js
@@ -98,7 +98,25 @@ describe('UserProjectsPage Component', () => {
   });
 });
 
+// jest.spyOn(document, 'getElementById').mockImplementation((id) => {
+//   const mockElements = {
+//     'explore-nav': { offsetHeight: 100 },
+//     'top-header': { offsetHeight: 50 },
+//   };
+//   return mockElements[id];
+// });
+
 test('More Filters should close the more filters container when clicked outside the container', async () => {
+  //   const exploreNav = document.createElement('div');
+  //   exploreNav.id = 'explore-nav';
+  //   document.body.appendChild(exploreNav);
+
+  //   const topHeader = document.createElement('div');
+  //   topHeader.id = 'top-header';
+  //   document.body.appendChild(topHeader);
+
+  jest.spyOn(document, 'getElementById').mockReturnValue({ offsetHeight: 100 });
+
   const { user, router } = createComponentWithMemoryRouter(
     <QueryParamProvider adapter={ReactRouter6Adapter}>
       <ReduxIntlProviders>

From 5dc659c7a57cb36c661ebf47135c8999ab1c6bae Mon Sep 17 00:00:00 2001
From: Muhammad Talha Baig <57634631+mtalhabaig3@users.noreply.github.com>
Date: Wed, 23 Aug 2023 16:28:10 +0500
Subject: [PATCH 09/30] removed comments

---
 frontend/src/views/tests/project.test.js | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/frontend/src/views/tests/project.test.js b/frontend/src/views/tests/project.test.js
index d3e7cfe7a7..cd40183b31 100644
--- a/frontend/src/views/tests/project.test.js
+++ b/frontend/src/views/tests/project.test.js
@@ -98,23 +98,7 @@ describe('UserProjectsPage Component', () => {
   });
 });
 
-// jest.spyOn(document, 'getElementById').mockImplementation((id) => {
-//   const mockElements = {
-//     'explore-nav': { offsetHeight: 100 },
-//     'top-header': { offsetHeight: 50 },
-//   };
-//   return mockElements[id];
-// });
-
 test('More Filters should close the more filters container when clicked outside the container', async () => {
-  //   const exploreNav = document.createElement('div');
-  //   exploreNav.id = 'explore-nav';
-  //   document.body.appendChild(exploreNav);
-
-  //   const topHeader = document.createElement('div');
-  //   topHeader.id = 'top-header';
-  //   document.body.appendChild(topHeader);
-
   jest.spyOn(document, 'getElementById').mockReturnValue({ offsetHeight: 100 });
 
   const { user, router } = createComponentWithMemoryRouter(

From 67eee809eae079b2c0db9eaa7891f74578a7e36f Mon Sep 17 00:00:00 2001
From: spnayan <rajnawa93@gmail.com>
Date: Wed, 10 Apr 2024 19:08:47 +0545
Subject: [PATCH 10/30] Prevent api call before filter apply in `Explore
 Projects` page

- Related to #6328
---
 frontend/src/api/projects.js  |  3 ++-
 frontend/src/views/project.js | 10 +++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/api/projects.js b/frontend/src/api/projects.js
index 663ca61fda..949b3565e4 100644
--- a/frontend/src/api/projects.js
+++ b/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,
   });
 };
 
diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
index d50c61b87c..edc87472e0 100644
--- a/frontend/src/views/project.js
+++ b/frontend/src/views/project.js
@@ -29,12 +29,20 @@ export const CreateProject = () => {
 
 export const ProjectsPage = () => {
   useSetTitleTag('Explore projects');
+  const { pathname } = useLocation();
   const action = useSelector((state) => state.preferences['action']);
   const [fullProjectsQuery, setProjectQuery] = useExploreProjectsQueryParams();
   const isMapShown = useSelector((state) => state.preferences['mapShown']);
   const searchResultWidth = isMapShown ? 'two-column' : 'one-column';
 
-  const { data: projects, status, refetch } = useProjectsQuery(fullProjectsQuery, action);
+  const {
+    data: projects,
+    status,
+    refetch,
+  } = useProjectsQuery(fullProjectsQuery, action, {
+    // prevent api call until the filters are applied
+    enabled: !pathname.includes('/explore/filters/'),
+  });
 
   return (
     <div className="pull-center">

From 85dd23ab20bc5a75a5ed85cf73df0033eae138ce Mon Sep 17 00:00:00 2001
From: spnayan <rajnawa93@gmail.com>
Date: Mon, 15 Apr 2024 22:16:52 +0545
Subject: [PATCH 11/30] Fix z-index issue between select dropdown and toggle
 button in more filter popover

---
 frontend/src/components/projects/filterSelectFields.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/projects/filterSelectFields.js b/frontend/src/components/projects/filterSelectFields.js
index 3da8cde147..bbc2fb9b50 100644
--- a/frontend/src/components/projects/filterSelectFields.js
+++ b/frontend/src/components/projects/filterSelectFields.js
@@ -201,7 +201,6 @@ export const TagFilterPickerAutocomplete = ({
 
   return (
     <Select
-      menuPosition={'fixed'}
       isLoading={tagOptions.isLoading}
       onChange={handleTagChange}
       classNamePrefix="react-select"

From 23099949c68f86b73378ced2f39538e179e129b3 Mon Sep 17 00:00:00 2001
From: spnayan <rajnawa93@gmail.com>
Date: Mon, 15 Apr 2024 22:34:11 +0545
Subject: [PATCH 12/30] Increase padding in more filters footer button in more
 filter

---
 frontend/src/components/projects/moreFiltersForm.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/projects/moreFiltersForm.js b/frontend/src/components/projects/moreFiltersForm.js
index 0f54d6494d..4f991ceeab 100644
--- a/frontend/src/components/projects/moreFiltersForm.js
+++ b/frontend/src/components/projects/moreFiltersForm.js
@@ -116,7 +116,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} />

From d6e009a6975e555cbf0d2476e60d0f756168159d Mon Sep 17 00:00:00 2001
From: spnayan <rajnawa93@gmail.com>
Date: Mon, 15 Apr 2024 22:48:49 +0545
Subject: [PATCH 13/30] Change More Filter to popover layout in laptop screen

---
 .../src/components/projects/projectNav.js     |  5 ++-
 frontend/src/views/project.js                 | 44 ++++++++++++++++---
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/projects/projectNav.js b/frontend/src/components/projects/projectNav.js
index 7c813ea75a..599c34b844 100644
--- a/frontend/src/components/projects/projectNav.js
+++ b/frontend/src/components/projects/projectNav.js
@@ -90,12 +90,12 @@ export const ProjectNav = (props) => {
     setQuery(
       {
         ...fullProjectsQuery,
-        omitMapResults:!isMapShown
+        omitMapResults: !isMapShown,
       },
       'pushIn',
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  },[isMapShown])
+  }, [isMapShown]);
   const linkCombo = 'link ph3 f6 pv2 ba b--tan br1 ph3 fw5';
 
   const moreFiltersAnyActive =
@@ -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} />
diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
index edc87472e0..2313fda33a 100644
--- a/frontend/src/views/project.js
+++ b/frontend/src/views/project.js
@@ -147,9 +147,11 @@ export const ProjectsPageIndex = (props) => {
 };
 
 export const MoreFilters = () => {
+  const [position, setPosition] = useState({ top: 0, left: 0, height: 0, width: 0 });
   const navigate = useNavigate();
   const [fullProjectsQuery] = useExploreProjectsQueryParams();
   const [componentHeight, setComponentHeight] = useState(`${window.innerHeight}px`);
+  const filterElement = document?.getElementById('more-filter-id');
 
   useEffect(() => {
     document.body.style.overflow = 'hidden';
@@ -158,6 +160,13 @@ export const MoreFilters = () => {
     };
   }, []);
 
+  // calculate position of more filter button for layout
+  useLayoutEffect(() => {
+    if (!filterElement) return;
+    const { top, left, height, width } = filterElement.getBoundingClientRect();
+    setPosition({ top, left, height, width });
+  }, [filterElement, width]);
+
   useEffect(() => {
     const contentHeight =
       document.getElementById('explore-nav').offsetHeight +
@@ -183,15 +192,40 @@ export const MoreFilters = () => {
   return (
     <>
       <div
-        className="absolute left-0 z-4 mt1 w-40-l w-100 bg-white h4 ph1 ph5-l"
-        style={{ height: `${componentHeight}px` }}
+        ref={moreFilterRef}
+        className={`absolute z-4 bg-white ${
+          // compare screen size for two different design in small screen and large screen of filter section
+          isSmallScreen ? ' left-0  mt1 w-40-l w-100  h4 ph1 ph5-l' : 'pa2 ba b--light-gray'
+        }`}
+        style={
+          isSmallScreen
+            ? { height: `${componentHeight}px` }
+            : {
+                // 250 is half the width of filter component to place filter exactly center of more-filter button
+                left: position.left - 250 + position.width / 2,
+                top: position.top + position.height + 10,
+                width: '31.25em',
+                boxShadow: '2px 1px 23px -1px rgba(143,130,130,0.75)',
+              }
+        }
       >
-        <div className="scrollable-container h-100  overflow-x-hidden overflow-y-auto">
+        <div
+          className={`${
+            isSmallScreen ? 'scrollable-container h-100  overflow-x-hidden overflow-y-auto' : ''
+          }`}
+        >
           <MoreFiltersForm currentUrl={currentUrl} />
         </div>
       </div>
-      <div
-        onClick={() => navigate(currentUrl)}
+      {!isSmallScreen && (
+        <div
+          style={{
+            left: `${position.left + position.width / 2}px`,
+            top: position.top + position.height + 2,
+          }}
+          className={`absolute w1 h1 bg-white bl bt b--grey-light rotate-45 z-5`}
+        />
+      )}
         role="button"
         className="absolute right-0 z-4 br w-60-l w-0 h-100 bg-blue-dark o-70 h6"
       />

From 39744bbc6c600331f1138f0eeb718eeecb390d1d Mon Sep 17 00:00:00 2001
From: spnayan <rajnawa93@gmail.com>
Date: Mon, 15 Apr 2024 22:50:41 +0545
Subject: [PATCH 14/30] Add overlay on More Filter popover

---
 frontend/src/views/project.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
index 2313fda33a..3eaf4002d5 100644
--- a/frontend/src/views/project.js
+++ b/frontend/src/views/project.js
@@ -226,8 +226,10 @@ export const MoreFilters = () => {
           className={`absolute w1 h1 bg-white bl bt b--grey-light rotate-45 z-5`}
         />
       )}
+
+      <div
         role="button"
-        className="absolute right-0 z-4 br w-60-l w-0 h-100 bg-blue-dark o-70 h6"
+        className="absolute right-0 z-2 br w-100-l w-0 h-100 bg-blue-dark o-70 h6"
       />
     </>
   );

From aa3aea49fdf3eaa4caad3ff21d2f678e3c39673e Mon Sep 17 00:00:00 2001
From: spnayan <rajnawa93@gmail.com>
Date: Mon, 15 Apr 2024 22:53:12 +0545
Subject: [PATCH 15/30] Close More Filter popover on outside click

---
 frontend/src/views/project.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
index 3eaf4002d5..c5f143477c 100644
--- a/frontend/src/views/project.js
+++ b/frontend/src/views/project.js
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState, useLayoutEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import ReactPlaceholder from 'react-placeholder';
 import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';
@@ -16,6 +16,10 @@ import { useSetTitleTag } from '../hooks/UseMetaTags';
 import { NotFound } from './notFound';
 import { ProjectDetailPlaceholder } from '../components/projectDetail/projectDetailPlaceholder';
 import { useProjectsQuery, useProjectQuery } from '../api/projects';
+import { useWindowSize } from '../hooks/UseWindowSize';
+import { useOnClickOutside } from '../hooks/UseOnClickOutside';
+
+const smallScreenSize = 960;
 
 const ProjectCreate = React.lazy(() => import('../components/projectCreate/index'));
 
@@ -152,6 +156,7 @@ export const MoreFilters = () => {
   const [fullProjectsQuery] = useExploreProjectsQueryParams();
   const [componentHeight, setComponentHeight] = useState(`${window.innerHeight}px`);
   const filterElement = document?.getElementById('more-filter-id');
+  const [width] = useWindowSize();
 
   useEffect(() => {
     document.body.style.overflow = 'hidden';
@@ -188,6 +193,14 @@ export const MoreFilters = () => {
   const currentUrl = `/explore${
     stringify(fullProjectsQuery) ? ['?', stringify(fullProjectsQuery)].join('') : ''
   }`;
+  const moreFilterRef = useRef(null);
+
+  useOnClickOutside(moreFilterRef, (e) => {
+    if (e.target.id === 'more-filter-id') return;
+    navigate(currentUrl);
+  });
+
+  const isSmallScreen = width < smallScreenSize;
 
   return (
     <>

From 982528ba46de92a3e9620e7af218516e0e04dd11 Mon Sep 17 00:00:00 2001
From: spnayan <rajnawa93@gmail.com>
Date: Tue, 16 Apr 2024 23:11:37 +0545
Subject: [PATCH 16/30] Fix test case for More Filters

---
 frontend/src/views/tests/project.test.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/tests/project.test.js b/frontend/src/views/tests/project.test.js
index 275d9f3a50..eca33d4084 100644
--- a/frontend/src/views/tests/project.test.js
+++ b/frontend/src/views/tests/project.test.js
@@ -113,7 +113,15 @@ describe('UserProjectsPage Component', () => {
 });
 
 test('More Filters should close the more filters container when clicked outside the container', async () => {
-  jest.spyOn(document, 'getElementById').mockReturnValue({ offsetHeight: 100 });
+  jest.spyOn(document, 'getElementById').mockReturnValue({
+    offsetHeight: 100,
+    getBoundingClientRect: () => ({
+      top: 0,
+      left: 0,
+      height: 100,
+      width: 100,
+    }),
+  });
 
   const { user, router } = createComponentWithMemoryRouter(
     <QueryParamProvider adapter={ReactRouter6Adapter}>

From c733d674aa00acbeb7157e3ead6669cc6dd306a2 Mon Sep 17 00:00:00 2001
From: spnayan <rajnawa93@gmail.com>
Date: Mon, 22 Apr 2024 11:48:16 +0545
Subject: [PATCH 17/30] Prevent More Filter popover close on clearing selected
 filter

---
 frontend/src/views/project.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
index c5f143477c..e8c4312280 100644
--- a/frontend/src/views/project.js
+++ b/frontend/src/views/project.js
@@ -21,6 +21,13 @@ import { useOnClickOutside } from '../hooks/UseOnClickOutside';
 
 const smallScreenSize = 960;
 
+// returns true if the element or one of its parents has the classname
+function hasSomeParentClass(element, classname) {
+  if (typeof element.className === 'string' && element.className.split(' ').indexOf(classname) >= 0)
+    return true;
+  return element.parentNode && hasSomeParentClass(element.parentNode, classname);
+}
+
 const ProjectCreate = React.lazy(() => import('../components/projectCreate/index'));
 
 export const CreateProject = () => {
@@ -46,6 +53,7 @@ export const ProjectsPage = () => {
   } = useProjectsQuery(fullProjectsQuery, action, {
     // prevent api call until the filters are applied
     enabled: !pathname.includes('/explore/filters/'),
+    cacheTime: 0,
   });
 
   return (
@@ -196,7 +204,13 @@ export const MoreFilters = () => {
   const moreFilterRef = useRef(null);
 
   useOnClickOutside(moreFilterRef, (e) => {
-    if (e.target.id === 'more-filter-id') return;
+    const clickedElement = e.target;
+    const isClearSelectButton = hasSomeParentClass(clickedElement, 'react-select__clear-indicator');
+    if (
+      e.target.id === 'more-filter-id' ||
+      isClearSelectButton //prevent popup close on clicking clear button of select component
+    )
+      return;
     navigate(currentUrl);
   });
 

From 16e82bc79a0603c4e485240e8d43dfbcfe6df24f Mon Sep 17 00:00:00 2001
From: spnayan <rajnawa93@gmail.com>
Date: Mon, 29 Apr 2024 11:45:52 +0545
Subject: [PATCH 18/30] Fix project page not scrolling on More Filter popover

---
 frontend/src/views/project.js | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
index e8c4312280..5fe25a18bc 100644
--- a/frontend/src/views/project.js
+++ b/frontend/src/views/project.js
@@ -57,7 +57,7 @@ export const ProjectsPage = () => {
   });
 
   return (
-    <div className="pull-center">
+    <div className="pull-center" id="projects-container">
       <ProjectNav>
         <Outlet />
       </ProjectNav>
@@ -160,25 +160,23 @@ export const ProjectsPageIndex = (props) => {
 
 export const MoreFilters = () => {
   const [position, setPosition] = useState({ top: 0, left: 0, height: 0, width: 0 });
+  const [projectContainerHeight, setProjectContainerHeight] = useState({ height: 0 });
   const navigate = useNavigate();
   const [fullProjectsQuery] = useExploreProjectsQueryParams();
   const [componentHeight, setComponentHeight] = useState(`${window.innerHeight}px`);
   const filterElement = document?.getElementById('more-filter-id');
+  const projectContainerElement = document?.getElementById('projects-container');
   const [width] = useWindowSize();
 
-  useEffect(() => {
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.body.style.overflow = 'auto';
-    };
-  }, []);
-
   // calculate position of more filter button for layout
   useLayoutEffect(() => {
-    if (!filterElement) return;
+    if (!filterElement || !projectContainerElement) return;
+
     const { top, left, height, width } = filterElement.getBoundingClientRect();
+    const { height: containerHeight } = projectContainerElement.getBoundingClientRect();
+    setProjectContainerHeight(containerHeight);
     setPosition({ top, left, height, width });
-  }, [filterElement, width]);
+  }, [filterElement, width, projectContainerElement]);
 
   useEffect(() => {
     const contentHeight =
@@ -256,7 +254,10 @@ export const MoreFilters = () => {
 
       <div
         role="button"
-        className="absolute right-0 z-2 br w-100-l w-0 h-100 bg-blue-dark o-70 h6"
+        className="absolute right-0 z-2 br w-100-l w-0 bg-blue-dark o-70"
+        style={{
+          height: `${projectContainerHeight}px`,
+        }}
       />
     </>
   );

From a8bce2738cb29cd575757b7ab3a4a4bdd61bc45a Mon Sep 17 00:00:00 2001
From: spnayan <rajnawa93@gmail.com>
Date: Mon, 29 Apr 2024 14:56:49 +0545
Subject: [PATCH 19/30] Fix More Filter popover position on page scroll

---
 frontend/src/views/project.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
index 5fe25a18bc..6f1fbdfcb4 100644
--- a/frontend/src/views/project.js
+++ b/frontend/src/views/project.js
@@ -161,6 +161,7 @@ export const ProjectsPageIndex = (props) => {
 export const MoreFilters = () => {
   const [position, setPosition] = useState({ top: 0, left: 0, height: 0, width: 0 });
   const [projectContainerHeight, setProjectContainerHeight] = useState({ height: 0 });
+  const [scrollHeight, setScrollHeight] = useState(0);
   const navigate = useNavigate();
   const [fullProjectsQuery] = useExploreProjectsQueryParams();
   const [componentHeight, setComponentHeight] = useState(`${window.innerHeight}px`);
@@ -174,10 +175,13 @@ export const MoreFilters = () => {
 
     const { top, left, height, width } = filterElement.getBoundingClientRect();
     const { height: containerHeight } = projectContainerElement.getBoundingClientRect();
+    setScrollHeight(window.scrollY);
     setProjectContainerHeight(containerHeight);
     setPosition({ top, left, height, width });
   }, [filterElement, width, projectContainerElement]);
 
+  console.log(scrollHeight, 'scroll height');
+
   useEffect(() => {
     const contentHeight =
       document.getElementById('explore-nav').offsetHeight +
@@ -228,7 +232,7 @@ export const MoreFilters = () => {
             : {
                 // 250 is half the width of filter component to place filter exactly center of more-filter button
                 left: position.left - 250 + position.width / 2,
-                top: position.top + position.height + 10,
+                top: position.top + position.height + 10 + scrollHeight,
                 width: '31.25em',
                 boxShadow: '2px 1px 23px -1px rgba(143,130,130,0.75)',
               }
@@ -246,7 +250,7 @@ export const MoreFilters = () => {
         <div
           style={{
             left: `${position.left + position.width / 2}px`,
-            top: position.top + position.height + 2,
+            top: position.top + position.height + 2 + scrollHeight,
           }}
           className={`absolute w1 h1 bg-white bl bt b--grey-light rotate-45 z-5`}
         />

From c10fa2704c6db969b560be311a66d4659f4ea137 Mon Sep 17 00:00:00 2001
From: spnayan <rajnawa93@gmail.com>
Date: Mon, 29 Apr 2024 21:52:57 +0545
Subject: [PATCH 20/30] Fix More Filter popover overlay height

---
 frontend/src/views/project.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
index 6f1fbdfcb4..d180ea7dc8 100644
--- a/frontend/src/views/project.js
+++ b/frontend/src/views/project.js
@@ -175,13 +175,13 @@ export const MoreFilters = () => {
 
     const { top, left, height, width } = filterElement.getBoundingClientRect();
     const { height: containerHeight } = projectContainerElement.getBoundingClientRect();
-    setScrollHeight(window.scrollY);
-    setProjectContainerHeight(containerHeight);
+    const navbarHeight = document.getElementById('explore-nav').offsetHeight;
+    // calculate difference between explore project page and navbar to set popover overlay height
+    setProjectContainerHeight(containerHeight - navbarHeight);
     setPosition({ top, left, height, width });
+    setScrollHeight(window.scrollY);
   }, [filterElement, width, projectContainerElement]);
 
-  console.log(scrollHeight, 'scroll height');
-
   useEffect(() => {
     const contentHeight =
       document.getElementById('explore-nav').offsetHeight +

From 46bcb2189ad44cd39cb68f59bbba27ef19803b7d Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Wed, 1 May 2024 10:26:56 +0545
Subject: [PATCH 21/30] Validate empty project name while creating project

---
 frontend/src/components/projectCreate/index.js    | 4 ++++
 frontend/src/components/projectCreate/messages.js | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/frontend/src/components/projectCreate/index.js b/frontend/src/components/projectCreate/index.js
index d5cb5cb31c..7d50966494 100644
--- a/frontend/src/components/projectCreate/index.js
+++ b/frontend/src/components/projectCreate/index.js
@@ -191,6 +191,10 @@ 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 (!metadata.geom) {
         setErr({ error: true, message: intl.formatMessage(messages.noGeometry) });
         throw new Error('Missing geom.');
diff --git a/frontend/src/components/projectCreate/messages.js b/frontend/src/components/projectCreate/messages.js
index 2b57df0e1d..d574727764 100644
--- a/frontend/src/components/projectCreate/messages.js
+++ b/frontend/src/components/projectCreate/messages.js
@@ -123,6 +123,10 @@ 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.',
+  },
   noGeometry: {
     id: 'management.projects.create.errors.no_geometry',
     defaultMessage: "You need to define the project's area of interest.",

From df967cb7b21fd1abd66d1802aef2bfba497a5fc9 Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Wed, 1 May 2024 10:27:25 +0545
Subject: [PATCH 22/30] Validate symbols and number in first charater of
 project name

---
 frontend/src/components/projectCreate/index.js    | 4 ++++
 frontend/src/components/projectCreate/messages.js | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/frontend/src/components/projectCreate/index.js b/frontend/src/components/projectCreate/index.js
index 7d50966494..066c66b914 100644
--- a/frontend/src/components/projectCreate/index.js
+++ b/frontend/src/components/projectCreate/index.js
@@ -195,6 +195,10 @@ const ProjectCreate = () => {
         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.');
diff --git a/frontend/src/components/projectCreate/messages.js b/frontend/src/components/projectCreate/messages.js
index d574727764..5b82a8a31d 100644
--- a/frontend/src/components/projectCreate/messages.js
+++ b/frontend/src/components/projectCreate/messages.js
@@ -127,6 +127,10 @@ export default defineMessages({
     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.",

From 532d84af4040c20b4f6ee1236f8dd06428af8e24 Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Mon, 6 May 2024 14:44:08 +0545
Subject: [PATCH 23/30] Validate empty project name while editing project

---
 frontend/src/views/projectEdit.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/projectEdit.js b/frontend/src/views/projectEdit.js
index 1bcc2ded81..a4491a454b 100644
--- a/frontend/src/views/projectEdit.js
+++ b/frontend/src/views/projectEdit.js
@@ -121,7 +121,9 @@ export function ProjectEdit() {
       });
     } else {
       const mandatoryFieldsMissing = mandatoryFields.filter(
-        (m) => Object.keys(defaultLocaleInfo).includes(m) === false || defaultLocaleInfo[m] === '',
+        (m) =>
+          Object.keys(defaultLocaleInfo).includes(m) === false ||
+          defaultLocaleInfo[m].trim() === '',
       );
       if (mandatoryFieldsMissing.length) {
         missingFields.push({
@@ -130,7 +132,6 @@ export function ProjectEdit() {
         });
       }
     }
-
     const nonLocaleMissingFields = [];
     if (projectInfo.mappingTypes.length === 0) nonLocaleMissingFields.push('mappingTypes');
     const { mappingEditors, validationEditors, customEditor } = projectInfo;

From ec2a3fcb420dd3b754291800d230fd4040861205 Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Tue, 7 May 2024 09:33:46 +0545
Subject: [PATCH 24/30] Validate symbols and number in first charater of
 project name during edit

---
 .../src/components/projectEdit/messages.js    |  3 +++
 frontend/src/views/projectEdit.js             | 20 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/projectEdit/messages.js b/frontend/src/components/projectEdit/messages.js
index 31043f0dd4..ad4a24a3f0 100644
--- a/frontend/src/components/projectEdit/messages.js
+++ b/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',
diff --git a/frontend/src/views/projectEdit.js b/frontend/src/views/projectEdit.js
index a4491a454b..e34dff1f0a 100644
--- a/frontend/src/views/projectEdit.js
+++ b/frontend/src/views/projectEdit.js
@@ -161,7 +161,17 @@ export function ProjectEdit() {
     ) {
       missingFields.push({ type: 'noTeamsAssigned' });
     }
-
+    // validate name
+    if (!missingFields?.[0]?.fields?.includes('name')) {
+      const projectName = defaultLocaleInfo.name;
+      if (!/^[a-zA-Z]/.test(projectName)) {
+        missingFields.push({
+          locale: projectInfo.defaultLocale,
+          fields: ['projectNameValidationError'],
+          type: 'nameValidationError',
+        });
+      }
+    }
     if (missingFields.length > 0) {
       setError(missingFields);
       return new Promise((resolve, reject) => reject());
@@ -351,6 +361,14 @@ const ErrorTitle = ({ locale, numberOfMissingFields, type, projectInfo }) => {
       />
     );
   }
+  if (type === 'nameValidationError') {
+    return (
+      <FormattedMessage
+        id="management.projects.create.errors.project_name_validation_error"
+        defaultMessage="Project Name Validation Error"
+      />
+    );
+  }
   if (locale === null) {
     return (
       <FormattedMessage {...messages.missingFields} values={{ number: numberOfMissingFields }} />

From 793cdfdbd0696785c0464ea87edbf4ba19a373ec Mon Sep 17 00:00:00 2001
From: DK Benjamin <dakota.benjamin@hotosm.org>
Date: Thu, 9 May 2024 13:23:27 -0400
Subject: [PATCH 25/30] Add ohsome token to backend infrastructure config

---
 scripts/aws/cloudformation/tasking-manager.template.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/scripts/aws/cloudformation/tasking-manager.template.js b/scripts/aws/cloudformation/tasking-manager.template.js
index f6ae93b40f..697eed07c4 100644
--- a/scripts/aws/cloudformation/tasking-manager.template.js
+++ b/scripts/aws/cloudformation/tasking-manager.template.js
@@ -187,6 +187,10 @@ const Parameters = {
   TaskingManagerLogo: {
     Description: "URL for logo",
     Type: "String"
+  },
+  OhsomeStatsToken: {
+    Description: "Ohsome Stats Token (must be same as frontend)",
+    Type: "String"
   }
 };
 
@@ -474,6 +478,7 @@ const Resources = {
           'echo "------------------------------------------------------------"',
           cf.sub('export NEW_RELIC_LICENSE_KEY="${NewRelicLicense}"'),
           cf.sub('export TM_SENTRY_BACKEND_DSN="${SentryBackendDSN}"'),
+          cf.sub('export OHSOME_STATS_TOKEN="${OhsomeStatsToken}"'),
           'export NEW_RELIC_ENVIRONMENT=$TM_ENVIRONMENT',
           cf.sub('NEW_RELIC_CONFIG_FILE=./scripts/aws/cloudformation/newrelic.ini newrelic-admin run-program gunicorn -b 0.0.0.0:8000 --worker-class gevent --workers 5 --timeout 179 --access-logfile ${TaskingManagerLogDirectory}/gunicorn-access.log --access-logformat \'%(h)s %(l)s %(u)s %(t)s \"%(r)s\" %(s)s %(b)s %(T)s \"%(f)s\" \"%(a)s\"\' manage:application &'),
           cf.sub('sudo /usr/local/bin/cfn-init -v --stack ${AWS::StackName} --resource TaskingManagerLaunchTemplate --region ${AWS::Region} --configsets default'),

From 5812627828204c2041a3867485b7a46362755ed4 Mon Sep 17 00:00:00 2001
From: DK Benjamin <dakota.benjamin@hotosm.org>
Date: Thu, 9 May 2024 13:26:55 -0400
Subject: [PATCH 26/30] Add docs clarity around setting envvars in deployment

---
 .github/pull_request_template.md | 1 +
 docs/sysadmins/ci-cd.md          | 2 +-
 docs/sysadmins/deployment.md     | 4 ++--
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 5d1cba38a9..eb790148c2 100644
--- a/.github/pull_request_template.md
+++ b/.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?
diff --git a/docs/sysadmins/ci-cd.md b/docs/sysadmins/ci-cd.md
index b29e5a5fc4..5c15ff5b0c 100644
--- a/docs/sysadmins/ci-cd.md
+++ b/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
diff --git a/docs/sysadmins/deployment.md b/docs/sysadmins/deployment.md
index f6a67b1252..0186668318 100644
--- a/docs/sysadmins/deployment.md
+++ b/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.

From c1254702ad7d33024fed680a08399a47e38d07c7 Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Fri, 10 May 2024 18:03:19 +0545
Subject: [PATCH 27/30] Fix mismatch value for language json file for
 Nederlands

- Related to #6425
---
 frontend/src/utils/internationalization.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/utils/internationalization.js b/frontend/src/utils/internationalization.js
index aa5bf50cd1..c9cbc2b3f3 100644
--- a/frontend/src/utils/internationalization.js
+++ b/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: 'Русский язык' },

From 6e53dc6652627fa30922b584775f6348e19c758b Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Fri, 10 May 2024 18:04:44 +0545
Subject: [PATCH 28/30] Fix test case failure for `nl_NL` language

- Related to #6425
---
 frontend/src/utils/countries.js                       | 3 ++-
 frontend/src/utils/tests/internationalization.test.js | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/utils/countries.js b/frontend/src/utils/countries.js
index e474c35010..d014cf0a8a 100644
--- a/frontend/src/utils/countries.js
+++ b/frontend/src/utils/countries.js
@@ -20,7 +20,8 @@ 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;
 }
 
diff --git a/frontend/src/utils/tests/internationalization.test.js b/frontend/src/utils/tests/internationalization.test.js
index 65f29cea46..17e41ff5c4 100644
--- a/frontend/src/utils/tests/internationalization.test.js
+++ b/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' });

From 0f4a5456169aef6cb9d3a70e23eea19b6000b2b7 Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Mon, 13 May 2024 14:09:49 +0545
Subject: [PATCH 29/30] Fix undefined issue when language toggle to Nederlands

- Related to #6425
---
 frontend/src/utils/countries.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/utils/countries.js b/frontend/src/utils/countries.js
index d014cf0a8a..1d9382d7d4 100644
--- a/frontend/src/utils/countries.js
+++ b/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;
 }
 
@@ -27,7 +27,7 @@ export function isLangSupported(code) {
 
 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 }));
   }
 }

From 15f4ad93b1d5c8ce9b3193dca1ebb12a9494e9a4 Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Tue, 14 May 2024 11:35:35 +0545
Subject: [PATCH 30/30] Fix map page crash due to unsupported language error

- Handle Mapbox unsupported locale by fallback to `en` language for unsupported ones
- Related to #6429
---
 .../projectCreate/projectCreationMap.js       |  8 ++++---
 .../projectEdit/priorityAreasForm.js          |  6 ++---
 .../src/components/projects/projectsMap.js    |  6 ++---
 frontend/src/components/taskSelection/map.js  |  5 ++--
 .../components/userDetail/countriesMapped.js  |  6 ++---
 .../src/hooks/UseMapboxSupportedLanguage.js   | 23 +++++++++++++++++++
 6 files changed, 40 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/hooks/UseMapboxSupportedLanguage.js

diff --git a/frontend/src/components/projectCreate/projectCreationMap.js b/frontend/src/components/projectCreate/projectCreationMap.js
index 9e98a292d2..89765e0a28 100644
--- a/frontend/src/components/projectCreate/projectCreationMap.js
+++ b/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',
       );
diff --git a/frontend/src/components/projectEdit/priorityAreasForm.js b/frontend/src/components/projectEdit/priorityAreasForm.js
index f0c7bd7d35..25574bca2b 100644
--- a/frontend/src/components/projectEdit/priorityAreasForm.js
+++ b/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 });
diff --git a/frontend/src/components/projects/projectsMap.js b/frontend/src/components/projects/projectsMap.js
index 762cfc37ad..64f7a7bb6e 100644
--- a/frontend/src/components/projects/projectsMap.js
+++ b/frontend/src/components/projects/projectsMap.js
@@ -1,5 +1,4 @@
 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';
@@ -7,6 +6,7 @@ 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 () => {
diff --git a/frontend/src/components/taskSelection/map.js b/frontend/src/components/taskSelection/map.js
index 4c0b644bd2..d5236a3159 100644
--- a/frontend/src/components/taskSelection/map.js
+++ b/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 () => {
diff --git a/frontend/src/components/userDetail/countriesMapped.js b/frontend/src/components/userDetail/countriesMapped.js
index 322a8d5f75..5f4fa1ee83 100644
--- a/frontend/src/components/userDetail/countriesMapped.js
+++ b/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 () => {
diff --git a/frontend/src/hooks/UseMapboxSupportedLanguage.js b/frontend/src/hooks/UseMapboxSupportedLanguage.js
new file mode 100644
index 0000000000..577fb6407a
--- /dev/null
+++ b/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;
+}