[ACS-3886] Fix edit button being disabled when opening edit rule dialog initially (#2754)

* [ACS-3886] Fix edit button being disabled when opening edit rule dialog initially

* Fix test

projects/aca-folder-rules/src/lib/model/rule-action.model.ts

@@ -25,11 +25,11 @@
 
 export interface RuleAction {
   actionDefinitionId: string;
-  params: { [key: string]: unknown };
+  params?: { [key: string]: unknown };
 }
 
 export const isRuleAction = (obj): obj is RuleAction =>
-  typeof obj === 'object' && typeof obj.actionDefinitionId === 'string' && typeof obj.params === 'object';
+  typeof obj === 'object' && typeof obj.actionDefinitionId === 'string' && (obj.params === undefined || typeof obj.params === 'object');
 export const isRuleActions = (obj): obj is RuleAction[] =>
   typeof obj === 'object' && obj instanceof Array && obj.reduce((acc, curr) => acc && isRuleAction(curr), true);
 

projects/aca-folder-rules/src/lib/rule-details/edit-rule-dialog.smart-component.html

@@ -21,7 +21,7 @@
       [aspects]="aspects$ | async"
       [value]="model"
       (formValueChanged)="formValue = $event"
-      (formValidationChanged)="formValid = $event">
+      (formValidationChanged)="onFormValidChange($event)">
     </aca-rule-details>
   </ng-template>
 </mat-dialog-content>

projects/aca-folder-rules/src/lib/rule-details/edit-rule-dialog.smart-component.spec.ts

@@ -35,8 +35,9 @@ import { RuleActionListUiComponent } from './actions/rule-action-list.ui-compone
 import { RuleActionUiComponent } from './actions/rule-action.ui-component';
 import { ActionsService } from '../services/actions.service';
 import { RuleOptionsUiComponent } from './options/rule-options.ui-component';
+import { timer } from 'rxjs';
 
-describe('EditRuleDialogComponent', () => {
+describe('EditRuleDialogSmartComponent', () => {
   let fixture: ComponentFixture<EditRuleDialogSmartComponent>;
   let actionsService: ActionsService;
 
@@ -65,6 +66,7 @@ describe('EditRuleDialogComponent', () => {
 
     actionsService = TestBed.inject(ActionsService);
     spyOn(actionsService, 'loadActionDefinitions').and.stub();
+    spyOn(actionsService, 'loadAspects').and.stub();
 
     fixture = TestBed.createComponent(EditRuleDialogSmartComponent);
     fixture.detectChanges();
@@ -75,15 +77,20 @@ describe('EditRuleDialogComponent', () => {
       setupBeforeEach();
     });
 
-    it('should activate the submit button only when a valid state is received', () => {
+    it('should activate the submit button only when a valid state is received', async () => {
       const submitButton = fixture.debugElement.query(By.css('[data-automation-id="edit-rule-dialog-submit"]')).nativeElement as HTMLButtonElement;
       const ruleDetails = fixture.debugElement.query(By.directive(RuleDetailsUiComponent)).componentInstance as RuleDetailsUiComponent;
       ruleDetails.formValidationChanged.emit(true);
 
+      fixture.detectChanges();
+      // timer needed to wait for the next tick to avoid ExpressionChangedAfterItHasBeenCheckedError
+      await timer(1).toPromise();
       fixture.detectChanges();
       expect(submitButton.disabled).toBeFalsy();
       ruleDetails.formValidationChanged.emit(false);
 
+      fixture.detectChanges();
+      await timer(1).toPromise();
       fixture.detectChanges();
       expect(submitButton.disabled).toBeTruthy();
     });

projects/aca-folder-rules/src/lib/rule-details/edit-rule-dialog.smart-component.ts

@@ -72,4 +72,11 @@ export class EditRuleDialogSmartComponent implements OnInit {
     this.actionsService.loadAspects();
     this.actionsService.loadActionDefinitions();
   }
+
+  onFormValidChange(isValid: boolean) {
+    // setTimeout needed to avoid ExpressionChangedAfterItHasBeenCheckedError
+    setTimeout(() => {
+      this.formValid = isValid;
+    }, 0);
+  }
 }