From dd9145bcf3dd6e181ab35e162cc38bbfe2a1e4d5 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta@devplant.ro>
Date: Tue, 15 Nov 2022 17:00:03 +0200
Subject: [PATCH] RED-5576: Added upload error indicator.

---
 .../upload-status-overlay.component.html        |  3 ++-
 .../upload-status-overlay.component.scss        |  4 ++++
 .../upload-status-overlay.component.ts          |  4 ++++
 .../src/assets/icons/general/alert-circle.svg   | 17 ++++++++++++-----
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
index ac1404e17..b2f4c55c0 100644
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
@@ -1,8 +1,9 @@
 <section class="red-upload-download-overlay">
     <div (click)="collapsed = !collapsed" [class.expanded]="!collapsed" class="red-upload-download-header">
-        <div class="title flex-1">
+        <div class="title flex-2">
             {{ 'upload-status.dialog.title' | translate: { len: uploadService.files.length } }}
         </div>
+        <span><mat-icon *ngIf="uploadError" [svgIcon]="'red:alert-circle'"></mat-icon></span>
 
         <iqser-circle-button [icon]="'iqser:status-' + (collapsed ? 'expand' : 'collapse')" id="expand-upload-status"></iqser-circle-button>
 
diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
index 02647eb80..db699df1e 100644
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
@@ -32,6 +32,10 @@
             }
         }
 
+        iqser-circle-button {
+            margin-bottom: 4px;
+        }
+
         &.expanded {
             border-bottom: 1px solid var(--iqser-separator);
         }
diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts
index 9d359ebd1..59a1bdd58 100644
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts
@@ -21,6 +21,10 @@ export class UploadStatusOverlayComponent implements OnInit {
         private readonly _changeDetectorRef: ChangeDetectorRef,
     ) {}
 
+    get uploadError() {
+        return !!this.uploadService.files.filter(file => file.completed && file.error).length;
+    }
+
     ngOnInit() {
         this.uploadStatusInterval = window.setInterval(() => {
             // keep only errors
diff --git a/apps/red-ui/src/assets/icons/general/alert-circle.svg b/apps/red-ui/src/assets/icons/general/alert-circle.svg
index 315677462..2723dc6dc 100644
--- a/apps/red-ui/src/assets/icons/general/alert-circle.svg
+++ b/apps/red-ui/src/assets/icons/general/alert-circle.svg
@@ -1,6 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-circle" width="14px" height="14px" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <circle cx="12" cy="12" r="9"></circle>
-    <line x1="12" y1="8" x2="12" y2="11"></line>
-    <line x1="12" y1="16" x2="12.01" y2="16"></line>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+    <title>warning</title>
+    <g id="User-Management" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="01.2-Bulk-Actions" transform="translate(-876.000000, -468.000000)">
+            <rect fill="#FFFFFF" x="0" y="0" width="1440" height="900"></rect>
+            <polygon id="Rectangle" fill="#FFFFFF" points="201 449 1087 449 1087 499 201 499"></polygon>
+            <g id="Group-19" transform="translate(876.000000, 171.000000)" fill="#DD4D50">
+                <path d="M6.00002308,297 C9.30875217,297 12.0000462,299.690683 12.0000462,302.999359 C12.0000462,306.309082 9.30898674,309 6.00002308,309 C2.69105942,309 2.27373675e-13,306.309082 2.27373675e-13,302.999359 C2.27373675e-13,299.690683 2.69129399,297 6.00002308,297 Z M6.00002308,298.846154 C3.71080282,298.846154 1.84615385,300.71038 1.84615385,302.999359 C1.84615385,305.289458 3.71064029,307.153846 6.00002308,307.153846 C8.28940586,307.153846 10.1538923,305.289458 10.1538923,302.999359 C10.1538923,300.71038 8.28924333,298.846154 6.00002308,298.846154 Z M6.89921108,303.700197 L6.89921108,305.678219 L5.10100111,305.678219 L5.10100111,303.700197 L6.89921108,303.700197 Z M6.89921108,300.103957 L6.89921108,302.801137 L5.10100111,302.801137 L5.10100111,300.103957 L6.89921108,300.103957 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
 </svg>