Fix geosolutions-it#10489 Problems with GeoStory map configurations merge process (geosolutions-it#10438)

Author: mahmoudadel54

web/client/components/geostory/common/enhancers/__tests__/map-test.jsx

@@ -35,7 +35,29 @@ describe("geostory media map component enhancers", () => {
         const Sink = withMapEnhancer(createSink( props => {
             expect(props).toBeTruthy();
             expect(props.map).toBeTruthy();
-            expect(props.map).toEqual({id: "2", layers: []});
+            expect(props.map).toEqual({id: "2", layers: [], groups: []});
+            done();
+        }));
+        ReactDOM.render(<Provider store={store}><Sink resourceId={resourceId} map={{}}/></Provider>, document.getElementById("container"));
+    });
+    it('withMapEnhancer generate correct props for legacy geostory', (done) => {
+        const resources = [{id: "1", type: "map", data: {id: "2", layers: [ {
+            "visibility": true
+        }, null], groups: [null, null, {
+            "expanded": false
+        }], context: "1"}}];
+        const store = {
+            subscribe: () => {}, getState: () => ({geostory: {currentStory: {resources}}})
+        };
+        const resourceId = "1";
+        const Sink = withMapEnhancer(createSink( props => {
+            expect(props).toBeTruthy();
+            expect(props.map).toBeTruthy();
+            expect(props.map).toEqual({id: "2", layers: [ {
+                "visibility": true
+            }, undefined], groups: [undefined, undefined, {
+                "expanded": false
+            }]});
             done();
         }));
         ReactDOM.render(<Provider store={store}><Sink resourceId={resourceId} map={{}}/></Provider>, document.getElementById("container"));

web/client/components/geostory/common/enhancers/map.jsx

@@ -37,9 +37,11 @@ export default compose(
             }))),
     withProps(
         ({ resources, resourceId, map = {}}) => {
-            const cleanedMap = {...map, layers: (map.layers || []).map(l => l ? l : undefined)};
             const resource = find(resources, { id: resourceId }) || {};
-            return { map: createMapObject(omit(resource.data, ['context']), cleanedMap)};
+            const baseMap = omit(resource.data, ['context']);
+            const isLegacyGeostory = (map?.layers || [])?.indexOf(null) !== -1 || (map?.groups || [])?.indexOf(null) !== -1;
+            const cleanedMap = {...map, layers: (map.layers || baseMap?.layers || []).map(lay => lay ? lay : undefined), groups: (map.groups || baseMap?.groups || []).map(gr => gr ? gr : undefined)};         // for better initiating cleanedMap layers in case 'map.layers = undefined' -> baseMap.layers check is added in fallBack
+            return { map: createMapObject(baseMap, cleanedMap, isLegacyGeostory)};
         }
     ));
 /**

web/client/plugins/TOC/components/StyleBasedWMSJsonLegend.jsx

@@ -129,9 +129,9 @@ class StyleBasedWMSJsonLegend extends React.Component {
         return '';
     }
     renderRules = (rules) => {
+        const isLegendFilterIncluded = this.props?.layer?.layerFilter?.filters?.find(f=>f.id === 'interactiveLegend');
+        const legendFilters = isLegendFilterIncluded ? isLegendFilterIncluded?.filters : [];
         return (rules || []).map((rule) => {
-            const isLegendFilterIncluded = this.props?.layer?.layerFilter?.filters?.find(f=>f.id === 'interactiveLegend');
-            const legendFilters = isLegendFilterIncluded ? isLegendFilterIncluded?.filters : [];
             const isFilterExistBefore = legendFilters?.find(f => f.id === rule.filter);
             const isFilterDisabled = this.props?.layer?.layerFilter?.disabled;
             const activeFilter = rule.filter && isFilterExistBefore;

web/client/utils/GeoStoryUtils.js

@@ -171,10 +171,18 @@ export const applyDefaults = (options = {}) => merge({}, DEFAULT_MAP_OPTIONS, op
  * create map object
  * @param {object} baseMap initial map object
  * @param {object} overrides object to override with
+ * @param {bool} isLegacyGeostory boolean that indicates if the geostory is legacy one or new
  * @return {object} options merged with defaults
  */
