#8578 SEARCH_WITH_FILTER action: add popup support

web/client/epics/__tests__/search-test.js

@@ -52,6 +52,7 @@ const STATE_NAME = 'STATE_NAME';
 
 import { testEpic, addTimeoutEpic, TEST_TIMEOUT } from './epicTestUtils';
 import {addLayer} from "../../actions/layers";
+import { ADD_MAP_POPUP } from '../../actions/mapPopups';
 
 const nestedService = {
     nestedPlaceholder: TEST_NESTED_PLACEHOLDER
@@ -599,6 +600,22 @@ describe('search Epics', () => {
         }, {layers: {flat: [{name: "layerName", url: "clearlyNotAUrl", visibility: true, queryable: true, type: "wms"}]}});
     });
     it('searchOnStartEpic, that sends a Getfeature and a GFI requests', (done) => {
+        const testStore = {
+            map: {
+                projection: "EPSG:3857"
+            },
+            layers: {
+                flat: [
+                    {
+                        name: "layerName",
+                        url: "base/web/client/test-resources/wms/GetFeature.json",
+                        visibility: true,
+                        queryable: true,
+                        type: "wms"
+                    }
+                ]
+            }
+        };
         let action = searchLayerWithFilter({layer: "layerName", cql_filter: "cql"});
         const NUM_ACTIONS = 2;
         testEpic(searchOnStartEpic, NUM_ACTIONS, action, (actions) => {
@@ -607,7 +624,48 @@ describe('search Epics', () => {
             expect(actions[0].type).toBe(FEATURE_INFO_CLICK);
             expect(actions[1].type).toBe(SHOW_MAPINFO_MARKER);
             done();
-        }, {layers: {flat: [{name: "layerName", url: "base/web/client/test-resources/wms/GetFeature.json", visibility: true, queryable: true, type: "wms"}]}});
+        }, testStore);
+    });
+    it('searchOnStartEpic, that adds popup', (done) => {
+        const testStore = {
+            mapInfo: { showInMapPopup: true },
+            map: {
+                projection: "EPSG:3857"
+            },
+            layers: {
+                flat: [
+                    {
+                        name: "layerName",
+                        url: "base/web/client/test-resources/wms/GetFeature.json",
+                        visibility: true,
+                        queryable: true,
+                        type: "wms"
+                    }
+                ]
+            }
+        };
+        let action = searchLayerWithFilter({layer: "layerName", cql_filter: "cql"});
+        const NUM_ACTIONS = 2;
+        testEpic(
+            searchOnStartEpic,
+            NUM_ACTIONS,
+            action,
+            (actions) => {
+                expect(actions).toExist();
+                expect(actions.length).toBe(NUM_ACTIONS);
+                expect(actions[0].type).toBe(FEATURE_INFO_CLICK);
+                const popupAction = actions[1];
+                expect(popupAction.type).toBe(ADD_MAP_POPUP);
+                expect(popupAction.popup?.position?.coordinates?.[0]).toBe(
+                    968346.2286324208
+                );
+                expect(popupAction.popup?.position?.coordinates?.[1]).toBe(
+                    5538315.133325616
+                );
+                done();
+            },
+            testStore
+        );
     });
     it('textSearchShowGFIEpic, it sends info format taken from layer', (done) => {
         let action = showGFI(

web/client/epics/search.js

@@ -11,6 +11,7 @@ import toBbox from 'turf-bbox';
 import pointOnSurface from '@turf/point-on-surface';
 import assign from 'object-assign';
 import {isNil, sortBy} from 'lodash';
+import uuid from 'uuid';
 
 import {centerToMarkerSelector, getLayerFromName, queryableLayersSelector} from '../selectors/layers';
 
@@ -44,14 +45,17 @@ import {
     ZOOM_ADD_POINT
 } from '../actions/search';
 
-import CoordinatesUtils from '../utils/CoordinatesUtils';
+import CoordinatesUtils, { reproject } from '../utils/CoordinatesUtils';
 import {defaultIconStyle, layerIsVisibleForGFI, showGFIForService} from '../utils/SearchUtils';
 import {generateTemplateString} from '../utils/TemplateUtils';
 
 import {API} from '../api/searchText';
 import {getFeatureSimple} from '../api/WFS';
 import {getDefaultInfoFormatValueFromLayer} from '../utils/MapInfoUtils';
-import {identifyOptionsSelector} from '../selectors/mapInfo';
+import {identifyOptionsSelector, isMapPopup} from '../selectors/mapInfo';
+import { addPopup } from '../actions/mapPopups';
+import { IDENTIFY_POPUP } from '../components/map/popups';
+import { projectionSelector } from '../selectors/map';
 
 const getInfoFormat = (layerObj, state) => getDefaultInfoFormatValueFromLayer(layerObj, {...identifyOptionsSelector(state)});
 
@@ -319,11 +323,41 @@ export const searchOnStartEpic = (action$, store) =>
                         .then( (response = {}) => response.features && response.features.length && {...response.features[0], typeName: name})
                 )
                     .switchMap(({ type, geometry, typeName }) => {
-                        let coord = pointOnSurface({ type, geometry }).geometry.coordinates;
-                        const latlng = {lng: coord[0], lat: coord[1] };
+                        const coord = pointOnSurface({ type, geometry }).geometry.coordinates;
 
-                        if (coord) { // trigger get feature info
-                            return Rx.Observable.of(featureInfoClick({latlng}, typeName, [typeName], {[typeName]: {cql_filter: cqlFilter}}), showMapinfoMarker());
+                        if (coord) {
+                            const latlng = {lng: coord[0], lat: coord[1] };
+                            const projection = projectionSelector(store.getState());
+                            const { x, y } = reproject(
+                                coord,
+                                "EPSG:4326",
+                                projection
+                            );
+                            let mapActionObservable;
+                            if (isMapPopup(store.getState())) {
+                                mapActionObservable = Rx.Observable.of(
+                                    addPopup(uuid(), {
+                                        component: IDENTIFY_POPUP,
+                                        maxWidth: 600,
+                                        position: { coordinates: [x, y] }
+                                    })
+                                );
+                            } else {
+                                mapActionObservable = Rx.Observable.of(
+                                    showMapinfoMarker()
+                                );
+                            }
+
+                            // trigger get feature info
+                            return Rx.Observable.of(
+                                featureInfoClick(
+                                    { latlng },
+                                    typeName,
+                                    [typeName],
+                                    { [typeName]: { cql_filter: cqlFilter } }
+                                )
+                            )
+                                .merge(mapActionObservable);
                         }
                         return Rx.Observable.empty();
                     }).catch(() => {