Fix #1194: Style selector for wms

package.json

@@ -50,7 +50,7 @@
     "react-motion": "0.4.4",
     "react-router": "2.4.0",
     "react-router-redux": "2.1.0",
-    "react-select": "1.0.0-beta14",
+    "react-select": "1.0.0-rc.1",
     "react-transform-catch-errors": "1.0.2",
     "redbox-react": "1.2.4",
     "redux-devtools": "3.1.1",

web/client/actions/__tests__/layers-test.js

@@ -33,7 +33,8 @@ var {
     removeLayer,
     showSettings,
     hideSettings,
-    updateSettings
+    updateSettings,
+    getLayerCapabilities
 } = require('../layers');
 
 describe('Test correctness of the layers actions', () => {
@@ -167,4 +168,25 @@ describe('Test correctness of the layers actions', () => {
         expect(action.type).toBe(UPDATE_SETTINGS);
         expect(action.options).toEqual({opacity: 0.5, size: 500});
     });
+    it('get layer capabilities', (done) => {
+        const layer = {
+            id: "TEST_ID",
+            name: 'testworkspace:testlayer',
+            title: 'Layer',
+            visibility: true,
+            storeIndex: 9,
+            type: 'shapefile',
+            url: 'base/web/client/test-resources/geoserver/wms'
+        };
+        const actionCall = getLayerCapabilities(layer);
+        expect(actionCall).toExist();
+        actionCall((action)=> {
+            expect(action).toExist();
+            expect(action.options).toExist();
+            expect(action.type === UPDATE_NODE);
+            if (action.options.capabilities) {
+                done();
+            }
+        });
+    });
 });

web/client/actions/catalog.js

@@ -16,7 +16,6 @@ const RECORD_LIST_LOAD_ERROR = 'RECORD_LIST_LOAD_ERROR';
 const CHANGE_CATALOG_FORMAT = 'CHANGE_CATALOG_FORMAT';
 const ADD_LAYER_ERROR = 'ADD_LAYER_ERROR';
 const CATALOG_RESET = 'CATALOG_RESET';
