Fixes #2526: download button in the TOC

web/client/actions/layers.js

@@ -25,6 +25,7 @@ const REFRESH_LAYERS = 'REFRESH_LAYERS';
 const LAYERS_REFRESHED = 'LAYERS_REFRESHED';
 const LAYERS_REFRESH_ERROR = 'LAYERS_REFRESH_ERROR';
 const BROWSE_DATA = 'LAYERS:BROWSE_DATA';
+const DOWNLOAD = 'LAYERS:DOWNLOAD';
 const CLEAR_LAYERS = 'LAYERS:CLEAR_LAYERS';
 const SELECT_NODE = 'LAYERS:SELECT_NODE';
 const FILTER_LAYERS = 'LAYERS:FILTER_LAYERS';
@@ -189,6 +190,12 @@ function browseData(layer) {
         layer
     };
 }
+function download(layer) {
+    return {
+        type: DOWNLOAD,
+        layer
+    };
+}
 function clearLayers() {
     return {
         type: CLEAR_LAYERS
@@ -227,8 +234,10 @@ function hideLayerMetadata() {
 
 module.exports = {changeLayerProperties, changeGroupProperties, toggleNode, sortNode, removeNode, contextNode,
     updateNode, layerLoading, layerLoad, layerError, addLayer, removeLayer, showSettings, hideSettings, updateSettings, refreshLayers,
-    layersRefreshed, layersRefreshError, refreshLayerVersion, browseData, clearLayers, selectNode, filterLayers, showLayerMetadata, hideLayerMetadata,
+    layersRefreshed, layersRefreshError, refreshLayerVersion, browseData, clearLayers, selectNode, filterLayers, showLayerMetadata,
+    hideLayerMetadata, download,
     CHANGE_LAYER_PROPERTIES, CHANGE_GROUP_PROPERTIES, TOGGLE_NODE, SORT_NODE,
     REMOVE_NODE, UPDATE_NODE, LAYER_LOADING, LAYER_LOAD, LAYER_ERROR, ADD_LAYER, REMOVE_LAYER,
-    SHOW_SETTINGS, HIDE_SETTINGS, UPDATE_SETTINGS, CONTEXT_NODE, REFRESH_LAYERS, LAYERS_REFRESHED, LAYERS_REFRESH_ERROR, BROWSE_DATA, CLEAR_LAYERS, SELECT_NODE, FILTER_LAYERS, SHOW_LAYER_METADATA, HIDE_LAYER_METADATA
+    SHOW_SETTINGS, HIDE_SETTINGS, UPDATE_SETTINGS, CONTEXT_NODE, REFRESH_LAYERS, LAYERS_REFRESHED, LAYERS_REFRESH_ERROR, BROWSE_DATA, DOWNLOAD,
+    CLEAR_LAYERS, SELECT_NODE, FILTER_LAYERS, SHOW_LAYER_METADATA, HIDE_LAYER_METADATA
 };

web/client/components/TOC/Toolbar.jsx

@@ -30,6 +30,7 @@ class Toolbar extends React.Component {
         style: PropTypes.object,
         settings: PropTypes.object,
         layerMetadata: PropTypes.object,
+        wfsdownload: PropTypes.object,
         metadataTemplate: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object, PropTypes.func])
     };
 
@@ -50,6 +51,7 @@ class Toolbar extends React.Component {
             onHideSettings: () => {},
             onReload: () => {},
             onAddLayer: () => {},
+            onDownload: () => {},
             onGetMetadataRecord: () => {},
             onHideLayerMetadata: () => {},
             onShow: () => {}
@@ -73,6 +75,7 @@ class Toolbar extends React.Component {
                 GROUP: ''
             },
             featuresGridTooltip: '',
+            downloadToolTooltip: '',
             trashTooltip: {
                 LAYER: '',
                 LAYERS: ''
@@ -89,6 +92,7 @@ class Toolbar extends React.Component {
             activateRemoveLayer: true,
             activateZoomTool: true,
             activateQueryTool: true,
+            activateDownloadTool: true,
             activateSettingsTool: true,
             activateAddLayer: true,
             includeDeleteButtonInSettings: false,
@@ -103,6 +107,7 @@ class Toolbar extends React.Component {
         },
         settings: {},
         layerMetadata: {},
+        wfsdownload: {},
         metadataTemplate: null
     };
 
@@ -191,7 +196,7 @@ class Toolbar extends React.Component {
                         </Button>
                     </OverlayTrigger>
                 : null}
-                {this.props.activateTool.activateSettingsTool && (status === 'LAYER' || status === 'GROUP') && !this.props.layerMetadata.expanded ?
+                    {this.props.activateTool.activateSettingsTool && (status === 'LAYER' || status === 'GROUP') && !this.props.layerMetadata.expanded && !this.props.wfsdownload.expanded ?
                     <OverlayTrigger
                         key="settings"
                         placement="top"
@@ -201,7 +206,7 @@ class Toolbar extends React.Component {
                         </Button>
                     </OverlayTrigger>
                 : null}
-                {this.props.activateTool.activateQueryTool && status === 'LAYER' && this.props.selectedLayers[0].search && !this.props.settings.expanded && !this.props.layerMetadata.expanded ?
+                    {this.props.activateTool.activateQueryTool && status === 'LAYER' && this.props.selectedLayers[0].search && !this.props.settings.expanded && !this.props.layerMetadata.expanded && !this.props.wfsdownload.expanded ?
                     <OverlayTrigger
                         key="featuresGrid"
                         placement="top"
@@ -211,7 +216,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.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 ?
                     <OverlayTrigger
                         key="removeNode"
                         placement="top"
@@ -231,7 +236,7 @@ class Toolbar extends React.Component {
                         </Button>
                     </OverlayTrigger>
                 : null}
-                {this.props.activateTool.activateWidgetTool && (status === 'LAYER') && this.props.selectedLayers.length === 1 && !this.props.settings.expanded && !this.props.layerMetadata.expanded ?
+                    {this.props.activateTool.activateWidgetTool && (status === 'LAYER') && this.props.selectedLayers.length === 1 && !this.props.settings.expanded && !this.props.layerMetadata.expanded && !this.props.wfsdownload.expanded ?
                     <OverlayTrigger
                         key="widgets"
                         placement="top"
@@ -241,7 +246,17 @@ class Toolbar extends React.Component {
                         </Button>
                     </OverlayTrigger>
                 : null}
-                {this.props.activateTool.activateMetedataTool && (status === 'LAYER') && this.props.selectedLayers[0].catalogURL && !this.props.settings.expanded ?
+                {this.props.activateTool.activateDownloadTool && status === 'LAYER' && this.props.selectedLayers[0].search && !this.props.settings.expanded && !this.props.layerMetadata.expanded ?
+                    <OverlayTrigger
+                        key="downloadTool"
+                        placement="top"
+                            overlay={<Tooltip id="toc-tooltip-downloadTool">{this.props.text.downloadToolTooltip}</Tooltip>}>
+                            <Button bsStyle={this.props.wfsdownload.expanded ? "success" : "primary"} className="square-button-md" onClick={this.download}>
+                            <Glyphicon glyph="download" />
+                        </Button>
+                    </OverlayTrigger>
+                    : null}
+                    {this.props.activateTool.activateMetedataTool && (status === 'LAYER') && this.props.selectedLayers[0].catalogURL && !this.props.settings.expanded && !this.props.wfsdownload.expanded ?
                     <OverlayTrigger
                         key="layerMetadata"
                         placement="top"
@@ -275,6 +290,14 @@ class Toolbar extends React.Component {
         });
     }
 
+    download = () => {
+        this.props.onToolsActions.onDownload({
+            url: this.props.selectedLayers[0].search.url || this.props.selectedLayers[0].url,
+            name: this.props.selectedLayers[0].name,
+            id: this.props.selectedLayers[0].id
+        });
+    }
+
     checkBbox = () => {
         const layersBbox = this.props.selectedLayers.filter(l => l.bbox).map(l => l.bbox);
         const uniqueCRS = layersBbox.length > 0 ? layersBbox.reduce((a, b) => a.crs === b.crs ? a : {crs: 'differentCRS'}) : {crs: 'differentCRS'};

web/client/components/TOC/__tests__/Toolbar-test.jsx

@@ -16,6 +16,7 @@ const TestUtils = require('react-dom/test-utils');
 const onToolsActions = {
     onZoom: () => {},
     onBrowseData: () => {},
+    onDownload: () => {},
     onUpdate: () => {},
     onRemove: () => {},
     onClear: () => {},
@@ -58,6 +59,7 @@ describe('TOC Toolbar', () => {
         const spyZoom = expect.spyOn(onToolsActions, 'onZoom');
         const spySettings = expect.spyOn(onToolsActions, 'onSettings');
         const spyBrowseData = expect.spyOn(onToolsActions, 'onBrowseData');
+        const spyDownload = expect.spyOn(onToolsActions, 'onDownload');
         const selectedLayers = [{
             id: 'l001',
             title: 'layer001',
@@ -83,7 +85,7 @@ describe('TOC Toolbar', () => {
         const el = ReactDOM.findDOMNode(cmp);
         expect(el).toExist();
         const btn = el.getElementsByClassName("btn");
-        expect(btn.length).toBe(4);
+        expect(btn.length).toBe(5);
         TestUtils.Simulate.click(btn[0]);
         expect(spyZoom).toHaveBeenCalledWith({
             maxx: 10,
@@ -102,6 +104,13 @@ describe('TOC Toolbar', () => {
             name: selectedLayers[0].name,
             id: selectedLayers[0].id
         });
+        TestUtils.Simulate.click(btn[4]);
+        expect(spyDownload).toHaveBeenCalled();
+        expect(spyDownload).toHaveBeenCalledWith({
+            url: selectedLayers[0].search.url,
+            name: selectedLayers[0].name,
+            id: selectedLayers[0].id
+        });
 
         TestUtils.Simulate.click(btn[3]);
         const removeModal = document.getElementsByClassName('modal-dialog').item(0);
@@ -214,10 +223,10 @@ describe('TOC Toolbar', () => {
         const el = ReactDOM.findDOMNode(cmp);
         expect(el).toExist();
         const btn = el.getElementsByClassName("btn");
-        expect(btn.length).toBe(5);
+        expect(btn.length).toBe(6);
 
 
-        TestUtils.Simulate.click(btn[4]);
+        TestUtils.Simulate.click(btn[5]);
         expect(spyGetMetadataRecord).toHaveBeenCalled();
 
         TestUtils.Simulate.click(btn[3]);

web/client/epics/__tests__/wfsdownload-test.js

@@ -9,8 +9,10 @@
 var expect = require('expect');
 
 const {toggleControl, TOGGLE_CONTROL} = require('../../actions/controls');
-
-const {closeExportDownload} = require('../wfsdownload');
+const {download} = require('../../actions/layers');
+const { DOWNLOAD_OPTIONS_CHANGE } = require('../../actions/wfsdownload');
+const { QUERY_CREATE } = require('../../actions/wfsquery');
+const { closeExportDownload, openDownloadTool} = require('../wfsdownload');
 const {testEpic} = require('./epicTestUtils');
 describe('wfsdownload Epics', () => {
     it('close export panel', (done) => {
@@ -26,4 +28,30 @@ describe('wfsdownload Epics', () => {
         const state = {controls: { queryPanel: {enabled: false}, wfsdownload: {enabled: true}}};
         testEpic(closeExportDownload, 1, toggleControl("queryPanel"), epicResult, state);
     });
+    it('downloads a layer', (done) => {
+        const epicResult = actions => {
+            expect(actions.length).toBe(3);
+            actions.map((action) => {
+                switch (action.type) {
+                    case TOGGLE_CONTROL:
+                        expect(action.control).toBe('wfsdownload');
+                        break;
+                    case DOWNLOAD_OPTIONS_CHANGE:
+                        expect(action.key).toBe('singlePage');
+                        expect(action.value).toBe(false);
+                        break;
+                    case QUERY_CREATE:
+                        expect(action.searchUrl).toBe('myurl');
+                        expect(action.filterObj.featureTypeName).toBe('mylayer');
+                        break;
+                    default:
+                        break;
+                }
+            });
+            done();
+        };
+
+        const state = { controls: { wfsdownload: { enabled: false, downloadOptions: {}} } };
+        testEpic(openDownloadTool, 3, download({name: 'mylayer', url: 'myurl'}), epicResult, state);
+    });
 });

web/client/epics/wfsdownload.js

@@ -1,5 +1,7 @@
-const {FORMAT_OPTIONS_FETCH, DOWNLOAD_FEATURES, onDownloadFinished, updateFormats} = require('../actions/wfsdownload');
+const { FORMAT_OPTIONS_FETCH, DOWNLOAD_FEATURES, onDownloadFinished, updateFormats, onDownloadOptionChange} = require('../actions/wfsdownload');
 const {TOGGLE_CONTROL, toggleControl} = require('../actions/controls');
+const {DOWNLOAD} = require('../actions/layers');
+const {createQuery} = require('../actions/wfsquery');
 const {error} = require('../actions/notifications');
 const Rx = require('rxjs');
 const {get, find, pick, toPairs} = require('lodash');
@@ -68,6 +70,15 @@ const str2bytes = (str) => {
 };
 */
 module.exports = {
+    openDownloadTool: (action$) =>
+        action$.ofType(DOWNLOAD)
+            .switchMap((action) => {
+                return Rx.Observable.from([
+                    toggleControl("wfsdownload"),
+                    onDownloadOptionChange("singlePage", false),
+                    createQuery(action.layer.url, {featureTypeName: action.layer.name})
+                ]);
+            }),
     fetchFormatsWFSDownload: (action$) =>
         action$.ofType(FORMAT_OPTIONS_FETCH)
             .switchMap( action => {

web/client/localConfig.json

@@ -260,6 +260,7 @@
                 "name": "TOC",
                 "cfg": {
                     "activateQueryTool": true,
+                    "activateDownloadTool": true,
                     "activateAddLayerButton": true,
                     "spatialOperations": [
                         {"id": "INTERSECTS", "name": "queryform.spatialfilter.operations.intersects"},