From 78275570938a5568ed60fde8b1a9b99df0df1d1d Mon Sep 17 00:00:00 2001 From: Mustapha Zorgati <15628173+mustaphazorgati@users.noreply.github.com> Date: Thu, 21 May 2020 22:10:38 +0200 Subject: [PATCH] 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 | 5 --- .../popup/dialog-pop-up.component.ts | 4 +- .../components/toast/toast.component.ts | 1 - web/src/app/shared/models/notifications.ts | 4 ++ .../http-client-interceptor.service.ts | 2 +- .../notifications/notification.service.ts | 19 ++++++++-- .../notifications.service.spec.ts | 38 ++++++++++++++++--- web/src/theme/_site.scss | 8 ++++ 8 files changed, 63 insertions(+), 18 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index 7459f0cdf..913b7e874 100644 --- a/web/package-lock.json +++ b/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", diff --git a/web/src/app/shared/components/popup/dialog-pop-up.component.ts b/web/src/app/shared/components/popup/dialog-pop-up.component.ts index 186fcdee4..4da1a5d86 100644 --- a/web/src/app/shared/components/popup/dialog-pop-up.component.ts +++ b/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); diff --git a/web/src/app/shared/components/toast/toast.component.ts b/web/src/app/shared/components/toast/toast.component.ts index 92b231182..6e57dfeec 100644 --- a/web/src/app/shared/components/toast/toast.component.ts +++ b/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'] }) diff --git a/web/src/app/shared/models/notifications.ts b/web/src/app/shared/models/notifications.ts index 5998fa4ab..6906a4955 100644 --- a/web/src/app/shared/models/notifications.ts +++ b/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, diff --git a/web/src/app/shared/services/http-client-interceptor/http-client-interceptor.service.ts b/web/src/app/shared/services/http-client-interceptor/http-client-interceptor.service.ts index bddc8725e..0cc0b78d6 100644 --- a/web/src/app/shared/services/http-client-interceptor/http-client-interceptor.service.ts +++ b/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); } })); diff --git a/web/src/app/shared/services/notifications/notification.service.ts b/web/src/app/shared/services/notifications/notification.service.ts index fb8bdcdd4..63297e5ef 100644 --- a/web/src/app/shared/services/notifications/notification.service.ts +++ b/web/src/app/shared/services/notifications/notification.service.ts @@ -42,10 +42,23 @@ export class NotificationService { } showToast(key: NOTIFICATION_TYPES, additions?: Map) { - 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 }); } } diff --git a/web/src/app/shared/services/notifications/notifications.service.spec.ts b/web/src/app/shared/services/notifications/notifications.service.spec.ts index 95fddac1e..e29b21656 100644 --- a/web/src/app/shared/services/notifications/notifications.service.spec.ts +++ b/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; + 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']); + })); }); diff --git a/web/src/theme/_site.scss b/web/src/theme/_site.scss index bcaca500a..67c28eef6 100644 --- a/web/src/theme/_site.scss +++ b/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 {