-
 function recordsLoaded(options, result) {
     return {
         type: RECORD_LIST_LOADED,

web/client/actions/layers.js

@@ -185,39 +185,46 @@ function getDescribeLayer(url, layer, options) {
 }
 
 function getLayerCapabilities(layer, options) {
-    // geoserver's specific.
+    // geoserver's specific. TODO parse layer.capabilitiesURL.
     let reqUrl = layer.url;
     let urlParts = reqUrl.split("/geoserver/");
     if (urlParts.length === 2) {
         let layerParts = layer.name.split(":");
         if (layerParts.length === 2) {
             reqUrl = urlParts[0] + "/geoserver/" + layerParts [0] + "/" + layerParts[1] + "/" + urlParts[1];
         }
-
     }
     return (dispatch) => {
         // TODO, look ad current cached capabilities;
+        dispatch(updateNode(layer.id, "id", {
+            capabilitiesLoading: true
+        }));
         return WMS.getCapabilities(reqUrl, options).then((capabilities) => {
             let layers = _.get(capabilities, "capability.layer.layer");
             let layerCapability;
 
             layerCapability = _.head(layers.filter( ( capability ) => {
-                if (layer.name.split(":").length === 2 && capability.name.split(":").length === 2 ) {
+                if (layer.name.split(":").length === 2 && capability.name && capability.name.split(":").length === 2 ) {
                     return layer.name === capability.name;
-                } else if (capability.name.split(":").length === 2) {
+                } else if (capability.name && capability.name.split(":").length === 2) {
                     return (layer.name === capability.name.split(":")[1]);
                 } else if (layer.name.split(":").length === 2) {
                     return layer.name.split(":")[1] === capability.name;
                 }
                 return layer.name === capability.name;
             }));
             if (layerCapability) {
-                dispatch(updateNode(layer.id, "id", {capabilities: layerCapability, boundingBox: layerCapability.latLonBoundingBox}));
+                dispatch(updateNode(layer.id, "id", {
+                    capabilities: layerCapability,
+                    capabilitiesLoading: null,
+                    boundingBox: layerCapability.latLonBoundingBox,
+                    availableStyles: layerCapability.style && (Array.isArray(layerCapability.style) ? layerCapability.style : [layerCapability.style])
+                }));
             }
             // return dispatch(updateNode(layer.id, "id", {capabilities: capabilities || {"error": "no describe Layer found"}}));
 
         }).catch((error) => {
-            dispatch(updateNode(layer.id, "id", {capabilities: {error: "error getting capabilities", details: error}} ));
+            dispatch(updateNode(layer.id, "id", {capabilitiesLoading: null, capabilities: {error: "error getting capabilities", details: error}} ));
 
             // return dispatch(updateNode(layer.id, "id", {capabilities: capabilities || {"error": "no describe Layer found"}}));
 

web/client/api/WMS.js

@@ -67,7 +67,6 @@ const Api = {
                 resolve(axios.get(parseUrl(getCapabilitiesUrl)).then((response) => {
                     let json = unmarshaller.unmarshalString(response.data);
                     return json && json.value;
-
                 }));
             });
         });

web/client/components/TOC/DefaultLayer.jsx

@@ -23,6 +23,7 @@ var DefaultLayer = React.createClass({
         node: React.PropTypes.object,
         settings: React.PropTypes.object,
         propertiesChangeHandler: React.PropTypes.func,
+        retrieveLayerData: React.PropTypes.func,
         onToggle: React.PropTypes.func,
         onZoom: React.PropTypes.func,
         onSettings: React.PropTypes.func,
@@ -56,6 +57,7 @@ var DefaultLayer = React.createClass({
             onToggle: () => {},
             onZoom: () => {},
             onSettings: () => {},
+            retrieveLayerData: () => {},
             activateRemoveLayer: false,
             activateLegendTool: false,
             activateSettingsTool: false,
@@ -106,6 +108,7 @@ var DefaultLayer = React.createClass({
                 tools.push(
                     <SettingsModal key="toolsettingsmodal" options={this.props.modalOptions}
                                {...this.props.settingsOptions}
+                               retrieveLayerData={this.props.retrieveLayerData}
                                hideSettings={this.props.hideSettings}
                                settings={this.props.settings}
                                element={this.props.node}

web/client/components/TOC/fragments/SettingsModal.jsx

@@ -15,6 +15,7 @@ const Dialog = require('../../misc/Dialog');
 const ConfirmButton = require('../../buttons/ConfirmButton');
 const General = require('./settings/General');
 const Display = require('./settings/Display');
+const WMSStyle = require('./settings/WMSStyle');
 const {Portal} = require('react-overlays');
 const assign = require('object-assign');
 const Message = require('../../I18N/Message');
@@ -28,6 +29,7 @@ const SettingsModal = React.createClass({
         hideSettings: React.PropTypes.func,
         updateNode: React.PropTypes.func,
         removeNode: React.PropTypes.func,
+        retrieveLayerData: React.PropTypes.func,
         titleText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         opacityText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         saveText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
@@ -54,12 +56,13 @@ const SettingsModal = React.createClass({
             hideSettings: () => {},
             updateNode: () => {},
             removeNode: () => {},
+            retrieveLayerData: () => {},
             asModal: true,
             buttonSize: "large",
             closeGlyph: "",
             panelStyle: {
                 minWidth: "300px",
-                zIndex: 100,
+                zIndex: 2000,
                 position: "absolute",
                 // overflow: "auto",
                 top: "100px",
@@ -98,22 +101,39 @@ const SettingsModal = React.createClass({
         );
         this.props.hideSettings();
     },
-    render() {
-        const general = (<General
+    renderGeneral() {
+        return (<General
             updateSettings={this.updateParams}
             element={this.props.element}
             groups={this.props.groups}
             key="general"
             on/>);
-        const display = (<Display
-            opacityText={this.props.opacityText}
-            element={this.props.element}
-            settings={this.props.settings}
-            onChange={(key, value) => this.updateParams({[key]: value}, this.props.realtimeUpdate)} />);
+    },
+    renderDisplay() {
+        return (<Display
+           opacityText={this.props.opacityText}
+           element={this.props.element}
+           settings={this.props.settings}
+           onChange={(key, value) => this.updateParams({[key]: value}, this.props.realtimeUpdate)} />);
+    },
+    renderStyleTab() {
+        if (this.props.element.type === "wms") {
+            return (<WMSStyle
+                    retrieveLayerData={this.props.retrieveLayerData}
+                    updateSettings={this.updateParams}
+                    element={this.props.element}
+                    key="style"
+                    o/>);
+        }
+    },
+    render() {
+        const general = this.renderGeneral();
+        const display = this.renderDisplay();
+        const style = this.renderStyleTab();
         const tabs = (<Tabs defaultActiveKey={1} id="layerProperties-tabs">
             <Tab eventKey={1} title={<Message msgId="layerProperties.general" />}>{general}</Tab>
             <Tab eventKey={2} title={<Message msgId="layerProperties.display" />}>{display}</Tab>
-            <Tab eventKey={3} title={<Message msgId="layerProperties.style" />} disabled>Tab 3 content</Tab>
+            <Tab eventKey={3} title={<Message msgId="layerProperties.style" />} disabled={!style} >{style}</Tab>
           </Tabs>);
         const footer = (<span role="footer">
             {this.props.includeCloseButton ? <Button bsSize={this.props.buttonSize} onClick={this.onClose}>{this.props.closeText}</Button> : <span/>}

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

@@ -0,0 +1,82 @@
+/**
+ * Copyright 2016, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var React = require('react');
+const Message = require('../../../I18N/Message');
+const Select = require('react-select');
+const {Button, Glyphicon, Alert} = require('react-bootstrap');
+
+/**
+ * General Settings form for layer
+ */
+const WMSStyle = React.createClass({
+    propTypes: {
+        retrieveLayerData: React.PropTypes.func,
+        updateSettings: React.PropTypes.func,
+        element: React.PropTypes.object,
+        groups: React.PropTypes.array
+    },
+    getDefaultProps() {
+        return {
+            element: {},
+            retrieveLayerData: () => {},
+            updateSettings: () => {}
+        };
+    },
+    renderLegend() {
+        // legend can not added because of this issue
+        // https://github.com/highsource/ogc-schemas/issues/183
+        return null;
+    },
+    renderError() {
+        if (this.props.element && this.props.element.capabilities && this.props.element && this.props.element.capabilities.error) {
+            return <Alert bsStyle="danger"><Message msgId="layerProperties.styleListLoadError" /></Alert>;
+        }
+    },
+    render() {
+        let options = [{label: "Default Style", value: ""}].concat((this.props.element.availableStyles || []).map((item) => {
+            return {label: item.title || item.name, value: item.name};
+        }));
+        let currentStyleIndex = this.props.element.style && this.props.element.availableStyles && this.props.element.availableStyles.findIndex( el => el.name === this.props.element.style);
+        if (!(currentStyleIndex >= 0) && this.props.element.style) {
+            options.push({label: this.props.element.style, value: this.props.element.style });
+        }
+        return (<form ref="style">
+            <Select.Creatable
+                    key="styles-dropdown"
+                    options={options}
+                    isLoading={this.props.element && this.props.element.capabilitiesLoading}
+                    value={this.props.element.style || ""}
+                    onOpen={() => {
+                        // automatic retrieve if availableStyles are not available or capabilities is not present
+                        // that means you don't have a list and you didn't try to load it.
+                        if (this.props.element && !(this.props.element.capabilities && this.props.element.availableStyles)) {
+                            this.props.retrieveLayerData(this.props.element);
+                        }
+                    }}
+                    promptTextCreator={(value) => {
+                        return <Message msgId="layerProperties.styleCustom" msgParams={{value}} />;
+                    }}
+                    onChange={(selected) => {
+                        this.updateEntry("style", {target: {value: (selected && selected.value) || ""}});
+                    }}
+                    />
+                <br />
+                {this.renderLegend()}
+                {this.renderError()}
+                <Button bsStyle="primary" style={{"float": "right"}} onClick={() => this.props.retrieveLayerData(this.props.element)}><Glyphicon glyph="refresh" /><Message msgId="layerProperties.stylesRefreshList" /></Button>
+                <br />
+            </form>);
+    },
+    updateEntry(key, event) {
+        let value = event.target.value;
+        this.props.updateSettings({[key]: value});
+    }
+});
+
+module.exports = WMSStyle;