#10111: Enhance GeoFence attribute rule (#10145) (#10324)

(cherry picked from commit f108cb2)

web/client/api/geofence/RuleService.js

@@ -20,17 +20,17 @@ const EMPTY_RULE = {
     workspace: ""
 };
 
-const cleanConstraints = (rule) => {
+export const cleanConstraints = (rule) => {
     if (!rule.constraints) {
         return rule;
     } else if (rule.grant === "DENY") {
         const { constraints: omit, ...r } = rule;
         return r;
     }
     let constraints = { ...rule.constraints };
-    constraints.allowedStyles = constraints.allowedStyles && constraints.allowedStyles.style || [];
-    constraints.attributes = constraints.attributes && constraints.attributes.attribute || [];
-    constraints.restrictedAreaWkt = constraints.restrictedAreaWkt || "";
+    constraints.allowedStyles = constraints?.allowedStyles?.style ?? [];
+    constraints.attributes = constraints?.attributes?.attribute ?? [];
+    if (!constraints.restrictedAreaWkt) constraints.restrictedAreaWkt = null; // cannot be empty string, may cause API call to fail
     return { ...rule, constraints };
 };
 

web/client/api/geofence/__tests__/RuleService-test.js

@@ -14,7 +14,7 @@ import RULES from 'raw-loader!../../../test-resources/geofence/rest/rules/rules_
 
 import axios from '../../../libs/ajax';
 import GF_RULE from '../../../test-resources/geofence/rest/rules/full_rule1.json';
-import ruleServiceFactory from '../RuleService';
+import ruleServiceFactory, { cleanConstraints } from '../RuleService';
 
 const RuleService = ruleServiceFactory({
     addBaseUrl: (opts) => ({...opts, baseURL: BASE_URL}),
@@ -108,4 +108,21 @@ describe('RuleService API for GeoFence StandAlone', () => {
     });
     // TODO: updateRules, cleanCache
 
+    it("test cleanConstraints", () => {
+        let rule = {};
+        expect(cleanConstraints(rule)).toEqual(rule);
+        const grant = "DENY";
+        rule = {constraints: "some", grant};
+        expect(cleanConstraints(rule)).toEqual({grant});
+        rule = {constraints: {allowedStyles: undefined, attributes: null, restrictedAreaWkt: ""}};
+        expect(cleanConstraints(rule)).toEqual({constraints: {allowedStyles: [], attributes: [], restrictedAreaWkt: null}});
+        rule = {constraints: {allowedStyles: {style: {"color": "#000"}}, attributes: {attribute: [{access: "READONLY", name: "ID"}]}, restrictedAreaWkt: "POLYGON((10 10, 10, 20, 20 20, 20 10, 10 10))"}};
+        expect(cleanConstraints(rule)).toEqual({
+            constraints: {
+                allowedStyles: rule.constraints.allowedStyles.style,
+                attributes: rule.constraints.attributes.attribute,
+                restrictedAreaWkt: rule.constraints.restrictedAreaWkt
+            }
+        });
+    });
 });

web/client/components/manager/rulesmanager/ruleseditor/AttributesEditor.jsx

@@ -6,9 +6,10 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-import { castArray } from 'lodash';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Col, Grid, Row } from 'react-bootstrap';
+import castArray from 'lodash/castArray';
+import isEmpty from 'lodash/isEmpty';
 
 import Message from '../../../I18N/Message';
 import Select from '../AttributeAccessSelect';
@@ -22,12 +23,22 @@ const getAttributeValue = (name, constraints) => {
 
 export default ({attributes = [], constraints = {}, setOption = () => {}, active = false, setEditedAttributes = () => {}, editedAttributes = []}) => {
     const onChange = (at) => {
-        const {attributes: attrs} = constraints;
-        const attribute = ((attrs && attrs?.attribute?.length) ? attrs.attribute : (attrs?.attribute) ? [attrs.attribute] : [] || []).filter(e => e.name !== at.name).concat(at);
+        let {attributes: {attribute = []} = {}} = constraints ?? {};
+        attribute = castArray(attribute).map(attr => at.name === attr.name ? at : attr);
         setOption({key: "attributes", value: {attribute}});
         // add it to edited attribute
         if (!editedAttributes.includes(at.name)) setEditedAttributes(at.name);
     };
+    useEffect(() => {
+        if (!isEmpty(attributes)) {
+            const _constraints = attributes.map(attr => ({name: attr.name, access: "READONLY"}));
+            const {attributes: {attribute = []} = {}} = constraints ?? {};
+            const modifiedAttribute = _constraints.map(attr => {
+                return castArray(attribute).find(a=> a.name === attr.name) ?? attr;
+            });
+            setOption({key: "attributes", value: {attribute: modifiedAttribute}});
+        }
+    }, [attributes]);
     return (
         <Grid className="ms-rule-editor" fluid style={{ width: '100%', display: active ? 'block' : 'none'}}>
             <Row>

web/client/components/manager/rulesmanager/ruleseditor/__tests__/AttributesEditor-test.jsx

@@ -10,6 +10,7 @@ import React from 'react';
 
 import ReactDOM from 'react-dom';
 import expect from 'expect';
+import TestUtils from "react-dom/test-utils";
 import AttributesEditor from '../AttributesEditor.jsx';
 const constraints = {
     attributes: {
@@ -51,6 +52,54 @@ describe('Attributes Editor component', () => {
         expect(rows).toExist();
         expect(rows.length).toBe(3);
     });
+    it('render attributes on setOption', (done) => {
+        TestUtils.act(() => {
+            ReactDOM.render(<AttributesEditor
+                setOption={(value) => {
+                    try {
+                        expect(value.key).toBe('attributes');
+                        expect(value.value).toEqual({"attribute": [{"name": "the_geom", "access": "READONLY"}, {"access": "READONLY", "name": "cat"}]});
+                    } catch (e) {
+                        done(e);
+                    }
+                    done();
+                }}
+                attributes={attributes} active
+                constraints={constraints}
+            />, document.getElementById("container"));
+        });
+        const container = document.getElementById('container');
+        const rows = container.querySelectorAll('.row');
+        expect(rows).toBeTruthy();
+    });
+    it('render attributes on change value', (done) => {
+        TestUtils.act(() => {
+            ReactDOM.render(<AttributesEditor
+                setOption={(value) => {
+                    try {
+                        const isModified = value.value?.attribute?.some(attr => attr.access === 'READWRITE');
+                        if (isModified) {
+                            expect(value.key).toBe('attributes');
+                            expect(value.value).toEqual({"attribute": [{"name": "cat", "access": "READWRITE"}]});
+                        }
+                    } catch (e) {
+                        done(e);
+                    }
+                    done();
+                }}
+                attributes={attributes} active
+                constraints={constraints}
+            />, document.getElementById("container"));
+        });
+        const container = document.getElementById('container');
+        const rows = container.querySelectorAll('.row');
+        expect(rows).toBeTruthy();
+        const rule = document.querySelectorAll('.Select-control')[1];
+        expect(rule).toBeTruthy();
+        TestUtils.Simulate.mouseDown(rule, { button: 0 });
+        TestUtils.Simulate.keyDown(rule, { keyCode: 40, key: 'ArrowDown' });
+        TestUtils.Simulate.keyDown(rule, { key: 'Enter', keyCode: 13 });
+    });
     it('render attributes with highlighted DD', () => {
         ReactDOM.render(<AttributesEditor editedAttributes={["cat"]} attributes={attributes} active constraints={constraints} />, document.getElementById("container"));
         const container = document.getElementById('container');