[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/MapSearchMessage/MapSearchMessage.module.scss

@@ -0,0 +1,18 @@
+@use '../../styles/design-system.scss' as *;
+
+@mixin searchMessageLayout {
+    color: red;
+    background-color: white;
+    @include u-margin-bottom(.5);
+    @include u-padding-left(1);
+}
+
+.showMessage {
+    @include searchMessageLayout;
+    display: block;
+}
+
+.hideMessage {
+    @include searchMessageLayout;
+    visibility: hidden;
+}

client/src/components/MapSearchMessage/MapSearchMessage.module.scss.d.ts

@@ -0,0 +1,14 @@
+declare namespace MapSearchMessageModuleScssNamespace {
+    export interface IMapSearchMessageModuleScss {
+      showMessage: string;
+      hideMessage: string;
+    }
+  }
+
+declare const MapSearchMessageModuleScssModule: MapSearchMessageModuleScssNamespace.IMapSearchMessageModuleScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: MapSearchMessageModuleScssNamespace.IMapSearchMessageModuleScss;
+  };
+
+  export = MapSearchMessageModuleScssModule;
+

client/src/components/MapSearchMessage/MapSearchMessage.test.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import MapSearchMessage from './MapSearchMessage';
+
+describe('rendering of the MapSearchMessage when search results are empty', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <MapSearchMessage isSearchEmpty={true}/>
+      </LocalizedComponent>,
+  );
+
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('rendering of the MapSearchMessage when search results are not empty', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <MapSearchMessage isSearchEmpty={false}/>
+      </LocalizedComponent>,
+  );
+
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

client/src/components/MapSearchMessage/MapSearchMessage.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {useIntl} from 'gatsby-plugin-intl';
+
+import * as EXPLORE_COPY from '../../data/copy/explore';
+import * as styles from './MapSearchMessage.module.scss';
+
+interface ISearchMessage {
+    isSearchResultsNull: boolean;
+};
+
+const MapSearchMessage = ({isSearchResultsNull}:ISearchMessage) => {
+  const intl = useIntl();
+
+  return (
+    <div className={isSearchResultsNull ? styles.showMessage : styles.hideMessage}>
+      {intl.formatMessage(EXPLORE_COPY.MAP.SEARCH_RESULTS_EMPTY_MESSAGE)}
+    </div>
+  );
+};
+
+export default MapSearchMessage;

client/src/components/MapSearchMessage/__snapshots__/MapSearchMessage.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the MapSearchMessage when search results are empty checks if component renders 1`] = `
+<DocumentFragment>
+  <div>
+    No location found. Please try another location.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`rendering of the MapSearchMessage when search results are not empty checks if component renders 1`] = `<DocumentFragment />`;

client/src/components/MapSearchMessage/index.tsx

@@ -0,0 +1,3 @@
+import MapSearchMessage from './MapSearchMessage';
+
+export default MapSearchMessage;