From 77883029e17470ca6a6899d965ba2e6cafc50e2c Mon Sep 17 00:00:00 2001
From: sagIoTPower <christof.strack@softwareag.com>
Date: Fri, 29 Mar 2024 09:45:19 +0100
Subject: [PATCH] Improve error handling when testing mappings in the UI

---
 .../src/mapping/core/c8y-agent.service.ts     | 15 ++++----
 .../edit-substitution-modal.component.html    |  2 +-
 .../mapping-type/mapping-type.component.html  | 36 ++++++++++---------
 .../step-main/mapping-stepper.component.html  |  1 +
 4 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/dynamic-mapping-ui/src/mapping/core/c8y-agent.service.ts b/dynamic-mapping-ui/src/mapping/core/c8y-agent.service.ts
index 831d0ac3..2759c19f 100644
--- a/dynamic-mapping-ui/src/mapping/core/c8y-agent.service.ts
+++ b/dynamic-mapping-ui/src/mapping/core/c8y-agent.service.ts
@@ -56,7 +56,7 @@ export class C8YAgent {
   }
 
   async createMEAO(context: ProcessingContext) {
-    let result: any;
+    let result: Promise<any>;
     let error: string = '';
     const currentRequest =
       context.requests[context.requests.length - 1].request;
@@ -97,31 +97,30 @@ export class C8YAgent {
           result = this.inventory.create(p, context);
         }
       } else {
-        error = `Payload is not a valid:${context.mapping.targetAPI}`;
+        error = `Payload is not a valid: ${context.mapping.targetAPI}`;
       }
     }
 
     if (error != '') {
-      this.alert.danger(`Failed to tested mapping: ${error}`);
+      this.alert.danger(`Failed to test mapping: ${error}`);
       return '';
     }
 
     try {
       const { data, res } = await result;
-      // console.log ("My data:", data );
       if (res.status == 200 || res.status == 201) {
         // this.alert.success("Successfully tested mapping!");
         return data;
       } else {
         const e = await res.text();
-        this.alert.danger(`Failed to tested mapping: ${e}`);
+        this.alert.danger(`Failed to test mapping: ${e}`);
         context.requests[context.requests.length - 1].error = e;
         return '';
       }
     } catch (e) {
-      const { data } = await e;
-      this.alert.danger(`Failed to tested mapping: ${data}`);
-      context.requests[context.requests.length - 1].error = e;
+      const { res } = await e;
+      this.alert.danger(`Failed to test mapping: ${res.statusText}`);
+      context.requests[context.requests.length - 1].error = res.statusText;
       return '';
     }
   }
diff --git a/dynamic-mapping-ui/src/mapping/edit/edit-substitution-modal.component.html b/dynamic-mapping-ui/src/mapping/edit/edit-substitution-modal.component.html
index e8b51f75..ef1788b6 100644
--- a/dynamic-mapping-ui/src/mapping/edit/edit-substitution-modal.component.html
+++ b/dynamic-mapping-ui/src/mapping/edit/edit-substitution-modal.component.html
@@ -6,7 +6,7 @@
     [disabled]="disabled$ | async"
     [headerClasses]="'modal-header dialog-header'"
   >
-    <div>
+    <div class="p-24">
       <c8y-form-group *ngIf="duplicate">
         <div>
           <span>{{
diff --git a/dynamic-mapping-ui/src/mapping/mapping-type/mapping-type.component.html b/dynamic-mapping-ui/src/mapping/mapping-type/mapping-type.component.html
index 5cc8b82b..f9e4011a 100644
--- a/dynamic-mapping-ui/src/mapping/mapping-type/mapping-type.component.html
+++ b/dynamic-mapping-ui/src/mapping/mapping-type/mapping-type.component.html
@@ -31,22 +31,24 @@ <h4>Add Mapping</h4>
   [disabled]="true"
   #addMappingRef
 >
-  <p class="p-16 text-center text-medium separator-bottom sticky-top bg-white">
-    {{ "Select mapping type for target" | translate }}
-  </p>
-  <div class="modal-inner-scroll animated fadeIn">
-    <div class="list-group list-group-links" [formGroup]="formGroupStep">
-      <ng-container *ngFor="let q of MappingType | keyvalue">
-        <button
-          *ngIf="direction !== Direction.OUTBOUND || q.value === 'JSON'"
-          class="list-group-item"
-          title="{{ q.value }}"
-          (click)="onSelectMappingType(q.value)"
-        >
-          <i [c8yIcon]="'rules m-r-4'"></i>
-          <span>{{ q.value }}</span>
-        </button>
-      </ng-container>
-    </div>
+  <div>
+      <p class="p-b-24 text-center text-medium separator-bottom sticky-top bg-white">
+        {{ "Select mapping type for target" | translate }}
+      </p>
+      <div class="p-24 modal-inner-scroll animated fadeIn">
+        <div class="list-group list-group-links" [formGroup]="formGroupStep">
+          <ng-container *ngFor="let q of MappingType | keyvalue">
+            <button
+              *ngIf="direction !== Direction.OUTBOUND || q.value === 'JSON'"
+              class="list-group-item"
+              title="{{ q.value }}"
+              (click)="onSelectMappingType(q.value)"
+            >
+              <i [c8yIcon]="'rules m-r-4'"></i>
+              <span>{{ q.value }}</span>
+            </button>
+          </ng-container>
+        </div>
+      </div>
   </div>
 </c8y-modal>
diff --git a/dynamic-mapping-ui/src/mapping/step-main/mapping-stepper.component.html b/dynamic-mapping-ui/src/mapping/step-main/mapping-stepper.component.html
index 1f90c69a..2528308a 100644
--- a/dynamic-mapping-ui/src/mapping/step-main/mapping-stepper.component.html
+++ b/dynamic-mapping-ui/src/mapping/step-main/mapping-stepper.component.html
@@ -412,6 +412,7 @@
     <c8y-stepper-buttons
       class="col-xs-12 d-block card-footer p-24 separator"
       (onCustom)="onCommitButton()"
+      (onCancel)="cancel.emit()"
       (onBack)="onBackStep($event)"
       [labels]="{ custom: 'Confirm' }"
     >