Introduces SearchResultDrawer

package.json

@@ -49,7 +49,7 @@
     "@terrestris/react-geo": "^30.2.1",
     "@terrestris/react-util": "^12.1.0",
     "@terrestris/shogun-e2e-tests": "^1.0.8",
-    "@terrestris/shogun-util": "^10.5.2",
+    "@terrestris/shogun-util": "^10.6.0",
     "@types/color": "^4.2.0",
     "@types/js-md5": "^0.7.2",
     "@types/proj4": "^2.5.6",

src/App.tsx

@@ -10,6 +10,7 @@ import Footer from './components/Footer';
 import Header from './components/Header';
 import LayerDetailsModal from './components/LayerDetailsModal';
 import MapToolbar from './components/MapToolbar';
+import SearchResultDrawer from './components/SearchResultDrawer';
 import StylingDrawer from './components/StylingDrawer';
 import ToolMenu from './components/ToolMenu';
 import UploadDataModal from './components/UploadDataModal';
@@ -50,6 +51,7 @@ export const App: React.FC<AppProps> = ({
       <EditFeatureDrawer />
       <LayerDetailsModal />
       <StylingDrawer />
+      <SearchResultDrawer />
     </div>
   );
 };

src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx

@@ -43,6 +43,7 @@ import {
 
 import useAppDispatch from '../../../hooks/useAppDispatch';
 import useAppSelector from '../../../hooks/useAppSelector';
+import useGetFitPadding from '../../../hooks/useGetFitPadding';
 
 import {
   setFormDirty
@@ -74,6 +75,7 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
 
   const map = useMap();
   const dispatch = useAppDispatch();
+  const getFitPadding = useGetFitPadding();
 
   const [editLayer, setEditLayer] = useState<OlLayerVector<OlSourceVector>>();
   const [, setRevision] = useState<number>(0);
@@ -118,17 +120,22 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
         return;
       }
 
-      const source = editLayer.getSource() as OlSourceVector;
+      const source = editLayer.getSource();
+
+      if (!source) {
+        return;
+      }
+
       source.addFeature(olFeat);
       setRevision(r => r + 1);
 
       if (!isEmptyOlExtent(source.getExtent())) {
         map?.getView().fit(source.getExtent(), {
-          padding: [50, 50, 50, 50]
+          padding: getFitPadding(true)
         });
       }
     }
