From f9bea27384f8004f4cd89633d94e7c5a8b636448 Mon Sep 17 00:00:00 2001
From: Lorenzo Natali <lorenzo.natali@geo-solutions.it>
Date: Thu, 3 Nov 2016 11:30:33 +0100
Subject: [PATCH 1/4] Fix #1194. First commits

---
 web/client/actions/catalog.js                 |  1 -
 web/client/actions/layers.js                  | 13 +++--
 web/client/api/WMS.js                         |  1 -
 web/client/components/TOC/DefaultLayer.jsx    |  3 ++
 .../TOC/fragments/SettingsModal.jsx           | 36 ++++++++++---
 .../TOC/fragments/settings/WMSStyle.jsx       | 54 +++++++++++++++++++
 web/client/components/catalog/RecordItem.jsx  |  2 +
 web/client/plugins/TOC.jsx                    |  6 ++-
 8 files changed, 100 insertions(+), 16 deletions(-)
 create mode 100644 web/client/components/TOC/fragments/settings/WMSStyle.jsx

diff --git a/web/client/actions/catalog.js b/web/client/actions/catalog.js
index 0f9c96f602..ce7a49045d 100644
--- a/web/client/actions/catalog.js
+++ b/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,
diff --git a/web/client/actions/layers.js b/web/client/actions/layers.js
index 4e1dedeea1..d8d497866e 100644
--- a/web/client/actions/layers.js
+++ b/web/client/actions/layers.js
@@ -185,7 +185,7 @@ 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) {
@@ -193,7 +193,6 @@ function getLayerCapabilities(layer, options) {
         if (layerParts.length === 2) {
             reqUrl = urlParts[0] + "/geoserver/" + layerParts [0] + "/" + layerParts[1] + "/" + urlParts[1];
         }
-
     }
     return (dispatch) => {
         // TODO, look ad current cached capabilities;
@@ -202,9 +201,9 @@ function getLayerCapabilities(layer, options) {
             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;
@@ -212,7 +211,11 @@ function getLayerCapabilities(layer, options) {
                 return layer.name === capability.name;
             }));
             if (layerCapability) {
-                dispatch(updateNode(layer.id, "id", {capabilities: layerCapability, boundingBox: layerCapability.latLonBoundingBox}));
+                dispatch(updateNode(layer.id, "id", {
+                    capabilities: layerCapability,
+                    boundingBox: layerCapability.latLonBoundingBox,
+                    availableStyles: Array.isArray(layerCapability.style) ? layerCapability.style : [layerCapability.style]
+                }));
             }
             // return dispatch(updateNode(layer.id, "id", {capabilities: capabilities || {"error": "no describe Layer found"}}));
 
diff --git a/web/client/api/WMS.js b/web/client/api/WMS.js
index 49cf4b032f..095fb91c93 100644
--- a/web/client/api/WMS.js
+++ b/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;
-
                 }));
             });
         });
