AAE-23830 Fix chips positioning and filter render logic in process filters (#10015)

* AAE-23830 Fix labels and chips positioning in workspace process filters

* AAE-23830 fix tests and add a loop tracker

* AAE-23830 @ehsan-2019 comments fixes

* AAE-23830 convert readonly detection to if else

* AAE-23830 fix failures in process filters

* AAE-23830 added condition to avoid enabling formControl when unnecessary

* AAE-23830 move the input back to the chip grid

lib/process-services-cloud/src/lib/people/components/people-cloud.component.html

@@ -16,7 +16,7 @@
                     cancel
                 </mat-icon>
             </mat-chip-row>
-            <input [disabled]="isReadonly()" matInput
+            <input matInput
                    #chipInput
                    [formControl]="searchUserCtrl"
                    [matAutocomplete]="auto"
@@ -29,6 +29,7 @@
                    data-automation-id="adf-people-cloud-search-input" #userInput>
         </mat-chip-grid>
 
+
         <mat-autocomplete autoActiveFirstOption class="adf-people-cloud-list"
                           #auto="matAutocomplete"
                           (optionSelected)="onSelect($event.option.value)"

lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts

@@ -182,6 +182,12 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
                 this.invalidUsers = [];
             }
         }
+
+        if (this.isReadonly() && this.searchUserCtrl.enabled) {
+            this.searchUserCtrl.disable();
+        } else if (!this.isReadonly() && this.searchUserCtrl.disabled) {
+            this.searchUserCtrl.enable();
+        }
     }
 
     private initSearch(): void {

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html

@@ -24,7 +24,7 @@
         <ng-container *ngIf="!isLoading">
             <form [formGroup]="editProcessFilterForm" *ngIf="editProcessFilterForm" class="adf-edit-process-filter-content">
                 <div class="adf-edit-process-filter-form">
-                    <ng-container *ngFor="let processFilterProperty of processFilterProperties">
+                    <ng-container *ngFor="let processFilterProperty of processFilterProperties; trackBy: filterTracker">
                         <mat-form-field [floatLabel]="'auto'" *ngIf="processFilterProperty.type === 'select'" [attr.data-automation-id]="processFilterProperty.key">
                             <mat-label class="adf-edit-process-filter-content__select-label">{{processFilterProperty.label | translate}}</mat-label>
                             <mat-select
@@ -38,8 +38,8 @@
                             </mat-select>
                         </mat-form-field>
                         <mat-form-field [floatLabel]="'auto'" *ngIf="processFilterProperty.type === 'multi-select'" [attr.data-automation-id]="processFilterProperty.key">
+                            <mat-label class="adf-edit-process-filter-content__select-label">{{processFilterProperty.label | translate}}</mat-label>
                             <mat-select
-                                placeholder="{{processFilterProperty.label | translate}}"
                                 [formControlName]="processFilterProperty.key"
                                 [attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key"
                                 [multiple]="true">

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts

@@ -692,6 +692,61 @@ describe('EditProcessFilterCloudComponent', () => {
         expect(await options[0].getText()).toEqual('ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.PROCESS_NAME');
     });
 
+    it('should not reset process definitions instance after filter update', () => {
+        const getProcessDefinitionsSpy = spyOn(processService, 'getProcessDefinitions').and.returnValue(
+            of([new ProcessDefinitionCloud({ id: 'fake-id', name: 'fake-name' })])
+        );
+        component.filterProperties = ['processDefinitionName'];
+
+        const processFilterIdChange = new SimpleChange(null, 'changed-mock-process-filter-id', true);
+        component.ngOnChanges({ id: processFilterIdChange });
+        fixture.detectChanges();
+
+        const formerProcessDefinitions = component.processDefinitionNames;
+        const processFilterIdChange2 = new SimpleChange(null, 'changed-mock-process-filter-id', true);
+        component.ngOnChanges({ id: processFilterIdChange2 });
+        fixture.detectChanges();
+
+        expect(getProcessDefinitionsSpy).toHaveBeenCalledTimes(2);
+        expect(component.processDefinitionNames).toBeTruthy();
+        expect(component.processDefinitionNames).toBe(formerProcessDefinitions);
+    });
+
+    it('should not reset application names instance after filter update', () => {
+        component.filterProperties = ['appName'];
+
+        const processFilterIdChange = new SimpleChange(null, 'changed-mock-process-filter-id', true);
+        component.ngOnChanges({ id: processFilterIdChange });
+        fixture.detectChanges();
+
+        const formerProcessDefinitions = component.applicationNames;
+        const processFilterIdChange2 = new SimpleChange(null, 'changed-mock-process-filter-id', true);
+        component.ngOnChanges({ id: processFilterIdChange2 });
+        fixture.detectChanges();
+
+        expect(getRunningApplicationsSpy).toHaveBeenCalledTimes(2);
+        expect(component.applicationNames).toBeTruthy();
+        expect(component.applicationNames).toBe(formerProcessDefinitions);
+    });
+
+    it('should not reset application versions instance after filter update', () => {
+        const getApplicationVersionsSpy = spyOn(processService, 'getApplicationVersions').and.returnValue(of(mockAppVersions));
+        component.filterProperties = ['appVersionMultiple'];
+
+        const processFilterIdChange = new SimpleChange(null, 'changed-mock-process-filter-id', true);
+        component.ngOnChanges({ id: processFilterIdChange });
+        fixture.detectChanges();
+
+        const formerProcessDefinitions = component.appVersionOptions;
+        const processFilterIdChange2 = new SimpleChange(null, 'changed-mock-process-filter-id', true);
+        component.ngOnChanges({ id: processFilterIdChange2 });
+        fixture.detectChanges();
+
+        expect(getApplicationVersionsSpy).toHaveBeenCalledTimes(2);
+        expect(component.appVersionOptions).toBeTruthy();
+        expect(component.appVersionOptions).toBe(formerProcessDefinitions);
+    });
+
     describe('edit filter actions', () => {
         beforeEach(() => {
             const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts

@@ -152,7 +152,6 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
 
         this.processFilterProperties = this.createAndFilterProperties();
         this.processFilterActions = this.createAndFilterActions();
-
         this.buildForm(this.processFilterProperties);
 
         if (isChanged) {
@@ -219,6 +218,10 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
         this.onDestroy$.complete();
     }
 
+    filterTracker(_index: number, item: ProcessFilterProperties) {
+        return item.key;
+    }
+
     buildForm(processFilterProperties: ProcessFilterProperties[]) {
         this.editProcessFilterForm = this.formBuilder.group(this.getFormControlsConfig(processFilterProperties));
         this.onFilterChange();
@@ -350,9 +353,8 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
     }
 
     getAppVersionOptions() {
-        this.appVersionOptions = [];
-
         this.processCloudService.getApplicationVersions(this.appName).subscribe((appVersions) => {
+            this.appVersionOptions.length = 0;
             appVersions.forEach((appVersion) => {
                 this.appVersionOptions.push({ label: appVersion.entry.version, value: appVersion.entry.version });
             });
@@ -433,10 +435,9 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
     }
 
     getRunningApplications() {
-        this.applicationNames = [];
-
         this.appsProcessCloudService.getDeployedApplicationsByStatus('RUNNING', this.role).subscribe((applications) => {
             if (applications && applications.length > 0) {
+                this.applicationNames.length = 0;
                 applications.map((application) => {
                     this.applicationNames.push({
                         label: this.appsProcessCloudService.getApplicationLabel(application, this.environmentList),
@@ -448,10 +449,9 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
     }
 
     getProcessDefinitions() {
-        this.processDefinitionNames = [];
-
         this.processCloudService.getProcessDefinitions(this.appName).subscribe((processDefinitions) => {
             if (processDefinitions && processDefinitions.length > 0) {
+                this.processDefinitionNames.length = 0;
                 this.processDefinitionNames.push(this.allProcessDefinitionNamesOption);
                 processDefinitions.map((processDefinition) => {
                     this.processDefinitionNames.push({ label: processDefinition.name, value: processDefinition.name });