Fix #3224 Style Editor Plugin (GeoCSS) (#3273)

* Added additional layers actions, selectors and reducers

* Improved tabs management of TOCItemsSettings and updated settings params function

* Added Style Editor plugin

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

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2018, 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.
+ */
+
+const expect = require('expect');
+
+const {
+    UPDATE_ADDITIONAL_LAYER,
+    REMOVE_ADDITIONAL_LAYER,
+    UPDATE_OPTIONS_BY_OWNER,
+    updateAdditionalLayer,
+    updateOptionsByOwner,
+    removeAdditionalLayer
+} = require('../additionallayers');
+
+describe('Test additional layers actions', () => {
+
+    it('Test updateAdditionalLayer action creator', () => {
+        const id = 'layer_001';
+        const owner = 'owner';
+        const actionType = 'override';
+        const options = {
+            style: 'generic'
+        };
+        const retval = updateAdditionalLayer(id, owner, actionType, options);
+        expect(retval).toExist();
+        expect(retval.id).toBe(id);
+        expect(retval.owner).toBe(owner);
+        expect(retval.actionType).toBe(actionType);
+        expect(retval.options).toBe(options);
+        expect(retval.type).toBe(UPDATE_ADDITIONAL_LAYER);
+    });
+
+    it('Test updateOptionsByOwner action creator', () => {
+        const owner = 'owner';
+        const options = [{ style: 'point' }];
+        const retval = updateOptionsByOwner(owner, options);
+        expect(retval).toExist();
+        expect(retval.owner).toBe(owner);
+        expect(retval.options).toBe(options);
+        expect(retval.type).toBe(UPDATE_OPTIONS_BY_OWNER);
+    });
+
+    it('Test removeAdditionalLayer action creator', () => {
+        const id = 'layer_001';
+        const owner = 'owner';
+        const retval = removeAdditionalLayer({id, owner});
+        expect(retval).toExist();
+        expect(retval.id).toBe(id);
+        expect(retval.owner).toBe(owner);
+        expect(retval.type).toBe(REMOVE_ADDITIONAL_LAYER);
+    });
+});

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

@@ -31,6 +31,7 @@ var {
     FILTER_LAYERS,
     SHOW_LAYER_METADATA,
     HIDE_LAYER_METADATA,
+    UPDATE_SETTINGS_PARAMS,
     changeLayerProperties,
     toggleNode,
     sortNode,
@@ -53,7 +54,8 @@ var {
     selectNode,
     filterLayers,
     showLayerMetadata,
-    hideLayerMetadata
+    hideLayerMetadata,
+    updateSettingsParams
 } = require('../layers');
 var {getLayerCapabilities} = require('../layerCapabilities');
 
@@ -293,4 +295,13 @@ describe('Test correctness of the layers actions', () => {
         const action = hideLayerMetadata();
         expect(action.type).toBe(HIDE_LAYER_METADATA);
     });
+
+    it('update settings params', () => {
+        const newParams = { style: 'new_style' };
+        const update = true;
+        const action = updateSettingsParams(newParams, update);
+        expect(action.type).toBe(UPDATE_SETTINGS_PARAMS);
+        expect(action.newParams).toBe(newParams);
+        expect(action.update).toBe(update);
+    });
 });

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

