From accd05ee65c41876e2fe449ec917b41e32816919 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 9 Nov 2023 22:12:13 -0800
Subject: [PATCH] Add progressbar background to toasts

---
 .../common/toasts/toasts.component.html        |  3 +++
 .../common/toasts/toasts.component.scss        | 15 ++++++++++++++-
 .../common/toasts/toasts.component.spec.ts     | 12 ++++++++++++
 .../common/toasts/toasts.component.ts          | 18 +++++++++++++++++-
 src-ui/src/app/services/toast.service.ts       |  2 ++
 src-ui/src/theme.scss                          |  2 +-
 6 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/common/toasts/toasts.component.html b/src-ui/src/app/components/common/toasts/toasts.component.html
index f555f0f74..82adc6d25 100644
--- a/src-ui/src/app/components/common/toasts/toasts.component.html
+++ b/src-ui/src/app/components/common/toasts/toasts.component.html
@@ -3,7 +3,10 @@
   [autohide]="true" [delay]="toast.delay"
   [class]="toast.classname"
   [class.mb-2]="true"
+  (shown)="onShow(toast)"
   (hidden)="toastService.closeToast(toast)">
+  <ngb-progressbar class="position-absolute h-100 w-100 top-90 start-0 bottom-0 end-0 pointer-events-none" type="dark" [max]="toast.delay" [value]="toast.delayRemaining"></ngb-progressbar>
+  <span class="visually-hidden">{{ toast.delayRemaining / 1000 | number: '1.0-0' }} seconds</span>
   <div class="d-flex">
     <p class="mb-0">{{toast.content}}</p>
     <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close" (click)="toastService.closeToast(toast);"></button>
diff --git a/src-ui/src/app/components/common/toasts/toasts.component.scss b/src-ui/src/app/components/common/toasts/toasts.component.scss
index fb0c96a66..463f96495 100644
--- a/src-ui/src/app/components/common/toasts/toasts.component.scss
+++ b/src-ui/src/app/components/common/toasts/toasts.component.scss
@@ -10,10 +10,23 @@
   display: block; // this corrects an ng-bootstrap bug that prevented animations
 }
 
+::ng-deep .toast-body {
+  position: relative;
+}
+
+::ng-deep .toast.error {
+  border-color: hsla(350, 79%, 40%, 0.4); // bg-danger
+}
+
 ::ng-deep .toast.error .toast-body {
-  background-color: hsla(350, 79%, 40%, 0.9); // bg-danger
+  background-color: hsla(350, 79%, 40%, 0.8); // bg-danger
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 }
+
+.progress {
+  background-color: var(--pngx-primary);
+  opacity: .07;
+}
diff --git a/src-ui/src/app/components/common/toasts/toasts.component.spec.ts b/src-ui/src/app/components/common/toasts/toasts.component.spec.ts
index 2828958a5..bf42dc211 100644
--- a/src-ui/src/app/components/common/toasts/toasts.component.spec.ts
+++ b/src-ui/src/app/components/common/toasts/toasts.component.spec.ts
@@ -3,6 +3,7 @@ import {
   discardPeriodicTasks,
   fakeAsync,
   flush,
+  tick,
 } from '@angular/core/testing'
 import { ToastService } from 'src/app/services/toast.service'
 import { ToastsComponent } from './toasts.component'
@@ -92,6 +93,17 @@ describe('ToastsComponent', () => {
     discardPeriodicTasks()
   }))
 
+  it('should countdown toast', fakeAsync(() => {
+    component.ngOnInit()
+    fixture.detectChanges()
+    component.onShow(toasts[0])
+    tick(5000)
+    expect(component.toasts[0].delayRemaining).toEqual(0)
+    component.ngOnDestroy()
+    flush()
+    discardPeriodicTasks()
+  }))
+
   it('should show an error if given with toast', fakeAsync(() => {
     component.ngOnInit()
     fixture.detectChanges()
diff --git a/src-ui/src/app/components/common/toasts/toasts.component.ts b/src-ui/src/app/components/common/toasts/toasts.component.ts
index d271c7f7d..dac65c37f 100644
--- a/src-ui/src/app/components/common/toasts/toasts.component.ts
+++ b/src-ui/src/app/components/common/toasts/toasts.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { Subscription } from 'rxjs'
+import { Subscription, interval, take } from 'rxjs'
 import { Toast, ToastService } from 'src/app/services/toast.service'
 import { Clipboard } from '@angular/cdk/clipboard'
 
@@ -20,6 +20,8 @@ export class ToastsComponent implements OnInit, OnDestroy {
 
   public copied: boolean = false
 
+  public seconds: number = 0
+
   ngOnDestroy(): void {
     this.subscription?.unsubscribe()
   }
@@ -37,6 +39,20 @@ export class ToastsComponent implements OnInit, OnDestroy {
     })
   }
 
+  onShow(toast: Toast) {
+    const refreshInterval = 150
+    const delay = toast.delay - 500 // for fade animation
+
+    interval(refreshInterval)
+      .pipe(take(delay / refreshInterval))
+      .subscribe((count) => {
+        toast.delayRemaining = Math.max(
+          0,
+          delay - refreshInterval * (count + 1)
+        )
+      })
+  }
+
   public isDetailedError(error: any): boolean {
     return (
       typeof error === 'object' &&
diff --git a/src-ui/src/app/services/toast.service.ts b/src-ui/src/app/services/toast.service.ts
index bbaebdd92..16c534b5c 100644
--- a/src-ui/src/app/services/toast.service.ts
+++ b/src-ui/src/app/services/toast.service.ts
@@ -6,6 +6,8 @@ export interface Toast {
 
   delay: number
 
+  delayRemaining?: number
+
   action?: any
 
   actionName?: string
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index d4292fed7..0518f9bbe 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -250,7 +250,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
   }
 
   .toast {
-    background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%), 0.9);
+    background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%), 0.9);
   }
 
   .toast,