[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

demo-shell/src/app/components/process-service/process-service.component.html

@@ -224,7 +224,8 @@
                         [name]="defaultProcessName"
                         (formContentClicked)="onContentClick($event)"
                         (start)="onStartProcessInstance($event)"
-                        (cancel)="onCancelProcessInstance()">
+                        (cancel)="onCancelProcessInstance()"
+                        (error)="onStartProcessError($event)">
                     </adf-start-process>
                 </div>
             </div>

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -36,7 +36,7 @@ import {
 import {
     FORM_FIELD_VALIDATORS, FormRenderingService, FormService,
     DynamicTableRow, ValidateDynamicTableRowEvent, AppConfigService, PaginationComponent, UserPreferenceValues,
-    AlfrescoApiService, UserPreferencesService, LogService, DataCellEvent
+    AlfrescoApiService, UserPreferencesService, LogService, DataCellEvent, NotificationService
 } from '@alfresco/adf-core';
 
 import { AnalyticsReportListComponent } from '@alfresco/adf-insights';
@@ -174,6 +174,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
                 formRenderingService: FormRenderingService,
                 formService: FormService,
                 private location: Location,
+                private notificationService: NotificationService,
                 private preferenceService: UserPreferencesService) {
 
         this.defaultProcessName = this.appConfig.get<string>('adf-start-process.name');
@@ -403,6 +404,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         this.reloadProcessFilters();
     }
 
+    onStartProcessError(event: any) {
+        this.notificationService.showError(event.message);
+    }
+
     isStartProcessMode(): boolean {
         return this.currentProcessInstanceId === currentProcessIdNew;
     }

docs/process-services/components/start-process.component.md

@@ -195,6 +195,25 @@ You can use the `showSelectApplicationDropdown` property to Hide or show applica
 ![Start process with selected application](../../docassets/images/start-process-with-selected-application.png)
 
 
+### Error handling
+
+When an error occurs, the component will emit an error event that can be used to handle errors. Example:
+
+```html
+ <adf-start-process 
+      [appId]="YOUR_APP_ID"
+      [title]="'ADF_PROCESS_LIST.START_PROCESS.FORM.TITLE'"
+      [name]="PROCESS_NAME"
+      (error)="onError($event)">
+ </adf-start-process>		 
+```
+
+```ts
+    onError(error) {
+        this.notificationService.showError(event.response.body.message);
+    }
+```
+
 ## See also
 
 -   [Select Apps Dialog component](select-apps-dialog.component.md)

lib/core/templates/empty-content/empty-content.component.html

@@ -1,5 +1,5 @@
 <div class="adf-empty-content">
-    <mat-icon class="adf-empty-content__icon">{{ icon }}</mat-icon>
+    <adf-icon class="adf-empty-content__icon" [value]="icon"></adf-icon>
     <div class="adf-empty-content__title">{{ title | translate }}</div>
     <div class="adf-empty-content__subtitle">{{ subtitle | translate }}</div>
     <ng-content></ng-content>

lib/core/templates/empty-content/empty-content.component.scss

@@ -4,6 +4,7 @@
 
     $config: mat-typography-config();
     $foreground: map-get($theme, foreground);
+    $adf-empty-content-icon-opacity: 0.6;
 
     .adf-empty-content {
         color: mat-color($foreground, text, 0.54);
@@ -12,10 +13,12 @@
         align-items: center;
 
         &__icon {
+            .mat-icon {
                 font-size: mat-font-size($config, display-3);
                 height: mat-font-size($config, display-3) !important;
                 width: mat-font-size($config, display-3) !important;
             }
+        }
 
         &__title {
             font-size: 18px;
@@ -35,4 +38,8 @@
             text-align: center;
         }
     }
+
+    .adf-icon {
+        opacity: $adf-empty-content-icon-opacity;
+    }
 }

lib/core/templates/template.module.ts

@@ -21,12 +21,14 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MaterialModule } from '../material.module';
 import { ErrorContentComponent } from './error-content/error-content.component';
 import { EmptyContentComponent } from './empty-content/empty-content.component';
