[Draft] Adds Nominatum search behind a feature flag (#935)

* Add intial search component

* Add nominatum simple

* Connect search field to Nominatum API

- remove react-query
- remove react-query logic from J40Map
- move searchHandler to MapSearch

* Adjust zoom and territory focus

- adjust zoom buttons in CSS to allow for search field

* Place search behind a feature flag

* Add cors to fetch and error handling

- this is to test on OMB machines

* Add error messaging and bound search results to US

- adjust controls to add error message to search
- add MapSearchMessage component for error message
- add unit tests
- add state to track if API results are empty
- add intl on two strings, placeholder and error message

* Remove warpper around MapSearch component

- reorder component import in J40Map
- remove unused CSS in MapSearch.module.scss
- remove and comment on wrapper error on MapSearch
- rename isSearchEmpty to isSearchResultsEmpty
- update snapshot

* Add error message

- if the search query returns null, show an error message

client/src/components/J40Map.tsx

@@ -22,9 +22,10 @@ import {useWindowSize} from 'react-use';
 import {useFlags} from '../contexts/FlagContext';
 
 // Components:
-import TerritoryFocusControl from './territoryFocusControl';
-import MapInfoPanel from './mapInfoPanel';
 import AreaDetail from './AreaDetail';
+import MapInfoPanel from './mapInfoPanel';
+import MapSearch from './MapSearch';
+import TerritoryFocusControl from './territoryFocusControl';
 
 // Styles and constants
 import {makeMapStyle} from '../data/mapStyle';
@@ -52,6 +53,7 @@ export interface IDetailViewInterface {
   properties: constants.J40Properties,
 };
 
+
 const J40Map = ({location}: IJ40Interface) => {
   // Hash portion of URL is of the form #zoom/lat/lng
   const [zoom, lat, lng] = location.hash.slice(1).split('/');
@@ -176,6 +178,23 @@ const J40Map = ({location}: IJ40Interface) => {
   return (
     <>
       <Grid col={12} desktop={{col: 9}}>
+
+        {/*
+          The MapSearch component is wrapped in a div in order for MapSearch to render correctly in a production build.
+
+          When the MapSearch component is placed behind a feature flag without a div wrapping
+          MapSearch, the production build will inject CSS due to the null in the false conditional
+          case. Any changes to this (ie, changes to MapSearch or removing feature flag, etc), should
+          be tested with a production build via:
+
+          npm run clean && npm run build && npm run serve
+
+          to ensure the production build works and that MapSearch and the map (ReactMapGL) render correctly.
+        */}
+        <div>
+          {'sr' in flags ? <MapSearch goToPlace={goToPlace}/> : null}
+        </div>
+
         <ReactMapGL
           {...viewport}
           mapStyle={makeMapStyle(flags)}
@@ -256,6 +275,7 @@ const J40Map = ({location}: IJ40Interface) => {
           {geolocationInProgress ? <div>Geolocation in progress...</div> : ''}
           <TerritoryFocusControl onClickTerritoryFocusButton={onClickTerritoryFocusButton}/>
           {'fs' in flags ? <FullscreenControl className={styles.fullscreenControl}/> :'' }
+
         </ReactMapGL>
       </Grid>