[ADF-4530] StartProcessCloud - fix show process definition dropdown (#4723)

* [ADF-4530] - reset filtered process when value it's empty or invalid

* [ADF-4530] - lint

* [ADF-4530] - fix unit test

* [ADF-4530] - PR changes

* [ADF-4530] - PR changes

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { SimpleChange } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { setupTestBed } from '@alfresco/adf-core';
 import { of, throwError } from 'rxjs';
 import { StartProcessCloudService } from '../services/start-process-cloud.service';
@@ -271,6 +271,22 @@ describe('StartProcessCloudComponent', () => {
             expect(getDefinitionsSpy).toHaveBeenCalled();
             expect(component.processDefinitionList).toBe(fakeProcessDefinitions);
         });
+
+        it('should filter processes in the select list if input is empty', fakeAsync(() => {
+            component.processDefinitionList = fakeProcessDefinitions;
+            component.ngOnInit();
+            component.ngOnChanges({ appName: change });
+            fixture.detectChanges();
+
+            const el = fixture.nativeElement.querySelector('#processDefinitionName');
+            el.value = '';
+            el.dispatchEvent(new Event('keyup'));
+            el.dispatchEvent(new Event('input'));
+            fixture.detectChanges();
+
+            tick(3000);
+            expect(component.filteredProcesses.length).toEqual(1);
+        }));
     });
 
     describe('start process', () => {

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

@@ -17,7 +17,7 @@
 
 import {
     Component, EventEmitter, Input, OnChanges, OnInit,
-    Output, SimpleChanges, ViewChild, ViewEncapsulation
+    Output, SimpleChanges, ViewChild, ViewEncapsulation, OnDestroy
 } from '@angular/core';
 
 import { ProcessInstanceCloud } from '../models/process-instance-cloud.model';
@@ -25,8 +25,9 @@ import { StartProcessCloudService } from '../services/start-process-cloud.servic
 import { FormControl, Validators, FormGroup, AbstractControl, FormBuilder, ValidatorFn } from '@angular/forms';
 import { MatAutocompleteTrigger } from '@angular/material';
 import { ProcessPayloadCloud } from '../models/process-payload-cloud.model';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 import { ProcessDefinitionCloud } from '../models/process-definition-cloud.model';
+import { Subject } from 'rxjs';
 
 @Component({
     selector: 'adf-cloud-start-process',
@@ -34,7 +35,7 @@ import { ProcessDefinitionCloud } from '../models/process-definition-cloud.model
     styleUrls: ['./start-process-cloud.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class StartProcessCloudComponent implements OnChanges, OnInit {
+export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy {
 
     static MAX_NAME_LENGTH: number = 255;
 
@@ -83,6 +84,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
     processPayloadCloud = new ProcessPayloadCloud();
     filteredProcesses: ProcessDefinitionCloud[] = [];
     isLoading = false;
+    protected onDestroy$ = new Subject<boolean>();
     constructor(private startProcessCloudService: StartProcessCloudService,
                 private formBuilder: FormBuilder) {
     }
@@ -95,10 +97,13 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
 
         this.processDefinition.valueChanges
             .pipe(debounceTime(300))
+            .pipe(takeUntil(this.onDestroy$))
             .subscribe((processDefinitionName) => {
                 this.processPayloadCloud.processDefinitionKey = null;
                 if (this.processDefinition.valid) {
                     this.setProcessDefinitionOnForm(processDefinitionName);
+                } else {
+                    this.filteredProcesses = this.getProcessDefinitionList(processDefinitionName);
                 }
             });
     }
@@ -150,8 +155,9 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
     public loadProcessDefinitions() {
         this.resetErrorMessage();
 
-        this.startProcessCloudService.getProcessDefinitions(this.appName).subscribe(
+        this.startProcessCloudService.getProcessDefinitions(this.appName)
-            (processDefinitionRepresentations: ProcessDefinitionCloud[]) => {
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((processDefinitionRepresentations: ProcessDefinitionCloud[]) => {
                 this.processDefinitionList = processDefinitionRepresentations;
                 if (processDefinitionRepresentations.length > 0) {
                     this.selectDefaultProcessDefinition();
@@ -253,4 +259,9 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
     get processDefinition(): AbstractControl {
         return this.processForm.get('processDefinition');
     }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
 }