[ADF-2098] Start Process - the default process definition should be selected (#2794)

* [ADF-2098] Start Process - the default process definition should be selected

* made the start-process component to automatically select Process definition if it is the only definition.

* [ADF-2098] Start Process - the default process definition should be selected

* made the start-process component to automatically select a processDef in start-form if there just one processDef present

* [ADF-2098] Start Process - the default process definition should be selected

* made the start-process component to automatically select a processDef in start-form if there just one processDef present

* Update start-process.component.html

* Update start-process.component.ts

docs/start-process.component.md

@@ -1,6 +1,6 @@
 # Start Process component
 
-Displays Start Process, allowing the user to specify some basic details needed to start a new process instance.
+Displays Start Process, allowing the user to specify some details like process name and process definition, which are the most basic requirement to start a new process instance. The user have to select the process definition from a dropdown if there are more than one process definition available. If there is just one process definition available for the app, then it is auto-selected. There is a error message shown if no process definition is available.
 
 ![adf-start-process ](docassets/images/startProcess.png)
 

lib/process-services/process-list/components/start-process.component.html

@@ -9,7 +9,7 @@
 			<input matInput placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.NAME'|translate}}" [(ngModel)]="name" id="processName" required />
 		</mat-form-field>
         <mat-form-field>
-            <mat-select placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE'|translate}}" [(ngModel)]="currentProcessDef.id" (ngModelChange)="onProcessDefChange($event)" required>
+            <mat-select [compareWith]="compareProcessDef" placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE'|translate}}" [(ngModel)]="currentProcessDef.id" (ngModelChange)="onProcessDefChange($event)" required>
                 <mat-option>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.TYPE_PLACEHOLDER' | translate}}</mat-option>
                 <mat-option *ngFor="let processDef of processDefinitions" [value]="processDef.id">
                     {{ processDef.name }}

lib/process-services/process-list/components/start-process.component.spec.ts

@@ -154,6 +154,18 @@ describe('StartProcessInstanceComponent', () => {
             });
         }));
 
+        it('should auto-select process def from dropdown if there is just one process def', () => {
+            let change = new SimpleChange(null, '123', true);
+            component.ngOnChanges({'appId': change});
+            component.processDefinitions[0] = testProcessDefRepr;
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                let selectElement = fixture.nativeElement.querySelector('mat-select > .mat-select-trigger');
+                expect(selectElement).not.toBeNull();
+                expect(selectElement).toBeDefined();
+                expect(selectElement.innerText).toBe('My Process 1');
+            });
+        });
     });
 
     describe('input changes', () => {
@@ -321,35 +333,39 @@ describe('StartProcessInstanceComponent', () => {
                 let change = new SimpleChange(null, '123', true);
                 component.ngOnChanges({'appId': change});
                 fixture.detectChanges();
-                component.onProcessDefChange('my:process1');
-                fixture.whenStable();
-                startBtn = fixture.nativeElement.querySelector('#button-start');
             }));
 
             it('should have start button disabled when name not filled out', async(() => {
                 component.name = '';
                 fixture.detectChanges();
-                expect(startBtn.disabled).toBe(true);
+                fixture.whenStable().then(() => {
+                    startBtn = fixture.nativeElement.querySelector('#button-start');
+                    expect(startBtn.disabled).toBe(true);
+                });
             }));
 
-            it('should have start button disabled when no process is selected', async(() => {
+            it('should have start button disabled when no process is selected', () => {
                 component.onProcessDefChange('');
                 fixture.detectChanges();
+                startBtn = fixture.nativeElement.querySelector('#button-start');
                 expect(startBtn.disabled).toBe(true);
-            }));
+            });
 
-            it('should enable start button when name and process filled out', async(() => {
+            it('should enable start button when name and process filled out', () => {
+                component.onProcessDefChange('my:process1');
                 fixture.detectChanges();
-                let startButton = fixture.nativeElement.querySelector('#button-start');
+                fixture.whenStable().then(() => {
-                expect(startButton.disabled).toBeFalsy();
+                    startBtn = fixture.nativeElement.querySelector('#button-start');
-            }));
+                    expect(startBtn.disabled).toBe(false);
+                });
+            });
 
-            it('should disable the start process button when process name is empty', async(() => {
+            it('should disable the start process button when process name is empty', () => {
                 component.name = '';
                 fixture.detectChanges();
                 let startButton = fixture.nativeElement.querySelector('#button-start');
-                expect(startButton.disabled).toBeTruthy();
+                expect(startButton.disabled).toBe(true);
-            }));
+            });
 
         });
 

lib/process-services/process-list/components/start-process.component.ts

@@ -95,6 +95,13 @@ export class StartProcessInstanceComponent implements OnChanges {
         }
     }
 
+    compareProcessDef = (processDefId) => {
+        if (this.processDefinitions && this.processDefinitions.length === 1 && processDefId === this.processDefinitions[0].id) {
+            this.onProcessDefChange(processDefId);
+            return true;
+        }
+    }
+
     onProcessDefChange(processDefinitionId) {
         let processDef = this.processDefinitions.find((processDefinition) => {
             return processDefinition.id === processDefinitionId;