Improve alert service

ui/src/app/account/settings/settings.component.html

@@ -8,6 +8,8 @@ <h1 class="mt-3" i18n="@@settings.personalDetails.string">Personal details</h1>
         <strong>Settings saved!</strong>
       </div>
 
+      <app-error-alert></app-error-alert>
+
       <form
         name="form"
         role="form"

ui/src/app/app.constants.ts

@@ -1,4 +1,4 @@
-import { FormControl } from "@angular/forms";
+import { FormControl } from '@angular/forms'
 
 export enum EventType {
   LOG_IN_SUCCESS = 'LOG_IN_SUCCESS',
@@ -10,6 +10,8 @@ export enum EventType {
 export enum AlertType {
   SEND_ACTIVATION_SUCCESS = 'Invite sent.',
   SEND_ACTIVATION_FAILURE = 'Invite email couldn`t be sent.',
+  USER_CREATED = 'User created. Invite sent.',
+  USER_UPDATED = 'User updated successfully',
 }
 
 export const EMAIL_NOT_FOUND_TYPE = 'https://www.jhipster.tech/problem/email-not-found'
@@ -20,10 +22,11 @@ export const DATE_TIME_FORMAT = 'YYYY-MM-DDTHH:mm'
 export const ITEMS_PER_PAGE = 20
 
 export function emailValidator(control: FormControl): { [key: string]: any } | null {
-  // eslint-disable-next-line
-  const emailRegexp = /^([^@\s/."'\(\)\[\]\{\}\\/,:;]+\.)*([^@\s\."\(\)\[\]\{\}\\/,:;]|(".+"))+@[^@\s\."'\(\)\[\]\{\}\\/,:;]+(\.[^@\s\."'\(\)\[\]\{\}\\/,:;]{2,})+$/;
+  const emailRegexp =
+    // eslint-disable-next-line
+    /^([^@\s/."'\(\)\[\]\{\}\\/,:;]+\.)*([^@\s\."\(\)\[\]\{\}\\/,:;]|(".+"))+@[^@\s\."'\(\)\[\]\{\}\\/,:;]+(\.[^@\s\."'\(\)\[\]\{\}\\/,:;]{2,})+$/
   if (control.value && !emailRegexp.test(control.value)) {
-    return { invalidEmail: true };
+    return { invalidEmail: true }
   }
   return null
-}
+}

ui/src/app/error/error-alert.component.html

@@ -3,7 +3,7 @@
     <ngb-alert *ngIf="alert && alert.type && alert.msg" [type]="alert.type" [dismissible]="false">
       <div class="d-flex">
         <p i18n="@@error.subtitle" class="font-size-16 font-weight-bold mr-auto mb-2">Sorry, an error has occurred</p>
-        <a (click)="close(alert)" (keyup)="closeOldestAlert()" tabindex="0">
+        <a (click)="close(alert)" (keyup.esc)="closeOldestAlert()" (keyup.enter)="closeOldestAlert()" tabindex="0">
           <svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
               d="M16 1.61143L14.3886 0L8 6.38857L1.61143 0L0 1.61143L6.38857 8L0 14.3886L1.61143 16L8 9.61143L14.3886 16L16 14.3886L9.61143 8L16 1.61143Z"

ui/src/app/shared/alert/alert.component.html

@@ -3,7 +3,14 @@
     <ngb-alert *ngIf="alert && alert.type && alert.msg" [type]="alert.type" [dismissible]="false" class="alert-success">
       <div class="d-flex">
         <div class="font-size-16 flex-grow-1">{{ alert.msg | localize }}</div>
-        <a (click)="close(alert)" (keyup)="closeOldestAlert()" tabindex="0" class="close">×</a>
+        <a
+          (click)="close(alert)"
+          (keyup.esc)="closeOldestAlert()"
+          (keyup.enter)="closeOldestAlert()"
+          tabindex="0"
+          class="close"
+          >×</a
+        >
       </div>
     </ngb-alert>
   </div>

ui/src/app/shared/alert/alert.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, ErrorHandler, HostListener, Inject, OnInit } from '@angular/core'
-import { Subscription } from 'rxjs'
+import { Subscription, filter } from 'rxjs'
 import { AlertService } from '../service/alert.service'
 import { AppAlert } from './model/alert.model'
 
@@ -18,10 +18,9 @@ export class AlertComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.sub = this.alertService.on().subscribe((alert: AppAlert) => {
-      this.alerts.push(alert)
+    this.sub = this.alertService.on().subscribe((alerts: AppAlert[]) => {
+      this.alerts = alerts
       this.cdr.detectChanges()
-      setTimeout(() => this.close(alert), 5000)
     })
   }
 
@@ -30,13 +29,14 @@ export class AlertComponent implements OnInit {
   }
 
   @HostListener('document:keyup.escape', ['$event'])
+  @HostListener('document:keyup.enter', ['$event'])
   closeOldestAlert() {
     this.alerts.shift()
     this.cdr.detectChanges()
   }
 
   close(alertToRemove: any) {
-    this.alerts = this.alerts.filter((alert: any) => alert !== alertToRemove)
+    this.alertService.clear(alertToRemove)
     this.cdr.detectChanges()
   }
 }

ui/src/app/shared/pipe/localize.ts

@@ -11,6 +11,10 @@ export class LocalizePipe implements PipeTransform {
         return $localize`:@@gatewayApp.msUserServiceMSUser.sendActivate.success.string:${AlertType.SEND_ACTIVATION_SUCCESS}`
       case AlertType.SEND_ACTIVATION_FAILURE:
         return $localize`:@@gatewayApp.msUserServiceMSUser.sendActivate.error.string:${AlertType.SEND_ACTIVATION_FAILURE}`
+      case AlertType.USER_CREATED:
+        return $localize`:@@userServiceApp.user.created.string:${AlertType.USER_CREATED}`
+      case AlertType.USER_UPDATED:
+        return $localize`:@@userServiceApp.user.updated.string:${AlertType.USER_UPDATED}`
     }
   }
 }

ui/src/app/shared/service/alert.service.ts

@@ -1,19 +1,30 @@
 import { Injectable } from '@angular/core'
-import { Observable, Subject } from 'rxjs'
+import { BehaviorSubject, Observable, Subject, filter } from 'rxjs'
 import { AppAlert } from '../alert/model/alert.model'
-import { AlertType } from 'src/app/app.constants'
 
 @Injectable({ providedIn: 'root' })
 export class AlertService {
-  private alerts: Subject<any> = new Subject<any>()
+  private alerts: BehaviorSubject<AppAlert[] | undefined> = new BehaviorSubject<AppAlert[] | undefined>(undefined)
 
   on(): Observable<any> {
-    return this.alerts.asObservable()
+    return this.alerts.pipe(filter((alerts) => !!alerts))
   }
 
   broadcast(alert: string): void {
     const newAlert = new AppAlert('info', alert)
-    this.alerts.next(newAlert)
-    console.log('this.alerts.next called')
+    const newAlerts = []
+    if (this.alerts.value) {
+      newAlerts.push(...this.alerts.value)
+    }
+    newAlerts.push(newAlert)
+
+    this.alerts.next(newAlerts)
+    setTimeout(() => this.clear(newAlert), 5000)
+  }
+
+  clear(alertToClear: AppAlert): void {
+    const newAlerts = this.alerts.value?.filter((alert: any) => alert !== alertToClear)
+
+    this.alerts.next(newAlerts)
   }
 }

ui/src/app/user/user-detail.component.ts

@@ -6,6 +6,7 @@ import { map, switchMap, tap } from 'rxjs'
 import { UserService } from './service/user.service'
 import { AlertService } from '../shared/service/alert.service'
 import { MemberService } from '../member/service/member.service'
