[Fixes #1168] Some issues with map layer style editing

geonode_mapstore_client/client/js/epics/datasetscatalog.js

@@ -10,6 +10,7 @@ import { SET_CONTROL_PROPERTY } from '@mapstore/framework/actions/controls';
 import { updateMapLayout, UPDATE_MAP_LAYOUT } from '@mapstore/framework/actions/maplayout';
 import { mapLayoutSelector } from '@mapstore/framework/selectors/maplayout';
 import { getConfigProp } from "@mapstore/framework/utils/ConfigUtils";
+import { LayoutSections } from "@js/utils/LayoutUtils";
 
 /**
 * @module epics/datasetcatalog
@@ -22,7 +23,7 @@ export const gnUpdateDatasetsCatalogMapLayout = (action$, store) =>
     action$.ofType(UPDATE_MAP_LAYOUT, SET_CONTROL_PROPERTY)
         .filter(() => store.getState()?.controls?.datasetsCatalog?.enabled)
         .filter(({ source }) => {
-            return source !== 'DatasetsCatalog';
+            return source !== LayoutSections.PANEL;
         })
         .map(({ layout }) => {
             const mapLayout = getConfigProp('mapLayout') || { left: { sm: 300, md: 500, lg: 600 }, right: { md: 658 }, bottom: { sm: 30 } };
@@ -35,7 +36,7 @@ export const gnUpdateDatasetsCatalogMapLayout = (action$, store) =>
                     right: mapLayout.right.md
                 }
             });
-            return { ...action, source: 'DatasetsCatalog' }; // add an argument to avoid infinite loop.
+            return { ...action, source: LayoutSections.PANEL }; // add an argument to avoid infinite loop.
         });
 
 export default {

geonode_mapstore_client/client/js/epics/layersettings.js

@@ -10,6 +10,7 @@ import { updateMapLayout, UPDATE_MAP_LAYOUT } from '@mapstore/framework/actions/
 import { mapLayoutSelector } from '@mapstore/framework/selectors/maplayout';
 import { getConfigProp } from "@mapstore/framework/utils/ConfigUtils";
 import { SHOW_SETTINGS } from '@mapstore/framework/actions/layers';
+import { LayoutSections } from "@js/utils/LayoutUtils";
 /**
 * @module epics/layersetting
 */
@@ -21,7 +22,7 @@ export const gnUpdateLayerSettingsMapLayout = (action$, store) =>
     action$.ofType(UPDATE_MAP_LAYOUT, SHOW_SETTINGS)
         .filter(() => store.getState()?.layers?.settings?.expanded)
         .filter(({ source }) => {
-            return source !== 'LayerSettings';
+            return source !== LayoutSections.PANEL;
         })
         .map(({ layout }) => {
             const mapLayout = getConfigProp('mapLayout') || { left: { sm: 300, md: 500, lg: 600 }, right: { md: 658 }, bottom: { sm: 30 } };
@@ -34,7 +35,7 @@ export const gnUpdateLayerSettingsMapLayout = (action$, store) =>
                     left: mapLayout.left.sm
                 }
             });
-            return { ...action, source: 'LayerSettings' }; // add an argument to avoid infinite loop.
+            return { ...action, source: LayoutSections.PANEL }; // add an argument to avoid infinite loop.
         });
 
 export default {

geonode_mapstore_client/client/js/epics/visualstyleeditor.js

@@ -25,6 +25,7 @@ import { getStyleProperties } from '@js/api/geonode/style';
 import { updateMapLayout, UPDATE_MAP_LAYOUT } from '@mapstore/framework/actions/maplayout';
 import { mapLayoutSelector } from '@mapstore/framework/selectors/maplayout';
 import { getConfigProp } from "@mapstore/framework/utils/ConfigUtils";
+import { LayoutSections } from "@js/utils/LayoutUtils";
 
 /**
 * @module epics/visualstyleeditor
@@ -166,7 +167,7 @@ export const gnUpdateVisualStyleEditorMapLayout = (action$, store) =>
     action$.ofType(UPDATE_MAP_LAYOUT, SET_CONTROL_PROPERTY)
         .filter(() => store.getState()?.controls?.visualStyleEditor?.enabled)
         .filter(({ source }) => {
-            return source !== 'VisualStyleEditor';
+            return source !== LayoutSections.PANEL;
         })
         .map(({ layout }) => {
             const mapLayout = getConfigProp('mapLayout') || { left: { sm: 300, md: 500, lg: 600 }, right: { md: 658 }, bottom: { sm: 30 } };
@@ -179,7 +180,7 @@ export const gnUpdateVisualStyleEditorMapLayout = (action$, store) =>
                     left: mapLayout.left.md
                 }
             });
-            return { ...action, source: 'VisualStyleEditor' }; // add an argument to avoid infinite loop.
+            return { ...action, source: LayoutSections.PANEL }; // add an argument to avoid infinite loop.
         });
 
 export default {

geonode_mapstore_client/client/js/selectors/__tests__/mapsave-test.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2021, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import expect from 'expect';
+import {
+    mapSaveSelector
+} from '../mapsave';
+
+describe('mapsave selector', () => {
+    it('should keep the available styles property', () => {
+        const state = {
+            map: {
+                present: {}
+            },
+            layers: {
+                flat: [{ id: '01', availableStyles: [{ name: 'style' }] }]
+            }
+        };
+        const data = mapSaveSelector(state);
+        expect(data.map.layers[0].availableStyles).toEqual([
+            { name: 'style' }
+        ]);
+    });
+});

geonode_mapstore_client/client/js/selectors/mapsave.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2022, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { mapSaveSelector as msMapSaveSelector } from '@mapstore/framework/selectors/mapsave';
+import { layersSelector } from '@mapstore/framework/selectors/layers';
+
+/*
+ * this map save selector is extending the default properties available in the final map data blob
+ * eg. availableStyles property
+ */
+export const mapSaveSelector = (state) => {
+    const layersState = layersSelector(state);
+    const { map, ...data } = msMapSaveSelector(state);
+    return {
+        ...data,
+        map: {
+            ...map,
+            layers: (map?.layers || []).map((layer) => {
+                const layerState = layersState.find((lState) => lState.id === layer.id);
+                if (layerState) {
+                    const { availableStyles } = layerState;
+                    return {
+                        ...layer,
+                        availableStyles
+                    };
+                }
+                return layer;
+            })
+        }
+    };
+};

geonode_mapstore_client/client/js/selectors/resource.js

@@ -7,7 +7,7 @@
  */
 
 import { mapSelector } from '@mapstore/framework/selectors/map';
-import { mapSaveSelector } from '@mapstore/framework/selectors/mapsave';
+import { mapSaveSelector } from '@js/selectors/mapsave';
 import { compareMapChanges } from '@mapstore/framework/utils/MapUtils';
 import { currentStorySelector } from '@mapstore/framework/selectors/geostory';
 import { originalDataSelector } from '@mapstore/framework/selectors/dashboard';

geonode_mapstore_client/client/js/utils/LayoutUtils.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright 2022, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export const LayoutSections = {
+    // we need a constant to prevent infinite loop in the epics that update the layout
+    PANEL: 'PANEL'
+};