@@ -0,0 +1,171 @@
+/*
+ * Copyright 2018, 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.
+ */
+
+const expect = require('expect');
+
+const {
+    UPDATE_TEMPORARY_STYLE,
+    UPDATE_STATUS,
+    TOGGLE_STYLE_EDITOR,
+    RESET_STYLE_EDITOR,
+    SELECT_STYLE_TEMPLATE,
+    CREATE_STYLE,
+    LOADING_STYLE,
+    LOADED_STYLE,
+    ADD_STYLE,
+    ERROR_STYLE,
+    UPDATE_STYLE_CODE,
+    EDIT_STYLE_CODE,
+    DELETE_STYLE,
+    INIT_STYLE_SERVICE,
+    SET_EDIT_PERMISSION,
+    updateTemporaryStyle,
+    updateStatus,
+    toggleStyleEditor,
+    resetStyleEditor,
+    selectStyleTemplate,
+    createStyle,
+    loadingStyle,
+    loadedStyle,
+    addStyle,
+    errorStyle,
+    updateStyleCode,
+    editStyleCode,
+    deleteStyle,
+    initStyleService,
+    setEditPermissionStyleEditor
+} = require('../styleeditor');
+
+describe('Test the styleeditor actions', () => {
+
+    it('updateTemporaryStyle', () => {
+        const temporaryId = '3214';
+        const templateId = '4567';
+        const code = '* { stroke: #333333; }';
+        const format = 'css';
+        const init = true;
+        const retval = updateTemporaryStyle({
+            temporaryId,
+            templateId,
+            code,
+            format,
+            init
+        });
+        expect(retval).toExist();
+        expect(retval.type).toBe(UPDATE_TEMPORARY_STYLE);
+        expect(retval.temporaryId).toBe(temporaryId);
+        expect(retval.templateId).toBe(templateId);
+        expect(retval.code).toBe(code);
+        expect(retval.format).toBe(format);
+        expect(retval.init).toBe(init);
+    });
+    it('updateStatus', () => {
+        const status = 'edit';
+        const retval = updateStatus(status);
+        expect(retval).toExist();
+        expect(retval.type).toBe(UPDATE_STATUS);
+        expect(retval.status).toBe(status);
+    });
+    it('toggleStyleEditor', () => {
+        const layer = {id: 'layerId', name: 'layerName'};
+        const enabled = true;
+        const retval = toggleStyleEditor(layer, enabled);
+        expect(retval).toExist();
+        expect(retval.type).toBe(TOGGLE_STYLE_EDITOR);
+        expect(retval.layer).toBe(layer);
+        expect(retval.enabled).toBe(enabled);
+    });
+    it('resetStyleEditor', () => {
+        const retval = resetStyleEditor();
+        expect(retval).toExist();
+        expect(retval.type).toBe(RESET_STYLE_EDITOR);
+    });
+    it('selectStyleTemplate', () => {
+        const templateId = '4567';
+        const code = '* { stroke: #333333; }';
+        const format = 'css';
+        const init = true;
+        const retval = selectStyleTemplate({ code, templateId, format, init });
+        expect(retval).toExist();
+        expect(retval.type).toBe(SELECT_STYLE_TEMPLATE);
+        expect(retval.templateId).toBe(templateId);
+        expect(retval.code).toBe(code);
+        expect(retval.format).toBe(format);
+        expect(retval.init).toBe(init);
+    });
+    it('createStyle', () => {
+        const settings = { title: 'Title', _abstract: ''};
+        const retval = createStyle(settings);
+        expect(retval).toExist();
+        expect(retval.type).toBe(CREATE_STYLE);
+        expect(retval.settings).toBe(settings);
+    });
+    it('loadingStyle', () => {
+        const status = 'edit';
+        const retval = loadingStyle(status);
+        expect(retval).toExist();
+        expect(retval.type).toBe(LOADING_STYLE);
+        expect(retval.status).toBe(status);
+    });
+    it('loadedStyle', () => {
+        const retval = loadedStyle();
+        expect(retval).toExist();
+        expect(retval.type).toBe(LOADED_STYLE);
+    });
+    it('addStyle', () => {
+        const add = true;
+        const retval = addStyle(add);
+        expect(retval).toExist();
+        expect(retval.type).toBe(ADD_STYLE);
+        expect(retval.add).toBe(add);
+    });
+    it('errorStyle', () => {
+        const status = 'edit';
+        const error = { statusText: 'Not found', status: 404 };
+        const retval = errorStyle(status, error);
+        expect(retval).toExist();
+        expect(retval.type).toBe(ERROR_STYLE);
+        expect(retval.status).toBe(status);
+        expect(retval.error).toBe(error);
+    });
+    it('updateStyleCode', () => {
+        const retval = updateStyleCode();
+        expect(retval).toExist();
+        expect(retval.type).toBe(UPDATE_STYLE_CODE);
+    });
+    it('editStyleCode', () => {
+        const code = '* { stroke: #ff0000; }';
+        const retval = editStyleCode(code);
+        expect(retval).toExist();
+        expect(retval.type).toBe(EDIT_STYLE_CODE);
+        expect(retval.code).toBe(code);
+    });
+    it('deleteStyle', () => {
+        const styleName = 'name';
+        const retval = deleteStyle(styleName);
+        expect(retval).toExist();
+        expect(retval.type).toBe(DELETE_STYLE);
+        expect(retval.styleName).toBe(styleName);
+    });
+    it('initStyleService', () => {
+        const service = { baseUrl: '/geoserver/' };
+        const canEdit = true;
+        const retval = initStyleService(service, canEdit);
+        expect(retval).toExist();
+        expect(retval.type).toBe(INIT_STYLE_SERVICE);
+        expect(retval.service).toBe(service);
+        expect(retval.canEdit).toBe(canEdit);
+    });
+    it('setEditPermissionStyleEditor', () => {
+        const canEdit = true;
+        const retval = setEditPermissionStyleEditor(canEdit);
+        expect(retval).toExist();
+        expect(retval.type).toBe(SET_EDIT_PERMISSION);
+        expect(retval.canEdit).toBe(canEdit);
+    });
+});

web/client/actions/additionallayers.js