diff --git a/web/client/components/TOC/DefaultLayer.jsx b/web/client/components/TOC/DefaultLayer.jsx
index c9b3d8559e..25767f74af 100644
--- a/web/client/components/TOC/DefaultLayer.jsx
+++ b/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}
diff --git a/web/client/components/TOC/fragments/SettingsModal.jsx b/web/client/components/TOC/fragments/SettingsModal.jsx
index e74da2f912..9f2ed17440 100644
--- a/web/client/components/TOC/fragments/SettingsModal.jsx
+++ b/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,6 +56,7 @@ const SettingsModal = React.createClass({
             hideSettings: () => {},
             updateNode: () => {},
             removeNode: () => {},
+            retrieveLayerData: () => {},
             asModal: true,
             buttonSize: "large",
             closeGlyph: "",
@@ -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/>}
diff --git a/web/client/components/TOC/fragments/settings/WMSStyle.jsx b/web/client/components/TOC/fragments/settings/WMSStyle.jsx
new file mode 100644
index 0000000000..e404d5f60b
--- /dev/null
+++ b/web/client/components/TOC/fragments/settings/WMSStyle.jsx
@@ -0,0 +1,54 @@
+/**
+ * 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} = 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: () => {}
+        };
+    },
+    render() {
+        return (<form ref="style">
+            <Select
+                    key="styles-dropdown"
+                    options={[{label: "Default Style", value: ""}].concat((this.props.element.availableStyles && this.props.element.availableStyles || []).map((item) => {
+                        return {label: item.title || item.name, value: item.name};
+                    }))}
+                    value={this.props.element.style || ""}
+                    onChange={(selected) => {
+                        this.updateEntry("style", {target: {value: selected.value || ""}});
+                    }}
+                    />
+                <br />
+                <Button bsStyle="primary" style={{"float": "right"}} onClick={() => this.props.retrieveLayerData(this.props.element)}><Glyphicon glyph="refresh" />Refresh Styles List</Button>
+                <br />
+            </form>);
+    },
+    updateEntry(key, event) {
+        let value = event.target.value;
+        this.props.updateSettings({[key]: value});
+    }
+});
+
+module.exports = WMSStyle;
diff --git a/web/client/components/catalog/RecordItem.jsx b/web/client/components/catalog/RecordItem.jsx
index e4b2e1f31d..0431f6c149 100644
--- a/web/client/components/catalog/RecordItem.jsx
+++ b/web/client/components/catalog/RecordItem.jsx
@@ -83,12 +83,14 @@ const RecordItem = React.createClass({
         let links = [];
         if (wmsGetCap) {
             links.push({
+                type: "WMS_GET_CAPABILITIES",
                 url: wmsGetCap.url,
                 labelId: 'catalog.wmsGetCapLink'
             });
         }
         if (wfsGetCap) {
             links.push({
+                type: "WFS_GET_CAPABILITIES",
                 url: wfsGetCap.url,
                 labelId: 'catalog.wfsGetCapLink'
             });
diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx
index 69f376dfa8..d6314b6dae 100644
--- a/web/client/plugins/TOC.jsx
+++ b/web/client/plugins/TOC.jsx
@@ -9,7 +9,7 @@ const React = require('react');
 const {connect} = require('react-redux');
 const {createSelector} = require('reselect');
 const {changeLayerProperties, changeGroupProperties, toggleNode,
-       sortNode, showSettings, hideSettings, updateSettings, updateNode, removeNode} = require('../actions/layers');
+       sortNode, showSettings, hideSettings, updateSettings, updateNode, removeNode, getLayerCapabilities} = require('../actions/layers');
 const {zoomToExtent} = require('../actions/map');
 
 const {groupsSelector} = require('../selectors/layers');
@@ -49,6 +49,7 @@ const LayerTree = React.createClass({
         onToggleGroup: React.PropTypes.func,
         onToggleLayer: React.PropTypes.func,
         onZoomToExtent: React.PropTypes.func,
+        retrieveLayerData: React.PropTypes.func,
         onSort: React.PropTypes.func,
         onSettings: React.PropTypes.func,
         hideSettings: React.PropTypes.func,
@@ -66,6 +67,7 @@ const LayerTree = React.createClass({
         return {
             groupPropertiesChangeHandler: () => {},
             layerPropertiesChangeHandler: () => {},
+            retrieveLayerData: () => {},
             onToggleGroup: () => {},
             onToggleLayer: () => {},
             onZoomToExtent: () => {},
@@ -115,6 +117,7 @@ const LayerTree = React.createClass({
                             activateLegendTool={this.props.activateLegendTool}
                             activateZoomTool={this.props.activateZoomTool}
                             activateSettingsTool={this.props.activateSettingsTool}
+                            retrieveLayerData={this.props.retrieveLayerData}
                             settingsText={<Message msgId="layerProperties.windowTitle"/>}
                             opacityText={<Message msgId="opacity"/>}
                             saveText={<Message msgId="save"/>}
@@ -130,6 +133,7 @@ const LayerTree = React.createClass({
 const TOCPlugin = connect(tocSelector, {
     groupPropertiesChangeHandler: changeGroupProperties,
     layerPropertiesChangeHandler: changeLayerProperties,
+    retrieveLayerData: getLayerCapabilities,
     onToggleGroup: LayersUtils.toggleByType('groups', toggleNode),
     onToggleLayer: LayersUtils.toggleByType('layers', toggleNode),
     onSort: LayersUtils.sortUsing(LayersUtils.sortLayers, sortNode),

From 4a0c19f0061177f8369f2289091b948d62860474 Mon Sep 17 00:00:00 2001
From: Lorenzo Natali <lorenzo.natali@geo-solutions.it>
Date: Fri, 4 Nov 2016 11:49:31 +0100
Subject: [PATCH 2/4] add error handling and legend

---
 web/client/actions/layers.js                  |  2 +-
 .../TOC/fragments/SettingsModal.jsx           |  2 +-
 .../TOC/fragments/settings/WMSStyle.jsx       | 21 +++++++++++++++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/client/actions/layers.js b/web/client/actions/layers.js
index d8d497866e..36e6d1f98f 100644
--- a/web/client/actions/layers.js
+++ b/web/client/actions/layers.js
@@ -214,7 +214,7 @@ function getLayerCapabilities(layer, options) {
                 dispatch(updateNode(layer.id, "id", {
                     capabilities: layerCapability,
                     boundingBox: layerCapability.latLonBoundingBox,
-                    availableStyles: Array.isArray(layerCapability.style) ? layerCapability.style : [layerCapability.style]
+                    availableStyles: layerCapability.style && (Array.isArray(layerCapability.style) ? layerCapability.style : [layerCapability.style])
                 }));
             }
             // return dispatch(updateNode(layer.id, "id", {capabilities: capabilities || {"error": "no describe Layer found"}}));
diff --git a/web/client/components/TOC/fragments/SettingsModal.jsx b/web/client/components/TOC/fragments/SettingsModal.jsx
index e6708350f2..28c80fdd3f 100644
--- a/web/client/components/TOC/fragments/SettingsModal.jsx
+++ b/web/client/components/TOC/fragments/SettingsModal.jsx
@@ -62,7 +62,7 @@ const SettingsModal = React.createClass({
             closeGlyph: "",
             panelStyle: {
                 minWidth: "300px",
-                zIndex: 100,
+                zIndex: 2000,
                 position: "absolute",
                 // overflow: "auto",
                 top: "100px",
diff --git a/web/client/components/TOC/fragments/settings/WMSStyle.jsx b/web/client/components/TOC/fragments/settings/WMSStyle.jsx
index e404d5f60b..146a1ae574 100644
--- a/web/client/components/TOC/fragments/settings/WMSStyle.jsx
+++ b/web/client/components/TOC/fragments/settings/WMSStyle.jsx
@@ -9,7 +9,7 @@
 var React = require('react');
 // const Message = require('../../../I18N/Message');
 const Select = require('react-select');
-const {Button, Glyphicon} = require('react-bootstrap');
+const {Button, Glyphicon, Alert} = require('react-bootstrap');
 
 /**
  * General Settings form for layer
@@ -28,19 +28,36 @@ const WMSStyle = React.createClass({
             updateSettings: () => {}
         };
     },
+    renderLegend() {
+        if (this.props.element && this.props.element.availableStyles) {
+            let i = this.props.element.availableStyles.findIndex((item) => item.name === this.props.element.style);
+            if (i >= 0) {
+                let style = this.props.element.availableStyles[i];
+                let legendUrl = style.legendURL && style.legendURL[0];
+            }
+        }
+    },
+    renderError() {
+        if (this.props.element && this.props.element.capabilities && this.props.element && this.props.element.capabilities.error) {
+            return <Alert bsStyle="danger">There was an error getting layer's style list</Alert>;
+        }
+    },
     render() {
         return (<form ref="style">
             <Select
+                    allowCreate={true}
                     key="styles-dropdown"
                     options={[{label: "Default Style", value: ""}].concat((this.props.element.availableStyles && this.props.element.availableStyles || []).map((item) => {
                         return {label: item.title || item.name, value: item.name};
                     }))}
                     value={this.props.element.style || ""}
                     onChange={(selected) => {
-                        this.updateEntry("style", {target: {value: selected.value || ""}});
+                        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" />Refresh Styles List</Button>
                 <br />
             </form>);

From 334bc3068f0a20c701638a7b7f4c9817797ae5b3 Mon Sep 17 00:00:00 2001
From: Lorenzo Natali <lorenzo.natali@geo-solutions.it>
Date: Fri, 4 Nov 2016 17:40:47 +0100
Subject: [PATCH 3/4] Add manual edit style. Add translations and tests

---
 package.json                                  |   2 +-
 web/client/actions/__tests__/layers-test.js   |  24 ++-
 web/client/actions/layers.js                  |   6 +-
 .../TOC/fragments/settings/WMSStyle.jsx       |  39 +++--
 .../settings/__tests__/WMSStyle-test.jsx      | 122 +++++++++++++
 web/client/plugins/Save.jsx                   |   3 +
 web/client/plugins/SaveAs.jsx                 |   3 +
 .../geoserver/testworkspace/testlayer/wms     | 165 ++++++++++++++++++
 web/client/translations/data.de-DE            |   3 +
 web/client/translations/data.en-US            |   3 +
 web/client/translations/data.fr-FR            |   3 +
 web/client/translations/data.it-IT            |   3 +
 12 files changed, 359 insertions(+), 17 deletions(-)
 create mode 100644 web/client/components/TOC/fragments/settings/__tests__/WMSStyle-test.jsx
 create mode 100644 web/client/test-resources/geoserver/testworkspace/testlayer/wms

diff --git a/package.json b/package.json
index 224ddd0f79..84b44f4b9d 100644
--- a/package.json
+++ b/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",
diff --git a/web/client/actions/__tests__/layers-test.js b/web/client/actions/__tests__/layers-test.js
index 937d5f4d8f..3fc4c94c24 100644
--- a/web/client/actions/__tests__/layers-test.js
+++ b/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();
+            }
+        });
+    });
 });
diff --git a/web/client/actions/layers.js b/web/client/actions/layers.js
index 36e6d1f98f..7f6358e381 100644
--- a/web/client/actions/layers.js
+++ b/web/client/actions/layers.js
@@ -196,6 +196,9 @@ function getLayerCapabilities(layer, options) {
     }
     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;
@@ -213,6 +216,7 @@ function getLayerCapabilities(layer, options) {
             if (layerCapability) {
                 dispatch(updateNode(layer.id, "id", {
                     capabilities: layerCapability,
+                    capabilitiesLoading: null,
                     boundingBox: layerCapability.latLonBoundingBox,
                     availableStyles: layerCapability.style && (Array.isArray(layerCapability.style) ? layerCapability.style : [layerCapability.style])
                 }));
@@ -220,7 +224,7 @@ function getLayerCapabilities(layer, options) {
             // 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"}}));
 
diff --git a/web/client/components/TOC/fragments/settings/WMSStyle.jsx b/web/client/components/TOC/fragments/settings/WMSStyle.jsx
index 146a1ae574..e2543d60e4 100644
--- a/web/client/components/TOC/fragments/settings/WMSStyle.jsx
+++ b/web/client/components/TOC/fragments/settings/WMSStyle.jsx
@@ -7,7 +7,7 @@
  */
 
 var React = require('react');
-// const Message = require('../../../I18N/Message');
+const Message = require('../../../I18N/Message');
 const Select = require('react-select');
 const {Button, Glyphicon, Alert} = require('react-bootstrap');
 
@@ -29,28 +29,39 @@ const WMSStyle = React.createClass({
         };
     },
     renderLegend() {
-        if (this.props.element && this.props.element.availableStyles) {
-            let i = this.props.element.availableStyles.findIndex((item) => item.name === this.props.element.style);
-            if (i >= 0) {
-                let style = this.props.element.availableStyles[i];
-                let legendUrl = style.legendURL && style.legendURL[0];
-            }
-        }
+        // 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">There was an error getting layer's style list</Alert>;
+            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
-                    allowCreate={true}
+            <Select.Creatable
                     key="styles-dropdown"
-                    options={[{label: "Default Style", value: ""}].concat((this.props.element.availableStyles && this.props.element.availableStyles || []).map((item) => {
-                        return {label: item.title || item.name, value: item.name};
-                    }))}
+                    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) || ""}});
                     }}
