[ACS-4075] - Folder Rules bugfix: Execute Script uses node ref picker instead of dropdown (#2875)

* ACS-4075 - redisigned edit-rule-dialog from smart to ui component

* ACS-4075 - deleted 'console.log()'

* ACS-4075 - added type

projects/aca-folder-rules/src/lib/folder-rules.module.ts

@@ -29,7 +29,7 @@ import { NgModule } from '@angular/core';
 import * as rules from './folder-rules.rules';
 import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from '@angular/router';
-import { EditRuleDialogSmartComponent } from './rule-details/edit-rule-dialog.smart-component';
+import { EditRuleDialogUiComponent } from './rule-details/edit-rule-dialog.ui-component';
 import { ManageRulesSmartComponent } from './manage-rules/manage-rules.smart-component';
 import { RuleCompositeConditionUiComponent } from './rule-details/conditions/rule-composite-condition.ui-component';
 import { RuleDetailsUiComponent } from './rule-details/rule-details.ui-component';
@@ -66,7 +66,7 @@ const routes: Routes = [
     ContentNodeSelectorModule
   ],
   declarations: [
-    EditRuleDialogSmartComponent,
+    EditRuleDialogUiComponent,
     ManageRulesSmartComponent,
     RuleActionListUiComponent,
     RuleActionUiComponent,

projects/aca-folder-rules/src/lib/manage-rules/manage-rules.smart-component.ts

@@ -26,12 +26,12 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { Location } from '@angular/common';
 import { FolderRulesService } from '../services/folder-rules.service';
-import { Observable, Subject } from 'rxjs';
+import { Observable, Subject, Subscription } from 'rxjs';
 import { Rule } from '../model/rule.model';
 import { ActivatedRoute } from '@angular/router';
 import { NodeInfo } from '@alfresco/aca-shared/store';
 import { delay, takeUntil } from 'rxjs/operators';
-import { EditRuleDialogSmartComponent } from '../rule-details/edit-rule-dialog.smart-component';
+import { EditRuleDialogUiComponent } from '../rule-details/edit-rule-dialog.ui-component';
 import { MatDialog } from '@angular/material/dialog';
 import { ConfirmDialogComponent } from '@alfresco/adf-content-services';
 import { NotificationService } from '@alfresco/adf-core';
@@ -41,6 +41,7 @@ import { FolderRuleSetsService } from '../services/folder-rule-sets.service';
 import { RuleSet } from '../model/rule-set.model';
 import { RuleSetPickerSmartComponent } from '../rule-set-picker/rule-set-picker.smart-component';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { ActionParameterConstraint } from '../model/action-parameter-constraint.model';
 
 @Component({
   selector: 'aca-manage-rules',
@@ -64,8 +65,10 @@ export class ManageRulesSmartComponent implements OnInit, OnDestroy {
 
   actionsLoading$: Observable<boolean>;
   actionDefinitions$: Observable<ActionDefinitionTransformed[]>;
+  parameterConstraints$: Observable<ActionParameterConstraint[]>;
 
   private destroyed$ = new Subject<void>();
+  private _actionDefinitionsSub: Subscription;
 
   constructor(
     private location: Location,
@@ -88,6 +91,7 @@ export class ManageRulesSmartComponent implements OnInit, OnDestroy {
 
     this.actionsLoading$ = this.actionsService.loading$.pipe(delay(0));
     this.actionDefinitions$ = this.actionsService.actionDefinitionsListing$;
+    this.parameterConstraints$ = this.actionsService.parameterConstraints$;
 
     this.folderRulesService.deletedRuleId$.pipe(takeUntil(this.destroyed$)).subscribe((deletedRuleId) => this.onRuleDelete(deletedRuleId));
 
@@ -103,11 +107,16 @@ export class ManageRulesSmartComponent implements OnInit, OnDestroy {
         this.folderRuleSetsService.loadRuleSets(this.nodeId);
       }
     });
+
+    this._actionDefinitionsSub = this.actionDefinitions$.subscribe((actionDefinitions: ActionDefinitionTransformed[]) =>
+      this.actionsService.loadActionParameterConstraints(actionDefinitions)
+    );
   }
 
   ngOnDestroy() {
     this.destroyed$.next();
     this.destroyed$.complete();
+    this._actionDefinitionsSub.unsubscribe();
   }
 
   goBack(): void {
@@ -119,12 +128,14 @@ export class ManageRulesSmartComponent implements OnInit, OnDestroy {
   }
 
   openCreateUpdateRuleDialog(model = {}) {
-    const dialogRef = this.matDialogService.open(EditRuleDialogSmartComponent, {
+    const dialogRef = this.matDialogService.open(EditRuleDialogUiComponent, {
       width: '90%',
       panelClass: 'aca-edit-rule-dialog-container',
       data: {
         model,
-        nodeId: this.nodeId
+        nodeId: this.nodeId,
+        parameterConstraints$: this.parameterConstraints$,
+        actionDefinitions$: this.actionDefinitions$
       }
     });
 

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

@@ -24,7 +24,7 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { EditRuleDialogOptions, EditRuleDialogSmartComponent } from './edit-rule-dialog.smart-component';
+import { EditRuleDialogOptions, EditRuleDialogUiComponent } from './edit-rule-dialog.ui-component';
 import { By } from '@angular/platform-browser';
 import { RuleDetailsUiComponent } from './rule-details.ui-component';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -33,23 +33,22 @@ import { RuleCompositeConditionUiComponent } from './conditions/rule-composite-c
 import { RuleTriggersUiComponent } from './triggers/rule-triggers.ui-component';
 import { RuleActionListUiComponent } from './actions/rule-action-list.ui-component';
 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';
+import { of, timer } from 'rxjs';
 
 describe('EditRuleDialogSmartComponent', () => {
-  let fixture: ComponentFixture<EditRuleDialogSmartComponent>;
+  let fixture: ComponentFixture<EditRuleDialogUiComponent>;
 
   const dialogRef = {
     close: jasmine.createSpy('close'),
     open: jasmine.createSpy('open')
   };
 
-  const setupBeforeEach = (dialogOptions: EditRuleDialogOptions = {}) => {
+  const setupBeforeEach = (dialogOptions: EditRuleDialogOptions = { actionDefinitions$: of([]), parameterConstraints$: of([]) }) => {
     TestBed.configureTestingModule({
       imports: [CoreTestingModule],
       declarations: [
-        EditRuleDialogSmartComponent,
+        EditRuleDialogUiComponent,
         RuleCompositeConditionUiComponent,
         RuleDetailsUiComponent,
         RuleTriggersUiComponent,
@@ -63,10 +62,7 @@ describe('EditRuleDialogSmartComponent', () => {
       ]
     });
 
-    spyOn(ActionsService.prototype, 'loadActionDefinitions').and.stub();
+    fixture = TestBed.createComponent(EditRuleDialogUiComponent);
-    spyOn(ActionsService.prototype, 'getParameterConstraints').and.stub();
-
-    fixture = TestBed.createComponent(EditRuleDialogSmartComponent);
     fixture.detectChanges();
   };
 
@@ -110,7 +106,9 @@ describe('EditRuleDialogSmartComponent', () => {
     const dialogOptions: EditRuleDialogOptions = {
       model: {
         id: 'rule-id'
-      }
+      },
+      actionDefinitions$: of([]),
+      parameterConstraints$: of([])
     };
 
     beforeEach(() => {

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

@@ -8,23 +8,14 @@
 </div>
 
 <mat-dialog-content class="aca-edit-rule-dialog__content">
-  <div class="aca-edit-rule-dialog__content__spinner" *ngIf="loading$ | async; else ruleDetails">
+  <aca-rule-details
-    <mat-progress-spinner
+    [actionDefinitions]="actionDefinitions$ | async"
-      color="primary"
+    [parameterConstraints]="parameterConstraints$ | async"
-      mode="indeterminate">
+    [value]="model"
-    </mat-progress-spinner>
+    [nodeId]="nodeId"
-  </div>
+    (formValueChanged)="formValue = $event"
-
+    (formValidationChanged)="onFormValidChange($event)">
-  <ng-template #ruleDetails>
+  </aca-rule-details>
-    <aca-rule-details
-      [actionDefinitions]="actionDefinitions$ | async"
-      [parameterConstraints]="parameterConstraints$ | async"
-      [value]="model"
-      [nodeId]="nodeId"
-      (formValueChanged)="formValue = $event"
-      (formValidationChanged)="onFormValidChange($event)">
-    </aca-rule-details>
-  </ng-template>
 </mat-dialog-content>
 
 <mat-dialog-actions align="end" class="aca-edit-rule-dialog__footer">

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

@@ -23,38 +23,41 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, EventEmitter, Inject, OnInit, OnDestroy, Output, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, Inject, Output, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Rule } from '../model/rule.model';
-import { ActionsService } from '../services/actions.service';
+import { Observable } from 'rxjs';
+import { ActionDefinitionTransformed } from '../model/rule-action.model';
+import { ActionParameterConstraint } from '../model/action-parameter-constraint.model';
 
 export interface EditRuleDialogOptions {
   model?: Partial<Rule>;
   nodeId?: string;
+  actionDefinitions$?: Observable<ActionDefinitionTransformed[]>;
+  parameterConstraints$?: Observable<ActionParameterConstraint[]>;
 }
 
 @Component({
   selector: 'aca-edit-rule-dialog',
-  templateUrl: './edit-rule-dialog.smart-component.html',
+  templateUrl: './edit-rule-dialog.ui-component.html',
-  styleUrls: ['./edit-rule-dialog.smart-component.scss'],
+  styleUrls: ['./edit-rule-dialog.ui-component.scss'],
   encapsulation: ViewEncapsulation.None,
-  host: { class: 'aca-edit-rule-dialog' },
+  host: { class: 'aca-edit-rule-dialog' }
-  providers: [ActionsService]
 })
-export class EditRuleDialogSmartComponent implements OnInit, OnDestroy {
+export class EditRuleDialogUiComponent {
   formValid = false;
   model: Partial<Rule>;
   nodeId = '';
+  actionDefinitions$;
+  parameterConstraints$;
   formValue: Partial<Rule>;
   @Output() submitted = new EventEmitter<Partial<Rule>>();
-  actionDefinitions$ = this.actionsService.actionDefinitionsListing$;
-  loading$ = this.actionsService.loading$;
-  parameterConstraints$ = this.actionsService.parameterConstraints$;
-  private _actionDefinitionsSub;
 
-  constructor(@Inject(MAT_DIALOG_DATA) public data: EditRuleDialogOptions, private actionsService: ActionsService) {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: EditRuleDialogOptions) {
     this.model = this.data?.model || {};
     this.nodeId = this.data?.nodeId;
+    this.actionDefinitions$ = this.data?.actionDefinitions$;
+    this.parameterConstraints$ = this.data?.parameterConstraints$;
   }
 
   get isUpdateMode(): boolean {
@@ -73,17 +76,6 @@ export class EditRuleDialogSmartComponent implements OnInit, OnDestroy {
     this.submitted.emit(this.formValue);
   }
 
-  ngOnInit() {
-    this.actionsService.loadActionDefinitions();
-    this._actionDefinitionsSub = this.actionDefinitions$.subscribe((actionDefinitions) =>
-      this.actionsService.loadActionParameterConstraints(actionDefinitions)
-    );
-  }
-
-  ngOnDestroy() {
-    this._actionDefinitionsSub.unsubscribe();
-  }
-
   onFormValidChange(isValid: boolean) {
     // setTimeout needed to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {