[ACA-4632] [ACA-4633] Fix error script dropdown not having any options + hide dropdown when isAsynchronous unchecked (#2825)

projects/aca-folder-rules/src/lib/mock/actions.mock.ts

@@ -24,6 +24,7 @@
  */
 
 import { ActionDefinitionTransformed, ActionParameterDefinitionTransformed, RuleAction } from '../model/rule-action.model';
+import { ActionParameterConstraint } from '../model/action-parameter-constraint.model';
 
 export const actionDefListMock = {
   list: {
@@ -187,3 +188,17 @@ export const validActionsMock: RuleAction[] = [
     params: {}
   }
 ];
+
+export const errorScriptConstraintMock: ActionParameterConstraint = {
+  name: 'script-ref',
+  constraints: [
+    {
+      value: 'script-1-value',
+      label: 'Script 1'
+    },
+    {
+      value: 'script-2-value',
+      label: 'Script 2'
+    }
+  ]
+};

projects/aca-folder-rules/src/lib/rule-details/options/rule-options.ui-component.html

@@ -7,12 +7,21 @@
       {{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.IS_ASYNCHRONOUS' | translate }}
     </mat-checkbox>
 
-    <mat-form-field>
+    <mat-form-field [ngClass]="{ 'hide-error-script-dropdown': hideErrorScriptDropdown }">
       <mat-select
         formControlName="errorScript"
         placeholder="{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate}}"
         data-automation-id="rule-option-select-errorScript">
+
         <mat-option value="">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.NO_SCRIPT' | translate }}</mat-option>
+
+        <ng-template ngFor [ngForOf]="errorScriptOptions" let-option>
+          <mat-option
+            [value]="option.value">
+            {{ option.label }}
+          </mat-option>
+        </ng-template>
+
       </mat-select>
     </mat-form-field>
   </div>

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

@@ -11,4 +11,8 @@
   &.read-only .mat-checkbox-inner-container {
     display: none;
   }
+
+  .hide-error-script-dropdown {
+    opacity: 0;
+  }
 }

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

@@ -29,6 +29,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RuleOptionsUiComponent } from './rule-options.ui-component';
 import { CoreTestingModule } from '@alfresco/adf-core';
 import { By } from '@angular/platform-browser';
+import { errorScriptConstraintMock } from '../../mock/actions.mock';
 
 describe('RuleOptionsUiComponent', () => {
   let fixture: ComponentFixture<RuleOptionsUiComponent>;
@@ -112,4 +113,24 @@ describe('RuleOptionsUiComponent', () => {
     expect(getByDataAutomationId('rule-option-checkbox-enabled')).toBeFalsy();
     expect(getByDataAutomationId('rule-option-select-errorScript')).toBeTruthy();
   });
+
+  it('should populate the error script dropdown with scripts', () => {
+    component.writeValue({
+      isEnabled: true,
+      isInheritable: false,
+      isAsynchronous: true,
+      errorScript: ''
+    });
+    component.errorScriptConstraint = errorScriptConstraintMock;
+    fixture.detectChanges();
+
+    (getByDataAutomationId('rule-option-select-errorScript').nativeElement as HTMLElement).click();
+    fixture.detectChanges();
+
+    const matOptions = fixture.debugElement.queryAll(By.css(`.mat-option`));
+    expect(matOptions.length).toBe(3);
+    expect((matOptions[0].nativeElement as HTMLElement).innerText.trim()).toBe('ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.NO_SCRIPT');
+    expect((matOptions[1].nativeElement as HTMLElement).innerText.trim()).toBe('Script 1');
+    expect((matOptions[2].nativeElement as HTMLElement).innerText.trim()).toBe('Script 2');
+  });
 });

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

@@ -23,10 +23,11 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, forwardRef, HostBinding, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { Component, forwardRef, HostBinding, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { RuleOptions } from '../../model/rule.model';
+import { ActionParameterConstraint, ConstraintValue } from '../../model/action-parameter-constraint.model';
 
 @Component({
   selector: 'aca-rule-options',
@@ -60,6 +61,11 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnDestroy {
     this.onTouch();
   });
 
+  hideErrorScriptDropdown = true;
+
+  @Input()
+  errorScriptConstraint: ActionParameterConstraint;
+
   @HostBinding('class.read-only')
   readOnly = false;
 
@@ -73,6 +79,10 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnDestroy {
     return this.form.get('isInheritable').value;
   }
 
+  get errorScriptOptions(): ConstraintValue[] {
+    return this.errorScriptConstraint?.constraints ?? [];
+  }
+
   writeValue(options: RuleOptions) {
     const isAsynchronousFormControl = this.form.get('isAsynchronous');
     const errorScriptFormControl = this.form.get('errorScript');
@@ -81,8 +91,10 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnDestroy {
     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();
     }
   }
@@ -112,8 +124,10 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnDestroy {
   toggleErrorScriptDropdown(value: MatCheckboxChange) {
     const formControl: AbstractControl = this.form.get('errorScript');
     if (value.checked) {
+      this.hideErrorScriptDropdown = false;
       formControl.enable();
     } else {
+      this.hideErrorScriptDropdown = true;
       formControl.disable();
     }
   }

projects/aca-folder-rules/src/lib/rule-details/rule-details.ui-component.html

@@ -54,7 +54,11 @@
 
   <div class="aca-rule-details__form__row" *ngIf="showOptionsSection">
     <div class="label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
-    <aca-rule-options formControlName="options" data-automation-id="rule-details-options-component"></aca-rule-options>
+    <aca-rule-options
+      formControlName="options"
+      data-automation-id="rule-details-options-component"
+      [errorScriptConstraint]="errorScriptConstraint">
+    </aca-rule-options>
   </div>
 
 </form>

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

@@ -125,6 +125,10 @@ export class RuleDetailsUiComponent implements OnInit, OnDestroy {
     return !this.readOnly || this.value.isAsynchronous || this.value.isInheritable;
   }
 
+  get errorScriptConstraint(): ActionParameterConstraint {
+    return this.parameterConstraints.find((parameterConstraint: ActionParameterConstraint) => parameterConstraint.name === 'script-ref');
+  }
+
   ngOnInit() {
     this.form = new UntypedFormGroup({
       id: new UntypedFormControl(this.value.id),