-  }, [feature, editLayer, gjFormat, map]);
+  }, [feature, editLayer, gjFormat, map, getFitPadding]);
 
   const undoEdit = () => {
 

src/components/MapToolbar/index.tsx

@@ -46,7 +46,8 @@ export const MapToolbar: React.FC = (): JSX.Element => {
 
   const stylingDrawerVisibility = useAppSelector(state => state.stylingDrawerVisibility);
   const editFeatureDrawerOpen = useAppSelector(state => state.editFeatureDrawerOpen);
-  const drawerOpen = stylingDrawerVisibility || editFeatureDrawerOpen;
+  const searchResultDrawerOpen = useAppSelector(state => state.searchResult.drawerVisibility);
+  const drawerOpen = stylingDrawerVisibility || editFeatureDrawerOpen || searchResultDrawerOpen;
   const className = drawerOpen ? 'drawer-open' : '';
 
   const btnTooltipProps = {

src/components/MultiSearch/index.tsx

@@ -24,13 +24,12 @@ import {
 
 import ClientConfiguration from 'clientConfig';
 
-import {
-  getUid
-} from 'ol';
+import { getUid } from 'ol';
 import {
   Extent as OlExtent
 } from 'ol/extent';
 import OlFeature from 'ol/Feature';
+import GeoJSON from 'ol/format/GeoJSON';
 import {
   transformExtent
 } from 'ol/proj';
@@ -45,9 +44,8 @@ import {
 
 import Logger from '@terrestris/base-util/dist/Logger';
 
-import {
-  PermalinkUtil
-} from '@terrestris/ol-util/dist/PermalinkUtil/PermalinkUtil';
+import { PermalinkUtil } from '@terrestris/ol-util';
+
 import SearchResultsPanel, {
   Category as ResultCategory
 } from '@terrestris/react-geo/dist/Panel/SearchResultsPanel/SearchResultsPanel';
@@ -57,6 +55,9 @@ import {
 } from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 
 import './index.less';
+import useAppDispatch from '../../hooks/useAppDispatch';
+import useGetFitPadding from '../../hooks/useGetFitPadding';
+import { setSearchResultState } from '../../store/searchResult';
 
 export type SearchEngineFunction = (value: string, viewBox?: OlExtent) => Promise<ResultCategory[] | undefined>;
 
@@ -85,8 +86,12 @@ export const MultiSearch: React.FC<MultiSearchProps> = ({
   const {
     t
   } = useTranslation();
+
+  const dispatch = useAppDispatch();
   const clickAwayRef = useRef<HTMLDivElement>(null);
 
+  const geoJSONFormat = useMemo(() => new GeoJSON(), []);
+
   const [isGeocoderEnabled, setIsGeocoderEnabled] = useState<boolean>(!!geocoderSearchEngine);
   const [isDataSearchEnabled, setIsDataSearchEnabled] = useState<boolean>(!!dataSearchEngine);
   const [useViewBox, setUseViewBox] = useState<boolean>(ClientConfiguration.search?.defaultUseViewBox ?? true);
@@ -95,6 +100,7 @@ export const MultiSearch: React.FC<MultiSearchProps> = ({
   const [resultsVisible, setResultsVisible] = useState<boolean>(false);
   const [settingsVisible, setSettingsVisible] = useState<boolean>(false);
   const [searchResults, setSearchResults] = useState<ResultCategory[]>([]);
+  const getFitPadding = useGetFitPadding();
 
   useEffect(() => {
     window.addEventListener('mousedown', handleClickAway);
@@ -304,6 +310,14 @@ export const MultiSearch: React.FC<MultiSearchProps> = ({
       if (ClientConfiguration.search?.activateLayerOnClick) {
         activateLayer(item);
       }
+
+      if (ClientConfiguration.search?.showSearchResultDrawer) {
+        dispatch(setSearchResultState({
+          geoJSONFeature: geoJSONFormat.writeFeatureObject(item.feature),
+          drawerVisibility: true
+        }));
+        setSearchValue('');
+      }
     };
 
     const activateLayer = (item: Item) => {
@@ -322,14 +336,11 @@ export const MultiSearch: React.FC<MultiSearchProps> = ({
 
     const zoomOffsetOnClick = (item: Item) => {
       const extent = item.feature.getGeometry()?.getExtent();
-      const toolMenuElement = document.getElementsByClassName('tool-menu');
-      const toolMenuWidth = toolMenuElement[0]?.clientWidth ?? 0;
-      const padding = [0, 0, 0, toolMenuWidth];
 
       if (extent) {
         map?.getView().fit(extent, {
           size: map.getSize(),
-          padding
+          padding: getFitPadding(ClientConfiguration.search?.showSearchResultDrawer)
         });
       }
     };

src/components/SearchResultDrawer/AttributeValueCell/index.spec.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import {
+  render, screen
+} from '@testing-library/react';
+
+import { AttributeValueCell } from './index';
+
+describe('AttributeValueCell', () => {
+  it('renders a simple string value', () => {
+    render(
+      <AttributeValueCell
+        value="Mall"
+        attributeName="name"
+      />
+    );
+    expect(screen.getByText('Mall')).toBeInTheDocument();
+  });
+
+  it('renders a clickable link if value is a URL and config matches', () => {
+    render(
+      <AttributeValueCell
+        value="https://www.terrestris.de"
+        attributeName="Details"
+        resultDrawerConfig={{
+          children: [
+            {
+              displayName: 'Details',
+              fieldProps: { urlDisplayValue: 'terrestris' }
+            }
+          ]
+        }}
+      />
+    );
+
+    const link = screen.getByRole('link');
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', 'https://www.terrestris.de');
+    expect(link).toHaveTextContent('terrestris');
+  });
+
+  it('normalizes single-item string arrays', () => {
+    render(
+      <AttributeValueCell
+        value={['single value']}
+        attributeName="name"
+      />
+    );
+    expect(screen.getByText('single value')).toBeInTheDocument();
+  });
+});

src/components/SearchResultDrawer/AttributeValueCell/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+export interface AttributeValueCellProps {
+  value: any;
+  attributeName: string;
+  resultDrawerConfig?: {
+    children?: {
+      displayName?: string;
+      fieldProps?: {
+        urlDisplayValue?: string;
+      };
+    }[];
+  } | null;
+}
+
+export const AttributeValueCell: React.FC<AttributeValueCellProps> = ({
+  value,
+  attributeName,
+  resultDrawerConfig
+}) => {
+  let normalized = value;
+
+  const isUrl = (val: string) => {
+    return /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|localhost[:?\d]*)\S*$/.test(val);
+  };
+
+  if (
+    Array.isArray(value) &&
+    value.length === 1 &&
+    typeof value[0] === 'string'
+  ) {
+    normalized = value[0];
+  }
+
+  if (
+    typeof normalized === 'string' &&
+    isUrl(normalized) &&
+    resultDrawerConfig
+  ) {
+    const fieldConfig = resultDrawerConfig.children?.find(
+      c => c.displayName === attributeName
+    );
+    const displayText = fieldConfig?.fieldProps?.urlDisplayValue || normalized;
+
+    return (
+      <a
+        href={normalized}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {displayText}
+      </a>
+    );
+  }
+
+  return (
+    <>
+      {normalized == null || typeof normalized === 'object'
+        ? ''
+        : normalized}
+    </>
+  );
+};

src/components/SearchResultDrawer/index.spec.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import {
+  render,
+  screen,
+  waitFor
+} from '@testing-library/react';
+
+import {
+  Provider
+} from 'react-redux';
+
+import { setDrawerVisibility } from '../../store/searchResult';
+import {
+  store
+} from '../../store/store';
+
+import SearchResultDrawer from '../SearchResultDrawer';
+
+import SearchResultDrawerButton from './index';
+
+const createWrapper = () => {
+  return ({
+    children
+  }: any) => (
+    <Provider store={store}>
+      {children}
+    </Provider>
+  );
+};
+
+describe('SearchResultDrawer', () => {
+  it('can be rendered', () => {
+    const {
+      container
+    } = render(<SearchResultDrawer />, {
+      wrapper: createWrapper()
+    });
+
+    expect(container).toBeVisible();
+  });
+
+  it('renders the correct title', async () => {
+    render(<SearchResultDrawerButton />, {
+      wrapper: createWrapper()
+    });
+
+    store.dispatch(setDrawerVisibility(true));
+    await waitFor(() => {
+      expect(screen.getByText('SearchResultDrawer.title')).toBeInTheDocument();
+    });
+  });
+});