#8575 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
@@ -609,6 +610,35 @@ describe('search Epics', () => {
             done();
         }, {layers: {flat: [{name: "layerName", url: "base/web/client/test-resources/wms/GetFeature.json", visibility: true, queryable: true, type: "wms"}]}});
     });
+    it('searchOnStartEpic, that adds popup', (done) => {
+        const testStore = {
+            mapInfo: {showInMapPopup: true},
+            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 = 3;
+        testEpic(searchOnStartEpic, NUM_ACTIONS, action, (actions) => {
+            expect(actions).toExist();
+            expect(actions.length).toBe(NUM_ACTIONS);
+            expect(actions[0].type).toBe(FEATURE_INFO_CLICK);
+            expect(actions[1].type).toBe(SHOW_MAPINFO_MARKER);
+            const popupAction = actions[2];
+            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,16 @@ 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';
 
 const getInfoFormat = (layerObj, state) => getDefaultInfoFormatValueFromLayer(layerObj, {...identifyOptionsSelector(state)});
 
@@ -321,9 +324,14 @@ export const searchOnStartEpic = (action$, store) =>
                     .switchMap(({ type, geometry, typeName }) => {
                         let coord = pointOnSurface({ type, geometry }).geometry.coordinates;
                         const latlng = {lng: coord[0], lat: coord[1] };
+                        const {x, y} = reproject(coord, 'EPSG:4326', 'EPSG:3857');
 
                         if (coord) { // trigger get feature info
-                            return Rx.Observable.of(featureInfoClick({latlng}, typeName, [typeName], {[typeName]: {cql_filter: cqlFilter}}), showMapinfoMarker());
+                            return Rx.Observable.of(featureInfoClick({latlng}, typeName, [typeName], {[typeName]: {cql_filter: cqlFilter}}), showMapinfoMarker())
+                                .merge(Rx.Observable.of(addPopup(uuid(),
+                                    {component: IDENTIFY_POPUP, maxWidth: 600, position: {coordinates: [x, y]}}))
+                                    .filter(() => isMapPopup(store.getState()))
+                                );
                         }
                         return Rx.Observable.empty();
                     }).catch(() => {