From 4f2e7e96a1ffe9389dd87ea6be4105ad80e33ae8 Mon Sep 17 00:00:00 2001
From: mahmoud adel <58145645+mahmoudadel54@users.noreply.github.com>
Date: Mon, 27 Nov 2023 18:29:39 +0200
Subject: [PATCH] #9752: enhance geofence attribute rule editor: (#9753)
 (#9755)

Description:
- Highlight only the edited attributes
- Write unit test
- Fix style issue in grid_rules_manager
---
 .../rulesmanager/AttributeAccessSelect.jsx    |  3 ++-
 .../ruleseditor/AttributesEditor.jsx          |  7 ++++--
 .../__tests__/AttributesEditor-test.jsx       | 10 +++++++++
 .../misc/combobox/PagedCombobox.jsx           |  2 +-
 web/client/plugins/manager/RulesEditor.jsx    | 22 +++++++++++++++++--
 .../themes/default/less/react-data-grid.less  |  2 +-
 .../themes/default/less/rulesmanager.less     |  3 +++
 7 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/web/client/components/manager/rulesmanager/AttributeAccessSelect.jsx b/web/client/components/manager/rulesmanager/AttributeAccessSelect.jsx
index cfdf962521..bbca017f74 100644
--- 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
index 2ac7d33154..828a937d69 100644
--- 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
index 3a5ffba538..140830c9ba 100644
--- 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
index f16f3e2978..f8eb02dc52 100644
--- 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
index 8995e351c6..7e14ab2c82 100644
--- 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
index ab8eafb870..ab0a446559 100644
--- 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
index 27ad40668b..b830060cf5 100644
--- 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;