-export const createMapObject = (baseMap = {}, overrides = {}) => {
-    return merge({}, baseMap, overrides);
+export const createMapObject = (baseMap = {}, overrides = {}, isLegacyGeostory = false) => {
+    const mergedMap = merge({}, baseMap, overrides);
+    if (isLegacyGeostory) {
+        return mergedMap;
+    }
+    return {
+        ...mergedMap, layers: overrides?.layers || [], groups: overrides?.groups || []
+    };
+
 };
 /**
  * check if a string matches a regex

web/client/utils/__tests__/GeoStoryUtils-test.js

@@ -351,17 +351,139 @@ describe("GeoStory Utils", () => {
                     mouseClick: false,
                     dragPan: true
                 }
-            }
+            },
+            layers: [], groups: []
         };
         const res = createMapObject(DEFAULT_MAP_OPTIONS, {
             mapOptions: {
+                scrollWheelZoom: false,
                 interactions: {
                     mouseClick: false
                 }
             }
         });
         expect(res).toEqual(merged);
     });
+    it('test override layers in  createMapObject', () => {
+        // initial baseMap layer is empty array
+        const merged1 = {
+            zoomControl: true,
+            mapInfoControl: false,
+            mapOptions: {
+                scrollWheelZoom: false,
+                interactions: {
+                    mouseWheelZoom: false,
+                    mouseClick: false,
+                    dragPan: true
+                }
+            },
+            layers: [{
+                name: "layer01", center: {x: 1, y: 1, crs: 'EPSG:4326'}, zoom: 1
+            }, {
+                name: "layer02", center: {x: 2, y: 2, crs: 'EPSG:4326'}, zoom: 2
+            }],
+            groups: []
+        };
+        const res1 = createMapObject({...DEFAULT_MAP_OPTIONS, layers: []}, {
+            mapOptions: {
+                scrollWheelZoom: false,
+                interactions: {
+                    mouseClick: false
+                }
+            },
+            layers: [{
+                name: "layer01", center: {x: 1, y: 1, crs: 'EPSG:4326'}, zoom: 1
+            }, {
+                name: "layer02", center: {x: 2, y: 2, crs: 'EPSG:4326'}, zoom: 2
+            }]
+        });
+        expect(res1).toEqual(merged1);
+        // initial baseMap layer not empty array
+        const merged2 = {
+            zoomControl: true,
+            mapInfoControl: false,
+            mapOptions: {
+                scrollWheelZoom: false,
+                interactions: {
+                    mouseWheelZoom: false,
+                    mouseClick: false,
+                    dragPan: true
+                }
+            },
+            layers: [{
+                name: "layer01", center: {x: 1.5, y: 1.5, crs: 'EPSG:4326'}, zoom: 1.5
+            }, {
+                name: "layer02", center: {x: 2, y: 2, crs: 'EPSG:4326'}, zoom: 2
+            }],
+            groups: []
+        };
+        const res2 = createMapObject({...DEFAULT_MAP_OPTIONS, layers: [{
+            name: "layer01", center: {x: 1, y: 1, crs: 'EPSG:4326'}, zoom: 1
+        }]}, {
+            mapOptions: {
+                scrollWheelZoom: false,
+                interactions: {
+                    mouseClick: false
+                }
+            },
+            layers: [{
+                name: "layer01", center: {x: 1.5, y: 1.5, crs: 'EPSG:4326'}, zoom: 1.5
+            }, {
+                name: "layer02", center: {x: 2, y: 2, crs: 'EPSG:4326'}, zoom: 2
+            }]
+        });
+        expect(res2).toEqual(merged2);
+        // legacy geostory
+        const merged3 = {
+            zoomControl: true,
+            mapInfoControl: false,
+            mapOptions: {
+                scrollWheelZoom: false,
+                interactions: {
+                    mouseWheelZoom: false,
+                    mouseClick: false,
+                    dragPan: true
+                }
+            },
+            layers: [{
+                "visibility": false
+            },  {
+                "visibility": true
+            }, undefined],
+            groups: [undefined, {
+                expanded: true
+            }, {
+                expanded: true
+            }]
+        };
+        const res3 = createMapObject({...DEFAULT_MAP_OPTIONS, layers: [{
+            "visibility": true
+        },  {
+            "visibility": false
+        }, undefined], groups: [undefined, {
+            expanded: false
+        }, {
+            expanded: true
+        }]}, {
+            mapOptions: {
+                scrollWheelZoom: false,
+                interactions: {
+                    mouseClick: false
+                }
+            },
+            layers: [{
+                "visibility": false
+            },  {
+                "visibility": true
+            }, undefined],
+            groups: [undefined, {
+                expanded: true
+            }, {
+                expanded: true
+            }]
+        }, true);
+        expect(res3).toEqual(merged3);
+    });
     it('test testRegex', () => {
         const title = "title";
         expect(testRegex(title, "it")).toBe(true);