Fix #3415 Layer properties are not accessible if its style is invalid (#3719)

allyoucanmap · Tobia Di Pisa · commit d3a2a2a9af27 · 2019-05-06T17:21:48.000+02:00
* enabled settings on layer with error

* add documentation for get status
diff --git a/web/client/components/TOC/Toolbar.jsx b/web/client/components/TOC/Toolbar.jsx
@@ -124,7 +124,16 @@ class Toolbar extends React.Component {
     isLoading = () => {
         return head(this.props.selectedLayers.filter(l => l.loading));
     }
-
+    /**
+     * retrieve current status based on selected layers and groups
+     * 'DESELECT' no selection
+     * 'LAYER' single layer selection
+     * 'LAYERS' multiple layer selection
+     * 'GROUP' single group selection, it select also children layers
+     * 'GROUPS' multiple group selection, it select also children layers
+     * 'LAYER_LOAD_ERROR' single layer selection with error
+     * 'LAYERS_LOAD_ERROR' multiple layer selection with error, all selected layer have an error
+     */
     getStatus = () => {
         const {selectedLayers, selectedGroups} = this.props;
         const isSingleGroup = this.isNestedGroup();
@@ -133,7 +142,7 @@ class Toolbar extends React.Component {
         status = isSingleGroup ? 'GROUP' : status;
         status = selectedLayers.length > 1 & selectedGroups.length === 0 ? 'LAYERS' : status;
         status = selectedGroups.length > 1 && !isSingleGroup ? 'GROUPS' : status;
-        status = this.props.selectedLayers.length > 0 && this.props.selectedLayers.filter(l => l.loadingError === 'Error').length === this.props.selectedLayers.length ? 'LAYERS_LOAD_ERROR' : status;
+        status = this.props.selectedLayers.length > 0 && this.props.selectedLayers.filter(l => l.loadingError === 'Error').length === this.props.selectedLayers.length ? `${status}_LOAD_ERROR` : status;
         return status;
     }
 
@@ -176,11 +185,11 @@ class Toolbar extends React.Component {
                         </Button>
                     </OverlayTrigger>
                 : null}
-                    {this.props.activateTool.activateSettingsTool && (status === 'LAYER' || status === 'GROUP') && !this.props.layerMetadata.expanded && !this.props.wfsdownload.expanded ?
+                    {this.props.activateTool.activateSettingsTool && (status === 'LAYER' || status === 'GROUP' || status === 'LAYER_LOAD_ERROR') && !this.props.layerMetadata.expanded && !this.props.wfsdownload.expanded ?
                     <OverlayTrigger
                         key="settings"
                         placement="top"
-                        overlay={<Tooltip id="toc-tooltip-settings">{this.props.text.settingsTooltip[status]}</Tooltip>}>
+                        overlay={<Tooltip id="toc-tooltip-settings">{this.props.text.settingsTooltip[status ? 'LAYER_LOAD_ERROR' && 'LAYER' : status]}</Tooltip>}>
                         <Button active={this.props.settings.expanded} bsStyle={this.props.settings.expanded ? 'success' : 'primary'} className="square-button-md" onClick={() => { this.showSettings(status); }}>
                             <Glyphicon glyph="wrench"/>
                         </Button>
@@ -196,7 +205,7 @@ class Toolbar extends React.Component {
                         </Button>
                     </OverlayTrigger>
                 : null}
-                    {this.props.activateTool.activateRemoveLayer && (status === 'LAYER' || status === 'GROUP' || status === 'LAYERS' || status === 'GROUPS' || status === 'LAYERS_LOAD_ERROR') && this.props.selectedLayers.length > 0 && !this.props.settings.expanded && !this.props.layerMetadata.expanded && !this.props.wfsdownload.expanded ?
+                    {this.props.activateTool.activateRemoveLayer && (status === 'LAYER' || status === 'GROUP' || status === 'LAYERS' || status === 'GROUPS' || status === 'LAYER_LOAD_ERROR' || status === 'LAYERS_LOAD_ERROR') && this.props.selectedLayers.length > 0 && !this.props.settings.expanded && !this.props.layerMetadata.expanded && !this.props.wfsdownload.expanded ?
                     <OverlayTrigger
                         key="removeNode"
                         placement="top"
@@ -206,7 +215,7 @@ class Toolbar extends React.Component {
                         </Button>
                     </OverlayTrigger>
                 : null}
-                {!this.isLoading() && status === 'LAYERS_LOAD_ERROR' ?
+                {!this.isLoading() && status === 'LAYER_LOAD_ERROR' || status === 'LAYERS_LOAD_ERROR' ?
                     <OverlayTrigger
                         key="reload"
                         placement="top"
@@ -299,7 +308,7 @@ class Toolbar extends React.Component {
 
     showSettings = (status) => {
         if (!this.props.settings.expanded) {
-            if (status === 'LAYER') {
+            if (status === 'LAYER' || status === 'LAYER_LOAD_ERROR') {
                 this.props.onToolsActions.onSettings( this.props.selectedLayers[0].id, 'layers', {opacity: parseFloat(this.props.selectedLayers[0].opacity !== undefined ? this.props.selectedLayers[0].opacity : 1)});
             } else if (status === 'GROUP') {
                 this.props.onToolsActions.onSettings(this.props.selectedGroups[this.props.selectedGroups.length - 1].id, 'groups', {});
diff --git a/web/client/components/TOC/__tests__/Toolbar-test.jsx b/web/client/components/TOC/__tests__/Toolbar-test.jsx
@@ -162,6 +162,7 @@ describe('TOC Toolbar', () => {
     it('layer single selection (loading error)', () => {
         const spyReload = expect.spyOn(onToolsActions, 'onReload');
         const spyShow = expect.spyOn(onToolsActions, 'onShow');
+        const spySettings = expect.spyOn(onToolsActions, 'onSettings');
         const selectedLayers = [{
             id: 'l001',
             title: 'layer001',
@@ -182,6 +183,59 @@ describe('TOC Toolbar', () => {
         const modal = document.getElementsByClassName('modal-dialog').item(0);
         expect(modal).toNotExist();
 
+        const el = ReactDOM.findDOMNode(cmp);
+        expect(el).toExist();
+        const btn = el.getElementsByClassName("btn");
+        expect(btn.length).toBe(3);
+        TestUtils.Simulate.click(btn[2]);
+        expect(spyReload).toHaveBeenCalled();
+        expect(spyShow).toHaveBeenCalledWith('l001', {visibility: true});
+
+        TestUtils.Simulate.click(btn[1]);
+        const removeModal = document.getElementsByClassName('modal-dialog').item(0);
+        expect(removeModal).toExist();
+
+        TestUtils.Simulate.click(btn[0]);
+        expect(spySettings).toHaveBeenCalled();
+        expect(btn[0].querySelector('.glyphicon-wrench')).toExist();
+    });
+
+    it('multiple layer selection (loading error)', () => {
+        const spyReload = expect.spyOn(onToolsActions, 'onReload');
+        const spyShow = expect.spyOn(onToolsActions, 'onShow');
+        const selectedLayers = [{
+            id: 'l001',
+            title: 'layer001',
+            name: 'layer001name',
+            loadingError: 'Error',
+            bbox: {
+                bounds: {
+                    maxx: 10,
+                    maxy: 9,
+                    minx: -10,
+                    miny: -9
+                }, crs: 'EPSG:4326'
+            }
+        }, {
+            id: 'l002',
+            title: 'layer002',
+            name: 'layer002name',
+            loadingError: 'Error',
+            bbox: {
+                bounds: {
+                    maxx: 10,
+                    maxy: 9,
+                    minx: -10,
+                    miny: -9
+                }, crs: 'EPSG:4326'
+            }
+        }];
+
+        const cmp = ReactDOM.render(<Toolbar selectedLayers={selectedLayers} onToolsActions={onToolsActions}/>, document.getElementById("container"));
+
+        const modal = document.getElementsByClassName('modal-dialog').item(0);
+        expect(modal).toNotExist();
+
         const el = ReactDOM.findDOMNode(cmp);
         expect(el).toExist();
         const btn = el.getElementsByClassName("btn");
