[ADF-4530] StartTaskCloud - fix process definition list for empty names (#4790)

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

* [ADF-4530] - lint

* [ADF-4530] - fix unit test

* [ADF-4530] StartTaskCloud - fix process definition list for empty names

* [ADF-4530] - lint

* [ADF-4530] - add unit test

* [ADF4530] StartProcess - revert changes

* [ADF-4530] - revert changes

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

@@ -11,9 +11,9 @@
         <form [formGroup]="processForm">
             <mat-form-field class="adf-process-input-container">
                 <mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}</mat-label>
-                <input 
+                <input
                     matInput
-                    formControlName="processInstanceName" 
+                    formControlName="processInstanceName"
                     id="processName">
                 <mat-error id="adf-start-process-required-error" *ngIf="processInstanceName.hasError('required')">
                     {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
@@ -25,16 +25,16 @@
 
             <mat-form-field class="adf-process-input-container">
                 <mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate }}</mat-label>
-                <input 
+                <input
                     #inputAutocomplete
-                    matInput 
+                    matInput
-                    formControlName="processDefinition" 
+                    formControlName="processDefinition"
-                    [matAutocomplete]="auto" 
+                    [matAutocomplete]="auto"
                     id="processDefinitionName">
                 <div class="adf-process-input-autocomplete">
                     <mat-autocomplete #auto="matAutocomplete" id="processDefinitionOptions" [displayWith]="displayProcessNameOnDropdown">
-                        <mat-option *ngFor="let processDef of filteredProcesses" [value]="processDef.name">
+                        <mat-option *ngFor="let processDef of filteredProcesses" [value]="getProcessDefinitionValue(processDef)">
-                            {{ processDef.name }}
+                            {{ getProcessDefinitionValue(processDef) }}
                         </mat-option>
                     </mat-autocomplete>
                     <button id="adf-select-process-dropdown" *ngIf="showSelectProcessDropdown" mat-icon-button (click)="displayDropdown($event)">
@@ -55,16 +55,16 @@
             </mat-card-subtitle>
         </mat-card-content>
     </ng-template>
