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

Description:
- Highlight only the edited attributes
- Write unit test
- Fix style issue in grid_rules_manager

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}

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)}

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);
+ });
 
 });

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()
  }

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",

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%;
  } 

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;