upload geojson feature for use in search

CHANGELOG.md

@@ -26,6 +26,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Added Config feature flags for Advanced Search Options and Cart
 - Added draw boundary feature to allow user to draw polygon on map (WIP)
 - When polygon drawn, use as search intersects param instead of map viewport bbox
+- Added upload geojson feature to allow users to select a geojson file to add to map
+- Reusable System Message component for showing app alerts
 
 ### Removed
 

package.json

@@ -18,6 +18,7 @@
     "leaflet-geosearch": "^3.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-leaflet": "^4.2.1",
     "react-redux": "^8.0.7",
     "react-tooltip": "^5.16.1"

src/App.jsx

@@ -7,6 +7,8 @@ import PageHeader from './components/Layout/PageHeader/PageHeader'
 import PublishModal from './components/PublishModal/PublishModal'
 import LaunchModal from './components/LaunchModal/LaunchModal'
 import LaunchImageModal from './components/LaunchModal/LaunchImageModal'
+import UploadGeojsonModal from './components/UploadGeojsonModal/UploadGeojsonModal'
+import SystemMessage from './components/SystemMessage/SystemMessage'
 
 import { GetCollectionsService } from './services/get-collections-service'
 import { useSelector } from 'react-redux'
@@ -21,6 +23,12 @@ function App() {
   const _showLaunchImageModal = useSelector(
     (state) => state.mainSlice.showLaunchImageModal
   )
+  const _showUploadGeojsonModal = useSelector(
+    (state) => state.mainSlice.showUploadGeojsonModal
+  )
+  const _showApplicationAlert = useSelector(
+    (state) => state.mainSlice.showApplicationAlert
+  )
   useEffect(() => {
     GetCollectionsService()
   }, [])
@@ -33,6 +41,10 @@ function App() {
         {_showPublishModal ? <PublishModal /> : null}
         {_showLaunchModal ? <LaunchModal /> : null}
         {_showLaunchImageModal ? <LaunchImageModal /> : null}
+        {_showUploadGeojsonModal ? (
+          <UploadGeojsonModal></UploadGeojsonModal>
+        ) : null}
+        {_showApplicationAlert ? <SystemMessage></SystemMessage> : null}
       </div>
     </React.StrictMode>
   )

src/App.test.jsx

@@ -6,7 +6,9 @@ import { store } from './redux/store'
 import {
   setShowPublishModal,
   setShowLaunchModal,
-  setShowLaunchImageModal
+  setShowLaunchImageModal,
+  setshowUploadGeojsonModal,
+  setshowApplicationAlert
 } from './redux/slices/mainSlice'
 import { vi } from 'vitest'
 import * as CollectionsService from './services/get-collections-service'
@@ -81,5 +83,35 @@ describe('App', () => {
         expect(LaunchImageModalComponent).not.toBeNull()
       })
     })
+    describe('when conditionally rendering UploadGeojsonModal', () => {
+      it('should not render UploadGeojsonModal if showUploadGeojsonModal in state is false', () => {
+        setup()
+        const UploadGeojsonModalComponent = screen.queryByTestId(
+          'testUploadGeojsonModal'
+        )
+        expect(UploadGeojsonModalComponent).toBeNull()
+      })
+      it('should render UploadGeojsonModal if showUploadGeojsonModal in state is true', () => {
+        store.dispatch(setshowUploadGeojsonModal(true))
+        setup()
+        const UploadGeojsonModalComponent = screen.queryByTestId(
+          'testUploadGeojsonModal'
+        )
+        expect(UploadGeojsonModalComponent).not.toBeNull()
+      })
+    })
+    describe('when conditionally rendering SystemMessage', () => {
+      it('should not render SystemMessage if showApplicationAlert in state is false', () => {
+        setup()
+        const SystemMessageComponent = screen.queryByTestId('testSystemMessage')
+        expect(SystemMessageComponent).toBeNull()
+      })
+      it('should render SystemMessage if showApplicationAlert in state is true', () => {
+        store.dispatch(setshowApplicationAlert(true))
+        setup()
+        const SystemMessageComponent = screen.queryByTestId('testSystemMessage')
+        expect(SystemMessageComponent).not.toBeNull()
+      })
+    })
   })
 })

src/components/Layout/Content/BottomContent/BottomContent.css