-    
+
     <mat-card-actions>
         <button mat-button (click)="cancelStartProcess()" id="cancel_process">
             {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.CANCEL' | translate | uppercase}}
         </button>
-        <button 
+        <button
-            color="primary" 
+            color="primary"
-            mat-button 
+            mat-button
-            [disabled]="!processForm.valid || isLoading" 
+            [disabled]="!processForm.valid || isLoading"
-            (click)="startProcess()" 
+            (click)="startProcess()"
             data-automation-id="btn-start"
             id="button-start" class="btn-start">
             {{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.START' | translate | uppercase}}

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

@@ -24,7 +24,7 @@ import { StartProcessCloudService } from '../services/start-process-cloud.servic
 import { StartProcessCloudComponent } from './start-process-cloud.component';
 import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
 import { ProcessCloudModule } from '../../process-cloud.module';
-import { fakeProcessDefinitions, fakeProcessInstance, fakeProcessPayload } from '../mock/start-process.component.mock';
+import { fakeProcessDefinitions, fakeProcessInstance, fakeProcessPayload, fakeNoNameProcessDefinitions } from '../mock/start-process.component.mock';
 import { By } from '@angular/platform-browser';
 
 describe('StartProcessCloudComponent', () => {
@@ -145,6 +145,20 @@ describe('StartProcessCloudComponent', () => {
             });
         });
 
+        it('should display the key when the processDefinition name is empty or null', () => {
+            component.processDefinitionList = fakeNoNameProcessDefinitions;
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                const selectElement = fixture.nativeElement.querySelector('mat-select > .mat-select-trigger');
+                const optionElement = fixture.nativeElement.querySelectorAll('mat-option');
+                selectElement.click();
+                expect(selectElement).not.toBeNull();
+                expect(selectElement).toBeDefined();
+                expect(optionElement).not.toBeNull();
+                expect(optionElement[0].textContent).toBe('NewProcess 1');
+            });
+        });
+
         it('should indicate an error to the user if process defs cannot be loaded', async(() => {
             getDefinitionsSpy = getDefinitionsSpy.and.returnValue(throwError({}));
             const change = new SimpleChange('myApp', 'myApp1', true);
@@ -393,19 +407,6 @@ describe('StartProcessCloudComponent', () => {
             component.startProcess();
         });
 
-        it('should emit error when process name exceeds maximum length', () => {
-            component.maxNameLength = 2;
-            component.ngOnInit();
-            fixture.detectChanges();
-            const processInstanceName = component.processForm.controls['processInstanceName'];
-            processInstanceName.setValue('task');
-            fixture.detectChanges();
-            expect(processInstanceName.valid).toBeFalsy();
-            processInstanceName.setValue('ta');
-            fixture.detectChanges();
-            expect(processInstanceName.valid).toBeTruthy();
-        });
-
         it('should emit error when process name field is empty', () => {
             fixture.detectChanges();
             const processInstanceName = component.processForm.controls['processInstanceName'];

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

@@ -120,18 +120,20 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
             StartProcessCloudComponent.MAX_NAME_LENGTH : this.maxNameLength;
     }
 
-    setProcessDefinitionOnForm(processDefinitionName: string) {
+    setProcessDefinitionOnForm(processDefinition: string) {
-        this.filteredProcesses = this.getProcessDefinitionList(processDefinitionName);
+        this.filteredProcesses = this.getProcessDefinitionList(processDefinition);
-        const selectedProcess = this.getProcessIfExists(processDefinitionName);
+        const selectedProcess = this.getProcessIfExists(processDefinition);
         this.processPayloadCloud.processDefinitionKey = selectedProcess.key;
     }
 
-    private getProcessDefinitionList(processDefinitionName: string): ProcessDefinitionCloud[] {
+    private getProcessDefinitionList(processDefinition: string): ProcessDefinitionCloud[] {
-        return this.processDefinitionList.filter((option) => this.isValidName(option.name) && option.name.toLowerCase().includes(processDefinitionName.toLowerCase()));
+        return this.processDefinitionList.filter((option) => {
+            return !processDefinition || this.getProcessDefinition(option, processDefinition);
+        });
     }
 
-    private getProcessIfExists(processDefinitionName: string): ProcessDefinitionCloud {
+    private getProcessIfExists(processDefinition: string): ProcessDefinitionCloud {
-        let matchedProcess = this.processDefinitionList.find((option) => this.isValidName(option.name) && option.name.toLowerCase() === processDefinitionName.toLowerCase());
+        let matchedProcess = this.processDefinitionList.find((option) => this.getProcessDefinition(option, processDefinition) );
         if (!matchedProcess) {
             matchedProcess = new ProcessDefinitionCloud();
         }
@@ -172,6 +174,11 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
         return !!name;
     }
 
+    private getProcessDefinition(option: ProcessDefinitionCloud, processDefinition: string): boolean {
+        return (this.isValidName(option.name) && option.name.toLowerCase().includes(processDefinition.toLowerCase())) ||
+                 (option.key.toLowerCase().includes(processDefinition.toLowerCase()));
+    }
+
     isProcessDefinitionsEmpty(): boolean {
         return this.processDefinitionList.length === 0;
     }
@@ -246,6 +253,10 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
         };
     }
 
+    getProcessDefinitionValue(process: ProcessDefinitionCloud): string {
+        return !!process.name ? process.name : process.key;
+    }
+
     public whitespaceValidator(control: FormControl) {
         const isWhitespace = (control.value || '').trim().length === 0;
         const isValid = !isWhitespace;

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

@@ -48,6 +48,23 @@ export let fakeProcessDefinitions: ProcessDefinitionCloud[] = [
     })
 ];
 
+export let fakeNoNameProcessDefinitions: ProcessDefinitionCloud[] = [
+    new ProcessDefinitionCloud({
+        appName: 'myApp',
+        appVersion: 0,
+        id: 'NewProcess:1',
+        key: 'NewProcess 1',
+        name: ''
+    }),
+    new ProcessDefinitionCloud({
+        appName: 'myApp',
+        appVersion: 0,
+        id: 'NewProcess:2',
+        key: 'NewProcess 2',
+        name: null
+    })
+];
+
 export let fakeProcessPayload = new ProcessPayloadCloud({
     processDefinitionKey: 'NewProcess:1',
     name: 'NewProcess 1',