[ACS-5284] - updating a folder rule options has no effect when multiple rules exist and clicking between them (#3409)

* [ACS-5284] - updating a folder rule options has no effect when multiple rules exist and clicking between them

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html

@@ -106,6 +106,7 @@
               <div class="aca-manage-rules__container__rule-details__content" *ngIf="(selectedRule$ | async) as selectedRule">
                 <aca-rule-details
                   [actionDefinitions]="actionDefinitions$ | async"
+                  [parameterConstraints]="parameterConstraints$ | async"
                   [readOnly]="true"
                   [preview]="true"
                   [value]="selectedRule"

projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss

@@ -13,6 +13,6 @@
   }
 
   .hide-error-script-dropdown {
-    opacity: 0;
+    visibility: hidden;
   }
 }

projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.spec.ts

@@ -23,7 +23,7 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, DebugElement, SimpleChange } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RuleOptionsUiComponent } from './rule-options.ui-component';
 import { CoreTestingModule } from '@alfresco/adf-core';
@@ -42,6 +42,18 @@ describe('RuleOptionsUiComponent', () => {
     ((getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).children[0] as HTMLElement).click();
   };
 
+  const testErrorScriptFormFieldVisibility = (isVisible: boolean) => {
+    if (isVisible) {
+      expect((getByDataAutomationId('rule-option-form-field-errorScript').nativeElement as HTMLElement).classList).not.toContain(
+        'hide-error-script-dropdown'
+      );
+    } else {
+      expect((getByDataAutomationId('rule-option-form-field-errorScript').nativeElement as HTMLElement).classList).toContain(
+        'hide-error-script-dropdown'
+      );
+    }
+  };
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -66,7 +78,7 @@ describe('RuleOptionsUiComponent', () => {
     expect(getByDataAutomationId('rule-option-checkbox-asynchronous').componentInstance.checked).toBeFalsy();
     expect(getByDataAutomationId('rule-option-checkbox-inheritable').componentInstance.checked).toBeFalsy();
     expect(getByDataAutomationId('rule-option-checkbox-disabled').componentInstance.checked).toBeFalsy();
-    expect(getByDataAutomationId('rule-option-select-errorScript').componentInstance.disabled).toBeTruthy();
+    testErrorScriptFormFieldVisibility(false);
 
     component.writeValue({
       isEnabled: false,
@@ -79,7 +91,7 @@ describe('RuleOptionsUiComponent', () => {
     expect(getByDataAutomationId('rule-option-checkbox-asynchronous').componentInstance.checked).toBeTruthy();
     expect(getByDataAutomationId('rule-option-checkbox-inheritable').componentInstance.checked).toBeTruthy();
     expect(getByDataAutomationId('rule-option-checkbox-disabled').componentInstance.checked).toBeTruthy();
-    expect(getByDataAutomationId('rule-option-select-errorScript').componentInstance.disabled).toBeFalsy();
+    testErrorScriptFormFieldVisibility(true);
   });
 
   it('should enable selector when async checkbox is truthy', () => {
@@ -122,6 +134,7 @@ describe('RuleOptionsUiComponent', () => {
       errorScript: ''
     });
     component.errorScriptConstraint = errorScriptConstraintMock;
+    component.ngOnChanges({ errorScriptConstraint: {} as SimpleChange });
     fixture.detectChanges();
 
     (getByDataAutomationId('rule-option-select-errorScript').nativeElement as HTMLElement).click();
@@ -149,4 +162,33 @@ describe('RuleOptionsUiComponent', () => {
     expect(matFormField).not.toBeNull();
     expect(matFormField.componentInstance['floatLabel']).toBe('always');
   });
+
+  it('should properly update formFields on only isAsynchronous and errorScript changes', () => {
+    fixture.detectChanges();
+    component.writeValue({
+      isEnabled: false,
+      isInheritable: true,
+      isAsynchronous: true,
+      errorScript: '1234'
+    });
+    fixture.detectChanges();
+
+    expect(getByDataAutomationId('rule-option-checkbox-asynchronous').componentInstance.checked).toBeTrue();
+    expect(getByDataAutomationId('rule-option-checkbox-inheritable').componentInstance.checked).toBeTrue();
+    expect(getByDataAutomationId('rule-option-checkbox-disabled').componentInstance.checked).toBeTrue();
+    expect(getByDataAutomationId('rule-option-select-errorScript').componentInstance.value).toEqual('1234');
+
+    component.writeValue({
+      isEnabled: false,
+      isInheritable: true,
+      isAsynchronous: false,
+      errorScript: ''
+    });
+    fixture.detectChanges();
+
+    expect(getByDataAutomationId('rule-option-checkbox-asynchronous').componentInstance.checked).toBeFalse();
+    expect(getByDataAutomationId('rule-option-checkbox-inheritable').componentInstance.checked).toBeTrue();
+    expect(getByDataAutomationId('rule-option-checkbox-disabled').componentInstance.checked).toBeTrue();
+    testErrorScriptFormFieldVisibility(false);
+  });
 });

projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.ts

@@ -22,8 +22,8 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, forwardRef, HostBinding, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { AbstractControl, ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { Component, forwardRef, HostBinding, Input, OnChanges, OnDestroy, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox';
 import { RuleOptions } from '../../model/rule.model';
 import { ActionParameterConstraint, ConstraintValue } from '../../model/action-parameter-constraint.model';
@@ -48,7 +48,7 @@ import { MatSelectModule } from '@angular/material/select';
     }
   ]
 })
-export class RuleOptionsUiComponent implements ControlValueAccessor, OnInit, OnDestroy {
+export class RuleOptionsUiComponent implements ControlValueAccessor, OnChanges, OnDestroy {
   form = new FormGroup({
     isDisabled: new FormControl(),
     isInheritable: new FormControl(),
@@ -57,13 +57,14 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnInit, OnD
   });
 
   formSubscription = this.form.valueChanges.subscribe((value: any) => {
+    const formValue = { ...this.form.value, ...value };
     this.isAsynchronousChecked = value.isAsynchronous;
     this.isInheritableChecked = value.isInheritable;
     this.onChange({
-      isEnabled: !value.isDisabled,
-      isInheritable: value.isInheritable,
-      isAsynchronous: value.isAsynchronous,
-      errorScript: value.errorScript ?? ''
+      isEnabled: !formValue.isDisabled,
+      isInheritable: formValue.isInheritable,
+      isAsynchronous: formValue.isAsynchronous,
+      errorScript: formValue.errorScript ?? ''
     });
     this.onTouch();
   });
@@ -85,19 +86,18 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnInit, OnD
   errorScriptOptions: ConstraintValue[] = [];
 
   writeValue(options: RuleOptions) {
-    const isAsynchronousFormControl = this.form.get('isAsynchronous');
-    const errorScriptFormControl = this.form.get('errorScript');
-    this.form.get('isDisabled').setValue(!options.isEnabled);
-    this.form.get('isInheritable').setValue(options.isInheritable);
-    this.form.get('isAsynchronous').setValue(options.isAsynchronous);
-    errorScriptFormControl.setValue(options.errorScript ?? '');
-    if (isAsynchronousFormControl.value) {
-      this.hideErrorScriptDropdown = false;
-      errorScriptFormControl.enable();
-    } else {
-      this.hideErrorScriptDropdown = true;
-      errorScriptFormControl.disable();
-    }
+    this.form.setValue(
+      {
+        isDisabled: !options.isEnabled,
+        isAsynchronous: options.isAsynchronous,
+        isInheritable: options.isInheritable,
+        errorScript: options.errorScript ?? ''
+      },
+      { emitEvent: false }
+    );
+    this.isAsynchronousChecked = options.isAsynchronous;
+    this.isInheritableChecked = options.isInheritable;
+    this.hideErrorScriptDropdown = !this.isAsynchronousChecked;
   }
 
   registerOnChange(fn: () => void) {
@@ -118,8 +118,10 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnInit, OnD
     }
   }
 
-  ngOnInit(): void {
-    this.errorScriptOptions = this.errorScriptConstraint?.constraints ?? [];
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['errorScriptConstraint']) {
+      this.errorScriptOptions = this.errorScriptConstraint?.constraints ?? [];
+    }
   }
 
   ngOnDestroy() {
@@ -127,13 +129,6 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnInit, OnD
   }
 
   toggleErrorScriptDropdown(value: MatCheckboxChange) {
-    const formControl: AbstractControl = this.form.get('errorScript');
-    if (value.checked) {
-      this.hideErrorScriptDropdown = false;
-      formControl.enable();
-    } else {
-      this.hideErrorScriptDropdown = true;
-      formControl.disable();
-    }
+    this.hideErrorScriptDropdown = !value.checked;
   }
 }