From aa7ce53c202fea8d20a7d1e46c9142e88aec78c4 Mon Sep 17 00:00:00 2001 From: mahmoudadel54 Date: Wed, 24 Apr 2024 15:20:50 +0200 Subject: [PATCH] #10026: fix Interactive legend for TOC layers [WMS Support] Description: - resolve review comments by adding a configration prop for TOCItemsSettings 'hideInteractiveLegendOption' - remove the replaced selector 'isMapOnlyOpenedSelector' - edit unit test of 'Display-test' file - --- .../components/TOC/fragments/settings/Display.jsx | 6 +++--- .../fragments/settings/__tests__/Display-test.jsx | 12 ++++++------ .../widgets/builder/wizard/map/NodeEditor.jsx | 1 + web/client/plugins/TOCItemsSettings.jsx | 11 +++++------ web/client/plugins/mapEditor/DefaultConfiguration.js | 7 ++++++- web/client/selectors/map.js | 5 ----- 6 files changed, 21 insertions(+), 21 deletions(-) diff --git a/web/client/components/TOC/fragments/settings/Display.jsx b/web/client/components/TOC/fragments/settings/Display.jsx index 3705369ab2..3b00af2926 100644 --- a/web/client/components/TOC/fragments/settings/Display.jsx +++ b/web/client/components/TOC/fragments/settings/Display.jsx @@ -39,13 +39,13 @@ export default class extends React.Component { projection: PropTypes.string, resolutions: PropTypes.array, zoom: PropTypes.number, - isMapOpen: PropTypes.bool + hideInteractiveLegendOption: PropTypes.bool }; static defaultProps = { onChange: () => {}, opacityText: , - isMapOpen: false + hideInteractiveLegendOption: false }; constructor(props) { @@ -265,7 +265,7 @@ export default class extends React.Component { - { this.props.element?.serverType !== ServerTypes.NO_VENDOR && this.props?.isMapOpen && + { this.props.element?.serverType !== ServerTypes.NO_VENDOR && !this.props?.hideInteractiveLegendOption && { let spy = expect.spyOn(handlers, "onChange"); // wrap in a stateful component, stateless components render return null // see: https://facebook.github.io/react/docs/top-level-api.html#reactdom.render - const comp = ReactDOM.render(, document.getElementById("container")); + const comp = ReactDOM.render(, document.getElementById("container")); expect(comp).toBeTruthy(); const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" ); expect(inputs).toBeTruthy(); @@ -98,7 +98,7 @@ describe('test Layer Properties Display module component', () => { let spy = expect.spyOn(handlers, "onChange"); // wrap in a stateful component, stateless components render return null // see: https://facebook.github.io/react/docs/top-level-api.html#reactdom.render - const comp = ReactDOM.render(, document.getElementById("container")); + const comp = ReactDOM.render(, document.getElementById("container")); expect(comp).toBeTruthy(); const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" ); expect(inputs).toBeTruthy(); @@ -270,7 +270,7 @@ describe('test Layer Properties Display module component', () => { const handlers = { onChange() {} }; - const comp = ReactDOM.render(, document.getElementById("container")); + const comp = ReactDOM.render(, document.getElementById("container")); expect(comp).toBeTruthy(); const labels = ReactTestUtils.scryRenderedDOMComponentsWithClass( comp, "control-label" ); const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" ); @@ -300,7 +300,7 @@ describe('test Layer Properties Display module component', () => { const handlers = { onChange() {} }; - const comp = ReactDOM.render(, document.getElementById("container")); + const comp = ReactDOM.render(, document.getElementById("container")); expect(comp).toBeTruthy(); const labels = ReactTestUtils.scryRenderedDOMComponentsWithClass( comp, "control-label" ); const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" ); @@ -338,7 +338,7 @@ describe('test Layer Properties Display module component', () => { onChange() {} }; let spy = expect.spyOn(handlers, "onChange"); - const comp = ReactDOM.render(, document.getElementById("container")); + const comp = ReactDOM.render(, document.getElementById("container")); expect(comp).toBeTruthy(); const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" ); const legendPreview = ReactTestUtils.scryRenderedDOMComponentsWithClass( comp, "legend-preview" ); @@ -416,7 +416,7 @@ describe('test Layer Properties Display module component', () => { opacity: 1 } }; - const comp = ReactDOM.render(, document.getElementById("container")); + const comp = ReactDOM.render(, document.getElementById("container")); expect(comp).toBeTruthy(); const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" ); expect(inputs).toBeTruthy(); diff --git a/web/client/components/widgets/builder/wizard/map/NodeEditor.jsx b/web/client/components/widgets/builder/wizard/map/NodeEditor.jsx index f0ad36cff7..75a900f69c 100644 --- a/web/client/components/widgets/builder/wizard/map/NodeEditor.jsx +++ b/web/client/components/widgets/builder/wizard/map/NodeEditor.jsx @@ -41,6 +41,7 @@ export default ({ {tabs.filter(tab => tab.id && tab.id === activeTab).filter(tab => tab.Component).map(tab => ( ({ + showEditableFeatureCheckboxSelector +], (settings, groups, currentLocale, currentLocaleLanguage, dockStyle, isAdmin, activeTab, element, isLocalizedLayerStylesEnabled, isCesiumActive, showFeatureEditOption) => ({ settings, element, groups, @@ -57,8 +56,7 @@ const tocItemsSettingsSelector = createSelector([ activeTab, isLocalizedLayerStylesEnabled, isCesiumActive, - showFeatureEditOption, - isMapOpen + showFeatureEditOption })); const SettingsButton = connect(() => ({}), { @@ -123,6 +121,7 @@ const SettingsButton = connect(() => ({}), { * @prop cfg.hideTitleTranslations {bool} if true hide the title translations tool * @prop cfg.showTooltipOptions {bool} if true, it shows tooltip section * @prop cfg.initialActiveTab {string} tab that will be enabled initially when the settings are opened. Possible values: + * @prop cfg.hideInteractiveLegendOption {bool} if true, it hide the checkbox of enable interactive legend in display tab * 'general' (General tab), 'display' (Display tab), 'style' (Style tab), 'feature' (Feature info tab). * @example * { diff --git a/web/client/plugins/mapEditor/DefaultConfiguration.js b/web/client/plugins/mapEditor/DefaultConfiguration.js index 14f2959489..d8cb7505b0 100644 --- a/web/client/plugins/mapEditor/DefaultConfiguration.js +++ b/web/client/plugins/mapEditor/DefaultConfiguration.js @@ -64,7 +64,12 @@ export default { } }, "AddGroup", "MapFooter", - "TOCItemsSettings", + { + "name": "TOCItemsSettings", + "cfg": { + "hideInteractiveLegendOption": true + } + }, "MapImport", "MapExport", { diff --git a/web/client/selectors/map.js b/web/client/selectors/map.js index 35a6abf3bc..02b76b14ca 100644 --- a/web/client/selectors/map.js +++ b/web/client/selectors/map.js @@ -155,8 +155,3 @@ export const isMouseMoveIdentifyActiveSelector = (state) => { export const identifyFloatingToolSelector = (state) => { return mouseMoveListenerSelector(state).includes('identifyFloatingTool') || state.mode === "embedded" || (state.mapPopups?.popups && detectIdentifyInMapPopUp(state)); }; - -export const isMapOnlyOpenedSelector = (state) => { - // state?.mapEditor?.onwer --> to exclude geostory - return projectionSelector(state) && !state?.mapEditor?.owner; -};