+import { AlertType } from '../app.constants'
 
 @Component({
   selector: 'app-user-detail',
@@ -38,7 +39,7 @@ export class UserDetailComponent {
   sendActivate() {
     if (this.user) {
       this.userService.sendActivate(this.user).subscribe((res) => {
-        this.alertService.broadcast('gatewayApp.msUserServiceMSUser.sendActivate.success.string')
+        this.alertService.broadcast(AlertType.SEND_ACTIVATION_SUCCESS)
         this.previousState()
       })
     }

ui/src/app/user/user-update.component.html

@@ -5,19 +5,27 @@ <h1 id="jhi-ms-user-heading" class="mt-5" i18n="@@gatewayApp.msUserServiceMSUser
         Create or edit a User Settings
       </h1>
       <div>
-        <app-alert></app-alert>
+        <app-error-alert></app-error-alert>
         <div class="alerts top right" role="alert" *ngIf="validation.errors && validation.errors.length > 0">
           <ngb-alert
             class="alert alert-danger alert-dismissible"
             role="alert"
             ng-reflect-type="danger"
-            (close)="validation.errors = null"
+            [dismissible]="false"
           >
             <ul class="validation-errors">
               <li *ngFor="let error of validation.errors">
                 {{ error }}
               </li>
             </ul>
+            <a
+              (click)="validation.errors = null"
+              (keyup.esc)="validation.errors = null"
+              (keyup.enter)="validation.errors = null"
+              tabindex="0"
+              class="close"
+              >×</a
+            >
           </ngb-alert>
         </div>
         <div class="form-group">

ui/src/app/user/user-update.component.ts

@@ -14,7 +14,7 @@ import { AccountService } from '../account'
 import { IUser, User } from './model/user.model'
 import { IMember } from '../member/model/member.model'
 import { ErrorService } from '../error/service/error.service'
-import { DATE_TIME_FORMAT, emailValidator } from '../app.constants'
+import { AlertType, DATE_TIME_FORMAT, emailValidator } from '../app.constants'
 
 @Component({
   selector: 'app-user-update',
@@ -261,9 +261,9 @@ export class UserUpdateComponent {
     if (this.existentUser?.id) {
       this.userService.sendActivate(this.existentUser).subscribe((res) => {
         if (res) {
-          this.alertService.broadcast('gatewayApp.msUserServiceMSUser.sendActivate.success.string')
+          this.alertService.broadcast(AlertType.SEND_ACTIVATION_SUCCESS)
         } else {
-          this.alertService.broadcast('gatewayApp.msUserServiceMSUser.sendActivate.error.string')
+          this.alertService.broadcast(AlertType.SEND_ACTIVATION_FAILURE)
         }
         this.navigateToUsersList()
       })
@@ -331,26 +331,25 @@ export class UserUpdateComponent {
   protected onSaveSuccess() {
     this.isSaving = false
     this.navigateToUsersList()
-    this.alertService.broadcast('userServiceApp.user.created.string')
+    this.alertService.broadcast(AlertType.USER_CREATED)
   }
 
   protected onUpdateSuccess() {
     this.isSaving = false
     this.navigateToUsersList()
-    this.alertService.broadcast('userServiceApp.user.updated.string')
+    this.alertService.broadcast(AlertType.USER_UPDATED)
   }
 
   protected onSaveSuccessOwnershipChange() {
     this.isSaving = false
-    // TODO: confirm this actually works, previously it was set to SERVER_API_URL
     this.navigateToHomePage()
-    this.alertService.broadcast('userServiceApp.user.created.string')
+    this.alertService.broadcast(AlertType.USER_CREATED)
   }
 
   protected onUpdateSuccessOwnershipChange() {
     this.isSaving = false
     this.navigateToHomePage()
-    this.alertService.broadcast('userServiceApp.user.updated.string')
+    this.alertService.broadcast(AlertType.USER_UPDATED)
   }
 
   protected onSaveError() {