Feature: better toast notifications management (#8980)

src-ui/src/app/services/toast.service.ts

@@ -1,7 +1,10 @@
 import { Injectable } from '@angular/core'
 import { Subject } from 'rxjs'
+import { v4 as uuidv4 } from 'uuid'
 
 export interface Toast {
+  id?: string
+
   content: string
 
   delay: number
@@ -22,13 +25,32 @@ export interface Toast {
 })
 export class ToastService {
   constructor() {}
+  _suppressPopupToasts: boolean
+
+  set suppressPopupToasts(value: boolean) {
+    this._suppressPopupToasts = value
+    this.showToast.next(null)
+  }
 
   private toasts: Toast[] = []
 
   private toastsSubject: Subject<Toast[]> = new Subject()
 
+  public showToast: Subject<Toast> = new Subject()
+
   show(toast: Toast) {
-    this.toasts.push(toast)
+    if (!toast.id) {
+      toast.id = uuidv4()
+    }
+    if (typeof toast.error === 'string') {
+      try {
+        toast.error = JSON.parse(toast.error)
+      } catch (e) {}
+    }
+    this.toasts.unshift(toast)
+    if (!this._suppressPopupToasts) {
+      this.showToast.next(toast)
+    }
     this.toastsSubject.next(this.toasts)
   }
 
@@ -46,7 +68,7 @@ export class ToastService {
   }
 
   closeToast(toast: Toast) {
-    let index = this.toasts.findIndex((t) => t == toast)
+    let index = this.toasts.findIndex((t) => t.id == toast.id)
     if (index > -1) {
       this.toasts.splice(index, 1)
       this.toastsSubject.next(this.toasts)
@@ -56,4 +78,10 @@ export class ToastService {
   getToasts() {
     return this.toastsSubject
   }
+
+  clearToasts() {
+    this.toasts = []
+    this.toastsSubject.next(this.toasts)
+    this.showToast.next(null)
+  }
 }