geosolutions-it#10026: fix Interactive legend for TOC layers [WMS Sup…

…port] Description: - resolve review comments by adding a configration prop for TOCItemsSettings 'hideInteractiveLegendOption' - remove the replaced selector 'isMapOnlyOpenedSelector' - edit unit test of 'Display-test' file -
mahmoudadel54 · Apr 24, 2024 · aa7ce53 · aa7ce53
1 parent 7d85735
commit aa7ce53
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 21 deletions.
diff --git 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: <Message msgId="opacity"/>,
-        isMapOpen: false
+        hideInteractiveLegendOption: false
     };
 
     constructor(props) {
@@ -265,7 +265,7 @@ export default class extends React.Component {
                         <Col xs={12} className={"legend-label"}>
                             <label key="legend-options-title" className="control-label"><Message msgId="layerProperties.legendOptions.title" /></label>
                         </Col>
-                        { this.props.element?.serverType !== ServerTypes.NO_VENDOR && this.props?.isMapOpen &&
+                        { this.props.element?.serverType !== ServerTypes.NO_VENDOR && !this.props?.hideInteractiveLegendOption &&
                             <Col xs={12} className="first-selectize">
                                 <Checkbox
                                     data-qa="display-interactive-legend-option"

diff --git a/web/client/components/TOC/fragments/settings/__tests__/Display-test.jsx b/web/client/components/TOC/fragments/settings/__tests__/Display-test.jsx
@@ -70,7 +70,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(<Display element={l} isMapOpen settings={settings} onChange={handlers.onChange}/>, document.getElementById("container"));
+        const comp = ReactDOM.render(<Display element={l} settings={settings} onChange={handlers.onChange}/>, 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(<Display element={l} isMapOpen={false} settings={settings} onChange={handlers.onChange}/>, document.getElementById("container"));
+        const comp = ReactDOM.render(<Display element={l} hideInteractiveLegendOption settings={settings} onChange={handlers.onChange}/>, 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(<Display element={l} isMapOpen settings={settings} onChange={handlers.onChange}/>, document.getElementById("container"));
+        const comp = ReactDOM.render(<Display element={l} settings={settings} onChange={handlers.onChange}/>, 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(<Display element={l} settings={settings} onChange={handlers.onChange}/>, document.getElementById("container"));
+        const comp = ReactDOM.render(<Display element={l} hideInteractiveLegendOption settings={settings} onChange={handlers.onChange}/>, 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(<Display element={l} settings={settings} isMapOpen onChange={handlers.onChange}/>, document.getElementById("container"));
+        const comp = ReactDOM.render(<Display element={l} settings={settings} onChange={handlers.onChange}/>, 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(<Display element={l} isMapOpen settings={settings}/>, document.getElementById("container"));
+        const comp = ReactDOM.render(<Display element={l} settings={settings}/>, 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
@@ -41,6 +41,7 @@ export default ({
             {tabs.filter(tab => tab.id && tab.id === activeTab).filter(tab => tab.Component).map(tab => (
                 <tab.Component
                     {...props}
+                    hideInteractiveLegendOption
                     key={'ms-tab-settings-body-' + tab.id}
                     containerWidth={width}
                     element={element}

diff --git a/web/client/plugins/TOCItemsSettings.jsx b/web/client/plugins/TOCItemsSettings.jsx
@@ -30,7 +30,7 @@ import {
 import { createPlugin } from '../utils/PluginsUtils';
 import defaultSettingsTabs from './tocitemssettings/defaultSettingsTabs';
 import { isCesium } from '../selectors/maptype';
-import { showEditableFeatureCheckboxSelector, isMapOnlyOpenedSelector } from "../selectors/map";
+import { showEditableFeatureCheckboxSelector } from "../selectors/map";
 import { isAnnotationLayer } from './Annotations/utils/AnnotationsUtils';
 
 const tocItemsSettingsSelector = createSelector([
@@ -44,9 +44,8 @@ const tocItemsSettingsSelector = createSelector([
     elementSelector,
     isLocalizedLayerStylesEnabledSelector,
     isCesium,
-    showEditableFeatureCheckboxSelector,
-    isMapOnlyOpenedSelector
-], (settings, groups, currentLocale, currentLocaleLanguage, dockStyle, isAdmin, activeTab, element, isLocalizedLayerStylesEnabled, isCesiumActive, showFeatureEditOption, isMapOpen) => ({
+    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
@@ -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
@@ -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;
-};