-
-
-
- onChange(name, "alias", value)} value={alias} currentLocale={currentLocale} />
-
-
-
-
+ {displayedFields
+ .map((field) => {
+ const { name, alias, type, visible, displayType, mediaTypeAttribute } = field;
+ const isConfigured = configuredFields.includes(name);
+ return (
+
+ {showVisibility ?
+ onChange(name, "visible", event.target.checked)}/>
+ : null}
+
+
+ {showFieldSettings ? null :
+ onChange(name, "alias", value)} value={alias} currentLocale={currentLocale} />
+ }
+
+
+
+ {showFieldSettings ?
+ toggleFieldSettings(name)}>
+
+ : null}
+
+ {showFieldSettings && isConfigured ?
+
+ onChange(name, "alias", value)} value={alias} currentLocale={currentLocale} />
+
+
+
+ {displayType === 'media' ?
+ optionName !== name).map(({ name: optionName, alias: optionAlias }) => ({
+ value: optionName,
+ label: extractLocalizedString(optionAlias, currentLocale) || optionName
+ }))}
+ onChange={(selected) => onChange(name, 'mediaTypeAttribute', selected?.value)}/>
+
: null}
+
: null}
);
})}
@@ -103,9 +190,14 @@ Fields.propTypes = {
fields: PropTypes.array,
onLoadFields: PropTypes.func,
onChange: PropTypes.func,
+ onChangeAll: PropTypes.func,
onClear: PropTypes.func,
loading: PropTypes.bool,
- error: PropTypes.bool
+ error: PropTypes.bool,
+ currentLocale: PropTypes.string,
+ title: PropTypes.node,
+ showVisibility: PropTypes.bool,
+ showFieldSettings: PropTypes.bool
};
export default Fields;
diff --git a/web/client/components/TOC/fragments/LayerFields/__tests__/Fields-test.jsx b/web/client/components/TOC/fragments/LayerFields/__tests__/Fields-test.jsx
index 1d66eff1997..2ea7143da25 100644
--- a/web/client/components/TOC/fragments/LayerFields/__tests__/Fields-test.jsx
+++ b/web/client/components/TOC/fragments/LayerFields/__tests__/Fields-test.jsx
@@ -19,6 +19,7 @@ describe('TOC Settings - Fields component', () => {
const container = document.getElementById('container');
const el = container.querySelector('.layer-fields');
expect(el).toBeTruthy();
+ expect(el.classList.contains('layer-fields-with-settings')).toBe(false);
});
it('rendering fields', () => {
const actions = {
@@ -139,4 +140,97 @@ describe('TOC Settings - Fields component', () => {
const rows = container.querySelectorAll('.ms2-border-layout-body .layer-fields-row');
expect(rows.length).toBe(2);
});
+ it('optionally renders visibility controls', () => {
+ const actions = {
+ onChange: () => {}
+ };
+ const spy = expect.spyOn(actions, 'onChange');
+ ReactDOM.render(
+
,
+ document.getElementById('container')
+ );
+ const container = document.getElementById('container');
+ expect(container.querySelector('.layer-fields-toolbar')).toExist();
+ const visibilityInputs = container.querySelectorAll('.layer-fields-row .layer-field-visibility input');
+ expect(visibilityInputs.length).toBe(3);
+ expect(visibilityInputs[0].checked).toBe(true);
+ expect(visibilityInputs[2].checked).toBe(false);
+
+ Simulate.change(visibilityInputs[2], {target: {checked: true}});
+ expect(spy).toHaveBeenCalledWith('hidden', 'visible', true);
+ });
+ it('toggles every attribute with the header checkbox', () => {
+ const actions = {
+ onChangeAll: () => {}
+ };
+ const spy = expect.spyOn(actions, 'onChangeAll');
+ const container = document.getElementById('container');
+ const render = (fields) => ReactDOM.render(
+
,
+ container
+ );
+ const headerCheckbox = () => container.querySelector('.layer-fields-row-header .layer-field-visibility input');
+
+ render([{name: 'a', type: 'string', visible: true}, {name: 'b', type: 'string', visible: true}]);
+ expect(headerCheckbox().checked).toBe(true);
+ expect(headerCheckbox().indeterminate).toBe(false);
+
+ render([{name: 'a', type: 'string', visible: true}, {name: 'b', type: 'string', visible: false}]);
+ expect(headerCheckbox().checked).toBe(false);
+ expect(headerCheckbox().indeterminate).toBe(true);
+
+ render([{name: 'a', type: 'string', visible: false}, {name: 'b', type: 'string', visible: false}]);
+ expect(headerCheckbox().checked).toBe(false);
+ expect(headerCheckbox().indeterminate).toBe(false);
+
+ Simulate.change(headerCheckbox(), {target: {checked: true}});
+ expect(spy).toHaveBeenCalledWith('visible', true);
+ });
+ it('shows display settings only after clicking the field settings button', () => {
+ ReactDOM.render(
+
,
+ document.getElementById('container')
+ );
+ const container = document.getElementById('container');
+ expect(container.querySelector('.layer-field-settings-panel')).toNotExist();
+ const settingsButtons = container.querySelectorAll('.layer-field-settings-button');
+ expect(settingsButtons.length).toBe(2);
+ Simulate.click(settingsButtons[0]);
+ expect(container.querySelector('.layer-field-settings-panel')).toExist();
+ Simulate.click(settingsButtons[0]);
+ expect(container.querySelector('.layer-field-settings-panel')).toNotExist();
+ });
+ it('allows selecting the feature attribute containing the media type', () => {
+ const actions = { onChange: () => {} };
+ const spy = expect.spyOn(actions, 'onChange');
+ ReactDOM.render(
+
,
+ document.getElementById('container')
+ );
+ const settingsButton = document.querySelector('.layer-field-settings-button');
+ expect(document.querySelector('.layer-fields').classList.contains('layer-fields-with-settings')).toBe(true);
+ Simulate.click(settingsButton);
+ const mediaTypeSelect = document.querySelectorAll('.layer-field-settings-panel .Select-control')[1];
+ expect(mediaTypeSelect).toBeTruthy();
+ Simulate.keyDown(mediaTypeSelect, { key: 'ArrowDown', keyCode: 40 });
+ const options = document.querySelectorAll('.Select-option');
+ expect(options.length).toBe(2);
+ expect(options[0].textContent).toBe('Tipo MIME');
+ Simulate.mouseDown(options[0]);
+ expect(spy.calls[0].arguments).toEqual(['media', 'mediaTypeAttribute', 'mimeType']);
+ spy.restore();
+ });
});
diff --git a/web/client/components/TOC/fragments/settings/ExternalDataEditor.jsx b/web/client/components/TOC/fragments/settings/ExternalDataEditor.jsx
new file mode 100644
index 00000000000..051e914f507
--- /dev/null
+++ b/web/client/components/TOC/fragments/settings/ExternalDataEditor.jsx
@@ -0,0 +1,438 @@
+/*
+ * Copyright 2026, 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 React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Alert, Button, ControlLabel, FormControl, FormGroup, Glyphicon } from 'react-bootstrap';
+import Select from 'react-select';
+import { castArray, get } from 'lodash';
+
+import Message from '../../../I18N/Message';
+import localizedProps from '../../../misc/enhancers/localizedProps';
+import Spinner from '../../../layout/Spinner';
+import Fields from '../LayerFields/Fields';
+import { getCapabilities, getFeature } from '../../../../api/WFS';
+import { describeFeatureType } from '../../../../observables/wfs';
+import { isGeometryType } from '../../../../utils/ogc/WFS/base';
+import {
+ interpolateExternalDataCQL,
+ validateExternalDataConfiguration
+} from '../../../../utils/mapinfo/ExternalDataUtils';
+
+const LocalizedFormControl = localizedProps('placeholder')(FormControl);
+
+const URL_VALIDATION_DELAY = 500;
+
+const IDLE_VALIDATION = {
+ status: 'idle',
+ messageId: null,
+ messageParams: null,
+ cqlFilter: null
+};
+
+const INTERPOLATION_MESSAGE_IDS = {
+ MISSING_SOURCE_PROPERTY: 'layerProperties.externalData.missingProperty',
+ UNSAFE_SOURCE_VALUE: 'layerProperties.externalData.validation.unquotedPlaceholder',
+ INVALID_INTERPOLATED_CQL: 'layerProperties.externalData.invalidInterpolatedCql'
+};
+
+/**
+ * Normalizes the feature-type list returned by different WFS versions.
+ */
+export const getWFSFeatureTypes = (capabilities = {}) => {
+ const root = capabilities['wfs:WFS_Capabilities']
+ || capabilities.WFS_Capabilities
+ || capabilities;
+ return castArray(get(root, 'FeatureTypeList.FeatureType', []))
+ .map((featureType) => ({
+ name: featureType?.Name?._ || featureType?.Name,
+ title: featureType?.Title?._ || featureType?.Title || featureType?.Name?._ || featureType?.Name
+ }))
+ .filter(({ name }) => !!name);
+};
+
+/**
+ * Creates display settings for non-geometry attributes from DescribeFeatureType.
+ */
+export const getExternalAttributes = (description = {}, previousAttributes = []) =>
+ (description?.featureTypes?.[0]?.properties || [])
+ .filter((attribute) => !isGeometryType(attribute))
+ .map((attribute) => {
+ const previous = previousAttributes.find(({ name }) => name === attribute.name) || {};
+ return {
+ ...previous,
+ name: attribute.name,
+ type: attribute.localType || attribute.type,
+ alias: previous.alias || '',
+ visible: previous.visible !== false
+ };
+ });
+
+const parseResponse = (data) => {
+ if (typeof data === 'string') {
+ try {
+ return JSON.parse(data);
+ } catch (e) {
+ return data;
+ }
+ }
+ return data;
+};
+
+/**
+ * Configures and validates the WFS query used by an External Data view.
+ */
+const ExternalDataEditor = ({ value = {}, onChange = () => {}, sourceLayer, currentLocale }) => {
+ const [state, setState] = useState({
+ featureTypes: [],
+ capabilitiesStatus: value.url ? 'idle' : 'empty',
+ attributesStatus: value.typeName ? 'idle' : 'empty',
+ validation: IDLE_VALIDATION
+ });
+ const [capabilitiesRequest, setCapabilitiesRequest] = useState({
+ url: value.url,
+ delay: value.url ? 0 : URL_VALIDATION_DELAY,
+ key: 0
+ });
+ const describeRequestId = useRef(0);
+ const validationRequestId = useRef(0);
+ const valueRef = useRef(value);
+ // Async callbacks read the latest committed value instead of stale closures.
+ useEffect(() => {
+ valueRef.current = value;
+ });
+
+ const updateState = (changes) => {
+ setState((previousState) => ({ ...previousState, ...changes }));
+ };
+
+ const updateValue = (changes) => {
+ validationRequestId.current += 1;
+ updateState({ validation: IDLE_VALIDATION });
+ onChange({
+ type: 'wfs',
+ ...valueRef.current,
+ ...changes
+ });
+ };
+
+ const requestCapabilities = (url, delay = URL_VALIDATION_DELAY) => {
+ setCapabilitiesRequest((previousRequest) => ({
+ url,
+ delay,
+ key: previousRequest.key + 1
+ }));
+ };
+
+ useEffect(() => {
+ const { url, delay } = capabilitiesRequest;
+ if (!url?.trim()) {
+ updateState({ featureTypes: [], capabilitiesStatus: 'empty' });
+ return () => {};
+ }
+ let cancelled = false;
+ const timer = setTimeout(() => {
+ updateState({ capabilitiesStatus: 'loading', featureTypes: [] });
+ getCapabilities(url)
+ .then((capabilities) => {
+ if (!cancelled) {
+ const featureTypes = getWFSFeatureTypes(capabilities);
+ updateState({
+ featureTypes,
+ capabilitiesStatus: featureTypes.length ? 'valid' : 'error'
+ });
+ }
+ })
+ .catch(() => {
+ if (!cancelled) {
+ updateState({ featureTypes: [], capabilitiesStatus: 'error' });
+ }
+ });
+ }, delay);
+ return () => {
+ cancelled = true;
+ clearTimeout(timer);
+ };
+ }, [capabilitiesRequest]);
+
+ useEffect(() => {
+ return () => {
+ describeRequestId.current += 1;
+ validationRequestId.current += 1;
+ };
+ }, []);
+
+ const onUrlChange = (event) => {
+ const url = event.target.value;
+ describeRequestId.current += 1;
+ updateValue({ url, typeName: '', attributes: [] });
+ updateState({
+ attributesStatus: 'empty',
+ featureTypes: [],
+ capabilitiesStatus: url?.trim() ? 'loading' : 'empty'
+ });
+ requestCapabilities(url);
+ };
+
+ const loadAttributes = (typeName, previousAttributes) => {
+ const currentRequestId = describeRequestId.current + 1;
+ describeRequestId.current = currentRequestId;
+ updateState({ attributesStatus: 'loading' });
+ describeFeatureType({ layer: { url: valueRef.current.url, name: typeName } })
+ .toPromise()
+ .then(({ data }) => {
+ if (currentRequestId === describeRequestId.current) {
+ updateValue({
+ typeName,
+ attributes: getExternalAttributes(data, previousAttributes)
+ });
+ updateState({ attributesStatus: 'valid' });
+ }
+ })
+ .catch(() => {
+ if (currentRequestId === describeRequestId.current) {
+ updateState({ attributesStatus: 'error' });
+ }
+ });
+ };
+
+ const onLayerChange = (selected) => {
+ const typeName = selected?.value || '';
+ const previousAttributes = valueRef.current.typeName === typeName
+ ? valueRef.current.attributes || []
+ : [];
+ updateValue({ typeName, attributes: [] });
+ if (!typeName) {
+ updateState({ attributesStatus: 'empty' });
+ return;
+ }
+ loadAttributes(typeName, previousAttributes);
+ };
+
+ const updateAttribute = (name, changes) => {
+ updateValue({
+ attributes: (valueRef.current.attributes || []).map((attribute) =>
+ attribute.name === name ? { ...attribute, ...changes } : attribute)
+ });
+ };
+
+ const updateAllAttributes = (property, nextValue) => {
+ updateValue({
+ attributes: (valueRef.current.attributes || []).map((attribute) =>
+ ({ ...attribute, [property]: nextValue }))
+ });
+ };
+
+ const getSourceRequest = () => {
+ const currentSourceLayer = sourceLayer || {};
+ const sourceUrl = currentSourceLayer.search?.url
+ || currentSourceLayer.describeFeatureTypeURL
+ || currentSourceLayer.url;
+ const url = Array.isArray(sourceUrl) ? sourceUrl[0] : sourceUrl;
+ const layerName = currentSourceLayer.search?.name || currentSourceLayer.name;
+ return { url, layerName };
+ };
+
+ const validate = () => {
+ const configuration = valueRef.current;
+ const configurationMessage = validateExternalDataConfiguration(configuration);
+ if (configurationMessage) {
+ updateState({
+ validation: { ...IDLE_VALIDATION, status: 'error', messageId: configurationMessage }
+ });
+ return;
+ }
+ const sourceRequest = getSourceRequest();
+ if (!sourceRequest.url || !sourceRequest.layerName) {
+ updateState({
+ validation: {
+ ...IDLE_VALIDATION,
+ status: 'error',
+ messageId: 'layerProperties.externalData.validation.sourceUnavailable'
+ }
+ });
+ return;
+ }
+ const currentValidationRequestId = validationRequestId.current + 1;
+ validationRequestId.current = currentValidationRequestId;
+ updateState({ validation: { ...IDLE_VALIDATION, status: 'loading' } });
+ // First get a source feature, then use it to test the external WFS query.
+ getFeature(sourceRequest.url, sourceRequest.layerName, {
+ maxFeatures: 1,
+ outputFormat: 'application/json'
+ }, {
+ _msAuthSourceId: sourceLayer?.security?.sourceId
+ })
+ .then(({ data }) => {
+ const sourceResponse = parseResponse(data);
+ const sampleFeature = sourceResponse?.features?.[0];
+ if (!sampleFeature) {
+ const error = new Error('No sample feature was returned by the source layer');
+ error.messageId = 'layerProperties.externalData.validation.sampleNotFound';
+ throw error;
+ }
+ const cqlFilter = interpolateExternalDataCQL(
+ configuration.cqlFilter,
+ sampleFeature
+ );
+ return getFeature(configuration.url, configuration.typeName, {
+ CQL_FILTER: cqlFilter,
+ maxFeatures: 1,
+ outputFormat: 'application/json'
+ }).then(({ data: externalResponse }) => ({
+ cqlFilter,
+ response: parseResponse(externalResponse)
+ }));
+ })
+ .then(({ cqlFilter, response }) => {
+ if (!Array.isArray(response?.features)) {
+ const error = new Error('The external WFS did not return a GeoJSON FeatureCollection');
+ error.cqlFilter = cqlFilter;
+ throw error;
+ }
+ if (currentValidationRequestId === validationRequestId.current) {
+ updateState({
+ validation: { ...IDLE_VALIDATION, status: 'success', cqlFilter }
+ });
+ }
+ })
+ .catch((error) => {
+ if (currentValidationRequestId === validationRequestId.current) {
+ updateState({
+ validation: {
+ ...IDLE_VALIDATION,
+ status: 'error',
+ messageId: INTERPOLATION_MESSAGE_IDS[error.code]
+ || error.messageId
+ || 'layerProperties.externalData.validation.testRequestFailed',
+ messageParams: error.propertyName ? { property: error.propertyName } : null,
+ cqlFilter: error.cqlFilter || null
+ }
+ });
+ }
+ });
+ };
+
+ const { url = '', typeName = '', cqlFilter = '', attributes = [] } = value;
+ const { capabilitiesStatus, attributesStatus, validation } = state;
+ return (
+
+
+
+ requestCapabilities(url, 0)}/>
+ requestCapabilities(url, 0)}>
+ {capabilitiesStatus === 'loading'
+ ?
+
+ {capabilitiesStatus === 'error' ? (
+
+
+
+ ({
+ value: featureType.name,
+ label: featureType.title === featureType.name
+ ? featureType.name
+ : `${featureType.title} (${featureType.name})`
+ }))}
+ onChange={onLayerChange}/>
+
+
+
+ updateValue({ cqlFilter: event.target.value })}/>
+
+
+
+
+
+
+ {validation.status === 'loading'
+ ?
+ {validation.messageId ? (
+
+
+ ) : null}
+ {validation.status === 'success' ? (
+
+
+ ) : null}
+ {validation.cqlFilter ? (
+
+
+
+
{validation.cqlFilter}
+
+ ) : null}
+
+
+ {typeName ? (
+
+
+ ) : null}
+
+ );
+};
+
+ExternalDataEditor.propTypes = {
+ value: PropTypes.object,
+ onChange: PropTypes.func,
+ sourceLayer: PropTypes.object,
+ currentLocale: PropTypes.string
+};
+
+export default ExternalDataEditor;
diff --git a/web/client/components/TOC/fragments/settings/FeatureInfo.jsx b/web/client/components/TOC/fragments/settings/FeatureInfo.jsx
index 243dc8dfc00..1f478efd30e 100644
--- a/web/client/components/TOC/fragments/settings/FeatureInfo.jsx
+++ b/web/client/components/TOC/fragments/settings/FeatureInfo.jsx
@@ -9,37 +9,174 @@
import React from 'react';
import PropTypes from 'prop-types';
-import Accordion from '../../../misc/panels/Accordion';
import { getSupportedFormat as getSupportedFormatWMS } from '../../../../api/WMS';
import { getSupportedFormat as getSupportedFormatWFS } from '../../../../api/WFS';
import Loader from '../../../misc/Loader';
-import { Glyphicon } from 'react-bootstrap';
-import Message from '../../../I18N/Message';
+import { Button, Checkbox, FormControl as FormControlRB, Glyphicon } from 'react-bootstrap';
+import Select from 'react-select';
+import { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';
import includes from 'lodash/includes';
import isEmpty from 'lodash/isEmpty';
-import { getDefaultInfoViewMode } from '../../../../utils/MapInfoUtils';
+import { v1 as uuidv1 } from 'uuid';
+import {
+ getDefaultInfoViewMode,
+ getLayerFeatureInfoViews,
+ isLayerFeatureInfoDisabled
+} from '../../../../utils/MapInfoUtils';
+import Message from '../../../I18N/Message';
+import FeatureInfoEditor from './FeatureInfoEditor';
+import localizedProps from '../../../misc/enhancers/localizedProps';
+import FeatureInfoRequestOptions from '../../../misc/FeatureInfoRequestOptions';
+import { isGeoServerLayer } from '../../../../utils/FeatureInfoRequestUtils';
+import ExternalDataEditor from './ExternalDataEditor';
+import PropertiesEditor from './PropertiesEditor';
+import { EXTERNAL_DATA, validateExternalDataConfiguration } from '../../../../utils/mapinfo/ExternalDataUtils';
+
+const FormControl = localizedProps('placeholder')(FormControlRB);
+const GlyphiconWithTitle = localizedProps('title')(Glyphicon);
const supportedFormatRequests = {
wms: getSupportedFormatWMS,
wfs: getSupportedFormatWFS
};
+const FeatureInfoView = ({
+ view,
+ canEdit,
+ connectDragSource = cmp => cmp,
+ connectDragPreview = cmp => cmp,
+ connectDropTarget = cmp => cmp,
+ isDisabled = false,
+ isDraggable,
+ isEditing = false,
+ isInvalid = false,
+ onEdit = () => {},
+ onRemove = () => {},
+ onUpdateView = () => {},
+ renderTypeSelect = () => null
+}) => {
+ const content = (
+
+ {isDraggable ? connectDragSource(
+
event.stopPropagation()}>
+
+ ) : (
+
+
+ )}
+
onUpdateView(view.id, { title: event.target.value })}/>
+
+ {renderTypeSelect(view)}
+
+ onEdit(view.id)}>
+
+ {isInvalid ? (
+ onRemove(view.id)}>
+
+
+ );
+ return isDraggable ? connectDragPreview(connectDropTarget(content)) : content;
+};
+
+const ITEM_KEY = 'feature-info-view';
+
+const drag = dragSource(ITEM_KEY,
+ {
+ beginDrag: ({ view, index }) => ({
+ id: view.id,
+ index
+ })
+ },
+ (connect, monitor) => ({
+ connectDragSource: connect.dragSource(),
+ connectDragPreview: connect.dragPreview(),
+ isDragging: monitor.isDragging()
+ })
+);
+
+const drop = dropTarget(ITEM_KEY,
+ {
+ hover: (props, monitor) => {
+ const item = monitor.getItem();
+ const { index, view, onMove = () => {} } = props;
+ const node = document.querySelector(`[data-id="feature-info-view-${view.id}"]`);
+
+ if (!node?.getBoundingClientRect) {
+ return null;
+ }
+ const dragIndex = item.index;
+ const hoverIndex = index;
+ if (dragIndex === hoverIndex) {
+ return null;
+ }
+
+ const hoverBoundingRect = node.getBoundingClientRect();
+ const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+ const clientOffset = monitor.getClientOffset();
+ const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+ if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+ return null;
+ }
+ if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+ return null;
+ }
+
+ onMove(dragIndex, hoverIndex);
+ item.index = hoverIndex;
+ return null;
+ }
+ },
+ (connect, monitor) => ({
+ connectDropTarget: connect.dropTarget(),
+ isOver: monitor.isOver()
+ })
+);
+
+const DraggableFeatureInfoView = drag(drop(FeatureInfoView));
+
/**
- * Component for rendering FeatureInfo an Accordion with current available format for get feature info
+ * Component for rendering the list of identify views configured on a layer
* @memberof components.TOC.fragments.settings
* @name FeatureInfo
* @class
* @prop {object} element data of the current selected node
- * @prop {array} defaultInfoFormat array of formats
- * @prop {object} formatCards object that represents the panels of accordion, e.g.: { FORMAT_NAME: { titleId: 'titleMsgId', descId: 'descMsgId', glyph: 'ext-empty', body: () =>
} }
- * @prop {function} onChange called when a format has been selected
+ * @prop {object} defaultInfoFormat supported info formats, by view type
+ * @prop {object} formatCards label and glyph of every view type, e.g.: { FORMAT_NAME: { titleId: 'titleMsgId', glyph: 'ext-empty' } }
+ * @prop {function} onChange called when the views configuration changes
*/
export default class extends React.Component {
static propTypes = {
element: PropTypes.object,
defaultInfoFormat: PropTypes.object,
onChange: PropTypes.func,
- formatCards: PropTypes.object
+ formatCards: PropTypes.object,
+ currentLocale: PropTypes.string
};
static defaultProps = {
@@ -50,7 +187,8 @@ export default class extends React.Component {
};
state = {
- loading: false
+ loading: false,
+ editingViewId: null
};
componentDidMount() {
@@ -69,20 +207,10 @@ export default class extends React.Component {
}
}
- getInfoViews = (infoFormats) => {
- return Object.keys(infoFormats).map((infoFormat) => {
- const Body = this.props.formatCards[infoFormat] && this.props.formatCards[infoFormat].body;
- return {
- id: infoFormat,
- head: {
- preview:
,
- title: this.props.formatCards[infoFormat] && this.props.formatCards[infoFormat].titleId &&
|| '',
- description: this.props.formatCards[infoFormat] && this.props.formatCards[infoFormat].descId && || '',
- size: 'sm'
- },
- body: Body && || null
- };
- });
+ getTypeOptions = () => {
+ const types = Object.keys(this.transformInfoFormatsToViews(this.supportedInfoFormats()));
+ // External Data needs a structured source response to read feature properties.
+ return types.includes('PROPERTIES') ? [...types, EXTERNAL_DATA] : types;
}
transformInfoFormatsToViews = (infoFormats) => {
@@ -97,16 +225,139 @@ export default class extends React.Component {
return infoFormats;
}
- render() {
- // the selected value if missing on that layer should be set to the general info format value and not the first one.
- const data = this.getInfoViews(
- this.transformInfoFormatsToViews(
- {
- 'HIDDEN': true,
- ...this.supportedInfoFormats()
- }
- )
+ getFeatureInfo = (disabled, views) => {
+ const { format, template, viewer, ...featureInfo } = this.props.element.featureInfo || {};
+ return {
+ ...featureInfo,
+ disabled,
+ views
+ };
+ }
+
+ updateFeatureInfo = (disabled, views) => {
+ this.props.onChange("featureInfo", this.getFeatureInfo(disabled, views));
+ }
+
+ getViews = () => {
+ return getLayerFeatureInfoViews(this.props.element, { includeDisabled: true });
+ }
+
+ updateView = (viewId, changes) => {
+ const views = this.getViews().map((view) => view.id === viewId ? {
+ ...view,
+ ...changes
+ } : view);
+ this.updateFeatureInfo(isLayerFeatureInfoDisabled(this.props.element), views);
+ }
+
+ addView = () => {
+ const views = this.getViews();
+ const defaultType = this.getTypeOptions()[0] || 'PROPERTIES';
+ this.updateFeatureInfo(isLayerFeatureInfoDisabled(this.props.element), [
+ ...views,
+ {
+ id: `view-${uuidv1()}`,
+ title: '',
+ type: defaultType
+ }
+ ]);
+ }
+
+ removeView = (viewId) => {
+ const views = this.getViews().filter((view) => view.id !== viewId);
+ this.updateFeatureInfo(isLayerFeatureInfoDisabled(this.props.element), views);
+ }
+
+ reorderView = (sourceIndex, targetIndex) => {
+ const views = this.getViews();
+ if (sourceIndex < 0 || targetIndex < 0 || sourceIndex === targetIndex) {
+ return;
+ }
+ const updatedViews = [...views];
+ const [view] = updatedViews.splice(sourceIndex, 1);
+ updatedViews.splice(targetIndex, 0, view);
+ this.updateFeatureInfo(isLayerFeatureInfoDisabled(this.props.element), updatedViews);
+ }
+
+ renderTypeSelect = (view, isDisabled) => {
+ const options = this.getTypeOptions().map((type) => ({
+ value: type,
+ label: this.props.formatCards[type]?.titleId
+ ?
+ : type,
+ glyph: this.props.formatCards[type]?.glyph || 'ext-empty'
+ }));
+ return (
+ {
+ this.updateView(view.id, { type: selected?.value });
+ this.setState({
+ editingViewId: [EXTERNAL_DATA, 'PROPERTIES'].includes(selected?.value)
+ ? view.id
+ : null
+ });
+ }}/>
+ );
+ }
+
+ renderTypeOption = (option) => {
+ return (
+
+ {option.label}
+
);
+ }
+
+ renderView = (view, views, index, isDisabled) => {
+ const canEdit = ['TEMPLATE', 'PROPERTIES', EXTERNAL_DATA].includes(view.type);
+ return (
+
+
1}
+ isEditing={[EXTERNAL_DATA, 'PROPERTIES'].includes(view.type)
+ && this.state.editingViewId === view.id}
+ isInvalid={view.type === EXTERNAL_DATA && !!validateExternalDataConfiguration(view.featuresService)}
+ view={view}
+ views={views}
+ canEdit={canEdit}
+ onEdit={(viewId) => this.setState(({ editingViewId }) => ({
+ editingViewId: editingViewId === viewId ? null : viewId
+ }))}
+ onRemove={this.removeView}
+ onUpdateView={this.updateView}
+ onMove={this.reorderView}
+ renderTypeSelect={(featureInfoView) => this.renderTypeSelect(featureInfoView, isDisabled)}/>
+ {/* Structured views use inline editors; templates keep their existing editor below the list. */}
+ {!isDisabled && this.state.editingViewId === view.id && view.type === EXTERNAL_DATA ? (
+ this.updateView(view.id, { featuresService })}/>
+ ) : null}
+ {!isDisabled && this.state.editingViewId === view.id && view.type === 'PROPERTIES' ? (
+ this.updateView(view.id, { attributes })}/>
+ ) : null}
+
) : (
-
- {
- const isEqualFormat = this.props.element.featureInfo && this.props.element.featureInfo.format && value === this.props.element.featureInfo.format;
- this.props.onChange("featureInfo", {
- ...(this.props.element && this.props.element.featureInfo || {}),
- format: !isEqualFormat ? value : '',
- viewer: this.props.element.featureInfo ? this.props.element.featureInfo.viewer : undefined
- });
- }}/>
+
+ {this.props.element.type === 'wms' ? (
+
+ this.props.onChange("featureInfo", featureInfo)} />
+
+ ) : null}
+
+ this.updateFeatureInfo(event.target.checked, views)}>
+
+
+
+
+
+ {views.length === 0 ? (
+
+
+ ) : null}
+ {views.map((view, index) => this.renderView(view, views, index, disabled))}
+ {!disabled && editingView?.type === 'TEMPLATE' ? (
+
this.setState({ editingViewId: null })}
+ onSaveTemplate={(template) => {
+ this.updateView(editingView.id, { template });
+ this.setState({ editingViewId: null });
+ }}/>
+ ) : null}
+
);
}
diff --git a/web/client/components/TOC/fragments/settings/FeatureInfoEditor.jsx b/web/client/components/TOC/fragments/settings/FeatureInfoEditor.jsx
index 2a1b20eb9f2..429e9fb07b8 100644
--- a/web/client/components/TOC/fragments/settings/FeatureInfoEditor.jsx
+++ b/web/client/components/TOC/fragments/settings/FeatureInfoEditor.jsx
@@ -24,18 +24,18 @@ const DescriptionEditor = withDebounceOnCallback('onEditorStateChange', 'editorS
* @memberof components.TOC.fragments.settings
* @name FeatureInfoEditor
* @class
- * @prop {object} element data of the current selected node
+ * @prop {string} template the template to edit
* @prop {boolean} showEditor show/hide modal
* @prop {function} onShowEditor called when click on close buttons
- * @prop {function} onChange called when text in editor has been changed
+ * @prop {function} onSaveTemplate called with the edited template on close
* @prop {boolean} enableIFrameModule enable iframe in editor, default true
*/
const FeatureInfoEditor = ({
- element,
+ template: templateProp,
showEditor,
onShowEditor,
- onChange,
+ onSaveTemplate,
enableIFrameModule
}, {messages}) => {
const [, setCounter] = useState(0);
@@ -57,14 +57,12 @@ const FeatureInfoEditor = ({
}, [showEditor]);
- const [template, setTemplate] = useState(element?.featureInfo?.template || '');
+ const [template, setTemplate] = useState(templateProp ?? '');
const [editorState, setEditorState] = useState(htmlToDraftJSEditorState(template));
const onClose = () => {
onShowEditor(!showEditor);
- onChange('featureInfo', {
- ...(element && element.featureInfo || {}),
- template: draftJSEditorStateToHtml(editorState)
- });
+ const html = draftJSEditorStateToHtml(editorState);
+ onSaveTemplate(html);
};
const imageField = document.querySelector(".rdw-image-modal-url-section");
return (
@@ -117,8 +115,8 @@ const FeatureInfoEditor = ({
FeatureInfoEditor.propTypes = {
showEditor: PropTypes.bool,
- element: PropTypes.object,
- onChange: PropTypes.func,
+ template: PropTypes.string,
+ onSaveTemplate: PropTypes.func.isRequired,
onShowEditor: PropTypes.func,
enableIFrameModule: PropTypes.bool
};
@@ -128,9 +126,7 @@ FeatureInfoEditor.contextTypes = {
FeatureInfoEditor.defaultProps = {
showEditor: false,
- element: {},
enableIFrameModule: false,
- onChange: () => {},
onShowEditor: () => {}
};
diff --git a/web/client/components/TOC/fragments/settings/PropertiesEditor.jsx b/web/client/components/TOC/fragments/settings/PropertiesEditor.jsx
new file mode 100644
index 00000000000..c5ac20299f1
--- /dev/null
+++ b/web/client/components/TOC/fragments/settings/PropertiesEditor.jsx
@@ -0,0 +1,138 @@
+/*
+ * Copyright 2026, 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 React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from 'react-bootstrap';
+
+import Message from '../../../I18N/Message';
+import useIsMounted from '../../../../hooks/useIsMounted';
+import Fields from '../LayerFields/Fields';
+import { describeFeatureType } from '../../../../observables/wfs';
+import { isGeometryType } from '../../../../utils/ogc/WFS/base';
+import { notPrimaryGeometryFields } from '../../../../utils/FeatureTypeUtils';
+
+const EMPTY_FIELDS = [];
+const GEOMETRY_FIELD_TYPES = new Set(['Geometry', ...Object.values(notPrimaryGeometryFields)]);
+
+const isGeometryField = (field = {}) => {
+ const type = field.type || '';
+ return GEOMETRY_FIELD_TYPES.has(type) || isGeometryType({ ...field, type });
+};
+
+const getAttributes = (fields = [], configuredAttributes = []) => {
+ const sourceFields = fields.length ? fields : configuredAttributes;
+ return sourceFields
+ .filter((field) => !isGeometryField(field))
+ .map((field) => {
+ const configuredAttribute = configuredAttributes.find(({ name }) => name === field.name);
+ return {
+ ...field,
+ ...configuredAttribute,
+ visible: configuredAttribute?.visible ?? field.visible ?? true
+ };
+ });
+};
+
+/**
+ * Configures the attributes rendered by one Properties Identify view.
+ * It loads the current layer schema when field metadata is not already available.
+ */
+const PropertiesEditor = ({ sourceLayer = {}, value = [], onChange = () => {}, currentLocale }) => {
+ const [describedFields, setDescribedFields] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(false);
+ const isMounted = useIsMounted();
+ const layerFields = sourceLayer.fields || EMPTY_FIELDS;
+ const schemaFields = describedFields ?? (layerFields.length ? layerFields : EMPTY_FIELDS);
+ const attributes = getAttributes(schemaFields, value);
+
+ const loadAttributes = (merge) => {
+ const layerName = sourceLayer.search?.name
+ || sourceLayer.search?.typeName
+ || sourceLayer.name;
+ const sourceUrl = sourceLayer.describeFeatureTypeURL
+ || sourceLayer.search?.url
+ || sourceLayer.url;
+ if (!sourceUrl || !layerName) {
+ setError(true);
+ return;
+ }
+ setError(false);
+ setLoading(true);
+ describeFeatureType({
+ layer: {
+ ...sourceLayer,
+ name: layerName
+ }
+ }).toPromise()
+ .then(({ data }) => isMounted(() => {
+ const nextFields = (data?.featureTypes?.[0]?.properties || [])
+ .filter((field) => !isGeometryType(field))
+ .map((field) => ({
+ name: field.name,
+ type: field.localType || field.type,
+ alias: ''
+ }));
+ setLoading(false);
+ setDescribedFields(nextFields);
+ onChange(getAttributes(nextFields, merge ? value : []));
+ }))
+ .catch(() => isMounted(() => {
+ setLoading(false);
+ setError(true);
+ }));
+ };
+
+ useEffect(() => {
+ if (!layerFields.length && !value.length) {
+ loadAttributes(true);
+ }
+ }, []);
+
+ const updateAttribute = (name, property, nextValue) => {
+ onChange(attributes.map((attribute) => attribute.name === name
+ ? { ...attribute, [property]: nextValue }
+ : attribute));
+ };
+
+ const updateAllAttributes = (property, nextValue) => {
+ onChange(attributes.map((attribute) => ({ ...attribute, [property]: nextValue })));
+ };
+
+ return (
+
+
}
+ fields={attributes}
+ currentLocale={currentLocale}
+ loading={loading}
+ error={error}
+ showVisibility
+ showFieldSettings
+ onChange={updateAttribute}
+ onChangeAll={updateAllAttributes}
+ onLoadFields={() => loadAttributes(true)}
+ onClear={() => loadAttributes(false)}/>
+ {!loading && !error && !attributes.length ? (
+
+
+ ) : null}
+
+
+
+ ${name}
+ ${title}
+
+
+
+`;
+
+describe('ExternalDataEditor', () => {
+ beforeEach(() => {
+ mockAxios = new MockAdapter(axios);
+ document.body.innerHTML = '
';
+ });
+
+ afterEach(() => {
+ mockAxios.restore();
+ ReactDOM.unmountComponentAtNode(document.getElementById('container'));
+ document.body.innerHTML = '';
+ });
+
+ it('extracts WFS feature types from capabilities', () => {
+ expect(getWFSFeatureTypes({
+ 'wfs:WFS_Capabilities': {
+ FeatureTypeList: {
+ FeatureType: [{ Name: 'workspace:table', Title: 'Table' }]
+ }
+ }
+ })).toEqual([{ name: 'workspace:table', title: 'Table' }]);
+ });
+
+ it('creates visible non-geometry attributes and preserves customization', () => {
+ expect(getExternalAttributes({
+ featureTypes: [{
+ properties: [
+ { name: 'id', type: 'xsd:int', localType: 'number' },
+ { name: 'name', type: 'xsd:string', localType: 'string' },
+ { name: 'geom', type: 'gml:Point', localType: 'Point' }
+ ]
+ }]
+ }, [{ name: 'name', alias: 'Label', visible: false }])).toEqual([
+ { name: 'id', type: 'number', alias: '', visible: true },
+ { name: 'name', type: 'string', alias: 'Label', visible: false }
+ ]);
+ });
+
+ it('validates mandatory fields, placeholders and CQL syntax', () => {
+ expect(validateExternalDataConfiguration({})).toBe(
+ 'layerProperties.externalData.validation.missingFields'
+ );
+ expect(validateExternalDataConfiguration({
+ url: '/geoserver/wfs',
+ typeName: 'workspace:table',
+ cqlFilter: "target_id = '${feature.id}'"
+ })).toBe('layerProperties.externalData.validation.invalidPlaceholder');
+ expect(validateExternalDataConfiguration({
+ url: '/geoserver/wfs',
+ typeName: 'workspace:table',
+ cqlFilter: "target_id = '${properties.source_id}' AND"
+ })).toBe('layerProperties.externalData.validation.invalidCql');
+ expect(validateExternalDataConfiguration({
+ url: '/geoserver/wfs',
+ typeName: 'workspace:table',
+ cqlFilter: "target_id = '${properties['source_id']}'"
+ })).toBe(null);
+ });
+
+ it('renders and updates CQL and attribute presentation settings', () => {
+ let value = {
+ url: '',
+ typeName: 'workspace:table',
+ cqlFilter: "target_id = '${properties.id}'",
+ attributes: [{ name: 'name', type: 'string', alias: '', visible: true }]
+ };
+ const onChange = (nextValue) => {
+ value = nextValue;
+ };
+ ReactDOM.render(
+ ,
+ document.getElementById('container')
+ );
+
+ const cql = document.querySelector('[data-qa="external-data-cql"]');
+ TestUtils.Simulate.change(cql, { target: { value: "code = '${properties.code}'" } });
+ expect(value.cqlFilter).toBe("code = '${properties.code}'");
+
+ ReactDOM.render(
+ ,
+ document.getElementById('container')
+ );
+ const attributeContainer = document.querySelector('.ms-external-data-attributes .layer-fields-field-container');
+ const attributeRow = attributeContainer.querySelector('.layer-fields-row');
+ TestUtils.Simulate.click(attributeRow.querySelector('.layer-field-settings-button'));
+ TestUtils.Simulate.change(attributeContainer.querySelector('.layer-field-settings-panel .layer-field-alias input'), { target: { value: 'Display name' } });
+ expect(value.attributes[0].alias).toBe('Display name');
+
+ TestUtils.Simulate.change(attributeRow.querySelector('.layer-field-visibility input'), {
+ target: { checked: false }
+ });
+ expect(value.attributes[0].visible).toBe(false);
+ });
+
+ it('loads feature types for an initial WFS URL', () => {
+ mockAxios.onGet().reply(({ url }) => {
+ expect(url).toContain('/external-data-test/wfs');
+ expect(url).toContain('request=GetCapabilities');
+ return [200, getCapabilitiesResponse('workspace:table', 'Table')];
+ });
+ ReactDOM.render(
+ ;
+ };
+ ReactDOM.render(;
+ };
+ ReactDOM.render( {
+ value = nextValue;
+ setCurrentValue(nextValue);
+ }}/>
+ );
+ };
+ ReactDOM.render(
- },
TEXT: {
titleId: 'layerProperties.textFormatTitle',
- descId: 'layerProperties.textFormatDescription',
- glyph: 'ext-txt',
- body: () =>
+ glyph: 'ext-txt'
},
HTML: {
titleId: 'layerProperties.htmlFormatTitle',
- descId: 'layerProperties.htmlFormatDescription',
- glyph: 'ext-html',
- body: () =>
+ glyph: 'ext-html'
},
PROPERTIES: {
titleId: 'layerProperties.propertiesFormatTitle',
- descId: 'layerProperties.propertiesFormatDescription',
- glyph: 'ext-json',
- body: () =>
+ glyph: 'ext-json'
},
TEMPLATE: {
titleId: 'layerProperties.templateFormatTitle',
- descId: 'layerProperties.templateFormatDescription',
- glyph: 'ext-empty',
- body: () =>
+ glyph: 'ext-empty'
+ },
+ EXTERNAL_DATA: {
+ titleId: 'layerProperties.externalData.title',
+ glyph: 'ext-json'
}
};
@@ -69,84 +66,220 @@ describe("test FeatureInfo", () => {
});
it('test rendering', () => {
- ReactDOM.render( {
- expect(key).toBe('featureInfo');
- expect(value.format).toBe('HIDDEN');
- done();
- }} formatCards={formatCards} defaultInfoFormat={defaultInfoFormat}/>, document.getElementById("container"));
- const testComponent = document.getElementsByClassName('test-preview');
- expect(testComponent.length).toBe(5);
- const sideCards = document.getElementsByClassName('mapstore-side-card');
- expect(sideCards.length).toBe(5);
- TestUtils.Simulate.click(sideCards[0]);
+ it('should not configure any view when the layer has no featureInfo', () => {
+ getFeatureInfoInstance({formatCards, defaultInfoFormat});
+ expect(document.querySelectorAll('[data-id^="feature-info-view-"]').length).toBe(0);
+ expect(document.querySelector('.ms-feature-info-views-empty')).toExist();
+ });
+
+ it('should allow to remove the last view to fall back on the map settings format', done => {
+ const component = getFeatureInfoInstance({
+ element: {
+ featureInfo: {
+ views: [{ id: 'text-view', title: 'Text identify', type: 'TEXT' }]
+ }
+ },
+ onChange: (key, value) => {
+ expect(key).toBe('featureInfo');
+ expect(value.views).toEqual([]);
+ done();
+ },
+ formatCards,
+ defaultInfoFormat
+ });
+ const removeButton = document.querySelector('.ms-feature-info-view-remove');
+ expect(removeButton.disabled).toBe(false);
+ component.removeView('text-view');
+ });
+
+ it('should display configured views as disabled when identify is disabled', () => {
+ getFeatureInfoInstance({
+ element: {
+ featureInfo: {
+ disabled: true,
+ views: [
+ { id: 'text-view', title: 'Text identify', type: 'TEXT' },
+ { id: 'properties-view', title: 'Properties identify', type: 'PROPERTIES' }
+ ]
+ }
+ },
+ formatCards,
+ defaultInfoFormat
+ });
+
+ const views = document.querySelectorAll('[data-id^="feature-info-view-"]');
+ expect(views.length).toBe(2);
+ expect(views[0].classList.contains('disabled')).toBe(true);
+ expect(views[0].querySelector('.ms-feature-info-view-title').disabled).toBe(true);
+ expect(views[0].querySelector('.Select').classList.contains('is-disabled')).toBe(true);
+ expect([...views[0].querySelectorAll('button')].every((button) => button.disabled)).toBe(true);
+ expect(document.querySelector('.btn-primary').disabled).toBe(true);
+ });
+
+ it('updates the featureInfo view configuration', done => {
+ const component = getFeatureInfoInstance({
+ element: {
+ featureInfo: {
+ views: [{ id: 'text-view', title: 'Text identify', type: 'TEXT' }]
+ }
+ },
+ onChange: (key, value) => {
+ expect(key).toBe('featureInfo');
+ expect(value.disabled).toBe(true);
+ expect(value.views.length).toBe(1);
+ done();
+ },
+ formatCards,
+ defaultInfoFormat
+ });
+ component.updateFeatureInfo(true, component.getViews());
+ });
+ it('drops the legacy format, template and viewer when saving views', done => {
+ const component = getFeatureInfoInstance({
+ element: {
+ featureInfo: {
+ format: 'TEMPLATE',
+ template: '${properties.NAME}
',
+ viewer: { type: 'customViewer' },
+ featureInfoRegex: ']*>'
+ }
+ },
+ onChange: (key, value) => {
+ expect(key).toBe('featureInfo');
+ expect(value.format).toNotExist();
+ expect(value.template).toNotExist();
+ expect(value.viewer).toNotExist();
+ expect(value.featureInfoRegex).toBe(']*>');
+ expect(value.views.length).toBe(1);
+ done();
+ },
+ formatCards,
+ defaultInfoFormat
+ });
+ component.updateFeatureInfo(false, component.getViews());
});
it('test rendering with supported infoFormats from layer props', () => {
- ReactDOM.render( {
+ const component = getFeatureInfoInstance({element: {type: "wfs", infoFormats: ["application/json", "text/html"]}, formatCards, defaultInfoFormat});
+ expect(component.getTypeOptions()).toEqual(['HTML', 'PROPERTIES', 'TEMPLATE', 'EXTERNAL_DATA']);
+ });
+
+ it('test rendering supported infoFormats for wms layer', () => {
+ const component = getFeatureInfoInstance({element: {type: "wms"}, formatCards, defaultInfoFormat});
+ expect(component.getTypeOptions()).toEqual(['TEXT', 'HTML', 'PROPERTIES', 'TEMPLATE', 'EXTERNAL_DATA']);
+ });
+
+ it('marks invalid EXTERNAL_DATA and toggles its inline editor', () => {
+ ReactDOM.render(, document.getElementById('container'));
+
+ const view = document.querySelector('[data-id="feature-info-view-external"]');
+ expect(view.classList.contains('has-error')).toBe(true);
+ const editButton = view.querySelector('.ms-feature-info-view-edit');
+ TestUtils.Simulate.click(editButton);
+ expect(document.querySelector('.ms-external-data-editor')).toExist();
+ TestUtils.Simulate.click(editButton);
+ expect(document.querySelector('.ms-external-data-editor')).toNotExist();
+ });
+
+ it('test WMS feature info request options preserve existing feature info configuration', done => {
+ ReactDOM.render(${properties.name}"
+ }
+ }}
+ onChange={(key, value) => {
+ try {
+ expect(key).toBe('featureInfo');
+ expect(value).toEqual({
+ format: "TEXT",
+ template: "${properties.name}
",
+ maxItems: 25
+ });
+ done();
+ } catch (e) {
+ done(e);
+ }
+ }}
formatCards={formatCards}
defaultInfoFormat={defaultInfoFormat} />, document.getElementById("container"));
- const testComponents = document.getElementsByClassName('test-preview');
- expect(testComponents.length).toBe(3);
- const sideCards = document.querySelectorAll('.mapstore-side-card-title span span');
- expect(sideCards.length).toBe(3);
- expect(sideCards[0].textContent).toBe('layerProperties.hideFormatTitle');
- expect(sideCards[1].textContent).toBe('layerProperties.propertiesFormatTitle');
- expect(sideCards[2].textContent).toBe('layerProperties.templateFormatTitle');
+ expect(document.querySelector('[data-qa="feature-info-buffer"]')).toBeTruthy();
+ expect(document.querySelector('[data-qa="feature-info-buffer"]').max).toBe('1000');
+ expect(document.querySelector('[data-qa="feature-info-max-items"]').value).toBe('10');
+ TestUtils.Simulate.change(document.querySelector('[data-qa="feature-info-max-items"]'), {target: {value: "25"}});
});
- it('test rendering supported infoFormats for wfs layer with application/json and text/html', () => {
- ReactDOM.render( {
+ ReactDOM.render( {
+ ReactDOM.render( {
+ try {
+ expect(key).toBe('featureInfo');
+ expect(value.buffer).toBe(1000);
+ done();
+ } catch (e) {
+ done(e);
+ }
+ }}
formatCards={formatCards}
defaultInfoFormat={defaultInfoFormat} />, document.getElementById("container"));
- const testComponent = document.getElementsByClassName('test-preview');
- expect(testComponent.length).toBe(5);
- const sideCards = document.querySelectorAll('.mapstore-side-card-title span span');
- expect(sideCards.length).toBe(5);
- expect(sideCards[0].textContent).toBe('layerProperties.hideFormatTitle');
- expect(sideCards[1].textContent).toBe('layerProperties.textFormatTitle');
- expect(sideCards[2].textContent).toBe('layerProperties.htmlFormatTitle');
- expect(sideCards[3].textContent).toBe('layerProperties.propertiesFormatTitle');
- expect(sideCards[4].textContent).toBe('layerProperties.templateFormatTitle');
+ const bufferInput = document.querySelector('[data-qa="feature-info-buffer"]');
+ TestUtils.Simulate.change(bufferInput, {target: {value: "1001"}});
});
it('should request WMS GetCapabilities for wms layers', (done) => {
@@ -160,11 +293,9 @@ describe("test FeatureInfo", () => {
done();
return [200, {}];
});
- ReactDOM.render( {}}/>, document.getElementById("container"));
const modalEditor = document.getElementsByClassName('ms-resizable-modal');
expect(modalEditor.length).toBe(1);
});
+ it('saves the template when closing the editor', () => {
+ const onSaveTemplate = expect.createSpy();
+ ReactDOM.render(
+ ,
+ document.getElementById("container")
+ );
+
+ TestUtils.Simulate.click(document.querySelector('.ms-feature-info-editor .btn-primary'));
+ expect(onSaveTemplate).toHaveBeenCalled();
+ expect(onSaveTemplate.calls[0].arguments[0]).toContain('Saved template');
+ });
+
});
diff --git a/web/client/components/TOC/fragments/settings/__tests__/PropertiesEditor-test.jsx b/web/client/components/TOC/fragments/settings/__tests__/PropertiesEditor-test.jsx
new file mode 100644
index 00000000000..268a8914263
--- /dev/null
+++ b/web/client/components/TOC/fragments/settings/__tests__/PropertiesEditor-test.jsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright 2026, 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 MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-dom/test-utils';
+
+import axios from '../../../../../libs/ajax';
+import PropertiesEditor from '../PropertiesEditor';
+
+describe('PropertiesEditor', () => {
+ let mockAxios;
+
+ beforeEach(() => {
+ mockAxios = new MockAdapter(axios);
+ document.body.innerHTML = '
';
+ });
+
+ afterEach(() => {
+ mockAxios.restore();
+ ReactDOM.unmountComponentAtNode(document.getElementById('container'));
+ document.body.innerHTML = '';
+ });
+
+ it('loads non-geometry attributes and updates their visibility', (done) => {
+ let attributes;
+ mockAxios.onGet().reply(({ url }) => {
+ const decodedUrl = decodeURIComponent(url);
+ expect(decodedUrl).toContain('/properties-test/wfs');
+ expect(decodedUrl).toContain('request=DescribeFeatureType');
+ expect(decodedUrl).toContain('typeName=workspace:source');
+ return [200, {
+ featureTypes: [{
+ properties: [
+ { name: 'name', type: 'xsd:string', localType: 'string' },
+ { name: 'geom', type: 'gml:Point', localType: 'Point' }
+ ]
+ }]
+ }];
+ });
+
+ ReactDOM.render(
+ {
+ attributes = nextAttributes;
+ }}/>,
+ document.getElementById('container')
+ );
+
+ setTimeout(() => {
+ try {
+ const rows = document.querySelectorAll(
+ '.ms-properties-view-editor .layer-fields-row'
+ );
+ expect(rows.length).toBe(1);
+ expect(rows[0].querySelector('.layer-field-name input').value).toBe('name');
+
+ TestUtils.Simulate.change(
+ rows[0].querySelector('.layer-field-visibility input'),
+ { target: { checked: false } }
+ );
+ expect(attributes).toEqual([{
+ name: 'name',
+ type: 'string',
+ alias: '',
+ visible: false
+ }]);
+ done();
+ } catch (error) {
+ done(error);
+ }
+ }, 50);
+ });
+});
diff --git a/web/client/components/catalog/editor/AdvancedSettings/RasterAdvancedSettings.js b/web/client/components/catalog/editor/AdvancedSettings/RasterAdvancedSettings.js
index 56ce5a4f8b9..175705abd4c 100644
--- a/web/client/components/catalog/editor/AdvancedSettings/RasterAdvancedSettings.js
+++ b/web/client/components/catalog/editor/AdvancedSettings/RasterAdvancedSettings.js
@@ -18,6 +18,7 @@ import InfoPopover from '../../../widgets/widget/InfoPopover';
import CSWFilters from "./CSWFilters";
import Message from "../../../I18N/Message";
import WMSDomainAliases from "./WMSDomainAliases";
+import FeatureInfoRequestOptions from "../../../misc/FeatureInfoRequestOptions";
import tooltip from '../../../misc/enhancers/buttonTooltip';
import OverlayTrigger from '../../../misc/OverlayTrigger';
import FormControl from '../../../misc/DebouncedFormControl';
@@ -185,6 +186,19 @@ export default ({
+
+ onChangeServiceProperty("layerOptions", {
+ ...service.layerOptions,
+ featureInfo
+ })} />
+ : null}
: type;
+ }
+
+ renderViewTabs = (views, activeView, res) => {
+ if (views.length <= 1) {
+ return null;
+ }
+ const viewKey = this.getViewKey(res);
+ return (
+
+ {
+ this.setState(({activeViewIds}) => ({
+ activeViewIds: {...activeViewIds, [viewKey]: activeViewId}
+ }));
+ }}
+ tabs={views.map((view) => ({
+ title: view.title || this.renderViewTypeTitle(view.type),
+ eventKey: view.id
+ }))}/>
+
+ );
+ }
+
+ getPages = (responses) => {
+ const defaultType = getDefaultInfoViewMode(this.props.format) || getInfoViewModes().PROPERTIES;
+ return responses.map((res) => {
+ const {layerMetadata, layer} = res;
+ const layerWithMetadata = {
+ ...layer,
+ ...layerMetadata,
+ featureInfo: layerMetadata?.featureInfo || layer?.featureInfo
+ };
+ const views = getLayerFeatureInfoViews(layerWithMetadata, { defaultType });
+ const activeView = this.getActiveView(views, res);
+ const layerMetadataForView = this.getLayerMetadataForView(layerWithMetadata, activeView);
+ return {
+ res,
+ views,
+ activeView,
+ layerMetadata,
+ layerMetadataForView: {
+ ...layerMetadataForView,
+ featureInfo: {
+ ...layerMetadataForView?.featureInfo,
+ identifyRequestId: res.reqId
+ }
+ },
+ viewResponse: this.getResponseForView(res, activeView)
+ };
+ });
+ }
+
renderPages = () => {
const {validResponses: responses} = this.getResponseProperties(this.props.isMobile || this.props.renderValidOnly);
- return responses.map((res, i) => {
- const {response, layerMetadata} = res;
- const format = getFormatForResponse(res, this.props);
- const PageHeader = this.props.header;
- let customViewer;
- if (layerMetadata?.viewer?.type) {
- customViewer = getViewer(layerMetadata.viewer.type);
- }
- const size = responses.filter(resp => !startsWith(resp.response, "no features were found")).length;
+ const pages = this.getPages(responses);
+ const size = pages.filter(({res, views}) => views.some((view) =>
+ !startsWith(this.getResponseForView(res, view).response, "no features were found"))).length;
+ const PageHeader = this.props.header;
+ return pages.map(({res, views, activeView, layerMetadata, layerMetadataForView, viewResponse}, i) => {
+ const format = getFormatForResponse({
+ ...res,
+ queryParams: viewResponse.queryParams
+ }, this.props);
+ const customViewer = activeView?.type === getInfoViewModes().EXTERNAL_DATA
+ ? ExternalDataViewer
+ : layerMetadataForView?.viewer?.type
+ ? getViewer(layerMetadataForView.viewer.type)
+ : undefined;
return ( this.props.onPrevious()}/> : null
}
style={this.props.style}>
-
+ {this.renderViewTabs(views, activeView, res)}
+ {views.length > 1 && !this.isViewResponseValid(res, activeView) ? (
+
+
+ ) : (
+
+ )}
);
});
};
diff --git a/web/client/components/data/identify/__tests__/DefaultViewer-test.jsx b/web/client/components/data/identify/__tests__/DefaultViewer-test.jsx
index 3c8f19a47e7..1329bd8da05 100644
--- a/web/client/components/data/identify/__tests__/DefaultViewer-test.jsx
+++ b/web/client/components/data/identify/__tests__/DefaultViewer-test.jsx
@@ -8,8 +8,14 @@
import React from 'react';
import ReactDOM from 'react-dom';
+import TestUtils from 'react-dom/test-utils';
import DefaultViewer from '../DefaultViewer.jsx';
import SwipeHeader from '../SwipeHeader';
+import {
+ createExternalDataCacheKey,
+ getExternalDataCacheEntry,
+ setExternalDataCacheEntry
+} from '../../../../utils/mapinfo/ExternalDataCache';
import expect from 'expect';
@@ -184,6 +190,358 @@ describe('DefaultViewer', () => {
expect(dom.getElementsByClassName("alert").length).toBe(0);
});
+ it('renders an EXTERNAL_DATA view with ExternalDataViewer', () => {
+ const validator = () => ({
+ getValidResponses: (responses) => responses,
+ getNoValidResponses: () => []
+ });
+ ReactDOM.render(
+ ,
+ document.getElementById("container")
+ );
+
+ expect(getExternalDataCacheEntry(key)).toNotExist();
+ });
+
+ it('clears external data cache entries when the viewer unmounts', () => {
+ const key = createExternalDataCacheKey({
+ identifyRequestId: 'identify-unmount',
+ sourceFeatureId: 'feature-1',
+ sourceFeatureIndex: 0,
+ url: '/external/wfs',
+ typeName: 'workspace:external',
+ cqlFilter: "source_id = '1'"
+ });
+ setExternalDataCacheEntry(key, Promise.resolve({}), 'identify-unmount');
+ const container = document.getElementById('container');
+
+ ReactDOM.render(
+ ,
+ document.getElementById("container")
+ );
+
+ expect(document.querySelectorAll('.ms-identify-swipe-header-arrow').length).toBe(4);
+
+ TestUtils.Simulate.click(document.querySelectorAll('.ms-scrollable-tabs .nav > li > button')[1]);
+
+ expect(document.querySelector('.nav > li.active > button').textContent).toBe('Text');
+ expect(document.querySelectorAll('.ms-identify-swipe-header-arrow').length).toBe(4);
+ });
+
+ it('keeps the selected view of a layer across identify requests', () => {
+ const views = [
+ { id: 'text', title: 'Text', type: 'TEXT' },
+ { id: 'properties', title: 'Properties', type: 'PROPERTIES' }
+ ];
+ const buildResponse = (reqId) => ({
+ reqId,
+ layer: {id: 'layer-1'},
+ viewResponses: {
+ text: {
+ response: 'Text view content',
+ queryParams: {info_format: 'text/plain'}
+ },
+ properties: {
+ response: {features: [{id: 'feature-1', properties: {name: 'Feature 1'}}]},
+ queryParams: {info_format: 'application/json'}
+ }
+ },
+ layerMetadata: {title: 'a', featureInfo: {views}}
+ });
+ const render = (reqId) => ReactDOM.render(
+ ,
+ document.getElementById("container")
+ );
+
+ render('req-1');
+ TestUtils.Simulate.click(document.querySelectorAll('.ms-scrollable-tabs .nav > li > button')[1]);
+ expect(document.querySelector('.nav > li.active > button').textContent).toBe('Properties');
+
+ // a new identify on the same layer produces a new reqId
+ render('req-2');
+ expect(document.querySelector('.nav > li.active > button').textContent).toBe('Properties');
+ });
+
+ it('selects the first identify view with content', () => {
+ ReactDOM.render(
+ ',
+ queryParams: {info_format: 'text/html'}
+ }
+ },
+ layerMetadata: {
+ title: 'b',
+ featureInfo: {
+ views: [
+ { id: 'text', title: 'Text', type: 'TEXT' },
+ { id: 'html', title: 'Html', type: 'HTML' }
+ ]
+ }
+ }
+ }]}/>,
+ document.getElementById("container")
+ );
+
+ expect(document.querySelectorAll('.alert-danger').length).toBe(1);
+ expect(document.querySelector('.swipeable-view').textContent).toNotContain('no features were found');
+ });
+
it('creates the DefaultViewer component with missing results', () => {
const viewer = ReactDOM.render(
,
diff --git a/web/client/components/data/identify/viewers/ExternalDataViewer.jsx b/web/client/components/data/identify/viewers/ExternalDataViewer.jsx
new file mode 100644
index 00000000000..759afc8312b
--- /dev/null
+++ b/web/client/components/data/identify/viewers/ExternalDataViewer.jsx
@@ -0,0 +1,262 @@
+/*
+ * Copyright 2026, 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 React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Alert, Button, Glyphicon } from 'react-bootstrap';
+
+import Message from '../../../I18N/Message';
+import LoadingSpinner from '../../../misc/LoadingSpinner';
+import { getFeature } from '../../../../api/WFS';
+import { interpolateExternalDataCQL, validateExternalDataConfiguration } from '../../../../utils/mapinfo/ExternalDataUtils';
+import { getFeatureInfoMaxItems } from '../../../../utils/FeatureInfoRequestUtils';
+import useIsMounted from '../../../../hooks/useIsMounted';
+import RowViewer from './row/RowViewer';
+import { getVisibleFeatureRow } from '../../../../utils/IdentifyUtils';
+import {
+ createExternalDataCacheKey,
+ deleteExternalDataCacheEntry,
+ getExternalDataCacheEntry,
+ setExternalDataCacheEntry
+} from '../../../../utils/mapinfo/ExternalDataCache';
+
+const parseResponse = (response) => {
+ if (typeof response === 'string') {
+ try {
+ return JSON.parse(response);
+ } catch (e) {
+ return response;
+ }
+ }
+ return response || {};
+};
+
+/**
+ * Ensures the external service returned a GeoJSON FeatureCollection.
+ */
+const normalizeExternalResponse = (data) => {
+ const response = parseResponse(data);
+ if (!Array.isArray(response?.features)) {
+ const error = new Error('The external WFS did not return a GeoJSON FeatureCollection');
+ error.code = 'INVALID_EXTERNAL_RESPONSE';
+ error.data = response;
+ throw error;
+ }
+ return response;
+};
+
+// the response of an external service must not be rendered to map viewers
+const getErrorPresentation = (error) => {
+ console.error('External data view could not be loaded', error);
+ if (error?.code === 'MISSING_SOURCE_PROPERTY') {
+ return {
+ messageId: 'layerProperties.externalData.missingProperty',
+ messageParams: { property: error.propertyName }
+ };
+ }
+ if (error?.code === 'UNSAFE_SOURCE_VALUE') {
+ return {
+ messageId: 'layerProperties.externalData.unsafeSourceValue',
+ messageParams: { property: error.propertyName }
+ };
+ }
+ if (error?.code === 'INVALID_INTERPOLATED_CQL') {
+ return {
+ messageId: 'layerProperties.externalData.invalidInterpolatedCql'
+ };
+ }
+ if (error?.code === 'INVALID_EXTERNAL_RESPONSE') {
+ return {
+ messageId: 'layerProperties.externalData.invalidResponse'
+ };
+ }
+ return {
+ messageId: 'layerProperties.externalData.requestError'
+ };
+};
+
+/**
+ * Queries and renders related WFS features for every identified source feature.
+ */
+const ExternalDataViewer = ({ response, layer }) => {
+ const [results, setResults] = useState([]);
+ const isMounted = useIsMounted();
+ const loadGeneration = useRef(0);
+
+ const { identifyRequestId, featuresService = {} } = layer?.featureInfo || {};
+ const { url, typeName, cqlFilter, attributes = [] } = featuresService;
+ const configurationError = validateExternalDataConfiguration(featuresService);
+ const maxItems = getFeatureInfoMaxItems(layer?.featureInfo || {});
+
+ const sourceFeatures = useMemo(
+ () => parseResponse(response)?.features || [],
+ [response]
+ );
+
+ const updateResult = useCallback((index, result, generation) => {
+ if (generation !== loadGeneration.current) {
+ return;
+ }
+ isMounted(() => setResults((currentResults) =>
+ currentResults.map((currentResult, resultIndex) =>
+ resultIndex === index ? result : currentResult)
+ ));
+ }, []);
+
+ const loadSourceFeature = useCallback((
+ sourceFeature,
+ index,
+ { force = false, generation = loadGeneration.current } = {}
+ ) => {
+ updateResult(index, { status: 'loading' }, generation);
+ let interpolatedCql;
+ try {
+ interpolatedCql = interpolateExternalDataCQL(cqlFilter, sourceFeature);
+ } catch (error) {
+ updateResult(index, {
+ status: 'error',
+ ...getErrorPresentation(error)
+ }, generation);
+ return;
+ }
+ const cacheKey = createExternalDataCacheKey({
+ identifyRequestId,
+ sourceFeatureId: sourceFeature?.id,
+ sourceFeatureIndex: index,
+ url,
+ typeName,
+ cqlFilter: interpolatedCql
+ });
+ if (force) {
+ deleteExternalDataCacheEntry(cacheKey);
+ }
+ const cachedRequest = getExternalDataCacheEntry(cacheKey);
+ // Reuse both completed and still-running requests when the view rerenders.
+ const request = cachedRequest || setExternalDataCacheEntry(cacheKey,
+ getFeature(url, typeName, {
+ CQL_FILTER: interpolatedCql,
+ maxFeatures: maxItems,
+ outputFormat: 'application/json'
+ }).then(({ data }) => normalizeExternalResponse(data)),
+ identifyRequestId
+ );
+ request
+ .then((data) => updateResult(index, {
+ status: 'success',
+ features: data.features
+ }, generation))
+ .catch((error) => {
+ deleteExternalDataCacheEntry(cacheKey);
+ updateResult(index, {
+ status: 'error',
+ ...getErrorPresentation(error)
+ }, generation);
+ });
+ }, [url, typeName, cqlFilter, maxItems, identifyRequestId, updateResult]);
+
+ const load = useCallback((generation) => {
+ setResults(sourceFeatures.map(() => ({ status: 'loading' })));
+ sourceFeatures.forEach((sourceFeature, index) =>
+ loadSourceFeature(sourceFeature, index, { generation }));
+ }, [sourceFeatures, loadSourceFeature]);
+
+ useEffect(() => {
+ if (configurationError) {
+ console.error(`External data view is not configured: ${configurationError}`);
+ return () => {};
+ }
+ loadGeneration.current += 1;
+ load(loadGeneration.current);
+ return () => {
+ loadGeneration.current += 1;
+ };
+ }, [load, configurationError]);
+
+ const retry = useCallback((index) => {
+ const sourceFeature = sourceFeatures[index];
+ if (sourceFeature) {
+ loadSourceFeature(sourceFeature, index, {
+ force: true,
+ generation: loadGeneration.current
+ });
+ }
+ }, [sourceFeatures, loadSourceFeature]);
+
+ const renderResult = (result, index) => {
+ const sourceFeatureId = sourceFeatures[index]?.id;
+ return (
+
+ {sourceFeatureId !== undefined && sourceFeatureId !== null
+ ? {sourceFeatureId}
+ : null}
+ {result.status === 'loading' ? (
+
+
+ ) : null}
+ {result.status === 'error' ? (
+
+
+ retry(index)}>
+
+
+
+ ) : null}
+ {result.status === 'success' && !result.features.length ? (
+
+
+ ) : null}
+ {result.status === 'success'
+ ? result.features.map((feature, featureIndex) => {
+ const row = getVisibleFeatureRow(feature, attributes);
+ return (
+
+ );
+ };
+
+ if (configurationError) {
+ return (
+
+
+ );
+ }
+ if (!sourceFeatures.length) {
+ return (
+
+
+ );
+ }
+ return (
+
+ {results.map(renderResult)}
+
+ );
+};
+
+ExternalDataViewer.propTypes = {
+ response: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+ layer: PropTypes.object
+};
+
+export default ExternalDataViewer;
diff --git a/web/client/components/data/identify/viewers/JSONViewer.jsx b/web/client/components/data/identify/viewers/JSONViewer.jsx
index cd75759f2c6..74f742a4e79 100644
--- a/web/client/components/data/identify/viewers/JSONViewer.jsx
+++ b/web/client/components/data/identify/viewers/JSONViewer.jsx
@@ -17,7 +17,7 @@ const Viewers = {
PROPERTIES
};
-export default shouldUpdate((props, nextProps) => nextProps.response !== props.response)(
+export default shouldUpdate((props, nextProps) => nextProps.response !== props.response || nextProps.layer !== props.layer)(
props => {
const type = props.layer && props.layer.featureInfo && props.layer.featureInfo.format && (props.layer.featureInfo.template && props.layer.featureInfo.template !== '
') && props.layer.featureInfo.format || 'PROPERTIES';
const Viewer = Viewers[type] || Viewers.PROPERTIES;
diff --git a/web/client/components/data/identify/viewers/PropertiesViewer.js b/web/client/components/data/identify/viewers/PropertiesViewer.js
index a05f3f3523b..c74dda9ab06 100644
--- a/web/client/components/data/identify/viewers/PropertiesViewer.js
+++ b/web/client/components/data/identify/viewers/PropertiesViewer.js
@@ -9,12 +9,24 @@
import React from 'react';
import RowViewer from './row/RowViewer';
+import { getVisibleFeatureRow } from '../../../../utils/IdentifyUtils';
export default ({response, layer, rowViewer}) => {
+ const fields = Array.isArray(layer?.featureInfo?.attributes)
+ ? layer.featureInfo.attributes
+ : layer?.fields;
return (
{(response?.features || []).map((feature, i) => {
- return ;
+ const row = getVisibleFeatureRow(feature, fields);
+ return (
+
+ );
})}
);
diff --git a/web/client/components/data/identify/viewers/__tests__/ExternalDataViewer-test.jsx b/web/client/components/data/identify/viewers/__tests__/ExternalDataViewer-test.jsx
new file mode 100644
index 00000000000..287189fd285
--- /dev/null
+++ b/web/client/components/data/identify/viewers/__tests__/ExternalDataViewer-test.jsx
@@ -0,0 +1,431 @@
+/*
+ * Copyright 2026, 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 React from 'react';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-dom/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import { IntlProvider } from 'react-intl';
+
+import axios from '../../../../../libs/ajax';
+import ExternalDataViewer from '../ExternalDataViewer';
+import RowViewer from '../row/RowViewer';
+import { getVisibleFeatureRow } from '../../../../../utils/IdentifyUtils';
+import { clearExternalDataCacheForIdentifyRequests } from '../../../../../utils/mapinfo/ExternalDataCache';
+
+const layer = {
+ featureInfo: {
+ id: 'external-view',
+ identifyRequestId: 'identify-external',
+ featuresService: {
+ url: '/external/wfs',
+ typeName: 'workspace:external',
+ cqlFilter: "source_id = '${properties.sourceId}'",
+ attributes: [{ name: 'label', alias: 'External label', visible: true }]
+ }
+ }
+};
+
+const response = {
+ type: 'FeatureCollection',
+ features: [{
+ id: 'source.1',
+ properties: { sourceId: "O'Brien" }
+ }]
+};
+
+describe('ExternalDataViewer', () => {
+ let mockAxios;
+
+ beforeEach(() => {
+ document.body.innerHTML = '
';
+ mockAxios = new MockAdapter(axios);
+ });
+
+ afterEach(() => {
+ ReactDOM.unmountComponentAtNode(document.getElementById('container'));
+ clearExternalDataCacheForIdentifyRequests(['identify-external']);
+ mockAxios.restore();
+ document.body.innerHTML = '';
+ });
+
+ it('queries the external WFS and renders configured feature attributes', (done) => {
+ mockAxios.onGet().reply(({ url }) => {
+ expect(decodeURIComponent(url)).toContain("CQL_FILTER=source_id = 'O''Brien'");
+ expect(decodeURIComponent(url)).toContain('typeName=workspace:external');
+ expect(decodeURIComponent(url)).toContain('maxFeatures=10');
+ return [200, {
+ type: 'FeatureCollection',
+ features: [{
+ id: 'external.1',
+ properties: { label: 'Related feature', hidden: 'Not rendered' }
+ }]
+ }];
+ });
+
+ ReactDOM.render(
+ ,
+ document.getElementById('container')
+ );
+
+ setTimeout(() => {
+ const container = document.getElementById('container');
+ expect(container.querySelector('.ms-external-data-result-title').textContent)
+ .toBe('source.1');
+ expect(container.textContent).toContain('external.1');
+ expect(container.textContent).toContain('External label');
+ expect(container.textContent).toContain('Related feature');
+ expect(container.textContent).toNotContain('Not rendered');
+ done();
+ });
+ });
+
+ it('queries and keeps results associated with multiple source features', (done) => {
+ mockAxios.onGet().reply(({ url }) => {
+ const decodedUrl = decodeURIComponent(url);
+ expect(decodedUrl).toContain('maxFeatures=10');
+ const sourceId = decodedUrl.includes("source_id = 'A'") ? 'A' : 'B';
+ return [200, {
+ type: 'FeatureCollection',
+ features: [{
+ id: `external.${sourceId}`,
+ properties: { label: `Related ${sourceId}` }
+ }]
+ }];
+ });
+
+ ReactDOM.render(
+
+ ,
+ document.getElementById('container')
+ );
+
+ expect(document.querySelector('.ms-properties-viewer-key').textContent)
+ .toBe('Etichetta esterna');
+ });
+
+
+ it('reuses the cached request when the same view mounts again', (done) => {
+ let requestCount = 0;
+ mockAxios.onGet().reply(() => {
+ requestCount += 1;
+ return [200, { type: 'FeatureCollection', features: [] }];
+ });
+ const container = document.getElementById('container');
+
+ ReactDOM.render(, container);
+ setTimeout(() => {
+ ReactDOM.unmountComponentAtNode(container);
+ ReactDOM.render(, container);
+ setTimeout(() => {
+ expect(requestCount).toBe(1);
+ done();
+ });
+ });
+ });
+
+ it('limits the related features with the layer maxItems setting', (done) => {
+ mockAxios.onGet().reply(({ url }) => {
+ expect(decodeURIComponent(url)).toContain('maxFeatures=3');
+ return [200, { type: 'FeatureCollection', features: [] }];
+ });
+
+ ReactDOM.render(
+ ,
+ document.getElementById('container')
+ );
+
+ setTimeout(() => {
+ try {
+ expect(mockAxios.history.get.length).toBe(1);
+ done();
+ } catch (error) {
+ done(error);
+ }
+ });
+ });
+
+ it('does not reload when the layer object changes but the configuration does not', (done) => {
+ let requestCount = 0;
+ mockAxios.onGet().reply(() => {
+ requestCount += 1;
+ return [200, { type: 'FeatureCollection', features: [] }];
+ });
+ const container = document.getElementById('container');
+
+ ReactDOM.render(, container);
+ setTimeout(() => {
+ expect(requestCount).toBe(1);
+ // clearing the cache isolates "the effect refired" from "the request was cached"
+ clearExternalDataCacheForIdentifyRequests(['identify-external']);
+ ReactDOM.render(
+ ,
+ container
+ );
+ setTimeout(() => {
+ try {
+ expect(requestCount).toBe(1);
+ done();
+ } catch (error) {
+ done(error);
+ }
+ });
+ });
+ });
+
+ it('reloads when the configured filter changes', (done) => {
+ const filters = [];
+ mockAxios.onGet().reply(({ url }) => {
+ filters.push(decodeURIComponent(url).match(/CQL_FILTER=([^&]*)/)[1]);
+ return [200, { type: 'FeatureCollection', features: [] }];
+ });
+ const container = document.getElementById('container');
+
+ ReactDOM.render(, container);
+ setTimeout(() => {
+ ReactDOM.render(
+ ,
+ container
+ );
+ setTimeout(() => {
+ try {
+ expect(filters.length).toBe(2);
+ expect(filters[0]).toContain('source_id');
+ expect(filters[1]).toContain('other_id');
+ done();
+ } catch (error) {
+ done(error);
+ }
+ });
+ });
+ });
+
+ it('does not request anything when the service configuration is incomplete', (done) => {
+ ReactDOM.render(
+ ,
+ document.getElementById('container')
+ );
+
+ setTimeout(() => {
+ try {
+ expect(mockAxios.history.get.length).toBe(0);
+ expect(document.querySelector('.alert-warning')).toExist();
+ done();
+ } catch (error) {
+ done(error);
+ }
+ });
+ });
+
+ it('shares a cached request across views with different presentation settings', (done) => {
+ let requestCount = 0;
+ mockAxios.onGet().reply(() => {
+ requestCount += 1;
+ return [200, {
+ type: 'FeatureCollection',
+ features: [{
+ id: 'external.shared',
+ properties: {
+ label: 'Label value',
+ code: 'Code value'
+ }
+ }]
+ }];
+ });
+ const container = document.getElementById('container');
+ const firstLayer = {
+ featureInfo: {
+ ...layer.featureInfo,
+ id: 'first-view'
+ }
+ };
+ const secondLayer = {
+ featureInfo: {
+ ...layer.featureInfo,
+ id: 'second-view',
+ featuresService: {
+ ...layer.featureInfo.featuresService,
+ attributes: [{ name: 'code', alias: 'Second view code', visible: true }]
+ }
+ }
+ };
+
+ ReactDOM.render(, container);
+ setTimeout(() => {
+ expect(container.textContent).toContain('External label');
+ ReactDOM.unmountComponentAtNode(container);
+ ReactDOM.render(, container);
+ setTimeout(() => {
+ expect(requestCount).toBe(1);
+ expect(container.textContent).toContain('Second view code');
+ expect(container.textContent).toContain('Code value');
+ expect(container.textContent).toNotContain('External label');
+ done();
+ });
+ });
+ });
+
+ it('reports a missing source property without making a request', (done) => {
+ ReactDOM.render(
+ ,
+ document.getElementById('container')
+ );
+
+ setTimeout(() => {
+ expect(document.querySelector('.alert-danger')).toExist();
+ TestUtils.Simulate.click(document.querySelector('.alert-danger button'));
+ setTimeout(() => {
+ expect(requestCount).toBe(2);
+ expect(document.getElementById('container').textContent).toContain('Recovered');
+ done();
+ });
+ });
+ });
+});
diff --git a/web/client/components/data/identify/viewers/row/AttributeValue.jsx b/web/client/components/data/identify/viewers/row/AttributeValue.jsx
new file mode 100644
index 00000000000..92b8ca6be8e
--- /dev/null
+++ b/web/client/components/data/identify/viewers/row/AttributeValue.jsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2026, 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 React, { lazy, Suspense } from 'react';
+import PropTypes from 'prop-types';
+import Image from '../../../../geostory/media/Image';
+import Video from '../../../../geostory/media/Video';
+import { Modes } from '../../../../../utils/GeoStoryUtils';
+import PdfViewer from './PdfViewer';
+import { resolveAttributeDisplayType } from '../../../../../utils/FeatureInfoAttributeUtils';
+import { isValidURL } from '../../../../../utils/URLUtils';
+import { IFRAME_SANDBOX, IFRAME_REFERRER_POLICY } from '../../../../../utils/HtmlSanitizer';
+
+const PanoramaViewer = lazy(() => import('./PanoramaViewer'));
+
+export const formatAttributeValue = (value) => {
+ if (typeof value === 'string') {
+ return value;
+ }
+ if (value === undefined || value === null) {
+ return '';
+ }
+ return JSON.stringify(value);
+};
+
+const AttributeValue = ({ value, attribute = {}, mediaTypeValue }) => {
+ const displayType = resolveAttributeDisplayType({ value, attribute, mediaTypeValue });
+ if (typeof value !== 'string' || displayType === 'string' || !isValidURL(value)) {
+ return formatAttributeValue(value);
+ }
+ const className = 'ms-feature-info-attribute-media';
+ if (displayType === 'image') {
+ return
;
+ }
+ if (displayType === 'video') {
+ return
;
+ }
+ if (displayType === 'audio') {
+ return {value} ;
+ }
+ if (displayType === 'iframe') {
+ return (