#2215: add group in TOC toolbar (#3797)

* #2215: add group in TOC toolbar * #2215: fixed some tooltips, fixed removing groups on layer removed, fixed problem with dot in group name
geosolutions-it · May 29, 2019 · 50c18da · 50c18da
1 parent 410fb7d
commit 50c18da
Show file tree

Hide file tree

Showing 40 changed files with 757 additions and 81 deletions.
diff --git a/web/client/actions/__tests__/controls-test.js b/web/client/actions/__tests__/controls-test.js
@@ -10,6 +10,7 @@ var expect = require('expect');
 var {
     TOGGLE_CONTROL, toggleControl,
     SET_CONTROL_PROPERTY, setControlProperty,
+    SET_CONTROL_PROPERTIES, setControlProperties,
     RESET_CONTROLS, resetControls,
     on
 } = require('../controls');
@@ -69,4 +70,38 @@ describe('Test correctness of the controls actions', () => {
         expect(retval.property).toBe(testProperty);
         expect(retval.value).toBe(testValue);
     });
+
+    it('setControlProperties', () => {
+        const testControl = 'test';
+        const testProperty1 = 'prop1';
+        const testValue1 = 'val1';
+        const testProperty2 = 'prop2';
+        const testValue2 = 'val2';
+        var retval = setControlProperties(testControl, testProperty1, testValue1, testProperty2, testValue2);
+
+        expect(retval).toExist();
+        expect(retval.type).toBe(SET_CONTROL_PROPERTIES);
+        expect(retval.control).toBe(testControl);
+        expect(retval.properties).toExist();
+        expect(retval.properties[testProperty1]).toBe(testValue1);
+        expect(retval.properties[testProperty2]).toBe(testValue2);
+    });
+
+    it('setControlProperties wrong params ignored', () => {
+        const testControl = 'test';
+        const testProperty1 = 'prop1';
+        const testValue1 = 'val1';
+        const testProperty2 = 'prop2';
+        const testValue2 = 'val2';
+        const testProperty3 = 'prop3';
+        var retval = setControlProperties(testControl, testProperty1, testValue1, testProperty2, testValue2, testProperty3);
+
+        expect(retval).toExist();
+        expect(retval.type).toBe(SET_CONTROL_PROPERTIES);
+        expect(retval.control).toBe(testControl);
+        expect(retval.properties).toExist();
+        expect(retval.properties[testProperty1]).toBe(testValue1);
+        expect(retval.properties[testProperty2]).toBe(testValue2);
+        expect(retval.properties[testProperty3]).toNotExist();
+    });
 });
