From 61a04f0a180fee44447f2846e372bdcee0675b2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 9 Jun 2021 18:22:20 +0300
Subject: [PATCH] Display meaningful upload error message

---
 .../file-drop/file-drop.component.html        |  6 +-----
 .../file-drop/file-drop.component.scss        | 20 +++++++++----------
 .../services/file-upload.service.ts           | 11 +++++++---
 apps/red-ui/src/assets/i18n/de.json           |  2 +-
 apps/red-ui/src/assets/i18n/en.json           |  6 +++---
 apps/red-ui/src/assets/styles/red-input.scss  |  5 ++++-
 6 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.html b/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.html
index a4795daf5..8ddd0edbd 100644
--- a/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.html
+++ b/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.html
@@ -1,10 +1,6 @@
 <section (mouseout)="close()">
-    <mat-icon class="upload-icon" svgIcon="red:upload"></mat-icon>
+    <mat-icon svgIcon="red:upload"></mat-icon>
     <div class="heading-xl">
         {{ 'dossier-overview.upload-files' | translate }}
     </div>
-
-    <button (click)="close()" class="close-icon" mat-icon-button>
-        <mat-icon svgIcon="red:close"></mat-icon>
-    </button>
 </section>
diff --git a/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.scss b/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.scss
index 9114e386b..f6a221de7 100644
--- a/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.scss
+++ b/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../assets/styles/red-variables.scss';
+
 section {
     position: fixed;
     top: 0;
@@ -15,16 +17,12 @@ section {
     display: flex;
     flex-direction: column;
 
-    .upload-icon {
-        width: 34px;
-        height: 34px;
-        margin-bottom: 10px;
+    mat-icon {
+        height: 60px;
+        width: 60px;
+    }
+
+    .heading-xl {
+        margin-top: 24px;
     }
 }
-
-.close-icon {
-    position: absolute;
-    z-index: 1100;
-    top: 20px;
-    right: 40px;
-}
diff --git a/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts b/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts
index 4d6945494..c55265c5d 100644
--- a/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts
+++ b/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts
@@ -181,13 +181,18 @@ export class FileUploadService {
                     await this._appStateService.reloadActiveDossierFiles();
                 }
             },
-            () => {
+            err => {
                 uploadFile.completed = true;
                 uploadFile.error = {
-                    message: this._translateService.instant('upload-status.error.generic')
+                    // Extract error message
+                    message:
+                        this._translateService.instant('upload-status.error.generic') +
+                        (err?.error?.message?.includes('message')
+                            ? ` ${err.error.message.match('"message":"(.*?)\\"')[1]}`
+                            : '')
                 };
                 this._removeUpload(uploadFile);
-                if (uploadFile.retryCount < 5) {
+                if (uploadFile.retryCount < 5 && err.status !== 400) {
                     uploadFile.retryCount += 1;
                     this.scheduleUpload(uploadFile);
                 }
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index b795d7942..59d0b73f0 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@@ -11,7 +11,7 @@
   "upload-status": {
     "error": {
       "file-size": "Datei zu groß. Das Limit ist {{size}} MB.",
-      "generic": "Datei konnte nicht hochgeladen werden ..."
+      "generic": "Datei konnte nicht hochgeladen werden."
     },
     "dialog": {
       "title": "Datei-Uploads ({{len}})",
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index a1f474edf..690cbabb6 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -10,8 +10,8 @@
   "dev-mode": "[ DEV MODE ]",
   "upload-status": {
     "error": {
-      "file-size": "File to large. Limit is {{size}}MB.",
-      "generic": "Failed to upload file... "
+      "file-size": "File too large. Limit is {{size}}MB.",
+      "generic": "Failed to upload file. "
     },
     "dialog": {
       "title": "File Uploads ({{len}})",
@@ -257,7 +257,7 @@
     "approve": "Approve",
     "approve-disabled": "File can only be approved once it has been analysed with the latest dictionaries and all suggestions have been processed",
     "under-review": "Under Review",
-    "upload-files": "Drag & Drop files anywhere",
+    "upload-files": "Drag & drop files anywhere...",
     "upload-files-btn": "Upload Files",
     "new-rule": {
       "label": "Outdated",
diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss
index 7090e0760..38b5f0873 100644
--- a/apps/red-ui/src/assets/styles/red-input.scss
+++ b/apps/red-ui/src/assets/styles/red-input.scss
@@ -99,7 +99,6 @@ form {
         border: 1px solid $grey-5;
         font-family: Inter, sans-serif;
         font-size: 13px;
-        line-height: 18px;
         background-color: #ffffff;
         border-radius: 8px;
         outline: none;
@@ -133,6 +132,10 @@ form {
         }
     }
 
+    textarea {
+        line-height: 18px;
+    }
+
     .hex-color-input {
         width: 150px;
         max-width: 150px;