geosolutions-it#10235: Interactive legend in dashboard and geostory

Description: - handle showing interactive legend option for dashboard and geostory - handle saving layerFilter for dashboard and geostory - add unit test - add refactoring to StyleBasedWMSJsonLegend
mahmoudadel54 · Jun 13, 2024 · 407112b · 407112b
1 parent bc4aefc
commit 407112b
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 27 deletions.
diff --git a/web/client/components/widgets/builder/wizard/map/NodeEditor.jsx b/web/client/components/widgets/builder/wizard/map/NodeEditor.jsx
@@ -41,7 +41,6 @@ export default ({
             {tabs.filter(tab => tab.id && tab.id === activeTab).filter(tab => tab.Component).map(tab => (
                 <tab.Component
                     {...props}
-                    hideInteractiveLegendOption
                     key={'ms-tab-settings-body-' + tab.id}
                     containerWidth={width}
                     element={element}

diff --git a/web/client/components/widgets/builder/wizard/map/__tests__/NodeEditor-test.jsx b/web/client/components/widgets/builder/wizard/map/__tests__/NodeEditor-test.jsx
@@ -135,4 +135,47 @@ describe('NodeEditor component', () => {
         const cacheOptionsNode = document.querySelector('.ms-wms-cache-options-toolbar');
         expect(cacheOptionsNode).toBeFalsy();
     });
+    it('interactive legend should be visible in Display tab with nodeEditor(NodeEditor)', () => {
+        const layer = {
+            id: 'layer-01',
+            type: 'wms',
+            name: 'workspace:layer',
+            group: 'group-01',
+            url: '/geoserver/wms',
+            tileGridStrategy: 'custom',
+            tileGrids: [
+                {
+                    id: 'EPSG:32122x2',
+                    crs: 'EPSG:32122',
+                    scales: [2557541.55271451, 1278770.776357255, 639385.3881786275],
+                    origins: [[403035.4105968763, 414783], [403035.4105968763, 414783], [403035.4105968763, 323121]],
+                    tileSize: [512, 512]
+                },
+                {
+                    id: 'EPSG:900913',
+                    crs: 'EPSG:900913',
+                    scales: [559082263.9508929, 279541131.97544646, 139770565.98772323],
+                    origin: [-20037508.34, 20037508],
+                    tileSize: [256, 256]
+                }
+            ]
+        };
+        ReactDOM.render(<EnhancedNodeEditor
+            activeTab="display"
+            map={{ projection: 'EPSG:3857', groups: [{ id: layer.group }], layers: [layer] }}
+            nodes={[{ id: layer.group, nodes: [layer]}]}
+            layers={[layer]}
+            editNode={layer.id}
+        />, document.getElementById("container"));
+
+        const tabs = document.querySelectorAll('.nav-tabs > li > a');
+        expect(tabs.length).toBe(3);
+
+        Simulate.click(tabs[1]);
+
+        const legendOptionInput = document.querySelector('.legend-options input');
+        const legendOptionInputLabel = document.querySelector('.legend-options span');
+        expect(legendOptionInput).toExist();
+        expect(legendOptionInputLabel.innerText).toEqual('layerProperties.legendOptions.title');
+    });
 });
diff --git a/web/client/components/widgets/enhancers/legendWidget.js b/web/client/components/widgets/enhancers/legendWidget.js
@@ -58,7 +58,8 @@ export default compose(
                                 ...layer,
                                 visibility: updateLayer.visibility,
                                 opacity: updateLayer.opacity,
-                                expanded: updateLayer.expanded
+                                expanded: updateLayer.expanded,
+                                layerFilter: updateLayer.layerFilter
                             };
                         }
                         return layer;

diff --git a/web/client/plugins/TOC/components/StyleBasedWMSJsonLegend.jsx b/web/client/plugins/TOC/components/StyleBasedWMSJsonLegend.jsx
@@ -51,8 +51,7 @@ class StyleBasedWMSJsonLegend extends React.Component {
     state = {
         error: false,
         loading: false,
-        jsonLegend: {},
-        selectedFilters: []
+        jsonLegend: {}
     }
     componentDidMount() {
         this.getLegendData();
@@ -65,12 +64,6 @@ class StyleBasedWMSJsonLegend extends React.Component {
         if (currentLayerStyle !== prevLayerStyle) {
             this.getLegendData();
         }
-        // reset selected filters in case reset legend filter by external reason like reset from query form/change style ..etc
-        const isLegendFilterIncluded = this.props?.layer?.layerFilter?.filters?.find(f=>f.id === 'interactiveLegend');
-        const legendFilters = isLegendFilterIncluded ? isLegendFilterIncluded?.filters : [];
-        if (!legendFilters.length && this.state.selectedFilters.length) {
-            this.setState({selectedFilters: []});
-        }
     }
 
     getLegendData() {
@@ -81,9 +74,7 @@ class StyleBasedWMSJsonLegend extends React.Component {
         }
         this.setState({ loading: true });
         getJsonWMSLegend(jsonLegendUrl).then(data => {
-            const isLegendFilterIncluded = this.props?.layer?.layerFilter?.filters?.find(f=>f.id === 'interactiveLegend');
-            const prevFilters = isLegendFilterIncluded ? isLegendFilterIncluded?.filters : [];
-            this.setState({ jsonLegend: data[0], loading: false, selectedFilters: prevFilters?.map(fil => fil.id) || [] });
+            this.setState({ jsonLegend: data[0], loading: false });
         }).catch(() => {
             this.setState({ error: true, loading: false });
         });
@@ -139,7 +130,9 @@ class StyleBasedWMSJsonLegend extends React.Component {
     }
     renderRules = (rules) => {
         return (rules || []).map((rule) => {
-            const isFilterExistBefore = this.state.selectedFilters?.find(f => f === rule.filter);
+            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;
             return (<div className={`wms-json-legend-rule ${isFilterDisabled || this.props.owner === 'legendPreview' || !rule?.filter ? "" : "filter-enabled "} ${activeFilter ? 'active' : ''}`} key={rule.filter} onClick={() => this.filterWMSLayerHandler(rule.filter)}>
@@ -173,13 +166,6 @@ class StyleBasedWMSJsonLegend extends React.Component {
         if (!filter || isFilterDisabled) return;
         const newLayerFilter = updateLayerLegendFilter(this.props?.layer?.layerFilter, filter);
         this.props.onChange({ layerFilter: newLayerFilter });
-        let updatedSelectedFilters = [...this.state.selectedFilters];
-        if (!updatedSelectedFilters.includes(filter)) {
-            updatedSelectedFilters = [...updatedSelectedFilters, filter];
-        } else {
-            updatedSelectedFilters = updatedSelectedFilters.filter(prevFilter => prevFilter !== filter);
-        }
-        this.setState({ selectedFilters: updatedSelectedFilters });
     };
 }
 

diff --git a/web/client/plugins/mapEditor/DefaultConfiguration.js b/web/client/plugins/mapEditor/DefaultConfiguration.js
@@ -64,12 +64,7 @@ export default {
             }
         },
         "AddGroup", "MapFooter",
-        {
-            "name": "TOCItemsSettings",
-            "cfg": {
-                "hideInteractiveLegendOption": true
-            }
-        },
+        "TOCItemsSettings",
         "MapImport",
         "MapExport",
         {