TSK-1205 Fixed problem with the callback of confirmation dialogs

TSK-1205 Increased the time every toast is shown

TSK-1205 Cosmetic changes to Toast and fixed error where multiple errorPopUps appeared simultaneously

TSK-1205

web/package-lock.json

@@ -7017,11 +7017,6 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
       "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
     },
-    "hammerjs": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
-      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
-    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",

web/src/app/shared/components/popup/dialog-pop-up.component.ts

@@ -32,8 +32,8 @@ export class DialogPopUpComponent implements OnInit {
   }
 
   initError() {
-    this.title = notifications.get(this.data.key).name;
-    this.message = notifications.get(this.data.key).text || this.data.passedError.error.message;
+    this.title = notifications.get(this.data.key).name || '';
+    this.message = notifications.get(this.data.key).text || this.data.passedError.error ? this.data.passedError.error.message : '';
     if (this.data.additions) {
       this.data.additions.forEach((value: string, replacementKey: string) => {
         this.message = this.message.replace(`{${replacementKey}}`, value);

web/src/app/shared/components/toast/toast.component.ts

@@ -4,7 +4,6 @@ import { NOTIFICATION_TYPES, notifications } from '../../models/notifications';
 
 @Component({
   selector: 'app-toast',
-  // template: '{{ message }}',
   templateUrl: './toast.component.html',
   styleUrls: ['./toast.component.scss']
 })

web/src/app/shared/models/notifications.ts

@@ -34,6 +34,10 @@ export enum NOTIFICATION_TYPES {
   MARK_ERR,
 
   // ALERTS
+  // currently their names are used as a way to determine the type of the alert
+  // e.g. we extract from 'SUCCESS_ALERT_2' in notification.service, that this is a success alert
+  // and should therefore have the color green, so please __keep this in mind when refactoring__
+  // usages of this undocumented sideffect: notification.service.ts and toast.component.ts
   INFO_ALERT,
   INFO_ALERT_2,
   DANGER_ALERT,

web/src/app/shared/services/http-client-interceptor/http-client-interceptor.service.ts

@@ -28,7 +28,7 @@ export class HttpClientInterceptor implements HttpInterceptor {
         this.errorsService.triggerError(NOTIFICATION_TYPES.ACCESS_ERR, error);
       } else if (error instanceof HttpErrorResponse && (error.status === 404) && error.url.indexOf('environment-information.json')) {
         // ignore this error
-      } else {
+      } else if (!(error.status === 409 && error.error.exception.endsWith('WorkbasketAccessItemAlreadyExistException'))) {
         this.errorsService.triggerError(NOTIFICATION_TYPES.GENERAL_ERR, error);
       }
     }));

web/src/app/shared/services/notifications/notification.service.ts

@@ -42,10 +42,23 @@ export class NotificationService {
   }
 
   showToast(key: NOTIFICATION_TYPES, additions?: Map<string, string>) {
-    this.matSnack.openFromComponent(ToastComponent, {
-      duration: 2000,
+    let colorClass: string[];
+    const type = NOTIFICATION_TYPES[key].split('_')[0].toLowerCase();
+    switch (type) {
+      case 'danger': colorClass = ['red', 'background-white'];
+        break;
+      case 'success': colorClass = ['white', 'background-bluegreen'];
+        break;
+      case 'info': colorClass = ['white', 'background-darkgreen'];
+        break;
+      case 'warning': colorClass = ['brown', 'background-white'];
+        break;
+      default: colorClass = ['white', 'background-darkgreen'];
+    }
+    return this.matSnack.openFromComponent(ToastComponent, {
+      duration: 5000,
       data: { key, additions },
-      panelClass: ['white', 'background-darkgreen']
+      panelClass: colorClass
     });
   }
 }

web/src/app/shared/services/notifications/notifications.service.spec.ts

@@ -1,18 +1,44 @@
-import { inject, TestBed } from '@angular/core/testing';
-
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
 import { Overlay } from '@angular/cdk/overlay';
-import { MAT_DIALOG_SCROLL_STRATEGY, MatDialog } from '@angular/material/dialog';
+import { MAT_DIALOG_SCROLL_STRATEGY, MatDialogModule } from '@angular/material/dialog';
+
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { NotificationService } from './notification.service';
+import { NOTIFICATION_TYPES } from '../../models/notifications';
+import { ToastComponent } from '../../components/toast/toast.component';
 
 describe('NotificationService', () => {
+  let toastComponent: ToastComponent;
+  let toastFixture: ComponentFixture<ToastComponent>;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [NotificationService, MatSnackBar, Overlay, MatDialog, { provide: MAT_DIALOG_SCROLL_STRATEGY }],
-    });
+      declarations: [ToastComponent],
+      providers: [NotificationService, Overlay, { provide: MAT_DIALOG_SCROLL_STRATEGY }, { provide: MAT_SNACK_BAR_DATA }],
+      imports: [MatSnackBarModule, MatDialogModule, NoopAnimationsModule],
+    }).overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [ToastComponent] } }).compileComponents();
+  });
+
+  beforeEach(() => {
+    toastFixture = TestBed.createComponent(ToastComponent);
+    toastComponent = toastFixture.componentInstance;
+    toastFixture.detectChanges();
   });
 
   it('should be created', inject([NotificationService], (service: NotificationService) => {
     expect(service).toBeTruthy();
   }));
+
+  it('should apply the correct panelClasses for the different alerts', inject([NotificationService], (service:NotificationService) => {
+    let ref = service.showToast(NOTIFICATION_TYPES.INFO_ALERT);
+    expect(ref.containerInstance.snackBarConfig.panelClass).toEqual(['white', 'background-darkgreen']);
+    ref = service.showToast(NOTIFICATION_TYPES.DANGER_ALERT);
+    expect(ref.containerInstance.snackBarConfig.panelClass).toEqual(['red', 'background-white']);
+    ref = service.showToast(NOTIFICATION_TYPES.WARNING_ALERT);
+    expect(ref.containerInstance.snackBarConfig.panelClass).toEqual(['brown', 'background-white']);
+    ref = service.showToast(NOTIFICATION_TYPES.SUCCESS_ALERT);
+    expect(ref.containerInstance.snackBarConfig.panelClass).toEqual(['white', 'background-bluegreen']);
+  }));
 });

web/src/theme/_site.scss

@@ -461,6 +461,14 @@ li.list-group-item:hover {
   background-color: $dark-green;
 }
 
+.background-bluegreen {
+  background-color: $blue-green;
+}
+
+.background-white {
+  background-color: white;
+}
+
 /* our header has a z-index of 1031 and the default z-index of the
  mat-dialog is just 1000 which leads to undesirable overlap*/
 .cdk-overlay-container {