Fix #2876 Cross layer filter doesn't work if layer has localized title

web/client/plugins/FloatingLegend.jsx

@@ -11,7 +11,7 @@ const PropTypes = require('prop-types');
 const assign = require('object-assign');
 const {connect} = require('react-redux');
 const {createSelector} = require('reselect');
-const {reverse, head, get, isObject} = require('lodash');
+const {reverse, head, get} = require('lodash');
 const {updateNode} = require('../actions/layers');
 const {resizeLegend, expandLegend} = require('../actions/floatinglegend');
 const {layersSelector} = require('../selectors/layers');
@@ -22,6 +22,7 @@ const {isFeatureGridOpen} = require('../selectors/featuregrid');
 const {legendSizeSelector, legendExpandedSelector} = require('../selectors/floatinglegend');
 const FloatingLegend = require('../components/TOC/FloatingLegend');
 const {parseLayoutValue, getScales} = require('../utils/MapUtils');
+const {getTitle} = require('../utils/LayersUtils');
 
 /**
  * FloatingLegend plugin.
@@ -70,8 +71,6 @@ class FloatingLegendComponent extends React.Component {
     }
 }
 
-const parseTitleObject = (title, currentLocale) => title && isObject(title) && (title[currentLocale] || title.default) || title || '';
-
 const floatingLegendSelector = createSelector(
     [
         layersSelector,
@@ -87,7 +86,7 @@ const floatingLegendSelector = createSelector(
         layers: featuredGridOpen && [] || layers && reverse([
             ...layers
                 .filter(layer => layer && layer.group !== 'background' && !layer.loadingError)
-                .map(({title, ...layer}) => ({...layer, title: parseTitleObject(title, currentLocale)}))
+                .map((layer) => ({...layer, title: getTitle(layer, currentLocale)}))
         ]) || [],
         title: map && map.info && map.info.name || '',
         height: size.height || 300,

web/client/selectors/queryform.js

@@ -3,9 +3,13 @@ const {createSelector} = require('reselect');
 
 const {layersSelector} = require('./layers');
 
+const {currentLocaleSelector} = require('./locale');
+
+const {getTitle} = require('../utils/LayersUtils');
+
 const crossLayerFilterSelector = state => get(state, "queryform.crossLayerFilter");
 // TODO we should also check if the layer are from the same source to allow cross layer filtering
-const availableCrossLayerFilterLayersSelector = state =>(layersSelector(state) || []).filter(({type} = {}) => type === "wms");
+const availableCrossLayerFilterLayersSelector = state =>(layersSelector(state) || []).filter(({type} = {}) => type === "wms").map((layer) => ({...layer, title: getTitle(layer, currentLocaleSelector(state))}));
 const spatialFieldGeomSelector = state => get(state, "queryform.spatialField.geometry");
 const spatialFieldSelector = state => get(state, "queryform.spatialField");
 const attributePanelExpandedSelector = state => get(state, "queryform.attributePanelExpanded");

web/client/utils/LayersUtils.js

@@ -500,7 +500,15 @@ const LayersUtils = {
 
         }
         return layers;
-    }
+    },
+    /**
+     * Retrieve title of layer from localized object or string
+     * and return a string
+     * @param {object} layer layer object, source of title
+     * @param {string} currentLocale code of locale, eg. en-US
+     * @returns {string} title of layer
+     */
+    getTitle: (layer, currentLocale) => layer && layer.title && isObject(layer.title) && (layer.title[currentLocale] || layer.title.default) || layer && layer.title || ''
 };
 
 module.exports = LayersUtils;

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

@@ -458,4 +458,12 @@ describe('LayersUtils', () => {
 
     });
 
+    it('getTitle', () => {
+        expect(LayersUtils.getTitle()).toBe('');
+        const layerWithTitleString = {title: 'title'};
+        expect(LayersUtils.getTitle(layerWithTitleString)).toBe('title');
+        const layerWithLocalizedTitle = {title: {'it-IT': 'titolo', 'default': 'title'}};
+        expect(LayersUtils.getTitle(layerWithLocalizedTitle, 'it-IT')).toBe('titolo');
+        expect(LayersUtils.getTitle(layerWithLocalizedTitle, 'fr-FR')).toBe('title');
+    });
 });