[ACA-3358] Show user friendly error templates when there are no applications/processDefinitions (#5746)

* * Added empty template on start process component

* * Removed errorMessageId

* * Added unit tests to recent changes

* * Added doc

* * fixed comments

* * Used showError notification

* * After rebase

* * Fixed failing e2e

* * Fixed comments

lib/process-services/src/lib/i18n/en.json

@@ -273,6 +273,8 @@
     "START_PROCESS": {
       "BUTTON": "Start Process",
       "NO_PROCESS_DEFINITIONS": "You can't start a process as there are no process definitions available",
+      "NO_START_FORM": "No start form",
+      "NO_PROCESS_DEF_SELECTED": "No process definition selected",
       "FORM": {
         "TITLE": "Start Process",
         "LABEL": {

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

@@ -1,116 +1,145 @@
-<div class="adf-start-process">
-    <div class="adf-title" *ngIf="title">{{ title | translate}}</div>
-    <div class="content" *ngIf="isProcessDefinitionEmpty()">
-        <div class="subtitle" id="error-message" *ngIf="errorMessageId">
-            {{errorMessageId|translate}}
-        </div>
-        <div class="adf-start-process-definition-container">
-            <mat-form-field *ngIf="showSelectApplicationDropdown" [floatLabel]="'always'" class="adf-start-process-app-list">
-                <mat-select
-                    placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.SELECT_APPLICATION' | translate}}"
-                    (selectionChange)="onAppSelectionChange($event)"
-                    [(ngModel)]="selectedApplication"
-                    data-automation-id="adf-start-process-apps-drop-down">
-                    <mat-option 
-                        *ngFor="let application of applications"
-                        [value]="application"
-                        [attr.data-automation-id]="'adf-start-process-apps-option-' + application.name">
-                        {{ application.name }}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
-                <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate}}</mat-label>
-                <input
-                    type="text"
-                    matInput
-                    [formControl]="processDefinitionInput"
-                    [matAutocomplete]="auto"
-                    id="processDefinitionName"
-                    #inputAutocomplete>
-                <div class="adf-process-input-autocomplete">
-                    <mat-autocomplete
-                        #auto="matAutocomplete"
-                        id="processDefinitionOptions"
-                        [displayWith]="displayFn">
-                        <mat-option *ngFor="let processDef of filteredProcessesDefinitions$ | async" [value]="processDef.name"
-                        (click)="processDefinitionSelectionChanged(processDef)">
-                            {{ processDef.name }}
-                        </mat-option>
-                    </mat-autocomplete>
-                    <ng-container *ngIf="!isProcessDefinitionsLoading ; else showProcessDefLoadingTemplate">
-                        <button
-                            id="adf-select-process-dropdown"
-                            *ngIf="showSelectProcessDropdown"
-                            mat-icon-button
-                            (click)="displayDropdown($event)">
-                            <mat-icon>arrow_drop_down</mat-icon>
-                        </button>
-                    </ng-container>
-                    <ng-template #showProcessDefLoadingTemplate>
-                        <mat-spinner id="adf-select-process-spinner" [diameter]="20"></mat-spinner>
-                    </ng-template>
-                </div>
-            </mat-form-field>
-        </div>
-        <mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
-            <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.NAME' | translate}}</mat-label>
-            <input
-                matInput
-                [formControl]="processNameInput"
-                id="processName"
-                required/>
-            <mat-error *ngIf="nameController.hasError('maxlength')">
-                {{ 'ADF_PROCESS_LIST.START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxProcessNameLength } }}
-            </mat-error>
-            <mat-error *ngIf="nameController.hasError('required')">
-                {{ 'ADF_PROCESS_LIST.START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
-            </mat-error>
-            <mat-error *ngIf="nameController.hasError('pattern')">
-                {{ 'ADF_PROCESS_LIST.START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }}
-            </mat-error>
-        </mat-form-field>
 
-        <adf-start-form
-            #startForm
-            *ngIf="hasStartForm()"
-            [data]="values"
-            [disableStartProcessButton]="processNameInput.invalid"
-            [processDefinitionId]="selectedProcessDef.id"
-            (outcomeClick)="onOutcomeClick($event)"
-            [showRefreshButton]="false">
-            <button
-                adf-form-custom-button
-                mat-button
-                (click)="cancelStartProcess()"
-                id="cancel_process">
-                {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate | uppercase}}
-            </button>
-        </adf-start-form>
-    </div>
-    <div class="content" *ngIf="hasErrorMessage()">
-        <div class="subtitle" class="error-message" id="no-process-message">
-            {{'ADF_PROCESS_LIST.START_PROCESS.NO_PROCESS_DEFINITIONS' | translate | uppercase}}
+<ng-container *ngIf="isLoading(); then showLoadingTemplate; else showStartProcessTemplate"></ng-container>
+    <ng-template #showLoadingTemplate>
+        <mat-spinner class="adf-start-process-loading"></mat-spinner>
+    </ng-template>
+<ng-template #showStartProcessTemplate>
+    <ng-container *ngIf="hasApplications() || hasProcessDefinitions() ; else showEmptyTemplate">
+        <div class="adf-start-process">
+            <div class="adf-title" *ngIf="title">{{ title | translate}}</div>
+            <div class="content">
+                <div class="adf-start-process-definition-container">
+                    <mat-form-field *ngIf="showSelectApplicationDropdown" [floatLabel]="'always'" class="adf-start-process-app-list">
+                        <mat-select
+                            placeholder="{{ 'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.SELECT_APPLICATION' | translate }}"
+                            (selectionChange)="onAppSelectionChange($event)"
+                            [(ngModel)]="selectedApplication"
+                            data-automation-id="adf-start-process-apps-drop-down">
+                            <mat-option 
+                                *ngFor="let application of applications"
+                                [value]="application"
+                                [attr.data-automation-id]="'adf-start-process-apps-option-' + application.name">
+                                {{ application.name }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
+                        <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate}}</mat-label>
+                        <input
+                            type="text"
+                            matInput
+                            [formControl]="processDefinitionInput"
+                            [matAutocomplete]="auto"
+                            id="processDefinitionName"
+                            #inputAutocomplete>
+                        <div class="adf-process-input-autocomplete">
+                            <mat-autocomplete
+                                #auto="matAutocomplete"
+                                id="processDefinitionOptions"
+                                [displayWith]="displayFn">
+                                <mat-option *ngFor="let processDef of filteredProcessesDefinitions$ | async" [value]="processDef.name"
+                                (click)="processDefinitionSelectionChanged(processDef)">
+                                    {{ processDef.name }}
+                                </mat-option>
+                            </mat-autocomplete>
+                            <ng-container *ngIf="!isProcessDefinitionsLoading ; else showProcessDefLoadingTemplate">
+                                <button
+                                    id="adf-select-process-dropdown"
+                                    *ngIf="showSelectProcessDropdown"
+                                    mat-icon-button
+                                    (click)="displayDropdown($event)"
+                                    [disabled]="disableDropdownButton()">
+                                    <mat-icon>arrow_drop_down</mat-icon>
+                                </button>
+                            </ng-container>
+                            <ng-template #showProcessDefLoadingTemplate>
+                                <mat-spinner id="adf-select-process-spinner" [diameter]="20"></mat-spinner>
+                            </ng-template>
+                        </div>
+                    </mat-form-field>
+                </div>
+                <mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
+                    <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.NAME' | translate}}</mat-label>
+                    <input
+                        matInput
+                        [formControl]="processNameInput"
+                        id="processName"
+                        required/>
+                    <mat-error *ngIf="nameController.hasError('maxlength')">
+                        {{ 'ADF_PROCESS_LIST.START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxProcessNameLength } }}
+                    </mat-error>
+                    <mat-error *ngIf="nameController.hasError('required')">
+                        {{ 'ADF_PROCESS_LIST.START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
+                    </mat-error>
+                    <mat-error *ngIf="nameController.hasError('pattern')">
+                        {{ 'ADF_PROCESS_LIST.START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }}
+                    </mat-error>
+                </mat-form-field>
+        
+                <ng-container *ngIf="!isProcessDefinitionsLoading ; else showStartFormLoadingTemplate">
+                    <ng-container *ngIf="isProcessDefinitionSelected() ; else emptyProcessDefTemplate">
+                        <ng-container  *ngIf="hasStartForm(); else noStartFormTemplate">
+                            <adf-start-form
+                                #startForm
+                                [data]="values"
+                                [disableStartProcessButton]="processNameInput.invalid"
+                                [processDefinitionId]="selectedProcessDef.id"
+                                (outcomeClick)="onOutcomeClick($event)"
+                                [showRefreshButton]="false">
+                                <button
+                                    adf-form-custom-button
+                                    mat-button
+                                    (click)="cancelStartProcess()"
+                                    id="cancel_process">
+                                    {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate | uppercase}}
+                                </button>
+                            </adf-start-form>
+                        </ng-container>
+                        <ng-template #noStartFormTemplate>
+                            <adf-empty-content 
+                                class="adf-start-process-empty-template"
+                                [icon]="'assessment'"
+                                [title]="'ADF_PROCESS_LIST.START_PROCESS.NO_START_FORM'  | translate">
+                            </adf-empty-content>
+                        </ng-template>
+                    </ng-container>
+                    <ng-template #emptyProcessDefTemplate>
+                        <adf-empty-content class="adf-start-process-empty-template"
+                            [icon]="'assessment'"
+                            [title]="'ADF_PROCESS_LIST.START_PROCESS.NO_PROCESS_DEF_SELECTED'  | translate">
+                        </adf-empty-content>
+                    </ng-template>
+                </ng-container>
+                <ng-template #showStartFormLoadingTemplate>
+                    <mat-spinner class="adf-start-process-loading"></mat-spinner>
+                </ng-template>
+            </div>
+            <div class="mat-content-actions" *ngIf="!hasStartForm()">
+                <button
+                    mat-button
+                    *ngIf="!hasStartForm()"
+                    (click)="cancelStartProcess()"
+                    id="cancel_process">
+                    {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate | uppercase}}
+                </button>
+                <button
+                    color="primary"
+                    mat-button
+                    *ngIf="!hasStartForm()"
+                    [disabled]="!validateForm()"
+                    (click)="startProcess()"
+                    data-automation-id="btn-start"
+                    id="button-start"
+                    class="btn-start">
+                    {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.START' | translate | uppercase}}
+                </button>
+            </div>
         </div>
-    </div>
-    <div class="mat-content-actions" *ngIf="!hasStartForm()">
-        <button
-            mat-button
-            *ngIf="!hasStartForm()"
-            (click)="cancelStartProcess()"
-            id="cancel_process">
-            {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate | uppercase}}
-        </button>
-        <button
-            color="primary"
-            mat-button
-            *ngIf="!hasStartForm()"
-            [disabled]="!validateForm()"
-            (click)="startProcess()"
-            data-automation-id="btn-start"
-            id="button-start"
-            class="btn-start">
-            {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.START' | translate | uppercase}}
-        </button>
-    </div>
-</div>
+    </ng-container>
+        <ng-template #showEmptyTemplate>
+            <adf-empty-content class="adf-start-process-empty-template"
+                [icon]="'assessment'"
+                [title]="'ADF_PROCESS_LIST.START_PROCESS.NO_PROCESS_DEFINITIONS' | translate">
+            </adf-empty-content>
+        </ng-template>    
+</ng-template>

lib/process-services/src/lib/process-list/components/start-process.component.scss

@@ -65,4 +65,9 @@
             margin-right: auto;
         }
     }
+
+    .adf-start-process-loading {
+        margin-left: calc((100% - 100px) / 2);
+        margin-right: calc((100% - 100px) / 2);
+    }
 }

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

@@ -306,20 +306,6 @@ describe('StartFormComponent', () => {
             });
         });
 
-        it('should indicate an error to the user if process defs cannot be loaded', async(() => {
-            getDefinitionsSpy = getDefinitionsSpy.and.returnValue(throwError({}));
-            component.appId = 123;
-            const change = new SimpleChange(null, 123, true);
-            component.ngOnChanges({ 'appId': change });
-            fixture.detectChanges();
-
-            fixture.whenStable().then(() => {
-                const errorEl = fixture.nativeElement.querySelector('#error-message');
-                expect(errorEl).not.toBeNull('Expected error message to be present');
-                expect(errorEl.innerText.trim()).toBe('ADF_PROCESS_LIST.START_PROCESS.ERROR.LOAD_PROCESS_DEFS');
-            });
-        }));
-
         it('should show no process available message when no process definition is loaded', async(() => {
             getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of([]));
             component.appId = 123;
@@ -328,7 +314,7 @@ describe('StartFormComponent', () => {
             fixture.detectChanges();
 
             fixture.whenStable().then(() => {
-                const noProcessElement = fixture.nativeElement.querySelector('#no-process-message');
+                const noProcessElement = fixture.nativeElement.querySelector('.adf-empty-content__title');
                 expect(noProcessElement).not.toBeNull('Expected no available process message to be present');
                 expect(noProcessElement.innerText.trim()).toBe('ADF_PROCESS_LIST.START_PROCESS.NO_PROCESS_DEFINITIONS');
             });
@@ -501,30 +487,6 @@ describe('StartFormComponent', () => {
             });
         }));
 
-        it('should throw error event when process cannot be started', async(() => {
-            const errorSpy = spyOn(component.error, 'error');
-            const error = { message: 'My error' };
-            startProcessSpy = startProcessSpy.and.returnValue(throwError(error));
-            component.selectedProcessDef = testProcessDef;
-            component.startProcess();
-            fixture.whenStable().then(() => {
-                expect(errorSpy).toHaveBeenCalledWith(error);
-            });
-        }));
-
-        it('should indicate an error to the user if process cannot be started', async(() => {
-            fixture.detectChanges();
-            startProcessSpy = startProcessSpy.and.returnValue(throwError({}));
-            component.selectedProcessDef = testProcessDef;
-            component.startProcess();
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                const errorEl = fixture.nativeElement.querySelector('#error-message');
-                expect(errorEl).not.toBeNull();
-                expect(errorEl.innerText.trim()).toBe('ADF_PROCESS_LIST.START_PROCESS.ERROR.START');
-            });
-        }));
-
         it('should emit start event when start select a process and add a name', (done) => {
             const disposableStart = component.start.subscribe(() => {
                 disposableStart.unsubscribe();
@@ -747,4 +709,121 @@ describe('StartFormComponent', () => {
             expect(processNameInput.disabled).toEqual(false);
         });
    });
+
+    describe('Empty Template', () => {
+
+        it('should show no process definition available template when application/process definitions are empty', async() => {
+            getDeployedApplicationsSpy = spyOn(appsProcessService, 'getDeployedApplications').and.returnValue(of([]));
+            getDefinitionsSpy.and.returnValue(of([]));
+
+            component.showSelectApplicationDropdown = true;
+            component.appId = 3;
+            component.ngOnInit();
+            fixture.detectChanges();
+            await fixture.whenStable();
+            const noProcessElement = fixture.nativeElement.querySelector('.adf-empty-content__title');
+
+            expect(noProcessElement).not.toBeNull('Expected no available process message to be present');
+            expect(noProcessElement.innerText.trim()).toBe('ADF_PROCESS_LIST.START_PROCESS.NO_PROCESS_DEFINITIONS');
+        });
+
+        it('should show no process definition available template if processDefinitions are empty', async() => {
+            getDefinitionsSpy.and.returnValue(of([]));
+
+            component.appId = 3;
+            component.ngOnInit();
+            fixture.detectChanges();
+            await fixture.whenStable();
+            const noProcessElement = fixture.nativeElement.querySelector('.adf-empty-content__title');
+
+            expect(noProcessElement).not.toBeNull('Expected no available process message to be present');
+            expect(noProcessElement.innerText.trim()).toBe('ADF_PROCESS_LIST.START_PROCESS.NO_PROCESS_DEFINITIONS');
+        });
+
+        it('should show no process definition selected template if there is no process definition selected', async() => {
+            getDefinitionsSpy.and.returnValue(of(testMultipleProcessDefs));
+            getDeployedApplicationsSpy = spyOn(appsProcessService, 'getDeployedApplications').and.returnValue(of(deployedApps));
+
+            component.showSelectApplicationDropdown = true;
+            component.appId = 1234;
+            component.ngOnInit();
+            fixture.detectChanges();
+            await fixture.whenStable();
+            const noProcessElement = fixture.nativeElement.querySelector('.adf-empty-content__title');
+
+            expect(noProcessElement).not.toBeNull('Expected no available process message to be present');
+            expect(noProcessElement.innerText.trim()).toBe('ADF_PROCESS_LIST.START_PROCESS.NO_PROCESS_DEF_SELECTED');
+        });
+
+        it('should show no start form template if selected process definition does not have start form', async() => {
+            getDefinitionsSpy.and.returnValue(of(testMultipleProcessDefs));
+            getDeployedApplicationsSpy = spyOn(appsProcessService, 'getDeployedApplications').and.returnValue(of(deployedApps));
+
+            component.showSelectApplicationDropdown = true;
+            component.processDefinitionName = 'My Process 1';
+            component.appId = 3;
+            component.ngOnInit();
+            fixture.detectChanges();
+            await fixture.whenStable();
+            const noProcessElement = fixture.nativeElement.querySelector('.adf-empty-content__title');
+
+            expect(noProcessElement).not.toBeNull('Expected no available process message to be present');
+            expect(noProcessElement.innerText.trim()).toBe('ADF_PROCESS_LIST.START_PROCESS.NO_START_FORM');
+        });
+    });
+
+    describe('Error event', () => {
+
+        const processDefError = { message: 'Failed to load Process definitions' };
+        const applicationsError = { message: 'Failed to load applications' };
+        const startProcessError = { message: 'Failed to start process' };
+
+        beforeEach(() => {
+            fixture.detectChanges();
+        });
+
+        it('should emit error event in case loading process definitions failed', async() => {
+            const errorSpy = spyOn(component.error, 'emit');
+            getDefinitionsSpy.and.returnValue(throwError(processDefError));
+
+            component.appId = 3;
+            component.ngOnInit();
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(errorSpy).toHaveBeenCalledWith(processDefError);
+        });
+
+        it('should emit error event in case loading applications failed', async() => {
+            const errorSpy = spyOn(component.error, 'emit');
+            getDeployedApplicationsSpy = spyOn(appsProcessService, 'getDeployedApplications').and.returnValue(throwError(applicationsError));
+
+            component.showSelectApplicationDropdown = true;
+            component.appId = 3;
+            component.ngOnInit();
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(errorSpy).toHaveBeenCalledWith(applicationsError);
+        });
+
+        it('should emit error event in case start process failed', async() => {
+            const errorSpy = spyOn(component.error, 'emit');
+            getDefinitionsSpy.and.returnValue(of(testMultipleProcessDefs));
+            getDeployedApplicationsSpy = spyOn(appsProcessService, 'getDeployedApplications').and.returnValue(of(deployedApps));
+            startProcessSpy.and.returnValue(throwError(startProcessError));
+
+            component.showSelectApplicationDropdown = true;
+            component.processDefinitionName = 'My Process 1';
+            component.name = 'mock name';
+            component.appId = 3;
+            component.ngOnInit();
+            fixture.detectChanges();
+            await fixture.whenStable();
+            component.startProcess();
+            fixture.detectChanges();
+
+            expect(errorSpy).toHaveBeenCalledWith(startProcessError);
+        });
+    });
 });

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

@@ -93,11 +93,11 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
 
     /** Emitted when the process is canceled. */
     @Output()
-    cancel: EventEmitter<ProcessInstance> = new EventEmitter<ProcessInstance>();
+    cancel: EventEmitter<void> = new EventEmitter<void>();
 
     /** Emitted when an error occurs. */
     @Output()
-    error: EventEmitter<ProcessInstance> = new EventEmitter<ProcessInstance>();
+    error: EventEmitter<any> = new EventEmitter<any>();
 
     /** Emitted when process definition selection changes. */
     @Output()
@@ -115,7 +115,6 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
 
     processDefinitions: ProcessDefinitionRepresentation[] = [];
     selectedProcessDef: ProcessDefinitionRepresentation;
-    errorMessageId: string = '';
     processNameInput: FormControl;
     processDefinitionInput: FormControl;
     filteredProcessesDefinitions$: Observable<ProcessDefinitionRepresentation[]>;
@@ -123,7 +122,10 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
     alfrescoRepositoryName: string;
     applications: AppDefinitionRepresentationModel[] = [];
     selectedApplication: AppDefinitionRepresentationModel;
+
     isProcessDefinitionsLoading = true;
+    isAppsLoading = true;
+
     private onDestroy$ = new Subject<boolean>();
     constructor(private activitiProcess: ProcessService,
                 private activitiContentService: ActivitiContentService,
@@ -219,7 +221,6 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
     loadProcessDefinitions(appId: any): void {
         this.isProcessDefinitionsLoading = true;
         this.resetSelectedProcessDefinition();
-        this.resetErrorMessage();
 
         this.activitiProcess.getProcessDefinitions(appId).pipe(
             map((processDefinitionRepresentations: ProcessDefinitionRepresentation[]) => {
@@ -248,9 +249,9 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
                 this.processDefinitionSelection.emit(this.selectedProcessDef);
                 this.isProcessDefinitionsLoading = false;
             },
-            () => {
-                this.errorMessageId = 'ADF_PROCESS_LIST.START_PROCESS.ERROR.LOAD_PROCESS_DEFS';
+            (error) => {
                 this.isProcessDefinitionsLoading = false;
+                this.error.emit(error);
             });
     }
 
@@ -269,6 +270,7 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
     }
 
     loadApps() {
+        this.isAppsLoading = true;
         this.appsProcessService
             .getDeployedApplications()
             .pipe(map((response: AppDefinitionRepresentationModel[]) => {
@@ -293,20 +295,32 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
                     this.selectedApplication = filteredApps.currentApplication;
                     this.applicationSelection.emit(this.selectedApplication);
                     this.toggleProcessNameAndDefinitionsDropdown();
-                    this.loadProcessDefinitions(this.selectedApplication ? this.selectedApplication.id : null);
+                    this.isAppsLoading = false;
+                    this.loadProcessDefinitionsBasedOnSelectedApp();
                 },
-                err => {
+                (err) => {
+                    this.isAppsLoading = false;
                     this.error.emit(err);
                 }
             );
 
     }
 
+    loadProcessDefinitionsBasedOnSelectedApp() {
+        if (this.selectedApplication && this.selectedApplication.id) {
+            this.loadProcessDefinitions(this.selectedApplication ? this.selectedApplication.id : null);
+        } else {
+            this.isProcessDefinitionsLoading = false;
+            this.resetProcessDefinitions();
+        }
+    }
+
     onAppSelectionChange(selectedApplication: any) {
+        this.resetProcessDefinitions();
         this.selectedApplication = selectedApplication.value;
         this.applicationSelection.emit(this.selectedApplication);
         this.toggleProcessNameAndDefinitionsDropdown();
-        this.loadProcessDefinitions(this.selectedApplication.id);
+        this.loadProcessDefinitionsBasedOnSelectedApp();
     }
 
     private isAppSelected(): boolean {
@@ -315,13 +329,28 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
 
     private removeDefaultApps(apps: AppDefinitionRepresentationModel []): AppDefinitionRepresentationModel[] {
         return apps.filter((app) => app.id);
+    }
 
+    hasApplications(): boolean {
+        return this.applications && this.applications.length > 0;
+    }
+
+    hasProcessDefinitions(): boolean {
+        return this.processDefinitions && this.processDefinitions.length > 0;
+    }
+
+    isProcessDefinitionSelected(): boolean {
+        return !!(this.selectedProcessDef && this.selectedProcessDef.id);
     }
 
     isProcessDefinitionsEmpty(): boolean {
         return this.processDefinitions.length === 0;
     }
 
+    disableDropdownButton(): boolean {
+        return this.showSelectApplicationDropdown && !this.isAppSelected();
+    }
+
     getAlfrescoRepositoryName(): string {
         let alfrescoRepositoryName = this.appConfig.get<string>(AppConfigValues.ALFRESCO_REPOSITORY_NAME);
         if (!alfrescoRepositoryName) {
@@ -345,7 +374,6 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
 
     startProcess(outcome?: string) {
         if (this.selectedProcessDef && this.selectedProcessDef.id && this.name) {
-            this.resetErrorMessage();
             const formValues = this.startForm ? this.startForm.form.values : undefined;
             this.activitiProcess.startProcess(this.selectedProcessDef.id, this.name, outcome, formValues, this.variables).subscribe(
                 (res) => {
@@ -353,8 +381,7 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
                     this.start.emit(res);
                 },
                 (err) => {
-                    this.errorMessageId = 'ADF_PROCESS_LIST.START_PROCESS.ERROR.START';
-                    this.error.error(err);
+                    this.error.emit(err);
                 }
             );
         }
@@ -368,11 +395,6 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
         return this.selectedProcessDef && this.selectedProcessDef.hasStartForm;
     }
 
-    isProcessDefinitionEmpty(): boolean {
-        const hasErrorMessage = this.errorMessageId ? true : false;
-        return this.processDefinitions ? (this.processDefinitions.length > 0 || hasErrorMessage) : hasErrorMessage;
-    }
-
     isStartFormMissingOrValid(): boolean {
         if (this.startForm) {
             return this.startForm.form && this.startForm.form.isValid;
@@ -386,15 +408,15 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
     }
 
     private resetSelectedProcessDefinition() {
-        this.selectedProcessDef = new ProcessDefinitionRepresentation();
+        this.selectedProcessDef = undefined;
+        if (this.processDefinitionInput) {
+            this.processDefinitionInput.setValue('');
+        }
     }
 
-    private resetErrorMessage(): void {
-        this.errorMessageId = '';
-    }
-
-    hasErrorMessage(): boolean {
-        return this.processDefinitions.length === 0 && !this.errorMessageId;
+    private resetProcessDefinitions() {
+        this.processDefinitions = [];
+        this.resetSelectedProcessDefinition();
     }
 
     public onOutcomeClick(outcome: string) {
@@ -407,7 +429,6 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
         if (this.startForm) {
             this.startForm.data = {};
         }
-        this.resetErrorMessage();
     }
 
     displayFn(process: any): string {
@@ -453,4 +474,8 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
         this.selectedProcessDef = processDefinition;
         this.processDefinitionSelection.emit(this.selectedProcessDef);
     }
+
+    isLoading(): boolean {
+        return this.showSelectApplicationDropdown ? this.isAppsLoading : false;
+    }
 }