diff --git a/web/client/actions/__tests__/layers-test.js b/web/client/actions/__tests__/layers-test.js
@@ -32,6 +32,7 @@ var {
     SHOW_LAYER_METADATA,
     HIDE_LAYER_METADATA,
     UPDATE_SETTINGS_PARAMS,
+    ADD_GROUP,
     changeLayerProperties,
     toggleNode,
     sortNode,
@@ -55,7 +56,8 @@ var {
     filterLayers,
     showLayerMetadata,
     hideLayerMetadata,
-    updateSettingsParams
+    updateSettingsParams,
+    addGroup
 } = require('../layers');
 var {getLayerCapabilities} = require('../layerCapabilities');
 
@@ -140,6 +142,17 @@ describe('Test correctness of the layers actions', () => {
         expect(retval.type).toBe(REMOVE_NODE);
         expect(retval.node).toBe('sampleNode');
         expect(retval.nodeType).toBe('sampleType');
+        expect(retval.removeEmpty).toBe(false);
+    });
+
+    it('removeNode with removeEmpty', () => {
+        var retval = removeNode('sampleNode', 'sampleType', true);
+
+        expect(retval).toExist();
+        expect(retval.type).toBe(REMOVE_NODE);
+        expect(retval.node).toBe('sampleNode');
+        expect(retval.nodeType).toBe('sampleType');
+        expect(retval.removeEmpty).toBe(true);
     });
 
     it('updateNode', () => {
@@ -304,4 +317,18 @@ describe('Test correctness of the layers actions', () => {
         expect(action.newParams).toBe(newParams);
         expect(action.update).toBe(update);
     });
+
+    it('add root group', () => {
+        const action = addGroup('newgroup');
+        expect(action.type).toBe(ADD_GROUP);
+        expect(action.group).toBe('newgroup');
+        expect(action.parent).toNotExist();
+    });
+
+    it('add nested group', () => {
+        const action = addGroup('newgroup', 'group1.group2');
+        expect(action.type).toBe(ADD_GROUP);
+        expect(action.group).toBe('newgroup');
+        expect(action.parent).toBe('group1.group2');
+    });
 });
diff --git a/web/client/actions/controls.js b/web/client/actions/controls.js
@@ -7,8 +7,11 @@
  */
 const TOGGLE_CONTROL = 'TOGGLE_CONTROL';
 const SET_CONTROL_PROPERTY = 'SET_CONTROL_PROPERTY';
+const SET_CONTROL_PROPERTIES = 'SET_CONTROL_PROPERTIES';
 const RESET_CONTROLS = 'RESET_CONTROLS';
 
+const { fromPairs, chunk } = require('lodash');
+
 /**
  * Toggle a control property
  * @memberof actions.controls
@@ -52,6 +55,24 @@ function setControlProperty(control, property, value, toggle) {
     };
 }
 
+/**
+ * Sets a list of properties at once
+ * @memberof actions.controls
+ * @param {string} control  control name
+ * @param {array} properties the properties to set, pairs of keys and related values
+ * @return {object} of type `SET_CONTROL_PROPERTIES` with control and properties
+ *
+ * @example
+ * setControlProperties('metadataexplorer', 'enabled', true, 'group', 'newgroup')
+ */
+function setControlProperties(control, ...properties) {
+    return {
+        type: SET_CONTROL_PROPERTIES,
+        control,
+        properties: fromPairs(chunk(properties, 2))
+    };
+}
+
 /**
  * Reset all the controls
  * @memberof actions.controls
@@ -69,5 +90,6 @@ function resetControls(skip = []) {
  * control property.
  * @name actions.controls
  */
-module.exports = {TOGGLE_CONTROL, SET_CONTROL_PROPERTY, RESET_CONTROLS,
-    toggleControl, on, setControlProperty, resetControls};
+module.exports = {
+    TOGGLE_CONTROL, SET_CONTROL_PROPERTY, SET_CONTROL_PROPERTIES, RESET_CONTROLS,
+    toggleControl, on, setControlProperty, setControlProperties, resetControls};
diff --git a/web/client/actions/layers.js b/web/client/actions/layers.js
@@ -18,6 +18,7 @@ const LAYER_LOADING = 'LAYER_LOADING';
 const LAYER_LOAD = 'LAYER_LOAD';
 const LAYER_ERROR = 'LAYER_ERROR';
 const ADD_LAYER = 'ADD_LAYER';
+const ADD_GROUP = 'ADD_GROUP';
 const REMOVE_LAYER = 'REMOVE_LAYER';
 const SHOW_SETTINGS = 'SHOW_SETTINGS';
 const HIDE_SETTINGS = 'HIDE_SETTINGS';
@@ -114,12 +115,12 @@ function sortNode(node, order, sortLayers = null) {
     };
 }
 
-function removeNode(node, type, properties) {
+function removeNode(node, type, removeEmpty = false) {
     return {
         type: REMOVE_NODE,
         node: node,
         nodeType: type,
-        properties
+        removeEmpty
     };
 }
 
@@ -164,6 +165,14 @@ function addLayer(layer, foreground = true) {
     };
 }
 
