feat: introduce multi search component

src/bootstrap.tsx

@@ -83,6 +83,9 @@ import {
 import {
   setLogoPath
 } from './store/logoPath';
+import {
+  setSearchEngines
+} from './store/searchEngines';
 import {
   createReducer,
   store
@@ -210,15 +213,20 @@ const setApplicationToStore = async (application?: Application) => {
     store.dispatch(setLogoPath(application.clientConfig.theme.logoPath));
   }
 
+  // nominatim search is active by default
+  store.dispatch(setSearchEngines(['nominatim']));
+
   if (application.toolConfig && application.toolConfig.length > 0) {
     const availableTools: string[] = [];
     application.toolConfig
       .map((tool: DefaultApplicationToolConfig) => {
-        if (tool.config.visible) {
+        if (tool.config.visible && tool.name !== 'search') {
           availableTools.push(tool.name);
         }
+        if (tool.name === 'search' && tool.config.engines.length > 0) {
+          store.dispatch(setSearchEngines(tool.config.engines));
+        }
       });
-
     store.dispatch(setAvailableTools(availableTools));
   }
 };

src/components/Header/index.less

@@ -39,10 +39,6 @@
       flex: 1;
       display: flex;
       justify-content: center;
-
-      .react-geo-nominatimsearch.ant-select-auto-complete {
-        width: 60%;
-      }
     }
 
     &.right-items {

src/components/Header/index.tsx

@@ -11,8 +11,7 @@ import {
   HeaderPlacementOrientation,
   isHeaderIntegration
 } from '../../plugin';
-
-import BasicNominatimSearch from '../BasicNominatimSearch';
+import SearchField from '../SearchField';
 
 import UserMenu from '../UserMenu';
 
@@ -67,7 +66,7 @@ export const Header: React.FC<HeaderProps> = ({
 
   const getCenterItems = () => {
     const items = [
-      <BasicNominatimSearch
+      <SearchField
         key="search"
       />
     ];

src/components/MultiSearch/index.less

@@ -0,0 +1,58 @@
+.search {
+
+  position: relative;
+
+  span.ant-input-group-addon {
+    background-color: var(--secondaryColor);
+
+    span.anticon {
+      color: var(--primaryColor);
+    }
+  }
+
+  >div {
+    .search-result-div {
+      box-shadow: var(--componentShadow);
+      margin-top: 2px;
+      top: unset;
+      width: 100%;
+
+      .ant-collapse {
+
+        overflow-y: unset;
+
+        .ant-collapse-header {
+          line-height: unset;
+          border-bottom: solid 1px var(--secondaryColor);
+          background-color: color-mix(in srgb, var(--secondaryColor) 15%, white);
+        }
+
+        .ant-collapse-content {
+          max-height: 25vh;
+          overflow-y: auto;
+
+          .ant-list-item {
+            justify-content: flex-start;
+
+            .result-prefix:not(:empty) {
+              width: 130px;
+
+              .ant-tag {
+                width: 100%;
+                text-align: center;
+              }
+            }
+          }
+        }
+
+      }
+
+    }
+
+    .no-search-result-div {
+      background-color: white;
+      position: absolute;
+      width: 100%;
+    }
+  }
+}

src/components/MultiSearch/index.spec.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import {
+  render
+} from '@testing-library/react';
+
+import { createReduxWrapper } from '../../utils/testUtils';
+
+import MultiSearch from './index';
+
+describe('<MultiSearch />', () => {
+
+  it('is defined', () => {
+    expect(MultiSearch).not.toBeUndefined();
+  });
+
+  it('can be rendered', () => {
+    const {
+      container
+    } = render(
+      <MultiSearch
+        useNominatim={true}
+      />, {
+        wrapper: createReduxWrapper()
+      }
+    );
+    expect(container).toBeVisible();
+  });
+
+});