#10026: fix functional tests for Interactive legend for TOC layers [WMS Support]

web/client/components/TOC/fragments/settings/Display.jsx

@@ -38,12 +38,14 @@ export default class extends React.Component {
         isCesiumActive: PropTypes.bool,
         projection: PropTypes.string,
         resolutions: PropTypes.array,
-        zoom: PropTypes.number
+        zoom: PropTypes.number,
+        hideInteractiveLegendOption: PropTypes.bool
     };
 
     static defaultProps = {
         onChange: () => {},
-        opacityText: <Message msgId="opacity"/>
+        opacityText: <Message msgId="opacity"/>,
+        hideInteractiveLegendOption: false
     };
 
     constructor(props) {
@@ -263,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.element?.serverType !== ServerTypes.NO_VENDOR && !this.props?.hideInteractiveLegendOption &&
                             <Col xs={12} className="first-selectize">
                                 <Checkbox
                                     data-qa="display-interactive-legend-option"

web/client/components/TOC/fragments/settings/__tests__/Display-test.jsx

@@ -52,7 +52,7 @@ describe('test Layer Properties Display module component', () => {
         ReactTestUtils.Simulate.focus(inputs[0]);
         expect(inputs[0].value).toBe('100');
     });
-    it('tests Display component for wms', () => {
+    it('tests Display component for wms for map viewer', () => {
         const l = {
             name: 'layer00',
             title: 'Layer',
@@ -80,6 +80,34 @@ describe('test Layer Properties Display module component', () => {
         inputs[8].click();
         expect(spy.calls.length).toBe(1);
     });
+    it('tests Display component for wms for dashboard or geostory', () => {
+        const l = {
+            name: 'layer00',
+            title: 'Layer',
+            visibility: true,
+            storeIndex: 9,
+            type: 'wms',
+            url: 'fakeurl'
+        };
+        const settings = {
+            options: {opacity: 0.7}
+        };
+        const handlers = {
+            onChange() {}
+        };
+        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} hideInteractiveLegendOption settings={settings} onChange={handlers.onChange}/>, document.getElementById("container"));
+        expect(comp).toBeTruthy();
+        const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" );
+        expect(inputs).toBeTruthy();
+        expect(inputs.length).toBe(13);
+        ReactTestUtils.Simulate.focus(inputs[2]);
+        expect(inputs[2].value).toBe('70');
+        inputs[8].click();
+        expect(spy.calls.length).toBe(1);
+    });
     it('tests Display component for wms with format fetch', (done) => {
         const l = {
             name: 'layer00',
@@ -227,7 +255,7 @@ describe('test Layer Properties Display module component', () => {
         expect(spyOn.calls[0].arguments).toEqual([ 'forceProxy', true ]);
     });
 
-    it('tests Layer Properties Legend component', () => {
+    it('tests Layer Properties Legend component for map viewer only', () => {
         const l = {
             name: 'layer00',
             title: 'Layer',
@@ -257,7 +285,36 @@ describe('test Layer Properties Display module component', () => {
         expect(labels[6].innerText).toBe("layerProperties.legendOptions.legendHeight");
         expect(labels[7].innerText).toBe("layerProperties.legendOptions.legendPreview");
     });
-
+    it('tests Layer Properties Legend component for dashboard or geostory', () => {
+        const l = {
+            name: 'layer00',
+            title: 'Layer',
+            visibility: true,
+            storeIndex: 9,
+            type: 'wms',
+            url: 'fakeurl'
+        };
+        const settings = {
+            options: {opacity: 1}
+        };
+        const handlers = {
+            onChange() {}
+        };
+        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" );
+        const legendWidth = inputs[11];
+        const legendHeight = inputs[12];
+        // Default legend values
+        expect(legendWidth.value).toBe('12');
+        expect(legendHeight.value).toBe('12');
+        expect(labels.length).toBe(8);
+        expect(labels[4].innerText).toBe("layerProperties.legendOptions.title");
+        expect(labels[5].innerText).toBe("layerProperties.legendOptions.legendWidth");
+        expect(labels[6].innerText).toBe("layerProperties.legendOptions.legendHeight");
+        expect(labels[7].innerText).toBe("layerProperties.legendOptions.legendPreview");
+    });
     it('tests Layer Properties Legend component events', () => {
         const l = {
             name: 'layer00',

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}

web/client/plugins/TOCItemsSettings.jsx

@@ -121,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
  * {

web/client/plugins/mapEditor/DefaultConfiguration.js

@@ -64,7 +64,12 @@ export default {
             }
         },
         "AddGroup", "MapFooter",
-        "TOCItemsSettings",
+        {
+            "name": "TOCItemsSettings",
+            "cfg": {
+                "hideInteractiveLegendOption": true
+            }
+        },
         "MapImport",
         "MapExport",
         {

web/client/utils/LayersUtils.js

@@ -709,6 +709,7 @@ export const saveLayer = (layer) => {
         version: layer.version,
         expanded: layer.expanded || false
     },
+    layer?.enableInteractiveLegend !== undefined ? { enableInteractiveLegend: layer?.enableInteractiveLegend } : {},
     layer.sources ? { sources: layer.sources } : {},
     layer.heightOffset ? { heightOffset: layer.heightOffset } : {},
     layer.params ? { params: layer.params } : {},