review changes

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

@@ -1,19 +1,25 @@
-<mat-card appearance="outlined" class="adf-start-process" *ngIf="processDefinitionLoaded; else spinner">
+@if (processDefinitionLoaded) {
+    <mat-card appearance="outlined" class="adf-start-process">
         <mat-card-content>
-        <mat-card-title *ngIf="showTitle" class="adf-title">
+            @if (showTitle) {
+                <mat-card-title class="adf-title">
                     {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate }}
                 </mat-card-title>
+            }
 
-        <mat-card-subtitle class="adf-error-message" id="error-message" *ngIf="errorMessageId">
+            @if (errorMessageId) {
+                <mat-card-subtitle class="adf-error-message" id="error-message">
                     {{ errorMessageId | translate }}
                 </mat-card-subtitle>
+            }
 
-        <div *ngIf="!isProcessDefinitionsEmpty; else emptyProcessDefinitionsList">
+            @if (!isProcessDefinitionsEmpty) {
+                <div>
                     <form [formGroup]="processForm" class="adf-select-process-form">
+                        @if (showSelectProcessDropdown) {
                             <mat-form-field
                                 class="adf-process-input-container"
                                 floatLabel="always"
-                    *ngIf="showSelectProcessDropdown"
                                 data-automation-id="adf-select-cloud-process-dropdown"
                             >
                                 <mat-label class="adf-start-process-input-label">{{
@@ -28,13 +34,14 @@
                                         [displayWith]="displayProcessNameOnDropdown"
                                         (optionSelected)="setProcessDefinitionOnForm($event.option.value)"
                                     >
+                                        @for (processDef of filteredProcesses; track processDef) {
                                             <mat-option
-                                *ngFor="let processDef of filteredProcesses"
                                                 [value]="getProcessDefinitionValue(processDef)"
                                                 (click)="processDefinitionSelectionChanged(processDef)"
                                             >
                                                 {{ getProcessDefinitionValue(processDef) }}
                                             </mat-option>
+                                        }
                                     </mat-autocomplete>
 
                                     <button
@@ -46,10 +53,13 @@
                                         <mat-icon>arrow_drop_down</mat-icon>
                                     </button>
                                 </div>
-                    <mat-error *ngIf="processDefinition.hasError('required')" class="adf-error-pb">
+                                @if (processDefinition.hasError('required')) {
+                                    <mat-error class="adf-error-pb">
                                         {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }}
                                     </mat-error>
+                                }
                             </mat-form-field>
+                        }
 
                         <adf-inplace-form-input [control]="processInstanceName">
                             <ng-container label>
@@ -57,20 +67,26 @@
                             </ng-container>
 
                             <ng-container error>
-                        <span *ngIf="processInstanceName.hasError('required')">
+                                @if (processInstanceName.hasError('required')) {
+                                    <span>
                                         {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
                                     </span>
-                        <span *ngIf="processInstanceName.hasError('maxlength')" id="adf-start-process-maxlength-error">
+                                }
+                                @if (processInstanceName.hasError('maxlength')) {
+                                    <span id="adf-start-process-maxlength-error">
                                         {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters: maxNameLength } }}
                                     </span>
-                        <span *ngIf="processInstanceName.hasError('pattern')">
+                                }
+                                @if (processInstanceName.hasError('pattern')) {
+                                    <span>
                                         {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }}
                                     </span>
+                                }
                             </ng-container>
                         </adf-inplace-form-input>
                     </form>
 
-            <ng-container *ngIf="hasForm; else taskFormCloudButtons">
+                    @if (hasForm) {
                         <adf-cloud-form
                             #startForm
                             [appName]="appName"
@@ -91,18 +107,34 @@
                                 <ng-template [ngTemplateOutlet]="taskFormCloudButtons" />
                             </adf-cloud-form-custom-outcomes>
                         </adf-cloud-form>
-            </ng-container>
+                    } @else {
+                        <ng-template [ngTemplateOutlet]="taskFormCloudButtons" />
+                    }
                 </div>
+            } @else {
+                <mat-card-content>
+                    <mat-card-subtitle class="error-message" id="no-process-message">
+                        {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.NO_PROCESS_DEFINITIONS' | translate | uppercase }}
+                    </mat-card-subtitle>
+                </mat-card-content>
+            }
         </mat-card-content>
     </mat-card>
+} @else {
+    <div class="adf-loading-container">
+        <mat-progress-spinner class="adf-loading" color="primary" mode="indeterminate" />
+    </div>
+}
 
 <ng-template #taskFormCloudButtons>
     <div class="adf-start-process-cloud-actions">
-        <button *ngIf="showCancelButton" mat-button (click)="cancelStartProcess()" id="cancel_process">
+        @if (showCancelButton) {
+            <button mat-button (click)="cancelStartProcess()" id="cancel_process">
                 {{ cancelButtonLabel }}
             </button>
+        }
+        @if (showStartProcessButton$ | async) {
             <button
-            *ngIf="showStartProcessButton$ | async"
                 color="primary"
                 mat-raised-button
                 [disabled]="disableStartButton || !isProcessFormValid"
@@ -113,19 +145,6 @@
             >
                 {{ startProcessButtonLabel }}
             </button>
-    </div>
+        }
-</ng-template>
-
-<ng-template #emptyProcessDefinitionsList>
-    <mat-card-content *ngIf="processDefinitionLoaded">
-        <mat-card-subtitle class="error-message" id="no-process-message">
-            {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.NO_PROCESS_DEFINITIONS' | translate | uppercase }}
-        </mat-card-subtitle>
-    </mat-card-content>
-</ng-template>
-
-<ng-template #spinner>
-    <div class="adf-loading-container">
-        <mat-progress-spinner class="adf-loading" color="primary" mode="indeterminate" />
     </div>
 </ng-template>

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

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