@@ -0,0 +1,80 @@
+
+/*
+ * Copyright 2018, 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.
+ */
+
+const UPDATE_ADDITIONAL_LAYER = 'ADDITIONALLAYER:UPDATE_ADDITIONAL_LAYER';
+const UPDATE_OPTIONS_BY_OWNER = 'ADDITIONALLAYER:UPDATE_OPTIONS_BY_OWNER';
+const REMOVE_ADDITIONAL_LAYER = 'ADDITIONALLAYER:REMOVE_ADDITIONAL_LAYER';
+
+/**
+ * Add/updated an additional layer to the list.
+ * Additional layer will be update only if id match with an existing one.
+ * @memberof actions.additionallayers
+ * @param {string} id  identifier
+ * @param {string} owner a string that define the plugin is using following layer
+ * @param {string} actionType type of action to perform in the layer selector, currently only `override` is supported
+ * @param {string} options layer properties to apply based on the actionType,
+ *                         eg: in case of actionType = `override` object options will be merged with the layer object with same id
+ * @return {object} of type `UPDATE_ADDITIONAL_LAYER` with id, owner, actionType, settings and options
+ */
+const updateAdditionalLayer = (id, owner, actionType = 'override', options) => {
+    return {
+        type: UPDATE_ADDITIONAL_LAYER,
+        id,
+        owner,
+        actionType,
+        options
+    };
+};
+
+/**
+ * Update options of addibinal layers selected by owner
+ * @memberof actions.additionallayers
+ * @param {string} owner string that define the plugin is using following layers
+ * @param {array|object} options an array of options or an object with key equal to ids, eg: [ {style: 'generic'}, {style: ''} ] | { firstLayerId: {style: 'generic'}, secondLayerId: {style: ''} }
+ * @return {object} of type `UPDATE_OPTIONS_BY_OWNER` with owner and options
+ */
+const updateOptionsByOwner = (owner, options) => {
+    return {
+        type: UPDATE_OPTIONS_BY_OWNER,
+        owner,
+        options
+    };
+};
+
+/**
+ * Remove additional layers by id or owner.
+ * If owner is defined all layers in the same owner group will be deleted.
+ * owner key has priority.
+ * @memberof actions.additionallayers
+ * @param {object} identifier and object with id or owner keys, eg: { id: 'firstLayerId', ower: 'myplugin' }
+ * @return {object} of type `REMOVE_ADDITIONAL_LAYER` id and owner
+ */
+const removeAdditionalLayer = ({id, owner} = {}) => {
+    return {
+        type: REMOVE_ADDITIONAL_LAYER,
+        id,
+        owner
+    };
+};
+
+/**
+ * Actions for additionallayers.
+ * Additional layers will be used to perform override action on the layers without apply new proprties to the original layer object.
+ * It can be used to preview changes of the layers.
+ * @name actions.additionallayers
+ */
+
+module.exports = {
+    UPDATE_ADDITIONAL_LAYER,
+    updateAdditionalLayer,
+    REMOVE_ADDITIONAL_LAYER,
+    removeAdditionalLayer,
+    UPDATE_OPTIONS_BY_OWNER,
+    updateOptionsByOwner
+};

web/client/actions/layerCapabilities.js

@@ -46,6 +46,9 @@ function getDescribeLayer(url, layer, options) {
             }
             return dispatch(updateNode(layer.id, "id", {describeLayer: describeLayer || {"error": "no describe Layer found"}}));
 
+        })
+        .catch((error) => {
+            return dispatch(updateNode(layer.id, "id", {describeLayer: {"error": error.status}}));
         });
     };
 }

web/client/actions/layers.js

@@ -33,6 +33,7 @@ const SELECT_NODE = 'LAYERS:SELECT_NODE';
 const FILTER_LAYERS = 'LAYERS:FILTER_LAYERS';
 const SHOW_LAYER_METADATA = 'LAYERS:SHOW_LAYER_METADATA';
 const HIDE_LAYER_METADATA = 'LAYERS:HIDE_LAYER_METADATA';
+const UPDATE_SETTINGS_PARAMS = 'LAYERS:UPDATE_SETTINGS_PARAMS';
 
 function showSettings(node, nodeType, options) {
     return {
@@ -257,13 +258,21 @@ function hideLayerMetadata() {
     };
 }
 
+function updateSettingsParams(newParams, update) {
+    return {
+        type: UPDATE_SETTINGS_PARAMS,
+        newParams,
+        update
+    };
+}
+
 module.exports = {
     changeLayerProperties, changeLayerParams, changeGroupProperties, toggleNode, sortNode, removeNode, contextNode,
     updateNode, layerLoading, layerLoad, layerError, addLayer, removeLayer, showSettings, hideSettings, updateSettings, refreshLayers,
     layersRefreshed, layersRefreshError, refreshLayerVersion, updateLayerDimension, browseData, clearLayers, selectNode, filterLayers, showLayerMetadata,
-    hideLayerMetadata, download,
+    hideLayerMetadata, download, updateSettingsParams,
     CHANGE_LAYER_PROPERTIES, CHANGE_LAYER_PARAMS, 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, UPDATE_LAYERS_DIMENSION, BROWSE_DATA, DOWNLOAD,
-    CLEAR_LAYERS, SELECT_NODE, FILTER_LAYERS, SHOW_LAYER_METADATA, HIDE_LAYER_METADATA
+    CLEAR_LAYERS, SELECT_NODE, FILTER_LAYERS, SHOW_LAYER_METADATA, HIDE_LAYER_METADATA, UPDATE_SETTINGS_PARAMS
 };