#8997: fix map sync issue in feature grid (#9805) (#9827)

* #8997: fix map sync issue in feature grid

* #8997: resolve review comments on PR
Description:
- fix logic issue if enableMapFilterSync = true in config
- refactor code by avoid inline if

web/client/actions/__tests__/featuregrid-test.js

@@ -272,6 +272,12 @@ describe('Test correctness of featurgrid actions', () => {
         expect(retval).toExist();
         expect(retval.type).toBe(CLOSE_FEATURE_GRID);
     });
+    it('Test closeFeatureGrid with closer', () => {
+        const retval = closeFeatureGrid('closer1');
+        expect(retval).toExist();
+        expect(retval.type).toBe(CLOSE_FEATURE_GRID);
+        expect(retval.closer).toBe('closer1');
+    });
     it('Test closeFeatureGridConfirm', () => {
         const retval = closeFeatureGridConfirm();
         expect(retval).toExist();

web/client/actions/featuregrid.js

@@ -308,9 +308,10 @@ export function closeFeatureGridConfirm() {
         type: CLOSE_FEATURE_GRID_CONFIRM
     };
 }
-export function closeFeatureGrid() {
+export function closeFeatureGrid(closer) {
     return {
-        type: CLOSE_FEATURE_GRID
+        type: CLOSE_FEATURE_GRID,
+        closer      // the closer of feature grid like: 'queryPanel'
     };
 }
 export function openFeatureGrid() {

web/client/epics/featuregrid.js

@@ -1038,7 +1038,7 @@ export const onOpenAdvancedSearch = (action$, store) =>
             // hide selected features from map
             selectFeatures([]),
             loadFilter(get(store.getState(), `featuregrid.advancedFilters["${selectedLayerIdSelector(store.getState())}"]`)),
-            closeFeatureGrid(),
+            closeFeatureGrid('queryPanel'),
             setControlProperty('queryPanel', "enabled", true)
         )
             .merge(
@@ -1049,7 +1049,8 @@ export const onOpenAdvancedSearch = (action$, store) =>
                             createQuery(action.searchUrl, action.filterObj),
                             storeAdvancedSearchFilter(assign({}, queryFormUiStateSelector(store.getState()), action.filterObj)),
                             setControlProperty('queryPanel', "enabled", false),
-                            openFeatureGrid()
+                            openFeatureGrid(),
+                            isSyncWmsActive(store.getState()) ? startSyncWMS() : Rx.Observable.empty()          // to keep sync icon active if it is previously active before opening advanced search
                         );
                     }),
                     action$.ofType(TOGGLE_CONTROL)
@@ -1103,9 +1104,21 @@ export const stopSyncWmsFilter = (action$, store) =>
      */
 export const deactivateSyncWmsFilterOnFeatureGridClose = (action$, store) =>
     action$.ofType(CLOSE_FEATURE_GRID)
