* #9179: Include editing support to allowed user groups

* Code refactor

* Unit tests corrected

* Permission hierarchy updated

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

@@ -90,7 +90,9 @@ import {
  toggleShowAgain,
  TOGGLE_SHOW_AGAIN_FLAG,
  setSyncTool,
- SET_SYNC_TOOL, setViewportFilter, SET_VIEWPORT_FILTER
+ SET_SYNC_TOOL,
+ setViewportFilter,
+ SET_VIEWPORT_FILTER
 } from '../featuregrid';
 
 const idFeature = "2135";

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

@@ -163,12 +163,15 @@ describe('Test the styleeditor actions', () => {
  });
  it('initStyleService', () => {
  const service = { baseUrl: '/geoserver/' };
- const canEdit = true;
- const retval = initStyleService(service, canEdit);
+ const permissions = {
+ editingAllowedRoles: ["USER"],
+ editingAllowedGroups: ["testGroup"]
+ };
+ const retval = initStyleService(service, permissions);
  expect(retval).toExist();
  expect(retval.type).toBe(INIT_STYLE_SERVICE);
  expect(retval.service).toBe(service);
- expect(retval.canEdit).toBe(canEdit);
+ expect(retval.permissions).toEqual(permissions);
  });
  it('setEditPermissionStyleEditor', () => {
  const canEdit = true;

web/client/actions/styleeditor.js

@@ -186,14 +186,14 @@ export function deleteStyle(styleName) {
 * Setup the style editor service
 * @memberof actions.styleeditor
 * @param {object} service style editor service
-* @param {bool} canEdit flag to enable/disable style editor in current session
+* @param {object} permissions editing allowed roles and groups permission object
 * @return {object} of type `INIT_STYLE_SERVICE`
 */
-export function initStyleService(service, canEdit) {
+export function initStyleService(service, permissions) {
  return {
  type: INIT_STYLE_SERVICE,
  service,
- canEdit
+ permissions
  };
 }
 /**

web/client/components/data/featuregrid/enhancers/editor.js

@@ -87,9 +87,10 @@ const featuresToGrid = compose(
  props => ({displayFilters: props.enableColumnFilters})
  ),
  withPropsOnChange(
- ["editingAllowedRoles", "virtualScroll"],
+ ["editingAllowedRoles", "editingAllowedGroups", "virtualScroll"],
  props => ({
  editingAllowedRoles: props.editingAllowedRoles,
+ editingAllowedGroups: props.editingAllowedGroups,
  initPlugin: props.initPlugin
  })
  ),

web/client/plugins/FeatureEditor.jsx

@@ -49,7 +49,11 @@ import {isViewportFilterActive} from "../selectors/featuregrid";
  * }]
  *}
  * ```
- * @prop {object} cfg.editingAllowedRoles array of user roles allowed to enter in edit mode
+ * @prop {string[]} cfg.editingAllowedRoles array of user roles allowed to enter in edit mode.
+ * Support predefined ('ADMIN', 'USER', 'ALL') and custom roles. Default value is ['ADMIN'].
+ * Configuring with ["ALL"] allows all users to have access regardless of user's permission.
+ * @prop {string[]} cfg.editingAllowedGroups array of user groups allowed to enter in edit mode.
+ * When configured, gives the editing permissions to users members of one of the groups listed.
  * @prop {boolean} cfg.virtualScroll default true. Activates virtualScroll. When false the grid uses normal pagination
  * @prop {number} cfg.maxStoredPages default 5. In virtual Scroll mode determines the size of the loaded pages cache
  * @prop {number} cfg.vsOverScan default 20. Number of rows to load above/below the visible slice of the grid

web/client/plugins/StyleEditor.jsx

@@ -6,89 +6,104 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { isArray, isString } from 'lodash';
+import React, {useEffect} from 'react';
 import assign from 'object-assign';
 import PropTypes from 'prop-types';
-import React from 'react';
 import { connect } from 'react-redux';
 import { branch, compose, lifecycle, toClass } from 'recompose';
 import { createSelector } from 'reselect';
 
 import { updateSettingsParams } from '../actions/layers';
-import { initStyleService, toggleStyleEditor } from '../actions/styleeditor';
+import { initStyleService, setEditPermissionStyleEditor, toggleStyleEditor } from '../actions/styleeditor';
 import HTML from '../components/I18N/HTML';
 import BorderLayout from '../components/layout/BorderLayout';
 import emptyState from '../components/misc/enhancers/emptyState';
 import loadingState from '../components/misc/enhancers/loadingState';
 import Loader from '../components/misc/Loader';
-import { userRoleSelector } from '../selectors/security';
 import {
  canEditStyleSelector,
  errorStyleSelector,
- getUpdatedLayer,
  loadingStyleSelector,
  statusStyleSelector,
  styleServiceSelector
 } from '../selectors/styleeditor';
-import { isSameOrigin } from '../utils/StyleEditorUtils';
 import {
  StyleCodeEditor,
  StyleSelector,
  StyleToolbar
 } from './styleeditor/index';
 
-class StyleEditorPanel extends React.Component {
- static propTypes = {
- layer: PropTypes.object,
- header: PropTypes.node,
- isEditing: PropTypes.bool,
- showToolbar: PropTypes.node.bool,
- onInit: PropTypes.func,
- styleService: PropTypes.object,
- userRole: PropTypes.string,
- editingAllowedRoles: PropTypes.array,
- enableSetDefaultStyle: PropTypes.bool,
- canEdit: PropTypes.bool,
- editorConfig: PropTypes.object
- };
+const StyleEditorPanel = ({
+ header,
+ isEditing,
+ showToolbar,
+ onInit,
+ styleService,
+ editingAllowedRoles,
+ editingAllowedGroups,
+ enableSetDefaultStyle,
+ canEdit,
+ editorConfig,
+ onSetPermission
+}) => {
 
- static defaultProps = {
- layer: {},
- onInit: () => {},
- editingAllowedRoles: [
- 'ADMIN'
- ],
- editorConfig: {}
- };
+ useEffect(() => {
+ onInit(
+ styleService,
+ {
+ editingAllowedRoles,
+ editingAllowedGroups
+ }
+ );
+ }, []);
 
- UNSAFE_componentWillMount() {
- const canEdit = !this.props.editingAllowedRoles || (isArray(this.props.editingAllowedRoles) && isString(this.props.userRole)
- && this.props.editingAllowedRoles.indexOf(this.props.userRole) !== -1);
- this.props.onInit(this.props.styleService, canEdit && isSameOrigin(this.props.layer, this.props.styleService));
- }
+ useEffect(() => {
+ onSetPermission(canEdit);
+ }, [canEdit]);
+
+ return (
+ <BorderLayout
+ className="ms-style-editor-container"
+ header={
+ showToolbar ? <div className="ms-style-editor-container-header">
+ {header}
+ <div className="text-center">
+ <StyleToolbar
+ enableSetDefaultStyle={enableSetDefaultStyle}/>
+ </div>
+ </div> : null
+ }
+ footer={<div style={{ height: 25 }} />}>
+ {isEditing
+ ? <StyleCodeEditor config={editorConfig}/>
+ : <StyleSelector
+ showDefaultStyleIcon={canEdit && enableSetDefaultStyle}/>}
+ </BorderLayout>
+ );
+};
+StyleEditorPanel.propTypes = {
+ header: PropTypes.node,
+ isEditing: PropTypes.bool,
+ showToolbar: PropTypes.bool,
+ onInit: PropTypes.func,
+ styleService: PropTypes.object,
+ editingAllowedRoles: PropTypes.array,
+ editingAllowedGroups: PropTypes.array,
+ enableSetDefaultStyle: PropTypes.bool,
+ canEdit: PropTypes.bool,
+ editorConfig: PropTypes.object,
+ onSetPermission: PropTypes.func
+};
+StyleEditorPanel.defaultProps = {
+ layer: {},
+ onInit: () => {},
+ editingAllowedRoles: [
+ 'ADMIN'
+ ],
+ editingAllowedGroups: [],
+ editorConfig: {}
+};
 
- render() {
- return (
- <BorderLayout
- className="ms-style-editor-container"
- header={
- this.props.showToolbar ? <div className="ms-style-editor-container-header">
- {this.props.header}
- <div className="text-center">
- <StyleToolbar
- enableSetDefaultStyle={this.props.enableSetDefaultStyle}/>
- </div>
- </div> : null
- }
- footer={<div style={{ height: 25 }} />}>
- {this.props.isEditing
- ? <StyleCodeEditor config={this.props.editorConfig}/>
- : <StyleSelector
- showDefaultStyleIcon={this.props.canEdit && this.props.enableSetDefaultStyle}/>}
- </BorderLayout>
- );
- }
-}
 /**
  * StyleEditor plugin.
  * - Select styles from available styles of the layer
@@ -101,7 +116,12 @@ class StyleEditorPanel extends React.Component {
  * @prop {string} cfg.styleService.baseUrl base url of service eg: '/geoserver/'
  * @prop {array} cfg.styleService.availableUrls a list of urls that can access directly to the style service
  * @prop {array} cfg.styleService.formats supported formats, could be one of [ 'sld' ] or [ 'sld', 'css' ]
- * @prop {array} cfg.editingAllowedRoles all roles with edit permission eg: [ 'ADMIN' ], if null all roles have edit permission
+ * @prop {string[]} cfg.editingAllowedRoles array of user roles allowed to enter in edit mode.
+ * Support predefined ('ADMIN', 'USER', 'ALL') and custom roles. Default value is ['ADMIN'].
+ * Configuring with ["ALL"] allows all users to have access regardless of user's permission.
+ * However, the outcome can be influenced by the user's permission to access the requested style service.
+ * @prop {string[]} cfg.editingAllowedGroups array of user groups allowed to enter in edit mode.
+ * When configured, gives the editing permissions to users members of one of the groups listed.
  * @prop {array} cfg.enableSetDefaultStyle enable set default style functionality
  * @prop {object} cfg.editorConfig contains editor configurations
  * @prop {object} cfg.editorConfig.classification configuration of the classification symbolizer
@@ -123,7 +143,7 @@ const StyleEditorPlugin = compose(
  // in this case 'branch' return always a functional component and PluginUtils expects a class
  toClass,
  // No rendering if not active
- // eg: now only TOCItemsSettings can active following plugin
+ // eg: now only TOCItemsSettings can activate the following plugin
  branch(
  ({ active } = {}) => !active,
  () => () => null
@@ -134,25 +154,22 @@ const StyleEditorPlugin = compose(
  [
  statusStyleSelector,
  loadingStyleSelector,
- getUpdatedLayer,
  errorStyleSelector,
- userRoleSelector,
  canEditStyleSelector,
  styleServiceSelector
  ],
- (status, loading, layer, error, userRole, canEdit, styleService) => ({
+ (status, loading, error, canEdit, styleService) => ({
  isEditing: status === 'edit',
  loading,
- layer,
  error,
- userRole,
  canEdit,
  styleService
  })
  ),
  {
  onInit: initStyleService,
- onUpdateParams: updateSettingsParams
+ onUpdateParams: updateSettingsParams,
+ onSetPermission: setEditPermissionStyleEditor
  },
  (stateProps, dispatchProps, ownProps) => {
  // detect if the static service has been updated with new information in the global state

web/client/plugins/__tests__/StyleEditor-test.jsx

@@ -12,7 +12,11 @@ import ReactDOM from 'react-dom';
 import StyleEditorPlugin from '../StyleEditor';
 import { getPluginForTest } from './pluginsTestUtils';
 import { act } from 'react-dom/test-utils';
-import { INIT_STYLE_SERVICE, TOGGLE_STYLE_EDITOR } from '../../actions/styleeditor';
+import {
+ INIT_STYLE_SERVICE,
+ TOGGLE_STYLE_EDITOR,
+ SET_EDIT_PERMISSION
+} from '../../actions/styleeditor';
 
 describe('StyleEditor Plugin', () => {
  beforeEach((done) => {
@@ -41,11 +45,12 @@ describe('StyleEditor Plugin', () => {
  styleService={cfgStyleService}
  />, document.getElementById("container"));
  });
- expect(actions.length).toBe(2);
+ expect(actions.length).toBe(3);
  expect(actions.map(action => action.type))
- .toEqual([ INIT_STYLE_SERVICE, TOGGLE_STYLE_EDITOR ]);
- expect(actions[0].service).toBeTruthy();
- expect(actions[0].service).toEqual({ ...cfgStyleService, isStatic: true });
+ .toEqual([ TOGGLE_STYLE_EDITOR, INIT_STYLE_SERVICE, SET_EDIT_PERMISSION ]);
+ expect(actions[1].service).toBeTruthy();
+ expect(actions[1].service).toEqual({ ...cfgStyleService, isStatic: true });
+ expect(actions[1].permissions.editingAllowedRoles).toEqual(['ADMIN']);
  });
  it('should use the static service from the state', () => {
  const cfgStyleService = {
@@ -70,17 +75,23 @@ describe('StyleEditor Plugin', () => {
  service: stateStyleService
  }
  });
+ const permissions = {
+ "editingAllowedRoles": ["USER"],
+ "editingAllowedGroups": ["temp"]
+ };
  act(() => {
  ReactDOM.render(<Plugin
  active
  styleService={cfgStyleService}
+ {...permissions}
  />, document.getElementById("container"));
  });
- expect(actions.length).toBe(2);
+ expect(actions.length).toBe(3);
  expect(actions.map(action => action.type))
- .toEqual([ INIT_STYLE_SERVICE, TOGGLE_STYLE_EDITOR ]);
- expect(actions[0].service).toBeTruthy();
- expect(actions[0].service).toEqual(stateStyleService);
+ .toEqual([ TOGGLE_STYLE_EDITOR, INIT_STYLE_SERVICE, SET_EDIT_PERMISSION ]);
+ expect(actions[1].service).toBeTruthy();
+ expect(actions[1].service).toEqual(stateStyleService);
+ expect(actions[1].permissions).toEqual(permissions);
  });
  it('should use the service from the state', () => {
  const styleService = {
@@ -99,10 +110,10 @@ describe('StyleEditor Plugin', () => {
  active
  />, document.getElementById("container"));
  });
- expect(actions.length).toBe(2);
+ expect(actions.length).toBe(3);
  expect(actions.map(action => action.type))
- .toEqual([ INIT_STYLE_SERVICE, TOGGLE_STYLE_EDITOR ]);
- expect(actions[0].service).toBeTruthy();
- expect(actions[0].service).toEqual(styleService);
+ .toEqual([ TOGGLE_STYLE_EDITOR, INIT_STYLE_SERVICE, SET_EDIT_PERMISSION ]);
+ expect(actions[1].service).toBeTruthy();
+ expect(actions[1].service).toEqual(styleService);
  });
 });

web/client/plugins/featuregrid/FeatureEditor.jsx

@@ -70,7 +70,11 @@ const Dock = connect(createSelector(
  * }]
  *}
  * ```
- * @prop {object} cfg.editingAllowedRoles array of user roles allowed to enter in edit mode
+ * @prop {string[]} cfg.editingAllowedRoles array of user roles allowed to enter in edit mode.
+ * Support predefined ('ADMIN', 'USER', 'ALL') and custom roles. Default value is ['ADMIN'].
+ * Configuring with ["ALL"] allows all users to have access regardless of user's permission.
+ * @prop {string[]} cfg.editingAllowedGroups array of user groups allowed to enter in edit mode.
+ * When configured, gives the editing permissions to users members of one of the groups listed.
  * @prop {boolean} cfg.virtualScroll default true. Activates virtualScroll. When false the grid uses normal pagination
  * @prop {number} cfg.maxStoredPages default 5. In virtual Scroll mode determines the size of the loaded pages cache
  * @prop {number} cfg.vsOverScan default 20. Number of rows to load above/below the visible slice of the grid
@@ -94,7 +98,7 @@ const Dock = connect(createSelector(
  *
  * @classdesc
  * `FeatureEditor` Plugin, also called *FeatureGrid*, provides functionalities to browse/edit data via WFS. The grid can be configured to use paging or
- * <br/>virtual scroll mechanisms. By default virtual scroll is enabled. When on virtual scroll mode, the maxStoredPages param
+ * <br/>virtual scroll mechanisms. By default, virtual scroll is enabled. When on virtual scroll mode, the maxStoredPages param
  * sets the size of loaded pages cache, while vsOverscan and scrollDebounce params determine the behavior of grid scrolling
  * and of row loading.
  * <br/>Furthermore it can be configured to use custom editor cells for certain layers/columns, specifying the rules to recognize them. If no rule matches, then it will be used the default editor based on the dataType of that column.
@@ -187,10 +191,16 @@ const FeatureDock = (props = {
  // const editors = items.filter(({target}) => target === 'editors');
 
  useEffect(() => {
- props.initPlugin({virtualScroll, editingAllowedRoles: props.editingAllowedRoles, maxStoredPages: props.maxStoredPages});
+ props.initPlugin({
+ virtualScroll,
+ editingAllowedRoles: props.editingAllowedRoles,
+ editingAllowedGroups: props.editingAllowedGroups,
+ maxStoredPages: props.maxStoredPages
+ });
  }, [
  virtualScroll,
  (props.editingAllowedRoles ?? []).join(","), // this avoids multiple calls when the array remains the equal
+ (props.editingAllowedGroups ?? []).join(","),
  props.maxStoredPages
  ]);