Updates start process cloud component

Improves the start process cloud component by adding error handling for the start process action and enhancing the UI.

Specifically, it displays error messages from the backend response and provides a more user-friendly experience. Also includes minor UI improvements for error messages and general layout.

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

@@ -1,13 +1,10 @@
 <mat-card appearance="outlined" class="adf-start-process" *ngIf="processDefinitionLoaded; else spinner">
-
     <mat-card-content>
-        <mat-card-title
+        <mat-card-title *ngIf="showTitle" class="adf-title">
-            *ngIf="showTitle"
-            class="adf-title">
             {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate }}
         </mat-card-title>
 
-        <mat-card-subtitle id="error-message" *ngIf="errorMessageId">
+        <mat-card-subtitle class="adf-error-message" id="error-message" *ngIf="errorMessageId">
             {{ errorMessageId | translate }}
         </mat-card-subtitle>
 
@@ -19,24 +16,23 @@
                     *ngIf="showSelectProcessDropdown"
                     data-automation-id="adf-select-cloud-process-dropdown"
                 >
-                        <mat-label class="adf-start-process-input-label">{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate }}</mat-label>
+                    <mat-label class="adf-start-process-input-label">{{
-                        <input
+                        'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate
-                            matInput
+                    }}</mat-label>
-                            formControlName="processDefinition"
+                    <input matInput formControlName="processDefinition" [matAutocomplete]="auto" id="processDefinitionName" />
-                            [matAutocomplete]="auto"
-                            id="processDefinitionName"
-                        >
 
                     <div class="adf-process-input-autocomplete">
                         <mat-autocomplete
                             #auto="matAutocomplete"
                             id="processDefinitionOptions"
                             [displayWith]="displayProcessNameOnDropdown"
-                                (optionSelected)="setProcessDefinitionOnForm($event.option.value)" >
+                            (optionSelected)="setProcessDefinitionOnForm($event.option.value)"
+                        >
                             <mat-option
                                 *ngFor="let processDef of filteredProcesses"
                                 [value]="getProcessDefinitionValue(processDef)"
-                                        (click)="processDefinitionSelectionChanged(processDef)">
+                                (click)="processDefinitionSelectionChanged(processDef)"
+                            >
                                 {{ getProcessDefinitionValue(processDef) }}
                             </mat-option>
                         </mat-autocomplete>
@@ -45,14 +41,12 @@
                             id="adf-select-process-dropdown"
                             title="{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.SELECT_PROCESS_DROPDOWN' | translate }}"
                             mat-icon-button
-                                (click)="displayDropdown($event)">
+                            (click)="displayDropdown($event)"
+                        >
                             <mat-icon>arrow_drop_down</mat-icon>
                         </button>
-
                     </div>
-                        <mat-error
+                    <mat-error *ngIf="processDefinition.hasError('required')" class="adf-error-pb">
-                            *ngIf="processDefinition.hasError('required')"
-                            class="adf-error-pb">
                         {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }}
                     </mat-error>
                 </mat-form-field>
@@ -76,7 +70,7 @@
                 </adf-inplace-form-input>
             </form>
 
-            <ng-container *ngIf="hasForm else taskFormCloudButtons">
+            <ng-container *ngIf="hasForm; else taskFormCloudButtons">
                 <adf-cloud-form
                     #startForm
                     [appName]="appName"
@@ -99,19 +93,12 @@
                 </adf-cloud-form>
             </ng-container>
         </div>
-
     </mat-card-content>
-
 </mat-card>
 
 <ng-template #taskFormCloudButtons>
     <div class="adf-start-process-cloud-actions">
-        <button
+        <button *ngIf="showCancelButton" mat-button (click)="cancelStartProcess()" id="cancel_process">
-            *ngIf="showCancelButton"
-            mat-button
-            (click)="cancelStartProcess()"
-            id="cancel_process"
-        >
             {{ cancelButtonLabel }}
         </button>
         <button
@@ -139,9 +126,6 @@
 
 <ng-template #spinner>
     <div class="adf-loading-container">
-        <mat-progress-spinner
+        <mat-progress-spinner class="adf-loading" color="primary" mode="indeterminate" />
-            class="adf-loading"
-            color="primary"
-            mode="indeterminate" />
     </div>
 </ng-template>

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

@@ -19,6 +19,10 @@
         padding-bottom: 1.25em;
     }
 
+    &-error-message {
+        padding-left: 0.5em;
+    }
+
     &-process-input-container {
         margin: 0 7px;
     }

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

@@ -457,7 +457,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
                 this.isProcessStarting = false;
             },
             error: (err) => {
-                this.errorMessageId = 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.START';
+                this.errorMessageId = err?.response?.body?.message || 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.START_PROCESS';
                 this.unifyErrorResponse(err?.response?.body);
                 this.error.emit(err);
                 this.isProcessStarting = false;