+        .switchMap(() => {
+            let state = store.getState();
+            let isQueryPanelClosingFeatureGrid  = state.featuregrid?.closer === 'queryPanel';
+            if (isQueryPanelClosingFeatureGrid  && isSyncWmsActive(state)) {        // in case close grid by queryPanel, remove filter to dislay all feats on map
+                return Rx.Observable.of(removeFilterFromWMSLayer(store.getState()));
+            } else if (isSyncWmsActive(state) && !isQueryPanelClosingFeatureGrid ) {            // if close feature grid by others---> reset wms sync
+                return Rx.Observable.of(toggleSyncWms());
+            }
+            return Rx.Observable.empty();
+        });
+export const activateSyncWmsFilterOnFeatureGridOpen = (action$, store) =>
+    action$.ofType(OPEN_FEATURE_GRID)
         .filter(() => isSyncWmsActive(store.getState()))
         .switchMap(() => {
-            return Rx.Observable.of(toggleSyncWms());
+            return Rx.Observable.of(startSyncWMS());
         });
 /**
  * Sync map with filter.

web/client/plugins/featuregrid/FeatureEditor.jsx

@@ -19,7 +19,7 @@ import BorderLayout from '../../components/layout/BorderLayout';
 import { toChangesMap} from '../../utils/FeatureGridUtils';
 import { sizeChange, setUp, setSyncTool } from '../../actions/featuregrid';
 import {mapLayoutValuesSelector} from '../../selectors/maplayout';
-import {paginationInfo, describeSelector, wfsURLSelector, typeNameSelector} from '../../selectors/query';
+import {paginationInfo, describeSelector, wfsURLSelector, typeNameSelector, isSyncWmsActive} from '../../selectors/query';
 import {modeSelector, changesSelector, newFeaturesSelector, hasChangesSelector, selectedLayerFieldsSelector, selectedFeaturesSelector, getDockSize} from '../../selectors/featuregrid';
 
 import {getPanels, getHeader, getFooter, getDialogs, getEmptyRowsView, getFilterRenderers} from './panels/index';
@@ -274,19 +274,23 @@ export const selector = createStructuredSelector({
 });
 
 const EditorPlugin = compose(
-    connect(() => ({}),
-        (dispatch) => ({
-            onMount: bindActionCreators(setUp, dispatch),
-            setSyncTool: bindActionCreators(setSyncTool, dispatch)
-        })),
+    connect((state) => ({
+        isSyncWmsActive: isSyncWmsActive(state)
+    }),
+    (dispatch) => ({
+        onMount: bindActionCreators(setUp, dispatch),
+        setSyncTool: bindActionCreators(setSyncTool, dispatch)
+    })),
     lifecycle({
         componentDidMount() {
             // only the passed properties will be picked
             this.props.onMount(pick(this.props, ['showFilteredObject', 'showTimeSync', 'timeSync', 'customEditorsOptions']));
-            if (this.props.enableMapFilterSync) {
-                this.props.setSyncTool(true);
-            } else {
-                this.props.setSyncTool(false);
+            if (!this.props.isSyncWmsActive) {
+                if (this.props.enableMapFilterSync) {
+                    this.props.setSyncTool(true);
+                } else {
+                    this.props.setSyncTool(false);
+                }
             }
         },
         // TODO: fix this in contexts
@@ -298,11 +302,6 @@ const EditorPlugin = compose(
             if (!isEqual(newOptions, oldOptions) ) {
                 this.props.onMount(newOptions);
             }
-            if (this.props.enableMapFilterSync) {
-                this.props.setSyncTool(true);
-            } else {
-                this.props.setSyncTool(false);
-            }
         }
     }),
     connect(selector,

web/client/reducers/__tests__/featuregrid-test.js

@@ -139,6 +139,13 @@ describe('Test the featuregrid reducer', () => {
         expect(state.open).toBe(false);
         expect(state.mode).toBe(MODES.VIEW);
     });
+    it('closeFeatureGrid with closer', () => {
+        let state = featuregrid(undefined, closeFeatureGrid('closer1'));
+        expect(state).toExist();
+        expect(state.open).toBe(false);
+        expect(state.mode).toBe(MODES.VIEW);
+        expect(state.closer).toBe('closer1');
+    });
 
     it('selectFeature', () => {
         // TODO FIX this test or the reducer

web/client/reducers/featuregrid.js

@@ -325,7 +325,8 @@ function featuregrid(state = emptyResultsState, action) {
     }
     case OPEN_FEATURE_GRID: {
         return assign({}, state, {
-            open: true
+            open: true,
+            closer: null
         });
     }
     case CLOSE_FEATURE_GRID: {
@@ -341,7 +342,8 @@ function featuregrid(state = emptyResultsState, action) {
             deleteConfirm: false,
             drawing: false,
             newFeatures: [],
-            changes: []
+            changes: [],
+            closer: action.closer
         });
     }
     case DISABLE_TOOLBAR: {