[Backport 2024.01.xx] Fix #10237 On Dashboard and Geostory it is no l…

…onger possible to interact with layer filter (#10285)

* Fix #10237 On Dashboard and Geostory it is no longer possible to interact with layer filter (#10280)

* Fix #10237 hide filter button from dashboard legend (#10283)

web/client/components/widgets/widget/LegendView.jsx

@@ -35,7 +35,8 @@ export default ({
                 scales,
                 zoom: currentZoomLvl,
                 layerOptions: {
-                    legendOptions: legendProps
+                    legendOptions: legendProps,
+                    hideFilter: true
                 }
             }}
             onChangeMap={(newMap) => {

web/client/plugins/FilterLayer/index.jsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { createPlugin } from '../../utils/PluginsUtils';
 import { openQueryBuilder } from '../../actions/layerFilter';
-import FilterNodeTool from './components/FilterNodeTool';
+
 // dummy plugin
 const FilterLayer = () => null;
 
@@ -55,11 +55,6 @@ export default createPlugin('FilterLayer',
                 target: 'toolbar',
                 Component: FilterLayerButton,
                 position: 6
-            }, {
-                name: "FilterLayer",
-                target: 'node-tool',
-                Component: FilterNodeTool,
-                position: 6
             }]
         }
     }

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

@@ -23,6 +23,7 @@ import NodeHeader from './NodeHeader';
 import NodeTool from './NodeTool';
 import ExpandButton from './ExpandButton';
 import Message from '../../../components/I18N/Message';
+import FilterNodeTool from './FilterNodeTool';
 
 const getLayerVisibilityWarningMessageId = (node, config = {}) => {
     if (config.visualizationMode === VisualizationModes._2D && ['3dtiles', 'model'].includes(node.type)) {
@@ -127,6 +128,10 @@ const DefaultLayerNode = ({
         itemComponent: NodeTool
     };
 
+    const filterNode = !config?.layerOptions?.hideFilter
+        ? [{ name: 'FilterLayer', Component: FilterNodeTool }]
+        : [];
+
     return (
         <>
             <NodeHeader
@@ -160,7 +165,7 @@ const DefaultLayerNode = ({
                                 ? indicator.glyph && <NodeTool onClick={false} key={indicator.key} glyph={indicator.glyph} {...indicator.props} />
                                 : null)
                             : null}
-                        {nodeToolItems.filter(({ selector = () => true }) => selector(componentProps)).map(({ Component, name }) => {
+                        {[ ...filterNode, ...nodeToolItems ].filter(({ selector = () => true }) => selector(componentProps)).map(({ Component, name }) => {
                             return (<Component key={name} {...componentProps} />);
                         })}
                     </>
@@ -216,6 +221,7 @@ const DefaultLayerNode = ({
  * @prop {object} config.layerOptions.tooltipOptions options for layer title tooltip
  * @prop {boolean} config.layerOptions.hideLegend hide the legend of the layer
  * @prop {object} config.layerOptions.legendOptions additional options for WMS legend
+ * @prop {boolean} config.layerOptions.hideFilter hide the filter button
  */
 const DefaultLayer = ({
     node: nodeProp,

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

@@ -55,6 +55,7 @@ import {
  * @prop {object} config.layerOptions.tooltipOptions options for layer title tooltip
  * @prop {boolean} config.layerOptions.hideLegend hide the legend of the layer
  * @prop {object} config.layerOptions.legendOptions additional options for WMS legend
+ * @prop {boolean} config.layerOptions.hideFilter hide the filter button in the layer nodes
  */
 export function ControlledTOC({
     tree,
@@ -133,6 +134,7 @@ export function ControlledTOC({
  * @prop {object} config.layerOptions.tooltipOptions options for layer title tooltip
  * @prop {boolean} config.layerOptions.hideLegend hide the legend of the layer
  * @prop {object} config.layerOptions.legendOptions additional options for WMS legend
+ * @prop {boolean} config.layerOptions.hideFilter hide the filter button in the layer nodes
  */
 function TOC({
     map = { layers: [], groups: [] },

web/client/plugins/TOC/components/__tests__/DefaultLayer-test.jsx

@@ -394,4 +394,34 @@ describe('test DefaultLayer module component', () => {
         expect(layerNode).toBeFalsy();
         expect(errorTooltip).toBeFalsy();
     });
+
+    it('should display the layer filter button', () => {
+        const layer = {
+            id: 'layer00',
+            name: 'layer00',
+            title: 'Layer',
+            visibility: false,
+            opacity: 0.5,
+            layerFilter: {}
+        };
+
+        ReactDOM.render(<Layer node={layer} />, document.getElementById("container"));
+        const filter = document.querySelector('.glyphicon-filter');
+        expect(filter).toBeTruthy();
+    });
+
+    it('should not display the layer filter button when hideFilter is true', () => {
+        const layer = {
+            id: 'layer00',
+            name: 'layer00',
+            title: 'Layer',
+            visibility: false,
+            opacity: 0.5,
+            layerFilter: {}
+        };
+
+        ReactDOM.render(<Layer node={layer} config={{ layerOptions: { hideFilter: true } }} />, document.getElementById("container"));
+        const filter = document.querySelector('.glyphicon-filter');
+        expect(filter).toBeFalsy();
+    });
 });

web/client/plugins/TOC/index.js

@@ -145,6 +145,7 @@ registerCustomSaveHandler('toc', (state) => (state?.toc?.config));
  *   }
  * }
  * ```
+ * @prop {boolean} config.layerOptions.hideFilter hide the filter button in the layer nodes
  * @prop {boolean} defaultOpen if true will open the table of content at initialization
  * @prop {object[]} items this property contains the items injected from the other plugins,
  * using the `containers` option in the plugin that want to inject the components.