+import { IconModule } from '../icon/icon.module';
 
 @NgModule({
     imports: [
         CommonModule,
         MaterialModule,
-        TranslateModule
+        TranslateModule,
+        IconModule
     ],
     declarations: [
         ErrorContentComponent,

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,13 +1,17 @@
-<div class="adf-start-process">
+
+<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" *ngIf="isProcessDefinitionEmpty()">
+            <div class="content">
-        <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}}"
+                            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">
@@ -43,7 +47,8 @@
                                     id="adf-select-process-dropdown"
                                     *ngIf="showSelectProcessDropdown"
                                     mat-icon-button
-                            (click)="displayDropdown($event)">
+                                    (click)="displayDropdown($event)"
+                                    [disabled]="disableDropdownButton()">
                                     <mat-icon>arrow_drop_down</mat-icon>
                                 </button>
                             </ng-container>
@@ -71,9 +76,11 @@
                     </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
-            *ngIf="hasStartForm()"
                                 [data]="values"
                                 [disableStartProcessButton]="processNameInput.invalid"
                                 [processDefinitionId]="selectedProcessDef.id"
@@ -87,11 +94,25 @@
                                     {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate | uppercase}}
                                 </button>
                             </adf-start-form>
-    </div>
+                        </ng-container>
-    <div class="content" *ngIf="hasErrorMessage()">
+                        <ng-template #noStartFormTemplate>
-        <div class="subtitle" class="error-message" id="no-process-message">
+                            <adf-empty-content 
-            {{'ADF_PROCESS_LIST.START_PROCESS.NO_PROCESS_DEFINITIONS' | translate | uppercase}}
+                                class="adf-start-process-empty-template"
-        </div>
+                                [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
@@ -113,4 +134,12 @@
                     {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.START' | translate | uppercase}}
                 </button>
             </div>
-</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;
             },
-            () => {
+            (error) => {
-                this.errorMessageId = 'ADF_PROCESS_LIST.START_PROCESS.ERROR.LOAD_PROCESS_DEFS';
                 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.emit(err);
-                    this.error.error(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 {
+    private resetProcessDefinitions() {
-        this.errorMessageId = '';
+        this.processDefinitions = [];
-    }
+        this.resetSelectedProcessDefinition();
-
-    hasErrorMessage(): boolean {
-        return this.processDefinitions.length === 0 && !this.errorMessageId;
     }
 
     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;
+    }
 }

lib/testing/src/lib/process-services-cloud/pages/task-form-cloud-component.page.ts

@@ -29,7 +29,7 @@ export class TaskFormCloudComponent {
     claimButton: ElementFinder = element(by.css('button[adf-cloud-claim-task]'));
     form: ElementFinder = element(by.css('adf-cloud-form'));
     formTitle: ElementFinder = element(by.css(`span.adf-form-title`));
-    emptyContentIcon: ElementFinder = element(by.css(`div.adf-empty-content mat-icon.adf-empty-content__icon`));
+    emptyContentIcon: ElementFinder = element(by.css(`div.adf-empty-content adf-icon.adf-empty-content__icon`));
     emptyContentTitle: ElementFinder = element(by.css(`div.adf-empty-content div.adf-empty-content__title`));
     emptyContentSubtitle: ElementFinder = element(by.css(`div.adf-empty-content div.adf-empty-content__subtitle`));
     readOnlyForm = element(by.css('div[class="adf-readonly-form"]'));

lib/testing/src/lib/process-services/pages/start-process.page.ts

@@ -30,7 +30,7 @@ export class StartProcessPage {
     cancelProcessButton: ElementFinder = element(by.id('cancel_process'));
     formStartProcessButton: ElementFinder = element(by.css('button[data-automation-id="adf-form-start process"]'));
     startProcessButton: ElementFinder = element(by.css('button[data-automation-id="btn-start"]'));
-    noProcess: ElementFinder = element(by.id('no-process-message'));
+    noProcess: ElementFinder = element(by.css('.adf-empty-content__title'));
     processDefinition: ElementFinder = element(by.css('input[id="processDefinitionName"]'));
     processDefinitionOptionsPanel: ElementFinder = element(by.css('div[class*="mat-autocomplete-panel"]'));