diff --git a/web/client/components/TOC/fragments/settings/__tests__/WMSStyle-test.jsx b/web/client/components/TOC/fragments/settings/__tests__/WMSStyle-test.jsx
new file mode 100644
index 0000000000..907e066abd
--- /dev/null
+++ b/web/client/components/TOC/fragments/settings/__tests__/WMSStyle-test.jsx
@@ -0,0 +1,122 @@
+/**
+ * Copyright 2015, 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/addons');
+var ReactDOM = require('react-dom');
+var ReactTestUtils = require('react-addons-test-utils');
+var WMSStyle = require('../WMSStyle');
+
+var expect = require('expect');
+
+describe('test  Layer Properties General module component', () => {
+    beforeEach((done) => {
+        document.body.innerHTML = '<div id="container"></div>';
+        setTimeout(done);
+    });
+
+    afterEach((done) => {
+        ReactDOM.unmountComponentAtNode(document.getElementById("container"));
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+
+    it('tests component rendering', () => {
+        const l = {
+            name: 'testworkspace:testlayer',
+            title: 'Layer',
+            visibility: true,
+            storeIndex: 9,
+            type: 'shapefile',
+            url: 'base/web/client/test-resources/geoserver/wms'
+        };
+        const settings = {
+            options: {opacity: 1}
+        };
+
+        const comp = ReactDOM.render(<WMSStyle element={l} settings={settings} />, document.getElementById("container"));
+        expect(comp).toExist();
+        const form = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "form" );
+        expect(form).toExist();
+
+    });
+    it('tests component events', () => {
+        const l = {
+            name: 'testworkspace:testlayer',
+            title: 'Layer',
+            visibility: true,
+            storeIndex: 9,
+            type: 'wms',
+            url: 'base/web/client/test-resources/geoserver/wms',
+            availableStyles: [{name: 'style1'}]
+
+        };
+        const settings = {
+            options: {opacity: 1}
+        };
+        const handlers = {
+            retrieveLayerData: () => {},
+            updateSettings: () => {}
+        };
+        let spyRetrive = expect.spyOn(handlers, "retrieveLayerData");
+        let spyUpdate = expect.spyOn(handlers, "updateSettings");
+
+        const comp = ReactDOM.render(<WMSStyle element={l} settings={settings} retrieveLayerData={handlers.retrieveLayerData} updateSettings={handlers.updateSettings}/>, document.getElementById("container"));
+        expect(comp).toExist();
+        // refresh layers list button click
+        const buttons = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "button" );
+        expect(buttons).toExist();
+        expect(buttons.length).toBe(1);
+        ReactTestUtils.Simulate.click(buttons[0]);
+        expect(spyRetrive.calls.length).toBe(1);
+
+        // Simpulate selection
+        const selectArrow = ReactDOM.findDOMNode(comp).querySelector('.Select-arrow');
+        const selectControl = ReactDOM.findDOMNode(comp).querySelector('.Select-control');
+        const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" );
+        ReactTestUtils.Simulate.mouseDown(selectArrow, { button: 0 });
+        ReactTestUtils.Simulate.keyDown(selectControl, { keyCode: 40, key: 'ArrowDown' });
+        ReactTestUtils.Simulate.keyDown(inputs[0], { keyCode: 13, key: 'Enter' });
+        expect(spyUpdate.calls.length).toBe(1);
+
+        // click on arrow of the select auto try to retrieve data if not present
+        const l2 = {
+            name: 'testworkspace:testlayer',
+            title: 'Layer',
+            visibility: true,
+            storeIndex: 9,
+            type: 'wms',
+            url: 'base/web/client/test-resources/geoserver/wms'
+        };
+        const comp1 = ReactDOM.render(<WMSStyle element={l2} settings={settings} retrieveLayerData={handlers.retrieveLayerData} updateSettings={handlers.updateSettings}/>, document.getElementById("container"));
+        const selectArrow1 = ReactDOM.findDOMNode(comp1).querySelector('.Select-arrow');
+        ReactTestUtils.Simulate.click(selectArrow1);
+        expect(spyRetrive.calls.length).toBe(2);
+    });
+    it('tests rendering error', () => {
+        const l = {
+            name: 'testworkspace:testlayer',
+            title: 'Layer',
+            visibility: true,
+            storeIndex: 9,
+            type: 'shapefile',
+            url: 'base/web/client/test-resources/geoserver/wms',
+            capabilities: {
+                error: "unable to retrieve capabiltiies"
+            }
+        };
+        const settings = {
+            options: {opacity: 1}
+        };
+        const comp = ReactDOM.render(<WMSStyle element={l} settings={settings} />, document.getElementById("container"));
+        expect(comp).toExist();
+        const form = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "form" );
+        expect(form).toExist();
+
+    });
+
+});
diff --git a/web/client/plugins/Save.jsx b/web/client/plugins/Save.jsx
index 26cd5b3145..809db226b8 100644
--- a/web/client/plugins/Save.jsx
+++ b/web/client/plugins/Save.jsx
@@ -92,6 +92,9 @@ const Save = React.createClass({
                         opacity: layer.opacity,
                         provider: layer.provider,
                         styles: layer.styles,
+                        style: layer.style,
+                        availableStyles: layer.availableStyles,
+                        capabilitiesURL: layer.capabilitiesURL,
                         title: layer.title,
                         transparent: layer.transparent,
                         type: layer.type,
diff --git a/web/client/plugins/SaveAs.jsx b/web/client/plugins/SaveAs.jsx
index 56873414ee..d908c4c4c6 100644
--- a/web/client/plugins/SaveAs.jsx
+++ b/web/client/plugins/SaveAs.jsx
@@ -124,6 +124,9 @@ const SaveAs = React.createClass({
                 opacity: layer.opacity,
                 provider: layer.provider,
                 styles: layer.styles,
+                style: layer.style,
+                availableStyles: layer.availableStyles,
+                capabilitiesURL: layer.capabilitiesURL,
                 title: layer.title,
                 transparent: layer.transparent,
                 type: layer.type,
diff --git a/web/client/test-resources/geoserver/testworkspace/testlayer/wms b/web/client/test-resources/geoserver/testworkspace/testlayer/wms
new file mode 100644
index 0000000000..8dd5389112
--- /dev/null
+++ b/web/client/test-resources/geoserver/testworkspace/testlayer/wms
@@ -0,0 +1,165 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE WMT_MS_Capabilities SYSTEM "https://test/geoserver/schemas/wms/1.1.1/WMS_MS_Capabilities.dtd?authkey=260a670e-4dc0-4719-8bc9-85555d7dcbe1">
+<WMT_MS_Capabilities version="1.1.1" updateSequence="2538">
+  <Service>
+    <Name>OGC:WMS</Name>
+    <Title>GeoServer Web Map Service</Title>
+    <Abstract>A compliant implementation of WMS plus most of the SLD extension (dynamic styling). Can also generate PDF, SVG, KML, GeoRSS</Abstract>
+    <KeywordList>
+      <Keyword>WFS</Keyword>
+      <Keyword>WMS</Keyword>
+      <Keyword>GEOSERVER</Keyword>
+    </KeywordList>
+    <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="http://geoserver.sourceforge.net/html/index.php"/>
+    <ContactInformation>
+      <ContactPersonPrimary>
+        <ContactPerson>Claudius Ptolomaeus</ContactPerson>
+        <ContactOrganization>The ancient geographes INC</ContactOrganization>
+      </ContactPersonPrimary>
+      <ContactPosition>Chief geographer</ContactPosition>
+      <ContactAddress>
+        <AddressType>Work</AddressType>
+        <Address/>
+        <City>Alexandria</City>
+        <StateOrProvince/>
+        <PostCode/>
+        <Country>Egypt</Country>
+      </ContactAddress>
+      <ContactVoiceTelephone/>
+      <ContactFacsimileTelephone/>
+      <ContactElectronicMailAddress>claudius.ptolomaeus@gmail.com</ContactElectronicMailAddress>
+    </ContactInformation>
+    <Fees>NONE</Fees>
+    <AccessConstraints>NONE</AccessConstraints>
+  </Service>
+  <Capability>
+    <Request>
+      <GetCapabilities>
+        <Format>application/vnd.ogc.wms_xml</Format>
+        <DCPType>
+          <HTTP>
+            <Get>
+              <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="base/web/client/test-resources/geoserver/testworkspace/testlayer/wms"/>
+            </Get>
+            <Post>
+              <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="base/web/client/test-resources/geoserver/testworkspace/testlayer/wms"/>
+            </Post>
+          </HTTP>
+        </DCPType>
+      </GetCapabilities>
+      <GetMap>
+        <Format>image/png</Format>
+        <Format>application/openlayers</Format>
+        <Format>image/jpeg</Format>
+        <Format>image/png8</Format>
+        <Format>image/png; mode=8bit</Format>
+        <Format>openlayers</Format>
+        <Format>text/html; subtype=openlayers</Format>
+        <DCPType>
+          <HTTP>
+            <Get>
+              <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="base/web/client/test-resources/geoserver/testworkspace/testlayer/wms"/>
+            </Get>
+          </HTTP>
+        </DCPType>
+      </GetMap>
+      <GetFeatureInfo>
+        <Format>text/plain</Format>
+        <Format>application/vnd.ogc.gml</Format>
+        <Format>text/xml</Format>
+        <Format>application/vnd.ogc.gml/3.1.1</Format>
+        <Format>text/xml; subtype=gml/3.1.1</Format>
+        <Format>text/html</Format>
+        <Format>application/json</Format>
+        <DCPType>
+          <HTTP>
+            <Get>
+              <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="base/web/client/test-resources/geoserver/testworkspace/testlayer/wms?SERVICE=WMS&amp;authkey=260a670e-4dc0-4719-8bc9-85555d7dcbe1&amp;"/>
+            </Get>
+            <Post>
+              <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="base/web/client/test-resources/geoserver/testworkspace/testlayer/wms?SERVICE=WMS&amp;authkey=260a670e-4dc0-4719-8bc9-85555d7dcbe1&amp;"/>
+            </Post>
+          </HTTP>
+        </DCPType>
+      </GetFeatureInfo>
+      <DescribeLayer>
+        <Format>application/vnd.ogc.wms_xml</Format>
+        <DCPType>
+          <HTTP>
+            <Get>
+              <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="base/web/client/test-resources/geoserver/testworkspace/testlayer/wms?SERVICE=WMS&amp;authkey=260a670e-4dc0-4719-8bc9-85555d7dcbe1&amp;"/>
+            </Get>
+          </HTTP>
+        </DCPType>
+      </DescribeLayer>
+      <GetLegendGraphic>
+        <Format>image/png</Format>
+        <Format>image/jpeg</Format>
+        <Format>image/gif</Format>
+        <DCPType>
+          <HTTP>
+            <Get>
+              <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="base/web/client/test-resources/geoserver/testworkspace/testlayer/wms?SERVICE=WMS&amp;authkey=260a670e-4dc0-4719-8bc9-85555d7dcbe1&amp;"/>
+            </Get>
+          </HTTP>
+        </DCPType>
+      </GetLegendGraphic>
+      <GetStyles>
+        <Format>application/vnd.ogc.sld+xml</Format>
+        <DCPType>
+          <HTTP>
+            <Get>
+              <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="base/web/client/test-resources/geoserver/testworkspace/testlayer/wms?SERVICE=WMS&amp;authkey=260a670e-4dc0-4719-8bc9-85555d7dcbe1&amp;"/>
+            </Get>
+          </HTTP>
+        </DCPType>
+      </GetStyles>
+    </Request>
+    <Exception>
+      <Format>application/vnd.ogc.se_xml</Format>
+      <Format>application/vnd.ogc.se_inimage</Format>
+      <Format>application/vnd.ogc.se_blank</Format>
+      <Format>application/json</Format>
+    </Exception>
+    <UserDefinedSymbolization SupportSLD="1" UserLayer="1" UserStyle="1" RemoteWFS="1"/>
+    <Layer>
+      <Title>GeoServer Web Map Service</Title>
+      <Abstract>A compliant implementation of WMS plus most of the SLD extension (dynamic styling). Can also generate PDF, SVG, KML, GeoRSS</Abstract>
+      <!--Limited list of EPSG projections:-->
+      <SRS>EPSG:3857</SRS>
+      <SRS>EPSG:4326</SRS>
+      <SRS>EPSG:900913</SRS>
+      <LatLonBoundingBox minx="-169.785705566406" miny="-27.1886425018311" maxx="163.041122436523" maxy="74.9355163574219"/>
+      <Layer queryable="1" opaque="0">
+        <Name>testlayer</Name>
+        <Title>Test Layer</Title>
+        <Abstract/>
+        <KeywordList>
+          <Keyword>testlayer</Keyword>
+          <Keyword>features</Keyword>
+        </KeywordList>
+        <SRS>EPSG:4326</SRS>
+        <LatLonBoundingBox minx="-169.785705566406" miny="-27.1886425018311" maxx="163.041122436523" maxy="74.9355163574219"/>
+        <BoundingBox SRS="EPSG:4326" minx="-169.785705566406" miny="-27.1886425018311" maxx="163.041122436523" maxy="74.9355163574219"/>
+        <Style>
+          <Name>style1</Name>
+          <Title>style 1</Title>
+          <Abstract>style1</Abstract>
+          <LegendURL width="169" height="140">
+            <Format>image/png</Format>
+            <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="base/web/client/test-resources/geoserver/testworkspace/testlayer/TODO_GET_LEGEND_GRAPHIC"/>
+          </LegendURL>
+        </Style>
+        <Style>
+          <Name>style2</Name>
+          <Title>style 2</Title>
+          <Abstract>style 2</Abstract>
+          <LegendURL width="169" height="140">
+            <Format>image/png</Format>
+            <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="base/web/client/test-resources/geoserver/testworkspace/testlayer/TODO_GET_LEGEND_GRAPHIC"/>
+          </LegendURL>
+        </Style>
+      </Layer>
+    </Layer>
+  </Capability>
+</WMT_MS_Capabilities>
diff --git a/web/client/translations/data.de-DE b/web/client/translations/data.de-DE
index c9250b0ca5..49986958a3 100644
--- a/web/client/translations/data.de-DE
+++ b/web/client/translations/data.de-DE
@@ -28,6 +28,9 @@
             "general": "General",
             "display": "Display",
             "style": "Style",
+            "styleCustom": "Use style named \"{value}\"",
+            "styleListLoadError": "There was an error loading the styles list",
+            "stylesRefreshList": "Refresh Styles List",
             "format": "Format",
             "delete": "Delete",
             "deleteLayer":"Delete Layer",
diff --git a/web/client/translations/data.en-US b/web/client/translations/data.en-US
index c9250b0ca5..49986958a3 100644
--- a/web/client/translations/data.en-US
+++ b/web/client/translations/data.en-US
@@ -28,6 +28,9 @@
             "general": "General",
             "display": "Display",
             "style": "Style",
+            "styleCustom": "Use style named \"{value}\"",
+            "styleListLoadError": "There was an error loading the styles list",
+            "stylesRefreshList": "Refresh Styles List",
             "format": "Format",
             "delete": "Delete",
             "deleteLayer":"Delete Layer",
diff --git a/web/client/translations/data.fr-FR b/web/client/translations/data.fr-FR
index adb777a5d3..194a70704d 100644
--- a/web/client/translations/data.fr-FR
+++ b/web/client/translations/data.fr-FR
@@ -28,6 +28,9 @@
             "general": "Général",
             "display": "Affichage",
             "style": "Style",
+            "styleCustom": "Utilisez un style nommé \"{value} \"",
+            "styleListLoadError": "Une erreur s'est produite lors du chargement de la liste de styles",
+            "stylesRefreshList": "Refresh Styles List",
             "format": "Format",
             "delete": "Effacer",
             "deleteLayer":"Supprimer le calque",
diff --git a/web/client/translations/data.it-IT b/web/client/translations/data.it-IT
index cbe5a38d08..fc2eb5d67c 100644
--- a/web/client/translations/data.it-IT
+++ b/web/client/translations/data.it-IT
@@ -28,6 +28,9 @@
             "general": "Generale",
             "display": "Visualizzazione",
             "style": "Stile",
+            "styleCustom": "Usa stile con nome \"{value}\"",
+            "styleListLoadError": "Si è verificato un errore durante il caricamento della lista degli stili",
+            "stylesRefreshList": "Aggiorna lista degli stili",
             "format": "Formato",
             "delete": "Elimina",
             "deleteLayer":"Elimina Livello",

From 466f9116b4e501b6dbd1b01882a428c8094b5f78 Mon Sep 17 00:00:00 2001
From: Lorenzo Natali <lorenzo.natali@geo-solutions.it>
Date: Fri, 4 Nov 2016 17:58:07 +0100
Subject: [PATCH 4/4] fix button translation

---
 web/client/components/TOC/fragments/settings/WMSStyle.jsx | 2 +-
 web/client/translations/data.fr-FR                        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/client/components/TOC/fragments/settings/WMSStyle.jsx b/web/client/components/TOC/fragments/settings/WMSStyle.jsx
index e2543d60e4..37ead5a8ce 100644
--- a/web/client/components/TOC/fragments/settings/WMSStyle.jsx
+++ b/web/client/components/TOC/fragments/settings/WMSStyle.jsx
@@ -69,7 +69,7 @@ const WMSStyle = React.createClass({
                 <br />
                 {this.renderLegend()}
                 {this.renderError()}
-                <Button bsStyle="primary" style={{"float": "right"}} onClick={() => this.props.retrieveLayerData(this.props.element)}><Glyphicon glyph="refresh" />Refresh Styles List</Button>
+                <Button bsStyle="primary" style={{"float": "right"}} onClick={() => this.props.retrieveLayerData(this.props.element)}><Glyphicon glyph="refresh" /><Message msgId="layerProperties.stylesRefreshList" /></Button>
                 <br />
             </form>);
     },
diff --git a/web/client/translations/data.fr-FR b/web/client/translations/data.fr-FR
index 194a70704d..9e38ebcae5 100644
--- a/web/client/translations/data.fr-FR
+++ b/web/client/translations/data.fr-FR
@@ -30,7 +30,7 @@
             "style": "Style",
             "styleCustom": "Utilisez un style nommé \"{value} \"",
             "styleListLoadError": "Une erreur s'est produite lors du chargement de la liste de styles",
-            "stylesRefreshList": "Refresh Styles List",
+            "stylesRefreshList": "Actualiser la liste des styles",
             "format": "Format",
             "delete": "Effacer",
             "deleteLayer":"Supprimer le calque",