@@ -1,9 +1,10 @@
 .BottomContent {
   width: 100%;
-  height: calc(100% - 103px);
+  height: calc(100% - 100px);
   background-color: #12171a;
   display: flex;
-  position: relative;
+  position: absolute;
+  top: 100px;
 }
 
 .ZoomNotice {

src/components/Layout/Content/TopContent/TopContent.css

@@ -2,8 +2,8 @@
   width: 100%;
   height: 100px;
   background-color: #353d4f;
-  position: relative;
-  z-index: 5;
+  position: absolute;
+  z-index: 6;
 }
 
 .TopContent .mobileMenu {

src/components/Search/Search.Advanced.test.jsx

@@ -151,6 +151,36 @@ describe('Search', () => {
       expect(store.getState().mainSlice.showAdvancedSearchOptions).toBeFalsy()
     })
   })
+  describe('when upload geojson button clicked', () => {
+    it('should not call dispatch functions if geom already exists', async () => {
+      store.dispatch(
+        setsearchGeojsonBoundary({
+          type: 'Polygon',
+          coordinates: [[]]
+        })
+      )
+      setup()
+      const advancedButton = screen.getByText(/advanced/i)
+      await user.click(advancedButton)
+      const uploadGeojsonButton = screen.getByRole('button', {
+        name: /upload geojson/i
+      })
+      await user.click(uploadGeojsonButton)
+      expect(store.getState().mainSlice.showUploadGeojsonModal).toBeFalsy()
+    })
+    it('should call dispatch functions if geom does not exists', async () => {
+      store.dispatch(setshowAdvancedSearchOptions(true))
+      setup()
+      const advancedButton = screen.getByText(/advanced/i)
+      await user.click(advancedButton)
+      const uploadGeojsonButton = screen.getByRole('button', {
+        name: /upload geojson/i
+      })
+      await user.click(uploadGeojsonButton)
+      expect(store.getState().mainSlice.showAdvancedSearchOptions).toBeFalsy()
+      expect(store.getState().mainSlice.showUploadGeojsonModal).toBeTruthy()
+    })
+  })
   describe('when drawing mode enabled', () => {
     it('should render disabled search bar overlay div', async () => {
       setup()

src/components/Search/Search.jsx

@@ -5,7 +5,8 @@ import {
   setIsAutoSearchSet,
   setshowAdvancedSearchOptions,
   setisDrawingEnabled,
-  setsearchGeojsonBoundary
+  setsearchGeojsonBoundary,
+  setshowUploadGeojsonModal
 } from '../../redux/slices/mainSlice'
 import 'react-tooltip/dist/react-tooltip.css'
 import Switch from '@mui/material/Switch'
@@ -79,6 +80,14 @@ const Search = () => {
     enableMapPolyDrawing()
   }
 
+  function onUploadGeojsonButtonClicked() {
+    if (_searchGeojsonBoundary) {
+      return
+    }
+    dispatch(setshowAdvancedSearchOptions(false))
+    dispatch(setshowUploadGeojsonModal(true))
+  }
+
   function onClearButtonClicked() {
     if (!_searchGeojsonBoundary) {
       return
@@ -164,6 +173,7 @@ const Search = () => {
                       : 'advancedSearchOptionsButton ' +
                         'advancedSearchOptionsButtonDisabled'
                   }
+                  onClick={onUploadGeojsonButtonClicked}
                 >
                   Upload GeoJSON
                 </button>

src/components/SystemMessage/SystemMessage.css

@@ -0,0 +1,6 @@
+.SystemMessage {
+  position: absolute;
+  bottom: 40px;
+  right: 10px;
+  z-index: 500;
+}

src/components/SystemMessage/SystemMessage.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import Alert from '@mui/material/Alert'
+import './SystemMessage.css'
+
+import { useSelector } from 'react-redux'
+import { store } from '../../redux/store'
+import { setshowApplicationAlert } from '../../redux/slices/mainSlice'
+
+const SystemMessage = () => {
+  const _applicationAlertMessage = useSelector(
+    (state) => state.mainSlice.applicationAlertMessage
+  )
+  const _applicationAlertSeverity = useSelector(
+    (state) => state.mainSlice.applicationAlertSeverity
+  )
+
+  return (
+    <div className="SystemMessage" data-testid="testSystemMessage">
+      <Alert
+        onClose={() => {
+          store.dispatch(setshowApplicationAlert(false))
+        }}
+        severity={_applicationAlertSeverity}
+        sx={{
+          '& .MuiAlert-message': {
+            fontSize: 14
+          }
+        }}
+      >
+        {_applicationAlertMessage}
+      </Alert>
+    </div>
+  )
+}
+
+export default SystemMessage