add error handling and error alert

gateway/package.json

@@ -134,7 +134,7 @@
     "webpack:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --env.stats=minimal",
     "webpack:dev-verbose": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --profile --progress --env.stats=normal",
     "webpack:build:main": "npm run webpack -- --config webpack/webpack.dev.js --env.stats=minimal",
-    "webpack:build": "./node/node_modules/npm/bin/npm run cleanup && ./node/node_modules/npm/bin/npm run webpack:build:main",
+    "webpack:build": "npm run cleanup && npm run webpack:build:main",
     "webpack:local:main": "npm run webpack -- --config webpack/webpack.local.js --profile",
     "webpack:local": "npm run cleanup && npm run webpack:local:main && npm run clean-www",
     "webpack:qa:main": "npm run webpack -- --config webpack/webpack.qa.js --profile",

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

@@ -0,0 +1,19 @@
+<div class="alerts" role="alert">
+  <div *ngFor="let alert of alerts">
+    <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">
+          <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"
+              fill="black"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </a>
+      </div>
+      <div class="font-size-16">{{ alert.msg }}</div>
+    </ngb-alert>
+  </div>
+</div>

ui/src/app/shared/error/error-alert.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { ErrorAlertComponent } from './error-alert.component'
+import { ErrorService } from '../service/error.service'
+import { AppModule } from 'src/app/app.module'
+
+describe('ErrorAlertComponent', () => {
+  let component: ErrorAlertComponent
+  let fixture: ComponentFixture<ErrorAlertComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppModule],
+      declarations: [ErrorAlertComponent],
+    })
+    fixture = TestBed.createComponent(ErrorAlertComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

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

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core'
+import { ChangeDetectorRef, Component, ErrorHandler, HostListener, Inject, OnInit } from '@angular/core'
 import { ErrorService } from '../service/error.service'
-import { Subscription } from 'rxjs/internal/Subscription'
+import { Subscription } from 'rxjs'
 import { ErrorAlert } from '../model/error-alert'
 import { AppError } from '../model/error.model'
 
@@ -9,39 +9,40 @@ import { AppError } from '../model/error.model'
   templateUrl: './error-alert.component.html',
   styleUrls: ['./error-alert.component.scss'],
 })
-export class ErrorAlertComponent {
+export class ErrorAlertComponent implements OnInit {
+  alerts: any[] = []
   sub: Subscription | undefined
 
-  alerts: any[]
-
-  constructor(private errorService: ErrorService) {
-    // look for translation key - if present somehow translate the fucker
-    // set error fields in component for template to read
-
-    this.alerts = []
-
-    this.sub = this.errorService.on().subscribe((e: AppError) => {
-      if (e.statusCode == 404) {
-        if (e.i18nKey) {
-          // set key or actual translated message in below alert object?
-        }
-
-        const alert: ErrorAlert = {
-          type: 'danger',
-          msg: e.message,
-          params: '',
-          toast: false, // previously this.alertService.isToast(),
-          scoped: true,
-        }
-
-        this.alerts.push(alert)
+  constructor(
+    @Inject(ErrorHandler) private errorService: ErrorService,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    this.sub = this.errorService.on().subscribe((err: AppError) => {
+      const alerts = [...this.alerts]
+      const alert: ErrorAlert = {
+        type: 'danger',
+        msg: err.message,
+        toast: false,
       }
+      this.alerts.push(alert)
+      this.cdr.detectChanges()
     })
-
-    // make it show
   }
 
   ngOnDestroy(): void {
     this.sub?.unsubscribe()
   }
+
+  @HostListener('document:keyup.escape', ['$event'])
+  closeOldestAlert() {
+    this.alerts.shift()
+    this.cdr.detectChanges()
+  }
+
+  close(alertToRemove: any) {
+    this.alerts = this.alerts.filter((alert: any) => alert !== alertToRemove)
+    this.cdr.detectChanges()
+  }
 }

ui/src/app/shared/model/error-alert.ts

@@ -4,8 +4,6 @@ export class ErrorAlert {
   constructor(
     public type: 'danger',
     public msg: string,
-    public params: string,
-    public toast: boolean,
-    public scoped: boolean
+    public toast: boolean
   ) {}
 }

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

@@ -1,15 +1,14 @@
 import { HttpErrorResponse } from '@angular/common/http'
-import { ErrorHandler } from '@angular/core'
-import { Observable } from 'rxjs/internal/Observable'
-import { Subject } from 'rxjs/internal/Subject'
+import { ErrorHandler, Injectable } from '@angular/core'
+import { Observable, Subject } from 'rxjs'
 import { AppError } from '../model/error.model'
 
-export class ErrorService implements ErrorHandler {
-  private errors = new Subject<AppError>()
+// To inject this service, you have to include '@Inject(ErrorHandler)' to be able to subscribe to observables, e.g.:
+// @Inject(ErrorHandler) private errorService: ErrorService
 
-  on(): Observable<AppError> {
-    return this.errors
-  }
+@Injectable({ providedIn: 'root' })
+export class ErrorService implements ErrorHandler {
+  private errors: Subject<any> = new Subject<any>()
 
   handleError(error: any) {
     if (error instanceof HttpErrorResponse) {
@@ -23,4 +22,8 @@ export class ErrorService implements ErrorHandler {
       console.error('Unknown error occurred', error)
     }
   }
+
+  on(): Observable<any> {
+    return this.errors.asObservable()
+  }
 }

ui/src/app/shared/shared.module.ts

@@ -1,9 +1,13 @@
 import { NgModule } from '@angular/core'
 import { FindLanguageFromKeyPipe } from './pipe/find-language-from-key'
+import { ErrorAlertComponent } from './error/error-alert.component'
+import { CommonModule } from '@angular/common'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 
 @NgModule({
-  declarations: [FindLanguageFromKeyPipe],
-  exports: [FindLanguageFromKeyPipe],
+  imports: [CommonModule, NgbModule],
+  declarations: [FindLanguageFromKeyPipe, ErrorAlertComponent],
+  exports: [FindLanguageFromKeyPipe, ErrorAlertComponent],
 })
 export class SharedModule {
   static forRoot() {