#9752: enhance geofence attribute rule editor: (#9753) (#9755)

Description: - Highlight only the edited attributes - Write unit test - Fix style issue in grid_rules_manager
geosolutions-it · Nov 27, 2023 · 4f2e7e9 · 4f2e7e9
1 parent e257122
commit 4f2e7e9
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 7 deletions.
diff --git a/web/client/components/manager/rulesmanager/AttributeAccessSelect.jsx b/web/client/components/manager/rulesmanager/AttributeAccessSelect.jsx
@@ -14,8 +14,9 @@ const defaultOptions = [
     {value: 'READWRITE', label: 'READ WRITE'}
 ];
 
-export default ({options = defaultOptions, attribute, value, onChange = () => {}}) => (
+export default ({options = defaultOptions, attribute, value, onChange = () => {}, className = ""}) => (
     <Select
+        className={className}
         name={`sel-${attribute.name}`}
         clearable={false}
         searchable={false}

diff --git a/web/client/components/manager/rulesmanager/ruleseditor/AttributesEditor.jsx b/web/client/components/manager/rulesmanager/ruleseditor/AttributesEditor.jsx
@@ -20,11 +20,13 @@ const getAttributeValue = (name, constraints) => {
     return (getAttribute(name, constraints) || {}).access || "READWRITE";
 };
 
-export default ({attributes = [], constraints = {}, setOption = () => {}, active = false}) => {
+export default ({attributes = [], constraints = {}, setOption = () => {}, active = false, setEditedAttributes = () => {}, editedAttributes = []}) => {
     const onChange = (at) => {
         const {attributes: attrs} = constraints;
-        const attribute = (attrs && attrs.attribute || []).filter(e => e.name !== at.name).concat(at);
+        const attribute = (attrs && attrs.attribute?.length ? attrs.attribute : [attrs.attribute] || []).filter(e => e.name !== at.name).concat(at);
         setOption({key: "attributes", value: {attribute}});
+        // add it to edited attribute
+        if (!editedAttributes.includes(at.name)) setEditedAttributes(at.name);
     };
     return (
         <Grid className="ms-rule-editor" fluid style={{ width: '100%', display: active ? 'block' : 'none'}}>
@@ -51,6 +53,7 @@ export default ({attributes = [], constraints = {}, setOption = () => {}, active
                         </Col>
                         <Col sm={4}>
                             <Select
+                                className={ editedAttributes.includes(mA.name) ? "highlighted-dd" : ""}
                                 attribute={mA}
                                 onChange={onChange}
                                 value={getAttributeValue(mA.name, constraints)}

diff --git a/web/client/components/manager/rulesmanager/ruleseditor/__tests__/AttributesEditor-test.jsx b/web/client/components/manager/rulesmanager/ruleseditor/__tests__/AttributesEditor-test.jsx
@@ -51,5 +51,15 @@ describe('Attributes Editor component', () => {
         expect(rows).toExist();
         expect(rows.length).toBe(3);
     });
+    it('render attributes with highlighted DD', () => {
+        ReactDOM.render(<AttributesEditor editedAttributes={["cat"]} attributes={attributes} active constraints={constraints} />, document.getElementById("container"));
+        const container = document.getElementById('container');
+        const rows = container.querySelectorAll('.row');
+        const highlights = container.querySelectorAll('.highlighted-dd');
+        expect(rows).toExist();
+        expect(highlights).toExist();
+        expect(rows.length).toBe(3);
+        expect(highlights.length).toBe(1);
+    });
 
 });
diff --git a/web/client/components/misc/combobox/PagedCombobox.jsx b/web/client/components/misc/combobox/PagedCombobox.jsx
@@ -230,7 +230,7 @@ class PagedCombobox extends React.Component {
                 { this.props.anyFilterRuleMode ?
                     <>
                         &nbsp;
-                        <div>
+                        <div className="checkbox-any-field">
                             {
                                 this.renderTooltipCheckbox()
                             }

diff --git a/web/client/plugins/manager/RulesEditor.jsx b/web/client/plugins/manager/RulesEditor.jsx
@@ -47,6 +47,12 @@ class RuleEditor extends React.Component {
         onDelete: () => {},
         type: ""
     }
+    constructor(props) {
+        super(props);
+        this.state = {
+            editedAttributes: []
+        };
+    }
     render() {
         const { loading, activeRule, layer, activeEditor, onNavChange, initRule, styles = [], setConstraintsOption, type, properties, disableDetails} = this.props;
         const {modalProps} = this.state || {};
@@ -68,10 +74,16 @@ class RuleEditor extends React.Component {
                 <MainEditor key="main-editor" rule={activeRule} setOption={this.setOption} active={activeEditor === "1"}/>
                 <StylesEditor styles={styles} key="styles-editor" constraints={activeRule && activeRule.constraints} setOption={setConstraintsOption} active={activeEditor === "2"}/>
                 <FiltersEditor layer={layer} key="filters-editor" setOption={setConstraintsOption} constraints={activeRule && activeRule.constraints} active={activeEditor === "3"}/>
-                <AttributesEditor key="attributes-editor" active={activeEditor === "4"} attributes={properties} constraints={activeRule && activeRule.constraints} setOption={setConstraintsOption}/>
+                <AttributesEditor editedAttributes={this.state.editedAttributes} setEditedAttributes={this.handleSetEditedAttrbiutes.bind(this)} key="attributes-editor" active={activeEditor === "4"} attributes={properties} constraints={activeRule && activeRule.constraints} setOption={setConstraintsOption}/>
                 <ModalDialog {...modalProps}/>
             </BorderLayout>);
     }
+    clearHighlighedEditsInAttributes() {
+        this.setState({ editedAttributes: [] });
+    }
+    handleSetEditedAttrbiutes(attr) {
+        this.setState({ editedAttributes: [...this.state.editedAttributes, attr] });
+    }
     cancelEditing = () => {
         const {activeRule, initRule, onExit} = this.props;
         if (!isRulePristine(activeRule, initRule)) {
@@ -84,7 +96,11 @@ class RuleEditor extends React.Component {
                 {
                     text: <Message msgId="yes"/>,
                     bsStyle: 'primary',
-                    onClick: onExit
+                    onClick: () => {
+                        // check if there is edits in attributes clear highlight
+                        this.state.editedAttributes.length && this.clearHighlighedEditsInAttributes();
+                        onExit();
+                    }
                 }
                 ], closeAction: this.cancel, msg: "map.details.sureToClose"}}));
         } else {
@@ -97,6 +113,8 @@ class RuleEditor extends React.Component {
     save = () => {
         const {activeRule, onSave} = this.props;
         if (isRuleValid(activeRule)) {
+            // check if there is edits in attributes clear highlight
+            this.state.editedAttributes.length && this.clearHighlighedEditsInAttributes();
             onSave(activeRule);
         } else {
             this.setState( () => ({modalProps: {title: "featuregrid.toolbar.saveChanges",

diff --git a/web/client/themes/default/less/react-data-grid.less b/web/client/themes/default/less/react-data-grid.less
@@ -305,7 +305,7 @@
     .ms2-border-layout-body{
         .rules-data-gird {
             .react-grid-HeaderCell{
-               .autocompleteField input {
+               .autocompleteField.d-flex div.checkbox-any-field {
                 position: relative;
                 top: 15%;
                } 

diff --git a/web/client/themes/default/less/rulesmanager.less b/web/client/themes/default/less/rulesmanager.less
@@ -176,6 +176,9 @@
     .ms-rule-editor .m-label.m-caption .glyphicon-info-sign{
         margin-right: 2px;
     }
+    .ms-rule-editor.container-fluid .highlighted-dd{
+        outline: 1px solid  var(--ms-warning, @ms-warning);
+    }
 
     position: absolute;
-Original file line number
+Diff line change
@@ Expand Up / @@ -230,7 +230,7 @@ class PagedCombobox extends React.Component { @@
                     { this.props.anyFilterRuleMode ?
                         <>
                             &nbsp;
-                            <div>
+                            <div className="checkbox-any-field">
                                 {
                                     this.renderTooltipCheckbox()
                                 }
@@ Expand Down @@