+function addGroup(group, parent) {
+    return {
+        type: ADD_GROUP,
+        group,
+        parent
+    };
+}
+
 function removeLayer(layerId) {
     return {
         type: REMOVE_LAYER,
@@ -270,9 +279,10 @@ 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, updateSettingsParams,
+    hideLayerMetadata, download, updateSettingsParams, addGroup,
     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,
+    ADD_GROUP,
     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, UPDATE_SETTINGS_PARAMS
 };
diff --git a/web/client/components/TOC/DefaultGroup.jsx b/web/client/components/TOC/DefaultGroup.jsx
@@ -56,6 +56,7 @@ class DefaultGroup extends React.Component {
             (<VisibilityCheck
                 node={this.props.node}
                 key="visibility"
+                tooltip="toc.toggleGroupVisibility"
                 checkType={this.props.visibilityCheckType}
                 propertiesChangeHandler={this.props.propertiesChangeHandler}/>)
             :

diff --git a/web/client/components/TOC/TOCItemsSettings.jsx b/web/client/components/TOC/TOCItemsSettings.jsx
@@ -52,7 +52,8 @@ const TOCItemSettings = (props, context) => {
         dock = true,
         showFullscreen,
         draggable,
-        position = 'left'
+        position = 'left',
+        tabsConfig = {}
     } = props;
 
     const tabs = getTabs(props, context);
@@ -122,6 +123,7 @@ const TOCItemSettings = (props, context) => {
             {tabs.filter(tab => tab.id && tab.id === activeTab).filter(tab => tab.Component).map(tab => (
                 <tab.Component
                     {...props}
+                    {...tabsConfig[tab.id]}
                     key={'ms-tab-settings-body-' + tab.id}
                     containerWidth={width}
                     element={element}

diff --git a/web/client/components/TOC/Toolbar.jsx b/web/client/components/TOC/Toolbar.jsx
@@ -32,6 +32,7 @@ class Toolbar extends React.Component {
         settings: PropTypes.object,
         layerMetadata: PropTypes.object,
         wfsdownload: PropTypes.object,
+        maxDepth: PropTypes.number,
         metadataTemplate: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object, PropTypes.func])
     };
 
@@ -52,11 +53,13 @@ class Toolbar extends React.Component {
             onHideSettings: () => {},
             onReload: () => {},
             onAddLayer: () => {},
+            onAddGroup: () => { },
             onDownload: () => {},
             onGetMetadataRecord: () => {},
             onHideLayerMetadata: () => {},
             onShow: () => {}
         },
+        maxDepth: 3,
         text: {
             settingsText: '',
             opacityText: '',
@@ -67,6 +70,10 @@ class Toolbar extends React.Component {
             confirmDeleteMessage: '',
             confirmDeleteCancelText: '',
             createWidgetTooltip: '',
+            addLayerTooltip: '',
+            addLayerToGroupTooltip: '',
+            addGroupTooltip: '',
+            addSubGroupTooltip: '',
             zoomToTooltip: {
                 LAYER: '',
                 LAYERS: ''
@@ -96,6 +103,7 @@ class Toolbar extends React.Component {
             activateDownloadTool: true,
             activateSettingsTool: true,
             activateAddLayer: true,
+            activateAddGroup: true,
             includeDeleteButtonInSettings: false,
             activateMetedataTool: true
         },
@@ -145,7 +153,23 @@ class Toolbar extends React.Component {
         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;
     }
-
+    getSelectedGroup = () => {
+        return this.props.selectedGroups.length > 0 && this.props.selectedGroups[this.props.selectedGroups.length - 1];
+    };
+    getSelectedNodeDepth = () => {
+        if (this.getStatus() === 'DESELECT') {
+            return 0;
+        }
+        return this.getSelectedGroup().id.split('.').length + 1;
+    };
+    addLayer = () => {
+        const group = this.getSelectedGroup();
+        this.props.onToolsActions.onAddLayer(group && group.id);
+    };
+    addGroup = () => {
+        const group = this.getSelectedGroup();
+        this.props.onToolsActions.onAddGroup(group && group.id);
+    };
     render() {
         const status = this.getStatus();
         const currentEPSG = this.checkBbox();
@@ -163,11 +187,26 @@ class Toolbar extends React.Component {
                 transitionName="toc-toolbar-btn-transition"
                 transitionEnterTimeout={300}
                 transitionLeaveTimeout={300}>
-                {this.props.activateTool.activateAddLayer && status === 'DESELECT' ?
-                    <Button key="addLayer" bsStyle="primary" bsSize="small" onClick={this.props.onToolsActions.onAddLayer}>
-                        {this.props.text.addLayer}
-                    </Button>
+                {this.props.activateTool.activateAddLayer && (status === 'DESELECT' || status === 'GROUP') ?
+                    <OverlayTrigger
+                        key="addLayer"
+                        placement="top"
+                            overlay={<Tooltip id="toc-tooltip-addLayer">{status === 'GROUP' ? this.props.text.addLayerToGroupTooltip : this.props.text.addLayerTooltip}</Tooltip>}>
+                            <Button key="addLayer" bsStyle="primary" className="square-button-md" onClick={this.addLayer}>
+                                <Glyphicon glyph="add-layer" />
+                            </Button>
+                    </OverlayTrigger>
                 : null}
+                    {this.props.activateTool.activateAddGroup && (status === 'DESELECT' || status === 'GROUP') && this.getSelectedNodeDepth() <= this.props.maxDepth ?
+                    <OverlayTrigger
+                        key="addGroup"
+                        placement="top"
+                            overlay={<Tooltip id="toc-tooltip-addGroup">{status === 'GROUP' ? this.props.text.addSubGroupTooltip : this.props.text.addGroupTooltip}</Tooltip>}>
+                            <Button key="addGroup" bsStyle="primary" className="square-button-md" onClick={this.addGroup}>
+                            <Glyphicon glyph="add-folder" />
+                        </Button>
+                    </OverlayTrigger>
+                    : null}
                 {this.props.activateTool.activateZoomTool && (status === 'LAYER' || status === 'GROUP' || status === 'LAYERS' || status === 'GROUPS') && currentEPSG ?
                     <OverlayTrigger
                         key="zoomTo"
@@ -189,7 +228,7 @@ class Toolbar extends React.Component {
                     <OverlayTrigger
                         key="settings"
                         placement="top"
-                        overlay={<Tooltip id="toc-tooltip-settings">{this.props.text.settingsTooltip[status ? 'LAYER_LOAD_ERROR' && 'LAYER' : 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>
@@ -328,7 +367,7 @@ class Toolbar extends React.Component {
 
     removeNodes = () => {
         this.props.selectedLayers.forEach((layer) => {
-            this.props.onToolsActions.onRemove(layer.id, 'layers', layer);
+            this.props.onToolsActions.onRemove(layer.id, 'layers');
         });
         this.props.onToolsActions.onClear();
         this.closeDeleteDialog();