diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf index 804a04774..58d8d0d4c 100644 --- a/src-ui/messages.xlf +++ b/src-ui/messages.xlf @@ -612,42 +612,42 @@ Error retrieving config src/app/components/admin/config/config.component.ts - 104 + 103 Invalid JSON src/app/components/admin/config/config.component.ts - 132 + 129 Configuration updated src/app/components/admin/config/config.component.ts - 176 + 173 An error occurred updating configuration src/app/components/admin/config/config.component.ts - 181 + 178 File successfully updated src/app/components/admin/config/config.component.ts - 204 + 200 An error occurred uploading file src/app/components/admin/config/config.component.ts - 210 + 205 @@ -1375,7 +1375,7 @@ 340 - src/app/components/app-frame/notifications-dropdown/notifications-dropdown.component.html + src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.html 11 @@ -1500,64 +1500,64 @@ Use system language src/app/components/admin/settings/settings.component.ts - 79 + 76 Use date format of display language src/app/components/admin/settings/settings.component.ts - 82 + 79 Error retrieving users src/app/components/admin/settings/settings.component.ts - 224 + 220 src/app/components/admin/users-groups/users-groups.component.ts - 60 + 59 Error retrieving groups src/app/components/admin/settings/settings.component.ts - 246 + 239 src/app/components/admin/users-groups/users-groups.component.ts - 75 + 71 Settings were saved successfully. src/app/components/admin/settings/settings.component.ts - 544 + 535 Settings were saved successfully. Reload is required to apply some changes. src/app/components/admin/settings/settings.component.ts - 548 + 539 Reload now src/app/components/admin/settings/settings.component.ts - 549 + 540 An error occurred while saving settings. src/app/components/admin/settings/settings.component.ts - 559 + 550 src/app/components/app-frame/app-frame.component.ts @@ -2222,23 +2222,23 @@ src/app/components/admin/users-groups/users-groups.component.ts - 130 + 124 src/app/components/admin/users-groups/users-groups.component.ts - 187 + 177 src/app/components/manage/custom-fields/custom-fields.component.ts - 110 + 108 src/app/components/manage/mail/mail.component.ts - 200 + 195 src/app/components/manage/mail/mail.component.ts - 303 + 296 src/app/components/manage/management-list/management-list.component.ts @@ -2490,66 +2490,66 @@ Password has been changed, you will be logged out momentarily. src/app/components/admin/users-groups/users-groups.component.ts - 103 + 97 src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts - 200 + 198 Saved user "". src/app/components/admin/users-groups/users-groups.component.ts - 110 + 104 Error saving user. src/app/components/admin/users-groups/users-groups.component.ts - 120 + 114 Confirm delete user account src/app/components/admin/users-groups/users-groups.component.ts - 128 + 122 This operation will permanently delete this user account. src/app/components/admin/users-groups/users-groups.component.ts - 129 + 123 Proceed src/app/components/admin/users-groups/users-groups.component.ts - 132 + 126 src/app/components/admin/users-groups/users-groups.component.ts - 189 + 179 src/app/components/document-detail/document-detail.component.ts - 964 + 958 src/app/components/document-detail/document-detail.component.ts - 1324 + 1318 src/app/components/document-detail/document-detail.component.ts - 1363 + 1357 src/app/components/document-detail/document-detail.component.ts - 1404 + 1398 src/app/components/document-list/bulk-editor/bulk-editor.component.ts @@ -2565,15 +2565,15 @@ src/app/components/manage/custom-fields/custom-fields.component.ts - 112 + 110 src/app/components/manage/mail/mail.component.ts - 202 + 197 src/app/components/manage/mail/mail.component.ts - 305 + 298 src/app/components/manage/management-list/management-list.component.ts @@ -2588,56 +2588,56 @@ Deleted user "" src/app/components/admin/users-groups/users-groups.component.ts - 139 + 132 Error deleting user "". src/app/components/admin/users-groups/users-groups.component.ts - 147 + 139 Saved group "". src/app/components/admin/users-groups/users-groups.component.ts - 168 + 159 Error saving group. src/app/components/admin/users-groups/users-groups.component.ts - 177 + 167 Confirm delete user group src/app/components/admin/users-groups/users-groups.component.ts - 185 + 175 This operation will permanently delete this user group. src/app/components/admin/users-groups/users-groups.component.ts - 186 + 176 Deleted group "" src/app/components/admin/users-groups/users-groups.component.ts - 196 + 185 Error deleting group "". src/app/components/admin/users-groups/users-groups.component.ts - 204 + 192 @@ -2915,14 +2915,14 @@ Error updating sidebar views src/app/components/app-frame/app-frame.component.ts - 249 + 248 An error occurred while saving update checking settings. src/app/components/app-frame/app-frame.component.ts - 272 + 269 @@ -3092,35 +3092,35 @@ Successfully updated object. src/app/components/app-frame/global-search/global-search.component.ts - 210 + 209 src/app/components/app-frame/global-search/global-search.component.ts - 253 + 247 Error occurred saving object. src/app/components/app-frame/global-search/global-search.component.ts - 215 + 212 src/app/components/app-frame/global-search/global-search.component.ts - 258 + 250 Clear All - src/app/components/app-frame/notifications-dropdown/notifications-dropdown.component.html + src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.html 16 No notifications - src/app/components/app-frame/notifications-dropdown/notifications-dropdown.component.html + src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.html 20 @@ -3157,7 +3157,7 @@ src/app/components/document-detail/document-detail.component.ts - 914 + 911 src/app/components/document-list/bulk-editor/bulk-editor.component.ts @@ -3318,22 +3318,22 @@ Saved field "". src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts - 127 + 126 src/app/components/manage/custom-fields/custom-fields.component.ts - 90 + 89 Error saving field. src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts - 137 + 135 src/app/components/manage/custom-fields/custom-fields.component.ts - 100 + 98 @@ -3395,7 +3395,7 @@ src/app/components/document-detail/document-detail.component.ts - 1381 + 1375 src/app/guards/dirty-saved-view.guard.ts @@ -4099,10 +4099,6 @@ src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html 111 - - src/app/components/common/notification/notification.component.html - 30 - src/app/components/common/system-status-dialog/system-status-dialog.component.html 175 @@ -4115,6 +4111,10 @@ src/app/components/common/system-status-dialog/system-status-dialog.component.html 243 + + src/app/components/common/toast/toast.component.html + 30 + Only process attachments @@ -4523,11 +4523,11 @@ Totp deactivation failed src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts - 135 + 134 src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts - 142 + 139 @@ -5137,7 +5137,7 @@ Error emailing document src/app/components/common/email-document-dialog/email-document-dialog.component.ts - 70 + 69 @@ -5452,32 +5452,6 @@ 41 - - Status - - src/app/components/common/notification/notification.component.html - 28 - - - src/app/components/common/system-status-dialog/system-status-dialog.component.html - 47 - - - src/app/components/manage/mail/mail.component.html - 114 - - - src/app/components/manage/workflows/workflows.component.html - 19 - - - - Copy Raw Error - - src/app/components/common/notification/notification.component.html - 43 - - Read more @@ -5803,71 +5777,71 @@ Profile updated successfully src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts - 196 + 195 Error saving profile src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts - 210 + 207 Error generating auth token src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts - 229 + 224 Error disconnecting social account src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts - 254 + 249 Error fetching TOTP settings src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts - 273 + 268 TOTP activated successfully src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts - 295 + 289 Error activating TOTP src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts - 298 + 291 src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts - 305 + 297 TOTP deactivated successfully src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts - 324 + 313 Error deactivating TOTP src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts - 328 + 315 src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts - 335 + 320 @@ -5959,14 +5933,14 @@ Error deleting link src/app/components/common/share-links-dialog/share-links-dialog.component.ts - 134 + 133 Error creating link src/app/components/common/share-links-dialog/share-links-dialog.component.ts - 166 + 161 @@ -6025,6 +5999,25 @@ 41 + + Status + + src/app/components/common/system-status-dialog/system-status-dialog.component.html + 47 + + + src/app/components/common/toast/toast.component.html + 28 + + + src/app/components/manage/mail/mail.component.html + 114 + + + src/app/components/manage/workflows/workflows.component.html + 19 + + Migration Status @@ -6138,6 +6131,13 @@ 241 + + Copy Raw Error + + src/app/components/common/toast/toast.component.html + 43 + + Hello , welcome to @@ -6163,7 +6163,7 @@ Error updating dashboard src/app/components/dashboard/dashboard.component.ts - 94 + 93 @@ -6868,21 +6868,21 @@ Error saving document src/app/components/document-detail/document-detail.component.ts - 881 + 880 Do you really want to move the document "" to the trash? src/app/components/document-detail/document-detail.component.ts - 915 + 912 Documents can be restored prior to permanent deletion. src/app/components/document-detail/document-detail.component.ts - 916 + 913 src/app/components/document-list/bulk-editor/bulk-editor.component.ts @@ -6893,7 +6893,7 @@ Move to trash src/app/components/document-detail/document-detail.component.ts - 918 + 915 src/app/components/document-list/bulk-editor/bulk-editor.component.ts @@ -6904,14 +6904,14 @@ Error deleting document src/app/components/document-detail/document-detail.component.ts - 938 + 934 Reprocess confirm src/app/components/document-detail/document-detail.component.ts - 960 + 954 src/app/components/document-list/bulk-editor/bulk-editor.component.ts @@ -6922,77 +6922,77 @@ This operation will permanently recreate the archive file for this document. src/app/components/document-detail/document-detail.component.ts - 961 + 955 The archive file will be re-generated with the current settings. src/app/components/document-detail/document-detail.component.ts - 962 + 956 Reprocess operation for "" will begin in the background. Close and re-open or reload this document after the operation has completed to see new content. src/app/components/document-detail/document-detail.component.ts - 972 + 966 Error executing operation src/app/components/document-detail/document-detail.component.ts - 983 + 977 Error downloading document src/app/components/document-detail/document-detail.component.ts - 1030 + 1024 Page Fit src/app/components/document-detail/document-detail.component.ts - 1109 + 1103 Split confirm src/app/components/document-detail/document-detail.component.ts - 1322 + 1316 This operation will split the selected document(s) into new documents. src/app/components/document-detail/document-detail.component.ts - 1323 + 1317 Split operation for "" will begin in the background. src/app/components/document-detail/document-detail.component.ts - 1339 + 1333 Error executing split operation src/app/components/document-detail/document-detail.component.ts - 1348 + 1342 Rotate confirm src/app/components/document-detail/document-detail.component.ts - 1361 + 1355 src/app/components/document-list/bulk-editor/bulk-editor.component.ts @@ -7003,60 +7003,60 @@ This operation will permanently rotate the original version of the current document. src/app/components/document-detail/document-detail.component.ts - 1362 + 1356 Rotation of "" will begin in the background. Close and re-open the document after the operation has completed to see the changes. src/app/components/document-detail/document-detail.component.ts - 1378 + 1372 Error executing rotate operation src/app/components/document-detail/document-detail.component.ts - 1390 + 1384 Delete pages confirm src/app/components/document-detail/document-detail.component.ts - 1402 + 1396 This operation will permanently delete the selected pages from the original document. src/app/components/document-detail/document-detail.component.ts - 1403 + 1397 Delete pages operation for "" will begin in the background. Close and re-open or reload this document after the operation has completed to see the changes. src/app/components/document-detail/document-detail.component.ts - 1418 + 1412 Error executing delete pages operation src/app/components/document-detail/document-detail.component.ts - 1427 + 1421 An error occurred loading tiff: src/app/components/document-detail/document-detail.component.ts - 1487 + 1481 src/app/components/document-detail/document-detail.component.ts - 1491 + 1485 @@ -8270,28 +8270,28 @@ Confirm delete field src/app/components/manage/custom-fields/custom-fields.component.ts - 108 + 106 This operation will permanently delete this field. src/app/components/manage/custom-fields/custom-fields.component.ts - 109 + 107 Deleted field "" src/app/components/manage/custom-fields/custom-fields.component.ts - 119 + 116 Error deleting field "". src/app/components/manage/custom-fields/custom-fields.component.ts - 129 + 125 @@ -8425,154 +8425,154 @@ Error retrieving mail rules src/app/components/manage/mail/mail.component.ts - 131 + 130 OAuth2 authentication success src/app/components/manage/mail/mail.component.ts - 142 + 138 OAuth2 authentication failed, see logs for details src/app/components/manage/mail/mail.component.ts - 154 + 149 Saved account "". src/app/components/manage/mail/mail.component.ts - 178 + 173 Error saving account. src/app/components/manage/mail/mail.component.ts - 190 + 185 Confirm delete mail account src/app/components/manage/mail/mail.component.ts - 198 + 193 This operation will permanently delete this mail account. src/app/components/manage/mail/mail.component.ts - 199 + 194 Deleted mail account "" src/app/components/manage/mail/mail.component.ts - 209 + 204 Error deleting mail account "". src/app/components/manage/mail/mail.component.ts - 220 + 215 Processing mail account "" src/app/components/manage/mail/mail.component.ts - 232 + 227 Error processing mail account "" src/app/components/manage/mail/mail.component.ts - 237 + 232 Saved rule "". src/app/components/manage/mail/mail.component.ts - 256 + 250 Error saving rule. src/app/components/manage/mail/mail.component.ts - 268 + 261 Rule "" enabled. src/app/components/manage/mail/mail.component.ts - 284 + 277 Rule "" disabled. src/app/components/manage/mail/mail.component.ts - 285 + 278 Error toggling rule "". src/app/components/manage/mail/mail.component.ts - 290 + 283 Confirm delete mail rule src/app/components/manage/mail/mail.component.ts - 301 + 294 This operation will permanently delete this mail rule. src/app/components/manage/mail/mail.component.ts - 302 + 295 Deleted mail rule "" src/app/components/manage/mail/mail.component.ts - 312 + 305 Error deleting mail rule "". src/app/components/manage/mail/mail.component.ts - 323 + 316 Permissions updated src/app/components/manage/mail/mail.component.ts - 347 + 340 Error updating permissions src/app/components/manage/mail/mail.component.ts - 352 + 345 src/app/components/manage/management-list/management-list.component.ts @@ -8737,14 +8737,14 @@ Objects deleted successfully src/app/components/manage/management-list/management-list.component.ts - 353 + 352 Error deleting objects src/app/components/manage/management-list/management-list.component.ts - 360 + 358 @@ -8807,14 +8807,14 @@ Views saved successfully. src/app/components/manage/saved-views/saved-views.component.ts - 159 + 158 Error while saving views. src/app/components/manage/saved-views/saved-views.component.ts - 165 + 163 diff --git a/src-ui/src/app/app.component.html b/src-ui/src/app/app.component.html index 40322c0e3..5ffe4aebe 100644 --- a/src-ui/src/app/app.component.html +++ b/src-ui/src/app/app.component.html @@ -1,4 +1,4 @@ - + diff --git a/src-ui/src/app/app.component.spec.ts b/src-ui/src/app/app.component.spec.ts index b4e46e3ed..bc59f78dc 100644 --- a/src-ui/src/app/app.component.spec.ts +++ b/src-ui/src/app/app.component.spec.ts @@ -14,17 +14,14 @@ import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap' import { Subject } from 'rxjs' import { routes } from './app-routing.module' import { AppComponent } from './app.component' -import { NotificationListComponent } from './components/common/notification-list/notification-list.component' +import { ToastsComponent } from './components/common/toasts/toasts.component' import { FileDropComponent } from './components/file-drop/file-drop.component' import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard' import { PermissionsGuard } from './guards/permissions.guard' import { HotKeyService } from './services/hot-key.service' -import { - Notification, - NotificationService, -} from './services/notification.service' import { PermissionsService } from './services/permissions.service' import { SettingsService } from './services/settings.service' +import { Toast, ToastService } from './services/toast.service' import { FileStatus, WebsocketStatusService, @@ -36,7 +33,7 @@ describe('AppComponent', () => { let tourService: TourService let websocketStatusService: WebsocketStatusService let permissionsService: PermissionsService - let notificationService: NotificationService + let toastService: ToastService let router: Router let settingsService: SettingsService let hotKeyService: HotKeyService @@ -49,7 +46,7 @@ describe('AppComponent', () => { NgxFileDropModule, NgbModalModule, AppComponent, - NotificationListComponent, + ToastsComponent, FileDropComponent, NgxBootstrapIconsModule.pick(allIcons), ], @@ -65,7 +62,7 @@ describe('AppComponent', () => { websocketStatusService = TestBed.inject(WebsocketStatusService) permissionsService = TestBed.inject(PermissionsService) settingsService = TestBed.inject(SettingsService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) router = TestBed.inject(Router) hotKeyService = TestBed.inject(HotKeyService) fixture = TestBed.createComponent(AppComponent) @@ -85,14 +82,12 @@ describe('AppComponent', () => { expect(document.body.classList).not.toContain('tour-active') })) - it('should display notification on document consumed with link if user has access', () => { + it('should display toast on document consumed with link if user has access', () => { const navigateSpy = jest.spyOn(router, 'navigate') jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true) - let notification: Notification - notificationService - .getNotifications() - .subscribe((notifications) => (notification = notifications[0])) - const notificationSpy = jest.spyOn(notificationService, 'show') + let toast: Toast + toastService.getToasts().subscribe((toasts) => (toast = toasts[0])) + const toastSpy = jest.spyOn(toastService, 'show') const fileStatusSubject = new Subject() jest .spyOn(websocketStatusService, 'onDocumentConsumptionFinished') @@ -101,65 +96,63 @@ describe('AppComponent', () => { const status = new FileStatus() status.documentId = 1 fileStatusSubject.next(status) - expect(notificationSpy).toHaveBeenCalled() - expect(notification.action).not.toBeUndefined() - notification.action() + expect(toastSpy).toHaveBeenCalled() + expect(toast.action).not.toBeUndefined() + toast.action() expect(navigateSpy).toHaveBeenCalledWith(['documents', status.documentId]) }) - it('should display notification on document consumed without link if user does not have access', () => { + it('should display toast on document consumed without link if user does not have access', () => { jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(false) - let notification: Notification - notificationService - .getNotifications() - .subscribe((notifications) => (notification = notifications[0])) - const notificationSpy = jest.spyOn(notificationService, 'show') + let toast: Toast + toastService.getToasts().subscribe((toasts) => (toast = toasts[0])) + const toastSpy = jest.spyOn(toastService, 'show') const fileStatusSubject = new Subject() jest .spyOn(websocketStatusService, 'onDocumentConsumptionFinished') .mockReturnValue(fileStatusSubject) component.ngOnInit() fileStatusSubject.next(new FileStatus()) - expect(notificationSpy).toHaveBeenCalled() - expect(notification.action).toBeUndefined() + expect(toastSpy).toHaveBeenCalled() + expect(toast.action).toBeUndefined() }) - it('should display notification on document added', () => { + it('should display toast on document added', () => { jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true) - const notificationSpy = jest.spyOn(notificationService, 'show') + const toastSpy = jest.spyOn(toastService, 'show') const fileStatusSubject = new Subject() jest .spyOn(websocketStatusService, 'onDocumentDetected') .mockReturnValue(fileStatusSubject) component.ngOnInit() fileStatusSubject.next(new FileStatus()) - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() }) it('should suppress dashboard notifications if set', () => { jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true) jest.spyOn(settingsService, 'get').mockReturnValue(true) jest.spyOn(router, 'url', 'get').mockReturnValue('/dashboard') - const notificationSpy = jest.spyOn(notificationService, 'show') + const toastSpy = jest.spyOn(toastService, 'show') const fileStatusSubject = new Subject() jest .spyOn(websocketStatusService, 'onDocumentDetected') .mockReturnValue(fileStatusSubject) component.ngOnInit() fileStatusSubject.next(new FileStatus()) - expect(notificationSpy).not.toHaveBeenCalled() + expect(toastSpy).not.toHaveBeenCalled() }) - it('should display notification on document failed', () => { + it('should display toast on document failed', () => { jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true) - const notificationSpy = jest.spyOn(notificationService, 'showError') + const toastSpy = jest.spyOn(toastService, 'showError') const fileStatusSubject = new Subject() jest .spyOn(websocketStatusService, 'onDocumentConsumptionFailed') .mockReturnValue(fileStatusSubject) component.ngOnInit() fileStatusSubject.next(new FileStatus()) - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() }) it('should support hotkeys', () => { diff --git a/src-ui/src/app/app.component.ts b/src-ui/src/app/app.component.ts index 51de90414..a6c4702b7 100644 --- a/src-ui/src/app/app.component.ts +++ b/src-ui/src/app/app.component.ts @@ -2,12 +2,11 @@ import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core' import { Router, RouterOutlet } from '@angular/router' import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap' import { first, Subscription } from 'rxjs' -import { NotificationListComponent } from './components/common/notification-list/notification-list.component' +import { ToastsComponent } from './components/common/toasts/toasts.component' import { FileDropComponent } from './components/file-drop/file-drop.component' import { SETTINGS_KEYS } from './data/ui-settings' import { ComponentRouterService } from './services/component-router.service' import { HotKeyService } from './services/hot-key.service' -import { NotificationService } from './services/notification.service' import { PermissionAction, PermissionsService, @@ -15,6 +14,7 @@ import { } from './services/permissions.service' import { SettingsService } from './services/settings.service' import { TasksService } from './services/tasks.service' +import { ToastService } from './services/toast.service' import { WebsocketStatusService } from './services/websocket-status.service' @Component({ @@ -23,7 +23,7 @@ import { WebsocketStatusService } from './services/websocket-status.service' styleUrls: ['./app.component.scss'], imports: [ FileDropComponent, - NotificationListComponent, + ToastsComponent, TourNgBootstrapModule, RouterOutlet, ], @@ -36,7 +36,7 @@ export class AppComponent implements OnInit, OnDestroy { constructor( private settings: SettingsService, private websocketStatusService: WebsocketStatusService, - private notificationService: NotificationService, + private toastService: ToastService, private router: Router, private tasksService: TasksService, public tourService: TourService, @@ -91,7 +91,7 @@ export class AppComponent implements OnInit, OnDestroy { PermissionType.Document ) ) { - this.notificationService.show({ + this.toastService.show({ content: $localize`Document ${status.filename} was added to Paperless-ngx.`, delay: 10000, actionName: $localize`Open document`, @@ -100,7 +100,7 @@ export class AppComponent implements OnInit, OnDestroy { }, }) } else { - this.notificationService.show({ + this.toastService.show({ content: $localize`Document ${status.filename} was added to Paperless-ngx.`, delay: 10000, }) @@ -115,7 +115,7 @@ export class AppComponent implements OnInit, OnDestroy { if ( this.showNotification(SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED) ) { - this.notificationService.showError( + this.toastService.showError( $localize`Could not add ${status.filename}\: ${status.message}` ) } @@ -130,7 +130,7 @@ export class AppComponent implements OnInit, OnDestroy { SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT ) ) { - this.notificationService.show({ + this.toastService.show({ content: $localize`Document ${status.filename} is being processed by Paperless-ngx.`, delay: 5000, }) diff --git a/src-ui/src/app/components/admin/config/config.component.spec.ts b/src-ui/src/app/components/admin/config/config.component.spec.ts index 818d49111..191532590 100644 --- a/src-ui/src/app/components/admin/config/config.component.spec.ts +++ b/src-ui/src/app/components/admin/config/config.component.spec.ts @@ -10,8 +10,8 @@ import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' import { of, throwError } from 'rxjs' import { OutputTypeConfig } from 'src/app/data/paperless-config' import { ConfigService } from 'src/app/services/config.service' -import { NotificationService } from 'src/app/services/notification.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { FileComponent } from '../../common/input/file/file.component' import { NumberComponent } from '../../common/input/number/number.component' import { SelectComponent } from '../../common/input/select/select.component' @@ -24,7 +24,7 @@ describe('ConfigComponent', () => { let component: ConfigComponent let fixture: ComponentFixture let configService: ConfigService - let notificationService: NotificationService + let toastService: ToastService let settingService: SettingsService beforeEach(async () => { @@ -51,7 +51,7 @@ describe('ConfigComponent', () => { }).compileComponents() configService = TestBed.inject(ConfigService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) settingService = TestBed.inject(SettingsService) fixture = TestBed.createComponent(ConfigComponent) component = fixture.componentInstance @@ -60,7 +60,7 @@ describe('ConfigComponent', () => { it('should load config on init, show error if necessary', () => { const getSpy = jest.spyOn(configService, 'getConfig') - const errorSpy = jest.spyOn(notificationService, 'showError') + const errorSpy = jest.spyOn(toastService, 'showError') getSpy.mockReturnValueOnce( throwError(() => new Error('Error getting config')) ) @@ -78,7 +78,7 @@ describe('ConfigComponent', () => { it('should save config, show error if necessary', () => { const saveSpy = jest.spyOn(configService, 'saveConfig') - const errorSpy = jest.spyOn(notificationService, 'showError') + const errorSpy = jest.spyOn(toastService, 'showError') saveSpy.mockReturnValueOnce( throwError(() => new Error('Error saving config')) ) @@ -112,7 +112,7 @@ describe('ConfigComponent', () => { it('should upload file, show error if necessary', () => { const uploadSpy = jest.spyOn(configService, 'uploadFile') - const errorSpy = jest.spyOn(notificationService, 'showError') + const errorSpy = jest.spyOn(toastService, 'showError') uploadSpy.mockReturnValueOnce( throwError(() => new Error('Error uploading file')) ) diff --git a/src-ui/src/app/components/admin/config/config.component.ts b/src-ui/src/app/components/admin/config/config.component.ts index f89959abf..76f6b8795 100644 --- a/src-ui/src/app/components/admin/config/config.component.ts +++ b/src-ui/src/app/components/admin/config/config.component.ts @@ -25,8 +25,8 @@ import { PaperlessConfigOptions, } from 'src/app/data/paperless-config' import { ConfigService } from 'src/app/services/config.service' -import { NotificationService } from 'src/app/services/notification.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { FileComponent } from '../../common/input/file/file.component' import { NumberComponent } from '../../common/input/number/number.component' import { SelectComponent } from '../../common/input/select/select.component' @@ -79,7 +79,7 @@ export class ConfigComponent constructor( private configService: ConfigService, - private notificationService: NotificationService, + private toastService: ToastService, private settingsService: SettingsService ) { super() @@ -100,10 +100,7 @@ export class ConfigComponent }, error: (e) => { this.loading = false - this.notificationService.showError( - $localize`Error retrieving config`, - e - ) + this.toastService.showError($localize`Error retrieving config`, e) }, }) @@ -173,11 +170,11 @@ export class ConfigComponent this.initialize(config) this.store.next(config) this.settingsService.initializeSettings().subscribe() - this.notificationService.showInfo($localize`Configuration updated`) + this.toastService.showInfo($localize`Configuration updated`) }, error: (e) => { this.loading = false - this.notificationService.showError( + this.toastService.showError( $localize`An error occurred updating configuration`, e ) @@ -200,13 +197,11 @@ export class ConfigComponent this.initialize(config) this.store.next(config) this.settingsService.initializeSettings().subscribe() - this.notificationService.showInfo( - $localize`File successfully updated` - ) + this.toastService.showInfo($localize`File successfully updated`) }, error: (e) => { this.loading = false - this.notificationService.showError( + this.toastService.showError( $localize`An error occurred uploading file`, e ) diff --git a/src-ui/src/app/components/admin/settings/settings.component.spec.ts b/src-ui/src/app/components/admin/settings/settings.component.spec.ts index 28d0c9e1b..c6eeaf896 100644 --- a/src-ui/src/app/components/admin/settings/settings.component.spec.ts +++ b/src-ui/src/app/components/admin/settings/settings.component.spec.ts @@ -29,15 +29,12 @@ import { IfPermissionsDirective } from 'src/app/directives/if-permissions.direct import { PermissionsGuard } from 'src/app/guards/permissions.guard' import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe' import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe' -import { - Notification, - NotificationService, -} from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { GroupService } from 'src/app/services/rest/group.service' import { UserService } from 'src/app/services/rest/user.service' import { SettingsService } from 'src/app/services/settings.service' import { SystemStatusService } from 'src/app/services/system-status.service' +import { Toast, ToastService } from 'src/app/services/toast.service' import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component' import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component' import { CheckComponent } from '../../common/input/check/check.component' @@ -69,7 +66,7 @@ describe('SettingsComponent', () => { let settingsService: SettingsService let activatedRoute: ActivatedRoute let viewportScroller: ViewportScroller - let notificationService: NotificationService + let toastService: ToastService let userService: UserService let permissionsService: PermissionsService let groupService: GroupService @@ -118,7 +115,7 @@ describe('SettingsComponent', () => { router = TestBed.inject(Router) activatedRoute = TestBed.inject(ActivatedRoute) viewportScroller = TestBed.inject(ViewportScroller) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) settingsService = TestBed.inject(SettingsService) settingsService.currentUser = users[0] userService = TestBed.inject(UserService) @@ -197,8 +194,8 @@ describe('SettingsComponent', () => { it('should support save local settings updating appearance settings and calling API, show error', () => { completeSetup() - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationSpy = jest.spyOn(notificationService, 'show') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastSpy = jest.spyOn(toastService, 'show') const storeSpy = jest.spyOn(settingsService, 'storeSettings') const appearanceSettingsSpy = jest.spyOn( settingsService, @@ -212,7 +209,7 @@ describe('SettingsComponent', () => { ) component.saveSettings() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() expect(storeSpy).toHaveBeenCalled() expect(appearanceSettingsSpy).not.toHaveBeenCalled() expect(setSpy).toHaveBeenCalledTimes(29) @@ -220,14 +217,14 @@ describe('SettingsComponent', () => { // succeed storeSpy.mockReturnValueOnce(of(true)) component.saveSettings() - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() expect(appearanceSettingsSpy).toHaveBeenCalled() }) it('should offer reload if settings changes require', () => { completeSetup() - let toast: Notification - notificationService.getNotifications().subscribe((t) => (toast = t[0])) + let toast: Toast + toastService.getToasts().subscribe((t) => (toast = t[0])) component.initialize(true) // reset component.store.getValue()['displayLanguage'] = 'en-US' component.store.getValue()['updateCheckingEnabled'] = false @@ -261,7 +258,7 @@ describe('SettingsComponent', () => { }) it('should show errors on load if load users failure', () => { - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') jest .spyOn(userService, 'listAll') .mockImplementation(() => @@ -269,11 +266,11 @@ describe('SettingsComponent', () => { ) completeSetup(userService) fixture.detectChanges() - expect(notificationErrorSpy).toBeCalled() + expect(toastErrorSpy).toBeCalled() }) it('should show errors on load if load groups failure', () => { - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') jest .spyOn(groupService, 'listAll') .mockImplementation(() => @@ -281,7 +278,7 @@ describe('SettingsComponent', () => { ) completeSetup(groupService) fixture.detectChanges() - expect(notificationErrorSpy).toBeCalled() + expect(toastErrorSpy).toBeCalled() }) it('should load system status on initialize, show errors if needed', () => { diff --git a/src-ui/src/app/components/admin/settings/settings.component.ts b/src-ui/src/app/components/admin/settings/settings.component.ts index 14f58bf23..8737be160 100644 --- a/src-ui/src/app/components/admin/settings/settings.component.ts +++ b/src-ui/src/app/components/admin/settings/settings.component.ts @@ -43,10 +43,6 @@ import { User } from 'src/app/data/user' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe' import { DocumentListViewService } from 'src/app/services/document-list-view.service' -import { - Notification, - NotificationService, -} from 'src/app/services/notification.service' import { PermissionAction, PermissionType, @@ -59,6 +55,7 @@ import { SettingsService, } from 'src/app/services/settings.service' import { SystemStatusService } from 'src/app/services/system-status.service' +import { Toast, ToastService } from 'src/app/services/toast.service' import { CheckComponent } from '../../common/input/check/check.component' import { ColorComponent } from '../../common/input/color/color.component' import { PermissionsGroupComponent } from '../../common/input/permissions/permissions-group/permissions-group.component' @@ -184,7 +181,7 @@ export class SettingsComponent constructor( private documentListViewService: DocumentListViewService, - private notificationService: NotificationService, + private toastService: ToastService, private settings: SettingsService, @Inject(LOCALE_ID) public currentLocale: string, private viewportScroller: ViewportScroller, @@ -220,10 +217,7 @@ export class SettingsComponent this.users = r.results }, error: (e) => { - this.notificationService.showError( - $localize`Error retrieving users`, - e - ) + this.toastService.showError($localize`Error retrieving users`, e) }, }) } @@ -242,10 +236,7 @@ export class SettingsComponent this.groups = r.results }, error: (e) => { - this.notificationService.showError( - $localize`Error retrieving groups`, - e - ) + this.toastService.showError($localize`Error retrieving groups`, e) }, }) } @@ -540,7 +531,7 @@ export class SettingsComponent this.store.next(this.settingsForm.value) this.settings.updateAppearanceSettings() this.settings.initializeDisplayFields() - let savedToast: Notification = { + let savedToast: Toast = { content: $localize`Settings were saved successfully.`, delay: 5000, } @@ -552,10 +543,10 @@ export class SettingsComponent } } - this.notificationService.show(savedToast) + this.toastService.show(savedToast) }, error: (error) => { - this.notificationService.showError( + this.toastService.showError( $localize`An error occurred while saving settings.`, error ) diff --git a/src-ui/src/app/components/admin/trash/trash.component.spec.ts b/src-ui/src/app/components/admin/trash/trash.component.spec.ts index fd9d8020c..aa5a8af0f 100644 --- a/src-ui/src/app/components/admin/trash/trash.component.spec.ts +++ b/src-ui/src/app/components/admin/trash/trash.component.spec.ts @@ -12,7 +12,7 @@ import { import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' import { of, throwError } from 'rxjs' import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe' -import { NotificationService } from 'src/app/services/notification.service' +import { ToastService } from 'src/app/services/toast.service' import { TrashService } from 'src/app/services/trash.service' import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component' import { PageHeaderComponent } from '../../common/page-header/page-header.component' @@ -38,7 +38,7 @@ describe('TrashComponent', () => { let fixture: ComponentFixture let trashService: TrashService let modalService: NgbModal - let notificationService: NotificationService + let toastService: ToastService let router: Router beforeEach(async () => { @@ -60,7 +60,7 @@ describe('TrashComponent', () => { fixture = TestBed.createComponent(TrashComponent) trashService = TestBed.inject(TrashService) modalService = TestBed.inject(NgbModal) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) router = TestBed.inject(Router) component = fixture.componentInstance fixture.detectChanges() @@ -88,13 +88,13 @@ describe('TrashComponent', () => { modalService.activeInstances.subscribe((instances) => { modal = instances[0] }) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') // fail first trashSpy.mockReturnValue(throwError(() => 'Error')) component.delete(documentsInTrash[0]) modal.componentInstance.confirmClicked.next() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() trashSpy.mockReturnValue(of('OK')) component.delete(documentsInTrash[0]) @@ -109,13 +109,13 @@ describe('TrashComponent', () => { modalService.activeInstances.subscribe((instances) => { modal = instances[instances.length - 1] }) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') // fail first trashSpy.mockReturnValue(throwError(() => 'Error')) component.emptyTrash() modal.componentInstance.confirmClicked.next() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() trashSpy.mockReturnValue(of('OK')) component.emptyTrash() @@ -131,12 +131,12 @@ describe('TrashComponent', () => { it('should support restore document, show error if needed', () => { const restoreSpy = jest.spyOn(trashService, 'restoreDocuments') const reloadSpy = jest.spyOn(component, 'reload') - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') // fail first restoreSpy.mockReturnValue(throwError(() => 'Error')) component.restore(documentsInTrash[0]) - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() expect(reloadSpy).not.toHaveBeenCalled() restoreSpy.mockReturnValue(of('OK')) @@ -148,12 +148,12 @@ describe('TrashComponent', () => { it('should support restore all documents, show error if needed', () => { const restoreSpy = jest.spyOn(trashService, 'restoreDocuments') const reloadSpy = jest.spyOn(component, 'reload') - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') // fail first restoreSpy.mockReturnValue(throwError(() => 'Error')) component.restoreAll() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() expect(reloadSpy).not.toHaveBeenCalled() restoreSpy.mockReturnValue(of('OK')) @@ -167,7 +167,7 @@ describe('TrashComponent', () => { it('should offer link to restored document', () => { let toasts const navigateSpy = jest.spyOn(router, 'navigate') - notificationService.getNotifications().subscribe((allToasts) => { + toastService.getToasts().subscribe((allToasts) => { toasts = [...allToasts] }) jest.spyOn(trashService, 'restoreDocuments').mockReturnValue(of('OK')) diff --git a/src-ui/src/app/components/admin/trash/trash.component.ts b/src-ui/src/app/components/admin/trash/trash.component.ts index 625fa146f..1df6ceff4 100644 --- a/src-ui/src/app/components/admin/trash/trash.component.ts +++ b/src-ui/src/app/components/admin/trash/trash.component.ts @@ -10,8 +10,8 @@ import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' import { delay, takeUntil, tap } from 'rxjs' import { Document } from 'src/app/data/document' import { SETTINGS_KEYS } from 'src/app/data/ui-settings' -import { NotificationService } from 'src/app/services/notification.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { TrashService } from 'src/app/services/trash.service' import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component' import { PageHeaderComponent } from '../../common/page-header/page-header.component' @@ -44,7 +44,7 @@ export class TrashComponent constructor( private trashService: TrashService, - private notificationService: NotificationService, + private toastService: ToastService, private modalService: NgbModal, private settingsService: SettingsService, private router: Router @@ -86,14 +86,14 @@ export class TrashComponent modal.componentInstance.buttonsEnabled = false this.trashService.emptyTrash([document.id]).subscribe({ next: () => { - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Document "${document.title}" deleted` ) modal.close() this.reload() }, error: (err) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error deleting document "${document.title}"`, err ) @@ -121,13 +121,13 @@ export class TrashComponent .emptyTrash(documents ? Array.from(documents) : null) .subscribe({ next: () => { - this.notificationService.showInfo($localize`Document(s) deleted`) + this.toastService.showInfo($localize`Document(s) deleted`) this.allToggled = false modal.close() this.reload() }, error: (err) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error deleting document(s)`, err ) @@ -140,7 +140,7 @@ export class TrashComponent restore(document: Document) { this.trashService.restoreDocuments([document.id]).subscribe({ next: () => { - this.notificationService.show({ + this.toastService.show({ content: $localize`Document "${document.title}" restored`, delay: 5000, actionName: $localize`Open document`, @@ -151,7 +151,7 @@ export class TrashComponent this.reload() }, error: (err) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error restoring document "${document.title}"`, err ) @@ -164,12 +164,12 @@ export class TrashComponent .restoreDocuments(documents ? Array.from(documents) : null) .subscribe({ next: () => { - this.notificationService.showInfo($localize`Document(s) restored`) + this.toastService.showInfo($localize`Document(s) restored`) this.allToggled = false this.reload() }, error: (err) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error restoring document(s)`, err ) diff --git a/src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts b/src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts index 5c95aa8a2..559b03f51 100644 --- a/src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts +++ b/src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts @@ -14,11 +14,11 @@ import { Group } from 'src/app/data/group' import { User } from 'src/app/data/user' import { PermissionsGuard } from 'src/app/guards/permissions.guard' import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { GroupService } from 'src/app/services/rest/group.service' import { UserService } from 'src/app/services/rest/user.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component' import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component' import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component' @@ -38,7 +38,7 @@ describe('UsersAndGroupsComponent', () => { let fixture: ComponentFixture let settingsService: SettingsService let modalService: NgbModal - let notificationService: NotificationService + let toastService: ToastService let userService: UserService let permissionsService: PermissionsService let groupService: GroupService @@ -59,7 +59,7 @@ describe('UsersAndGroupsComponent', () => { settingsService.currentUser = users[0] userService = TestBed.inject(UserService) modalService = TestBed.inject(NgbModal) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) permissionsService = TestBed.inject(PermissionsService) jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true) jest @@ -104,13 +104,13 @@ describe('UsersAndGroupsComponent', () => { modalService.activeInstances.subscribe((refs) => (modal = refs[0])) component.editUser(users[0]) const editDialog = modal.componentInstance as UserEditDialogComponent - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') editDialog.failed.emit() - expect(notificationErrorSpy).toBeCalled() + expect(toastErrorSpy).toBeCalled() settingsService.currentUser = users[1] // simulate logged in as different user editDialog.succeeded.emit(users[0]) - expect(notificationInfoSpy).toHaveBeenCalledWith( + expect(toastInfoSpy).toHaveBeenCalledWith( `Saved user "${users[0].username}".` ) component.editUser() @@ -123,18 +123,18 @@ describe('UsersAndGroupsComponent', () => { component.deleteUser(users[0]) const deleteDialog = modal.componentInstance as ConfirmDialogComponent const deleteSpy = jest.spyOn(userService, 'delete') - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') const listAllSpy = jest.spyOn(userService, 'listAll') deleteSpy.mockReturnValueOnce( throwError(() => new Error('error deleting user')) ) deleteDialog.confirm() - expect(notificationErrorSpy).toBeCalled() + expect(toastErrorSpy).toBeCalled() deleteSpy.mockReturnValueOnce(of(true)) deleteDialog.confirm() expect(listAllSpy).toHaveBeenCalled() - expect(notificationInfoSpy).toHaveBeenCalledWith('Deleted user "user1"') + expect(toastInfoSpy).toHaveBeenCalledWith('Deleted user "user1"') }) it('should logout current user if password changed, after delay', fakeAsync(() => { @@ -163,12 +163,12 @@ describe('UsersAndGroupsComponent', () => { modalService.activeInstances.subscribe((refs) => (modal = refs[0])) component.editGroup(groups[0]) const editDialog = modal.componentInstance as GroupEditDialogComponent - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') editDialog.failed.emit() - expect(notificationErrorSpy).toBeCalled() + expect(toastErrorSpy).toBeCalled() editDialog.succeeded.emit(groups[0]) - expect(notificationInfoSpy).toHaveBeenCalledWith( + expect(toastInfoSpy).toHaveBeenCalledWith( `Saved group "${groups[0].name}".` ) component.editGroup() @@ -181,18 +181,18 @@ describe('UsersAndGroupsComponent', () => { component.deleteGroup(groups[0]) const deleteDialog = modal.componentInstance as ConfirmDialogComponent const deleteSpy = jest.spyOn(groupService, 'delete') - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') const listAllSpy = jest.spyOn(groupService, 'listAll') deleteSpy.mockReturnValueOnce( throwError(() => new Error('error deleting group')) ) deleteDialog.confirm() - expect(notificationErrorSpy).toBeCalled() + expect(toastErrorSpy).toBeCalled() deleteSpy.mockReturnValueOnce(of(true)) deleteDialog.confirm() expect(listAllSpy).toHaveBeenCalled() - expect(notificationInfoSpy).toHaveBeenCalledWith('Deleted group "group1"') + expect(toastInfoSpy).toHaveBeenCalledWith('Deleted group "group1"') }) it('should get group name', () => { @@ -202,7 +202,7 @@ describe('UsersAndGroupsComponent', () => { }) it('should show errors on load if load users failure', () => { - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') jest .spyOn(userService, 'listAll') .mockImplementation(() => @@ -210,11 +210,11 @@ describe('UsersAndGroupsComponent', () => { ) completeSetup(userService) fixture.detectChanges() - expect(notificationErrorSpy).toBeCalled() + expect(toastErrorSpy).toBeCalled() }) it('should show errors on load if load groups failure', () => { - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') jest .spyOn(groupService, 'listAll') .mockImplementation(() => @@ -222,6 +222,6 @@ describe('UsersAndGroupsComponent', () => { ) completeSetup(groupService) fixture.detectChanges() - expect(notificationErrorSpy).toBeCalled() + expect(toastErrorSpy).toBeCalled() }) }) diff --git a/src-ui/src/app/components/admin/users-groups/users-groups.component.ts b/src-ui/src/app/components/admin/users-groups/users-groups.component.ts index 3d3f27fa9..9ed73cde4 100644 --- a/src-ui/src/app/components/admin/users-groups/users-groups.component.ts +++ b/src-ui/src/app/components/admin/users-groups/users-groups.component.ts @@ -5,11 +5,11 @@ import { Subject, first, takeUntil } from 'rxjs' import { Group } from 'src/app/data/group' import { User } from 'src/app/data/user' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { GroupService } from 'src/app/services/rest/group.service' import { UserService } from 'src/app/services/rest/user.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component' import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component' import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component' @@ -39,7 +39,7 @@ export class UsersAndGroupsComponent constructor( private usersService: UserService, private groupsService: GroupService, - private notificationService: NotificationService, + private toastService: ToastService, private modalService: NgbModal, public permissionsService: PermissionsService, private settings: SettingsService @@ -56,10 +56,7 @@ export class UsersAndGroupsComponent this.users = r.results }, error: (e) => { - this.notificationService.showError( - $localize`Error retrieving users`, - e - ) + this.toastService.showError($localize`Error retrieving users`, e) }, }) @@ -71,10 +68,7 @@ export class UsersAndGroupsComponent this.groups = r.results }, error: (e) => { - this.notificationService.showError( - $localize`Error retrieving groups`, - e - ) + this.toastService.showError($localize`Error retrieving groups`, e) }, }) } @@ -99,14 +93,14 @@ export class UsersAndGroupsComponent newUser.id === this.settings.currentUser.id && (modal.componentInstance as UserEditDialogComponent).passwordIsSet ) { - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Password has been changed, you will be logged out momentarily.` ) setTimeout(() => { window.location.href = `${window.location.origin}/accounts/logout/?next=/accounts/login/?next=/` }, 2500) } else { - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Saved user "${newUser.username}".` ) this.usersService.listAll().subscribe((r) => { @@ -117,7 +111,7 @@ export class UsersAndGroupsComponent modal.componentInstance.failed .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe((e) => { - this.notificationService.showError($localize`Error saving user.`, e) + this.toastService.showError($localize`Error saving user.`, e) }) } @@ -135,15 +129,13 @@ export class UsersAndGroupsComponent this.usersService.delete(user).subscribe({ next: () => { modal.close() - this.notificationService.showInfo( - $localize`Deleted user "${user.username}"` - ) + this.toastService.showInfo($localize`Deleted user "${user.username}"`) this.usersService.listAll().subscribe((r) => { this.users = r.results }) }, error: (e) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error deleting user "${user.username}".`, e ) @@ -164,9 +156,7 @@ export class UsersAndGroupsComponent modal.componentInstance.succeeded .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe((newGroup) => { - this.notificationService.showInfo( - $localize`Saved group "${newGroup.name}".` - ) + this.toastService.showInfo($localize`Saved group "${newGroup.name}".`) this.groupsService.listAll().subscribe((r) => { this.groups = r.results }) @@ -174,7 +164,7 @@ export class UsersAndGroupsComponent modal.componentInstance.failed .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe((e) => { - this.notificationService.showError($localize`Error saving group.`, e) + this.toastService.showError($localize`Error saving group.`, e) }) } @@ -192,15 +182,13 @@ export class UsersAndGroupsComponent this.groupsService.delete(group).subscribe({ next: () => { modal.close() - this.notificationService.showInfo( - $localize`Deleted group "${group.name}"` - ) + this.toastService.showInfo($localize`Deleted group "${group.name}"`) this.groupsService.listAll().subscribe((r) => { this.groups = r.results }) }, error: (e) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error deleting group "${group.name}".`, e ) diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html index d2fd2c34e..b3d515274 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.html +++ b/src-ui/src/app/components/app-frame/app-frame.component.html @@ -30,7 +30,7 @@
    - +
  • - @if (notifications.length === 0) { + @if (toasts.length === 0) {

    No notifications

    }
    - @for (notification of notifications; track notification.id) { - + @for (toast of toasts; track toast.id) { + }
    diff --git a/src-ui/src/app/components/app-frame/notifications-dropdown/notifications-dropdown.component.scss b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.scss similarity index 86% rename from src-ui/src/app/components/app-frame/notifications-dropdown/notifications-dropdown.component.scss rename to src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.scss index 87bddd134..2332e710d 100644 --- a/src-ui/src/app/components/app-frame/notifications-dropdown/notifications-dropdown.component.scss +++ b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.scss @@ -1,5 +1,5 @@ .dropdown-menu { - width: var(--pngx-notification-max-width); + width: var(--pngx-toast-max-width); } .dropdown-menu .scroll-list { diff --git a/src-ui/src/app/components/app-frame/notifications-dropdown/notifications-dropdown.component.spec.ts b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.spec.ts similarity index 58% rename from src-ui/src/app/components/app-frame/notifications-dropdown/notifications-dropdown.component.spec.ts rename to src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.spec.ts index 981c6ae8e..33b948f30 100644 --- a/src-ui/src/app/components/app-frame/notifications-dropdown/notifications-dropdown.component.spec.ts +++ b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.spec.ts @@ -9,13 +9,10 @@ import { } from '@angular/core/testing' import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' import { Subject } from 'rxjs' -import { - Notification, - NotificationService, -} from 'src/app/services/notification.service' -import { NotificationsDropdownComponent } from './notifications-dropdown.component' +import { Toast, ToastService } from 'src/app/services/toast.service' +import { ToastsDropdownComponent } from './toasts-dropdown.component' -const notifications = [ +const toasts = [ { id: 'abc-123', content: 'foo bar', @@ -41,16 +38,16 @@ const notifications = [ }, ] -describe('NotificationsDropdownComponent', () => { - let component: NotificationsDropdownComponent - let fixture: ComponentFixture - let notificationService: NotificationService - let notificationsSubject: Subject = new Subject() +describe('ToastsDropdownComponent', () => { + let component: ToastsDropdownComponent + let fixture: ComponentFixture + let toastService: ToastService + let toastsSubject: Subject = new Subject() beforeEach(async () => { TestBed.configureTestingModule({ imports: [ - NotificationsDropdownComponent, + ToastsDropdownComponent, NgxBootstrapIconsModule.pick(allIcons), ], providers: [ @@ -59,26 +56,24 @@ describe('NotificationsDropdownComponent', () => { ], }).compileComponents() - fixture = TestBed.createComponent(NotificationsDropdownComponent) - notificationService = TestBed.inject(NotificationService) - jest - .spyOn(notificationService, 'getNotifications') - .mockReturnValue(notificationsSubject) + fixture = TestBed.createComponent(ToastsDropdownComponent) + toastService = TestBed.inject(ToastService) + jest.spyOn(toastService, 'getToasts').mockReturnValue(toastsSubject) component = fixture.componentInstance fixture.detectChanges() }) - it('should call getNotifications and return notifications', fakeAsync(() => { - const spy = jest.spyOn(notificationService, 'getNotifications') + it('should call getToasts and return toasts', fakeAsync(() => { + const spy = jest.spyOn(toastService, 'getToasts') component.ngOnInit() - notificationsSubject.next(notifications) + toastsSubject.next(toasts) fixture.detectChanges() expect(spy).toHaveBeenCalled() - expect(component.notifications).toContainEqual({ + expect(component.toasts).toContainEqual({ id: 'abc-123', content: 'foo bar', delay: 5000, @@ -89,9 +84,9 @@ describe('NotificationsDropdownComponent', () => { discardPeriodicTasks() })) - it('should show a notification', fakeAsync(() => { + it('should show a toast', fakeAsync(() => { component.ngOnInit() - notificationsSubject.next(notifications) + toastsSubject.next(toasts) fixture.detectChanges() expect(fixture.nativeElement.textContent).toContain('foo bar') @@ -101,16 +96,12 @@ describe('NotificationsDropdownComponent', () => { discardPeriodicTasks() })) - it('should toggle suppressPopupNotifications', fakeAsync((finish) => { + it('should toggle suppressPopupToasts', fakeAsync((finish) => { component.ngOnInit() fixture.detectChanges() - notificationsSubject.next(notifications) + toastsSubject.next(toasts) - const spy = jest.spyOn( - notificationService, - 'suppressPopupNotifications', - 'set' - ) + const spy = jest.spyOn(toastService, 'suppressPopupToasts', 'set') component.onOpenChange(true) expect(spy).toHaveBeenCalledWith(true) diff --git a/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.ts b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.ts new file mode 100644 index 000000000..c04d758af --- /dev/null +++ b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.ts @@ -0,0 +1,42 @@ +import { Component, OnDestroy, OnInit } from '@angular/core' +import { + NgbDropdownModule, + NgbProgressbarModule, +} from '@ng-bootstrap/ng-bootstrap' +import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' +import { Subscription } from 'rxjs' +import { Toast, ToastService } from 'src/app/services/toast.service' +import { ToastComponent } from '../../common/toast/toast.component' + +@Component({ + selector: 'pngx-toasts-dropdown', + templateUrl: './toasts-dropdown.component.html', + styleUrls: ['./toasts-dropdown.component.scss'], + imports: [ + ToastComponent, + NgbDropdownModule, + NgbProgressbarModule, + NgxBootstrapIconsModule, + ], +}) +export class ToastsDropdownComponent implements OnInit, OnDestroy { + constructor(public toastService: ToastService) {} + + private subscription: Subscription + + public toasts: Toast[] = [] + + ngOnDestroy(): void { + this.subscription?.unsubscribe() + } + + ngOnInit(): void { + this.subscription = this.toastService.getToasts().subscribe((toasts) => { + this.toasts = [...toasts] + }) + } + + onOpenChange(open: boolean): void { + this.toastService.suppressPopupToasts = open + } +} diff --git a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts index 93f9e3571..78df9c74f 100644 --- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts +++ b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts @@ -18,9 +18,9 @@ import { NgSelectModule } from '@ng-select/ng-select' import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' import { of } from 'rxjs' import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field' -import { NotificationService } from 'src/app/services/notification.service' import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component' import { SelectComponent } from '../input/select/select.component' import { CustomFieldsDropdownComponent } from './custom-fields-dropdown.component' @@ -42,7 +42,7 @@ describe('CustomFieldsDropdownComponent', () => { let component: CustomFieldsDropdownComponent let fixture: ComponentFixture let customFieldService: CustomFieldsService - let notificationService: NotificationService + let toastService: ToastService let modalService: NgbModal let settingsService: SettingsService @@ -64,7 +64,7 @@ describe('CustomFieldsDropdownComponent', () => { ], }) customFieldService = TestBed.inject(CustomFieldsService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) modalService = TestBed.inject(NgbModal) jest.spyOn(customFieldService, 'listAll').mockReturnValue( of({ @@ -113,8 +113,8 @@ describe('CustomFieldsDropdownComponent', () => { it('should support creating field, show error if necessary, then add', fakeAsync(() => { let modal: NgbModalRef modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1])) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') const getFieldsSpy = jest.spyOn( CustomFieldsDropdownComponent.prototype as any, 'getFields' @@ -129,13 +129,13 @@ describe('CustomFieldsDropdownComponent', () => { // fail first editDialog.failed.emit({ error: 'error creating field' }) - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() expect(getFieldsSpy).not.toHaveBeenCalled() // succeed editDialog.succeeded.emit(fields[0]) tick(100) - expect(notificationInfoSpy).toHaveBeenCalled() + expect(toastInfoSpy).toHaveBeenCalled() expect(getFieldsSpy).toHaveBeenCalled() expect(addFieldSpy).toHaveBeenCalled() })) diff --git a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts index ba23d5d05..9e211edd0 100644 --- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts +++ b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts @@ -14,13 +14,13 @@ import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' import { first, takeUntil } from 'rxjs' import { CustomField, DATA_TYPE_LABELS } from 'src/app/data/custom-field' import { CustomFieldInstance } from 'src/app/data/custom-field-instance' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionAction, PermissionType, PermissionsService, } from 'src/app/services/permissions.service' import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service' +import { ToastService } from 'src/app/services/toast.service' import { LoadingComponentWithPermissions } from '../../loading-component/loading.component' import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component' @@ -78,7 +78,7 @@ export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissio constructor( private customFieldsService: CustomFieldsService, private modalService: NgbModal, - private notificationService: NotificationService, + private toastService: ToastService, private permissionsService: PermissionsService ) { super() @@ -123,9 +123,7 @@ export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissio modal.componentInstance.succeeded .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe((newField) => { - this.notificationService.showInfo( - $localize`Saved field "${newField.name}".` - ) + this.toastService.showInfo($localize`Saved field "${newField.name}".`) this.customFieldsService.clearCache() this.getFields() this.created.emit(newField) @@ -134,7 +132,7 @@ export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissio modal.componentInstance.failed .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe((e) => { - this.notificationService.showError($localize`Error saving field.`, e) + this.toastService.showError($localize`Error saving field.`, e) }) } diff --git a/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.spec.ts b/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.spec.ts index b090a28af..9ffa1ea95 100644 --- a/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.spec.ts +++ b/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.spec.ts @@ -12,11 +12,11 @@ import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' import { of, throwError } from 'rxjs' import { IfOwnerDirective } from 'src/app/directives/if-owner.directive' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { GroupService } from 'src/app/services/rest/group.service' import { UserService } from 'src/app/services/rest/user.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { PasswordComponent } from '../../input/password/password.component' import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component' import { SelectComponent } from '../../input/select/select.component' @@ -29,7 +29,7 @@ describe('UserEditDialogComponent', () => { let component: UserEditDialogComponent let settingsService: SettingsService let permissionsService: PermissionsService - let notificationService: NotificationService + let toastService: ToastService let fixture: ComponentFixture beforeEach(async () => { @@ -75,7 +75,7 @@ describe('UserEditDialogComponent', () => { settingsService = TestBed.inject(SettingsService) settingsService.currentUser = { id: 99, username: 'user99' } permissionsService = TestBed.inject(PermissionsService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) component = fixture.componentInstance fixture.detectChanges() @@ -133,22 +133,22 @@ describe('UserEditDialogComponent', () => { component['service'] as UserService, 'deactivateTotp' ) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') deactivateSpy.mockReturnValueOnce(throwError(() => new Error('error'))) component.deactivateTotp() expect(deactivateSpy).toHaveBeenCalled() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() deactivateSpy.mockReturnValueOnce(of(false)) component.deactivateTotp() expect(deactivateSpy).toHaveBeenCalled() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() deactivateSpy.mockReturnValueOnce(of(true)) component.deactivateTotp() expect(deactivateSpy).toHaveBeenCalled() - expect(notificationInfoSpy).toHaveBeenCalled() + expect(toastInfoSpy).toHaveBeenCalled() }) it('should check superuser status of current user', () => { diff --git a/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts b/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts index 298651c6a..7ba0f5ceb 100644 --- a/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts +++ b/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts @@ -10,11 +10,11 @@ import { first } from 'rxjs' import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component' import { Group } from 'src/app/data/group' import { User } from 'src/app/data/user' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { GroupService } from 'src/app/services/rest/group.service' import { UserService } from 'src/app/services/rest/user.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { PasswordComponent } from '../../input/password/password.component' import { SelectComponent } from '../../input/select/select.component' import { TextComponent } from '../../input/text/text.component' @@ -46,7 +46,7 @@ export class UserEditDialogComponent activeModal: NgbActiveModal, groupsService: GroupService, settingsService: SettingsService, - private notificationService: NotificationService, + private toastService: ToastService, private permissionsService: PermissionsService ) { super(service, activeModal, service, settingsService) @@ -128,20 +128,15 @@ export class UserEditDialogComponent next: (result) => { this.totpLoading = false if (result) { - this.notificationService.showInfo($localize`Totp deactivated`) + this.toastService.showInfo($localize`Totp deactivated`) this.object.is_mfa_enabled = false } else { - this.notificationService.showError( - $localize`Totp deactivation failed` - ) + this.toastService.showError($localize`Totp deactivation failed`) } }, error: (e) => { this.totpLoading = false - this.notificationService.showError( - $localize`Totp deactivation failed`, - e - ) + this.toastService.showError($localize`Totp deactivation failed`, e) }, }) } diff --git a/src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.spec.ts b/src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.spec.ts index 15495b369..7a3659205 100644 --- a/src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.spec.ts +++ b/src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.spec.ts @@ -6,9 +6,9 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' import { of, throwError } from 'rxjs' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { DocumentService } from 'src/app/services/rest/document.service' +import { ToastService } from 'src/app/services/toast.service' import { EmailDocumentDialogComponent } from './email-document-dialog.component' describe('EmailDocumentDialogComponent', () => { @@ -16,7 +16,7 @@ describe('EmailDocumentDialogComponent', () => { let fixture: ComponentFixture let documentService: DocumentService let permissionsService: PermissionsService - let notificationService: NotificationService + let toastService: ToastService beforeEach(async () => { await TestBed.configureTestingModule({ @@ -34,7 +34,7 @@ describe('EmailDocumentDialogComponent', () => { fixture = TestBed.createComponent(EmailDocumentDialogComponent) documentService = TestBed.inject(DocumentService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) component = fixture.componentInstance fixture.detectChanges() }) @@ -47,8 +47,8 @@ describe('EmailDocumentDialogComponent', () => { }) it('should support sending document via email, showing error if needed', () => { - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationSuccessSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastSuccessSpy = jest.spyOn(toastService, 'showInfo') component.emailAddress = 'hello@paperless-ngx.com' component.emailSubject = 'Hello' component.emailMessage = 'World' @@ -56,11 +56,11 @@ describe('EmailDocumentDialogComponent', () => { .spyOn(documentService, 'emailDocument') .mockReturnValue(throwError(() => new Error('Unable to email document'))) component.emailDocument() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() jest.spyOn(documentService, 'emailDocument').mockReturnValue(of(true)) component.emailDocument() - expect(notificationSuccessSpy).toHaveBeenCalled() + expect(toastSuccessSpy).toHaveBeenCalled() }) it('should close the dialog', () => { diff --git a/src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.ts b/src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.ts index a028ba702..ab8b9768b 100644 --- a/src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.ts +++ b/src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.ts @@ -2,8 +2,8 @@ import { Component, Input } from '@angular/core' import { FormsModule } from '@angular/forms' import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' -import { NotificationService } from 'src/app/services/notification.service' import { DocumentService } from 'src/app/services/rest/document.service' +import { ToastService } from 'src/app/services/toast.service' import { LoadingComponentWithPermissions } from '../../loading-component/loading.component' @Component({ @@ -40,7 +40,7 @@ export class EmailDocumentDialogComponent extends LoadingComponentWithPermission constructor( private activeModal: NgbActiveModal, private documentService: DocumentService, - private notificationService: NotificationService + private toastService: ToastService ) { super() this.loading = false @@ -62,14 +62,11 @@ export class EmailDocumentDialogComponent extends LoadingComponentWithPermission this.emailAddress = '' this.emailSubject = '' this.emailMessage = '' - this.notificationService.showInfo($localize`Email sent`) + this.toastService.showInfo($localize`Email sent`) }, error: (e) => { this.loading = false - this.notificationService.showError( - $localize`Error emailing document`, - e - ) + this.toastService.showError($localize`Error emailing document`, e) }, }) } diff --git a/src-ui/src/app/components/common/notification-list/notification-list.component.html b/src-ui/src/app/components/common/notification-list/notification-list.component.html deleted file mode 100644 index b383a142b..000000000 --- a/src-ui/src/app/components/common/notification-list/notification-list.component.html +++ /dev/null @@ -1,3 +0,0 @@ -@for (notification of notifications; track notification.id) { - -} diff --git a/src-ui/src/app/components/common/notification-list/notification-list.component.spec.ts b/src-ui/src/app/components/common/notification-list/notification-list.component.spec.ts deleted file mode 100644 index 69614aad2..000000000 --- a/src-ui/src/app/components/common/notification-list/notification-list.component.spec.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http' -import { provideHttpClientTesting } from '@angular/common/http/testing' -import { ComponentFixture, TestBed } from '@angular/core/testing' -import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' -import { Subject } from 'rxjs' -import { - Notification, - NotificationService, -} from 'src/app/services/notification.service' -import { NotificationListComponent } from './notification-list.component' - -const notification = { - content: 'Error 2 content', - delay: 5000, - error: { - url: 'https://example.com', - status: 500, - statusText: 'Internal Server Error', - message: 'Internal server error 500 message', - error: { detail: 'Error 2 message details' }, - }, -} - -describe('NotificationListComponent', () => { - let component: NotificationListComponent - let fixture: ComponentFixture - let notificationService: NotificationService - let notificationSubject: Subject = new Subject() - - beforeEach(async () => { - TestBed.configureTestingModule({ - imports: [ - NotificationListComponent, - NgxBootstrapIconsModule.pick(allIcons), - ], - providers: [ - provideHttpClient(withInterceptorsFromDi()), - provideHttpClientTesting(), - ], - }).compileComponents() - - fixture = TestBed.createComponent(NotificationListComponent) - notificationService = TestBed.inject(NotificationService) - jest.replaceProperty( - notificationService, - 'showNotification', - notificationSubject - ) - - component = fixture.componentInstance - - fixture.detectChanges() - }) - - it('should create', () => { - expect(component).toBeTruthy() - }) - - it('should close notification', () => { - component.notifications = [notification] - const closenotificationSpy = jest.spyOn( - notificationService, - 'closeNotification' - ) - component.closeNotification() - expect(component.notifications).toEqual([]) - expect(closenotificationSpy).toHaveBeenCalledWith(notification) - }) - - it('should unsubscribe', () => { - const unsubscribeSpy = jest.spyOn( - (component as any).subscription, - 'unsubscribe' - ) - component.ngOnDestroy() - expect(unsubscribeSpy).toHaveBeenCalled() - }) - - it('should subscribe to notificationService', () => { - component.ngOnInit() - notificationSubject.next(notification) - expect(component.notifications).toEqual([notification]) - }) -}) diff --git a/src-ui/src/app/components/common/notification-list/notification-list.component.ts b/src-ui/src/app/components/common/notification-list/notification-list.component.ts deleted file mode 100644 index 8028f7801..000000000 --- a/src-ui/src/app/components/common/notification-list/notification-list.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { Component, OnDestroy, OnInit } from '@angular/core' -import { - NgbAccordionModule, - NgbProgressbarModule, -} from '@ng-bootstrap/ng-bootstrap' -import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' -import { Subscription } from 'rxjs' -import { - Notification, - NotificationService, -} from 'src/app/services/notification.service' -import { NotificationComponent } from '../notification/notification.component' - -@Component({ - selector: 'pngx-notification-list', - templateUrl: './notification-list.component.html', - styleUrls: ['./notification-list.component.scss'], - imports: [ - NotificationComponent, - NgbAccordionModule, - NgbProgressbarModule, - NgxBootstrapIconsModule, - ], -}) -export class NotificationListComponent implements OnInit, OnDestroy { - constructor(public notificationService: NotificationService) {} - - private subscription: Subscription - - public notifications: Notification[] = [] // array to force change detection - - ngOnDestroy(): void { - this.subscription?.unsubscribe() - } - - ngOnInit(): void { - this.subscription = this.notificationService.showNotification.subscribe( - (notification) => { - this.notifications = notification ? [notification] : [] - } - ) - } - - closeNotification() { - this.notificationService.closeNotification(this.notifications[0]) - this.notifications = [] - } -} diff --git a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts index 1edeedf68..64e122612 100644 --- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts +++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts @@ -16,8 +16,8 @@ import { } from '@ng-bootstrap/ng-bootstrap' import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' import { of, throwError } from 'rxjs' -import { NotificationService } from 'src/app/services/notification.service' import { ProfileService } from 'src/app/services/profile.service' +import { ToastService } from 'src/app/services/toast.service' import { ConfirmButtonComponent } from '../confirm-button/confirm-button.component' import { PasswordComponent } from '../input/password/password.component' import { TextComponent } from '../input/text/text.component' @@ -44,7 +44,7 @@ describe('ProfileEditDialogComponent', () => { let component: ProfileEditDialogComponent let fixture: ComponentFixture let profileService: ProfileService - let notificationService: NotificationService + let toastService: ToastService let clipboard: Clipboard beforeEach(() => { @@ -64,7 +64,7 @@ describe('ProfileEditDialogComponent', () => { providers: [NgbActiveModal, provideHttpClient(withInterceptorsFromDi())], }) profileService = TestBed.inject(ProfileService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) clipboard = TestBed.inject(Clipboard) fixture = TestBed.createComponent(ProfileEditDialogComponent) component = fixture.componentInstance @@ -94,13 +94,13 @@ describe('ProfileEditDialogComponent', () => { auth_token: profile.auth_token, } const updateSpy = jest.spyOn(profileService, 'update') - const errorSpy = jest.spyOn(notificationService, 'showError') + const errorSpy = jest.spyOn(toastService, 'showError') updateSpy.mockReturnValueOnce(throwError(() => new Error('failed to save'))) component.save() expect(errorSpy).toHaveBeenCalled() updateSpy.mockClear() - const infoSpy = jest.spyOn(notificationService, 'showInfo') + const infoSpy = jest.spyOn(toastService, 'showInfo') component.form.patchValue(newProfile) updateSpy.mockReturnValueOnce(of(newProfile)) component.save() @@ -239,7 +239,7 @@ describe('ProfileEditDialogComponent', () => { getSpy.mockReturnValue(of(profile)) const generateSpy = jest.spyOn(profileService, 'generateAuthToken') - const errorSpy = jest.spyOn(notificationService, 'showError') + const errorSpy = jest.spyOn(toastService, 'showError') generateSpy.mockReturnValueOnce( throwError(() => new Error('failed to generate')) ) @@ -275,7 +275,7 @@ describe('ProfileEditDialogComponent', () => { getSpy.mockImplementation(() => of(profile)) component.ngOnInit() - const errorSpy = jest.spyOn(notificationService, 'showError') + const errorSpy = jest.spyOn(toastService, 'showError') expect(component.socialAccounts).toContainEqual(socialAccount) @@ -300,13 +300,13 @@ describe('ProfileEditDialogComponent', () => { secret: 'secret', } const getSpy = jest.spyOn(profileService, 'getTotpSettings') - const notificationSpy = jest.spyOn(notificationService, 'showError') + const toastSpy = jest.spyOn(toastService, 'showError') getSpy.mockReturnValueOnce( throwError(() => new Error('failed to get settings')) ) component.gettotpSettings() expect(getSpy).toHaveBeenCalled() - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() getSpy.mockReturnValue(of(settings)) component.gettotpSettings() @@ -316,8 +316,8 @@ describe('ProfileEditDialogComponent', () => { it('should activate totp', () => { const activateSpy = jest.spyOn(profileService, 'activateTotp') - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') const error = new Error('failed to activate totp') activateSpy.mockReturnValueOnce(throwError(() => error)) component.totpSettings = { @@ -331,44 +331,38 @@ describe('ProfileEditDialogComponent', () => { component.totpSettings.secret, component.form.get('totp_code').value ) - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() activateSpy.mockReturnValueOnce(of({ success: false, recovery_codes: [] })) component.activateTotp() - expect(notificationErrorSpy).toHaveBeenCalledWith( - 'Error activating TOTP', - error - ) + expect(toastErrorSpy).toHaveBeenCalledWith('Error activating TOTP', error) activateSpy.mockReturnValueOnce( of({ success: true, recovery_codes: ['1', '2', '3'] }) ) component.activateTotp() - expect(notificationInfoSpy).toHaveBeenCalled() + expect(toastInfoSpy).toHaveBeenCalled() expect(component.isTotpEnabled).toBeTruthy() expect(component.recoveryCodes).toEqual(['1', '2', '3']) }) it('should deactivate totp', () => { const deactivateSpy = jest.spyOn(profileService, 'deactivateTotp') - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') const error = new Error('failed to deactivate totp') deactivateSpy.mockReturnValueOnce(throwError(() => error)) component.deactivateTotp() expect(deactivateSpy).toHaveBeenCalled() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() deactivateSpy.mockReturnValueOnce(of(false)) component.deactivateTotp() - expect(notificationErrorSpy).toHaveBeenCalledWith( - 'Error deactivating TOTP', - error - ) + expect(toastErrorSpy).toHaveBeenCalledWith('Error deactivating TOTP', error) deactivateSpy.mockReturnValueOnce(of(true)) component.deactivateTotp() - expect(notificationInfoSpy).toHaveBeenCalled() + expect(toastInfoSpy).toHaveBeenCalled() expect(component.isTotpEnabled).toBeFalsy() }) diff --git a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts index ea681a145..afffa7693 100644 --- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts +++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts @@ -19,8 +19,8 @@ import { TotpSettings, } from 'src/app/data/user-profile' import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe' -import { NotificationService } from 'src/app/services/notification.service' import { ProfileService } from 'src/app/services/profile.service' +import { ToastService } from 'src/app/services/toast.service' import { LoadingComponentWithPermissions } from '../../loading-component/loading.component' import { ConfirmButtonComponent } from '../confirm-button/confirm-button.component' import { PasswordComponent } from '../input/password/password.component' @@ -86,7 +86,7 @@ export class ProfileEditDialogComponent constructor( private profileService: ProfileService, public activeModal: NgbActiveModal, - private notificationService: NotificationService, + private toastService: ToastService, private clipboard: Clipboard ) { super() @@ -192,11 +192,9 @@ export class ProfileEditDialogComponent .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe({ next: () => { - this.notificationService.showInfo( - $localize`Profile updated successfully` - ) + this.toastService.showInfo($localize`Profile updated successfully`) if (passwordChanged) { - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Password has been changed, you will be logged out momentarily.` ) setTimeout(() => { @@ -206,10 +204,7 @@ export class ProfileEditDialogComponent this.activeModal.close() }, error: (error) => { - this.notificationService.showError( - $localize`Error saving profile`, - error - ) + this.toastService.showError($localize`Error saving profile`, error) this.networkActive = false }, }) @@ -225,7 +220,7 @@ export class ProfileEditDialogComponent this.form.patchValue({ auth_token: token }) }, error: (error) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error generating auth token`, error ) @@ -250,7 +245,7 @@ export class ProfileEditDialogComponent this.socialAccounts = this.socialAccounts.filter((a) => a.id != id) }, error: (error) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error disconnecting social account`, error ) @@ -269,7 +264,7 @@ export class ProfileEditDialogComponent this.totpSettings = totpSettings }, error: (error) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error fetching TOTP settings`, error ) @@ -291,20 +286,15 @@ export class ProfileEditDialogComponent this.recoveryCodes = activationResponse.recovery_codes this.form.get('totp_code').enable() if (activationResponse.success) { - this.notificationService.showInfo( - $localize`TOTP activated successfully` - ) + this.toastService.showInfo($localize`TOTP activated successfully`) } else { - this.notificationService.showError($localize`Error activating TOTP`) + this.toastService.showError($localize`Error activating TOTP`) } }, error: (error) => { this.totpLoading = false this.form.get('totp_code').enable() - this.notificationService.showError( - $localize`Error activating TOTP`, - error - ) + this.toastService.showError($localize`Error activating TOTP`, error) }, }) } @@ -320,21 +310,14 @@ export class ProfileEditDialogComponent this.isTotpEnabled = !success this.recoveryCodes = null if (success) { - this.notificationService.showInfo( - $localize`TOTP deactivated successfully` - ) + this.toastService.showInfo($localize`TOTP deactivated successfully`) } else { - this.notificationService.showError( - $localize`Error deactivating TOTP` - ) + this.toastService.showError($localize`Error deactivating TOTP`) } }, error: (error) => { this.totpLoading = false - this.notificationService.showError( - $localize`Error deactivating TOTP`, - error - ) + this.toastService.showError($localize`Error deactivating TOTP`, error) }, }) } diff --git a/src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.spec.ts b/src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.spec.ts index b4c02289e..3f60b6733 100644 --- a/src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.spec.ts +++ b/src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.spec.ts @@ -15,8 +15,8 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' import { of, throwError } from 'rxjs' import { FileVersion, ShareLink } from 'src/app/data/share-link' -import { NotificationService } from 'src/app/services/notification.service' import { ShareLinkService } from 'src/app/services/rest/share-link.service' +import { ToastService } from 'src/app/services/toast.service' import { environment } from 'src/environments/environment' import { ShareLinksDialogComponent } from './share-links-dialog.component' @@ -24,7 +24,7 @@ describe('ShareLinksDialogComponent', () => { let component: ShareLinksDialogComponent let fixture: ComponentFixture let shareLinkService: ShareLinkService - let notificationService: NotificationService + let toastService: ToastService let httpController: HttpTestingController let clipboard: Clipboard @@ -43,7 +43,7 @@ describe('ShareLinksDialogComponent', () => { fixture = TestBed.createComponent(ShareLinksDialogComponent) shareLinkService = TestBed.inject(ShareLinkService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) httpController = TestBed.inject(HttpTestingController) clipboard = TestBed.inject(Clipboard) @@ -89,7 +89,7 @@ describe('ShareLinksDialogComponent', () => { }) it('should show error on refresh if needed', () => { - const notificationSpy = jest.spyOn(notificationService, 'showError') + const toastSpy = jest.spyOn(toastService, 'showError') jest .spyOn(shareLinkService, 'getLinksForDocument') .mockReturnValueOnce(throwError(() => new Error('Unable to get links'))) @@ -97,7 +97,7 @@ describe('ShareLinksDialogComponent', () => { component.ngOnInit() fixture.detectChanges() - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() }) it('should support link creation then refresh & copy url', fakeAsync(() => { @@ -138,7 +138,7 @@ describe('ShareLinksDialogComponent', () => { const expiration = new Date() expiration.setDate(expiration.getDate() + 7) - const notificationSpy = jest.spyOn(notificationService, 'showError') + const toastSpy = jest.spyOn(toastService, 'showError') component.createLink() @@ -150,7 +150,7 @@ describe('ShareLinksDialogComponent', () => { ) fixture.detectChanges() - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() }) it('should support delete links & refresh', () => { @@ -165,13 +165,13 @@ describe('ShareLinksDialogComponent', () => { }) it('should show error on delete if needed', () => { - const notificationSpy = jest.spyOn(notificationService, 'showError') + const toastSpy = jest.spyOn(toastService, 'showError') jest .spyOn(shareLinkService, 'delete') .mockReturnValueOnce(throwError(() => new Error('Unable to delete link'))) component.delete(null) fixture.detectChanges() - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() }) it('should format days remaining', () => { diff --git a/src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.ts b/src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.ts index 9d1350dcf..19123f73e 100644 --- a/src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.ts +++ b/src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.ts @@ -5,8 +5,8 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' import { first } from 'rxjs' import { FileVersion, ShareLink } from 'src/app/data/share-link' -import { NotificationService } from 'src/app/services/notification.service' import { ShareLinkService } from 'src/app/services/rest/share-link.service' +import { ToastService } from 'src/app/services/toast.service' import { environment } from 'src/environments/environment' @Component({ @@ -61,7 +61,7 @@ export class ShareLinksDialogComponent implements OnInit { constructor( private activeModal: NgbActiveModal, private shareLinkService: ShareLinkService, - private notificationService: NotificationService, + private toastService: ToastService, private clipboard: Clipboard ) {} @@ -81,7 +81,7 @@ export class ShareLinksDialogComponent implements OnInit { this.shareLinks = results }, error: (e) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error retrieving links`, 10000, e @@ -130,11 +130,7 @@ export class ShareLinksDialogComponent implements OnInit { this.refresh() }, error: (e) => { - this.notificationService.showError( - $localize`Error deleting link`, - 10000, - e - ) + this.toastService.showError($localize`Error deleting link`, 10000, e) }, }) } @@ -162,11 +158,7 @@ export class ShareLinksDialogComponent implements OnInit { }, error: (e) => { this.loading = false - this.notificationService.showError( - $localize`Error creating link`, - 10000, - e - ) + this.toastService.showError($localize`Error creating link`, 10000, e) }, }) } diff --git a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.spec.ts b/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.spec.ts index 45786900b..28a0889ab 100644 --- a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.spec.ts +++ b/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.spec.ts @@ -16,9 +16,9 @@ import { SystemStatus, SystemStatusItemStatus, } from 'src/app/data/system-status' -import { NotificationService } from 'src/app/services/notification.service' import { SystemStatusService } from 'src/app/services/system-status.service' import { TasksService } from 'src/app/services/tasks.service' +import { ToastService } from 'src/app/services/toast.service' import { SystemStatusDialogComponent } from './system-status-dialog.component' const status: SystemStatus = { @@ -61,7 +61,7 @@ describe('SystemStatusDialogComponent', () => { let clipboard: Clipboard let tasksService: TasksService let systemStatusService: SystemStatusService - let notificationService: NotificationService + let toastService: ToastService beforeEach(async () => { await TestBed.configureTestingModule({ @@ -82,7 +82,7 @@ describe('SystemStatusDialogComponent', () => { clipboard = TestBed.inject(Clipboard) tasksService = TestBed.inject(TasksService) systemStatusService = TestBed.inject(SystemStatusService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) fixture.detectChanges() }) @@ -116,9 +116,9 @@ describe('SystemStatusDialogComponent', () => { expect(component.isRunning(PaperlessTaskName.SanityCheck)).toBeFalsy() }) - it('should support running tasks, refresh status and show notifications', () => { - const notificationSpy = jest.spyOn(notificationService, 'showInfo') - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + it('should support running tasks, refresh status and show toasts', () => { + const toastSpy = jest.spyOn(toastService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') const getStatusSpy = jest.spyOn(systemStatusService, 'get') const runSpy = jest.spyOn(tasksService, 'run') @@ -126,7 +126,7 @@ describe('SystemStatusDialogComponent', () => { runSpy.mockReturnValue(throwError(() => new Error('error'))) component.runTask(PaperlessTaskName.IndexOptimize) expect(runSpy).toHaveBeenCalledWith(PaperlessTaskName.IndexOptimize) - expect(notificationErrorSpy).toHaveBeenCalledWith( + expect(toastErrorSpy).toHaveBeenCalledWith( `Failed to start task ${PaperlessTaskName.IndexOptimize}, see the logs for more details`, expect.any(Error) ) @@ -138,7 +138,7 @@ describe('SystemStatusDialogComponent', () => { expect(runSpy).toHaveBeenCalledWith(PaperlessTaskName.IndexOptimize) expect(getStatusSpy).toHaveBeenCalled() - expect(notificationSpy).toHaveBeenCalledWith( + expect(toastSpy).toHaveBeenCalledWith( `Task ${PaperlessTaskName.IndexOptimize} started` ) }) diff --git a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.ts b/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.ts index b039b6244..c7ba3c57a 100644 --- a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.ts +++ b/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.ts @@ -14,10 +14,10 @@ import { } from 'src/app/data/system-status' import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe' import { FileSizePipe } from 'src/app/pipes/file-size.pipe' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { SystemStatusService } from 'src/app/services/system-status.service' import { TasksService } from 'src/app/services/tasks.service' +import { ToastService } from 'src/app/services/toast.service' @Component({ selector: 'pngx-system-status-dialog', @@ -51,7 +51,7 @@ export class SystemStatusDialogComponent { private clipboard: Clipboard, private systemStatusService: SystemStatusService, private tasksService: TasksService, - private notificationService: NotificationService, + private toastService: ToastService, private permissionsService: PermissionsService ) {} @@ -79,7 +79,7 @@ export class SystemStatusDialogComponent { public runTask(taskName: PaperlessTaskName) { this.runningTasks.add(taskName) - this.notificationService.showInfo(`Task ${taskName} started`) + this.toastService.showInfo(`Task ${taskName} started`) this.tasksService.run(taskName).subscribe({ next: () => { this.runningTasks.delete(taskName) @@ -91,7 +91,7 @@ export class SystemStatusDialogComponent { }, error: (err) => { this.runningTasks.delete(taskName) - this.notificationService.showError( + this.toastService.showError( `Failed to start task ${taskName}, see the logs for more details`, err ) diff --git a/src-ui/src/app/components/common/notification/notification.component.html b/src-ui/src/app/components/common/toast/toast.component.html similarity index 56% rename from src-ui/src/app/components/common/notification/notification.component.html rename to src-ui/src/app/components/common/toast/toast.component.html index 4c46a1fa3..fc8e85e9c 100644 --- a/src-ui/src/app/components/common/notification/notification.component.html +++ b/src-ui/src/app/components/common/toast/toast.component.html @@ -1,39 +1,39 @@ + (shown)="onShown(toast)" + (hidden)="hidden.emit(toast)"> @if (autohide) { - - + + }
    - @if (!notification.error) { + @if (!toast.error) { } - @if (notification.error) { + @if (toast.error) { }
    -

    {{notification.content}}

    - @if (notification.error) { +

    {{toast.content}}

    + @if (toast.error) {
    - @if (isDetailedError(notification.error)) { + @if (isDetailedError(toast.error)) {
    URL
    -
    {{ notification.error.url }}
    +
    {{ toast.error.url }}
    Status
    -
    {{ notification.error.status }} {{ notification.error.statusText }}
    +
    {{ toast.error.status }} {{ toast.error.statusText }}
    Error
    -
    {{ getErrorText(notification.error) }}
    +
    {{ getErrorText(toast.error) }}
    }
    -
    } - @if (notification.action) { -

    + @if (toast.action) { +

    }
    - +
    diff --git a/src-ui/src/app/components/common/notification/notification.component.scss b/src-ui/src/app/components/common/toast/toast.component.scss similarity index 100% rename from src-ui/src/app/components/common/notification/notification.component.scss rename to src-ui/src/app/components/common/toast/toast.component.scss diff --git a/src-ui/src/app/components/common/notification/notification.component.spec.ts b/src-ui/src/app/components/common/toast/toast.component.spec.ts similarity index 70% rename from src-ui/src/app/components/common/notification/notification.component.spec.ts rename to src-ui/src/app/components/common/toast/toast.component.spec.ts index 05e4c7a37..c5d52a28f 100644 --- a/src-ui/src/app/components/common/notification/notification.component.spec.ts +++ b/src-ui/src/app/components/common/toast/toast.component.spec.ts @@ -9,15 +9,15 @@ import { import { Clipboard } from '@angular/cdk/clipboard' import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' -import { NotificationComponent } from './notification.component' +import { ToastComponent } from './toast.component' -const notification1 = { +const toast1 = { content: 'Error 1 content', delay: 5000, error: 'Error 1 string', } -const notification2 = { +const toast2 = { content: 'Error 2 content', delay: 5000, error: { @@ -29,17 +29,17 @@ const notification2 = { }, } -describe('NotificationComponent', () => { - let component: NotificationComponent - let fixture: ComponentFixture +describe('ToastComponent', () => { + let component: ToastComponent + let fixture: ComponentFixture let clipboard: Clipboard beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [NotificationComponent, NgxBootstrapIconsModule.pick(allIcons)], + imports: [ToastComponent, NgxBootstrapIconsModule.pick(allIcons)], }).compileComponents() - fixture = TestBed.createComponent(NotificationComponent) + fixture = TestBed.createComponent(ToastComponent) clipboard = TestBed.inject(Clipboard) component = fixture.componentInstance }) @@ -48,18 +48,18 @@ describe('NotificationComponent', () => { expect(component).toBeTruthy() }) - it('should countdown notification', fakeAsync(() => { - component.notification = notification2 + it('should countdown toast', fakeAsync(() => { + component.toast = toast2 fixture.detectChanges() - component.onShown(notification2) + component.onShown(toast2) tick(5000) - expect(component.notification.delayRemaining).toEqual(0) + expect(component.toast.delayRemaining).toEqual(0) flush() discardPeriodicTasks() })) - it('should show an error if given with notification', fakeAsync(() => { - component.notification = notification1 + it('should show an error if given with toast', fakeAsync(() => { + component.toast = toast1 fixture.detectChanges() expect(fixture.nativeElement.querySelector('details')).not.toBeNull() @@ -70,7 +70,7 @@ describe('NotificationComponent', () => { })) it('should show error details, support copy', fakeAsync(() => { - component.notification = notification2 + component.toast = toast2 fixture.detectChanges() expect(fixture.nativeElement.querySelector('details')).not.toBeNull() @@ -79,7 +79,7 @@ describe('NotificationComponent', () => { ) const copySpy = jest.spyOn(clipboard, 'copy') - component.copyError(notification2.error) + component.copyError(toast2.error) expect(copySpy).toHaveBeenCalled() flush() @@ -87,7 +87,7 @@ describe('NotificationComponent', () => { })) it('should parse error text, add ellipsis', () => { - expect(component.getErrorText(notification2.error)).toEqual( + expect(component.getErrorText(toast2.error)).toEqual( 'Error 2 message details' ) expect(component.getErrorText({ error: 'Error string no detail' })).toEqual( diff --git a/src-ui/src/app/components/common/notification/notification.component.ts b/src-ui/src/app/components/common/toast/toast.component.ts similarity index 71% rename from src-ui/src/app/components/common/notification/notification.component.ts rename to src-ui/src/app/components/common/toast/toast.component.ts index 1c7bed37e..5ebfdbe82 100644 --- a/src-ui/src/app/components/common/notification/notification.component.ts +++ b/src-ui/src/app/components/common/toast/toast.component.ts @@ -7,43 +7,42 @@ import { } from '@ng-bootstrap/ng-bootstrap' import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' import { interval, take } from 'rxjs' -import { Notification } from 'src/app/services/notification.service' +import { Toast } from 'src/app/services/toast.service' @Component({ - selector: 'pngx-notification', + selector: 'pngx-toast', imports: [ DecimalPipe, NgbToastModule, NgbProgressbarModule, NgxBootstrapIconsModule, ], - templateUrl: './notification.component.html', - styleUrl: './notification.component.scss', + templateUrl: './toast.component.html', + styleUrl: './toast.component.scss', }) -export class NotificationComponent { - @Input() notification: Notification +export class ToastComponent { + @Input() toast: Toast @Input() autohide: boolean = true - @Output() hidden: EventEmitter = - new EventEmitter() + @Output() hidden: EventEmitter = new EventEmitter() - @Output() close: EventEmitter = new EventEmitter() + @Output() close: EventEmitter = new EventEmitter() public copied: boolean = false constructor(private clipboard: Clipboard) {} - onShown(notification: Notification) { + onShown(toast: Toast) { if (!this.autohide) return const refreshInterval = 150 - const delay = notification.delay - 500 // for fade animation + const delay = toast.delay - 500 // for fade animation interval(refreshInterval) .pipe(take(Math.round(delay / refreshInterval))) .subscribe((count) => { - notification.delayRemaining = Math.max( + toast.delayRemaining = Math.max( 0, delay - refreshInterval * (count + 1) ) diff --git a/src-ui/src/app/components/common/toasts/toasts.component.html b/src-ui/src/app/components/common/toasts/toasts.component.html new file mode 100644 index 000000000..2178a2023 --- /dev/null +++ b/src-ui/src/app/components/common/toasts/toasts.component.html @@ -0,0 +1,3 @@ +@for (toast of toasts; track toast.id) { + +} diff --git a/src-ui/src/app/components/common/notification-list/notification-list.component.scss b/src-ui/src/app/components/common/toasts/toasts.component.scss similarity index 73% rename from src-ui/src/app/components/common/notification-list/notification-list.component.scss rename to src-ui/src/app/components/common/toasts/toasts.component.scss index 14729fb15..e0a069dda 100644 --- a/src-ui/src/app/components/common/notification-list/notification-list.component.scss +++ b/src-ui/src/app/components/common/toasts/toasts.component.scss @@ -1,7 +1,7 @@ :host { position: fixed; top: 0; - right: calc(50% - (var(--pngx-notification-max-width) / 2)); + right: calc(50% - (var(--pngx-toast-max-width) / 2)); margin: 0.3em; z-index: 1200; } 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 new file mode 100644 index 000000000..bbea04c9c --- /dev/null +++ b/src-ui/src/app/components/common/toasts/toasts.component.spec.ts @@ -0,0 +1,71 @@ +import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http' +import { provideHttpClientTesting } from '@angular/common/http/testing' +import { ComponentFixture, TestBed } from '@angular/core/testing' +import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' +import { Subject } from 'rxjs' +import { Toast, ToastService } from 'src/app/services/toast.service' +import { ToastsComponent } from './toasts.component' + +const toast = { + content: 'Error 2 content', + delay: 5000, + error: { + url: 'https://example.com', + status: 500, + statusText: 'Internal Server Error', + message: 'Internal server error 500 message', + error: { detail: 'Error 2 message details' }, + }, +} + +describe('ToastsComponent', () => { + let component: ToastsComponent + let fixture: ComponentFixture + let toastService: ToastService + let toastSubject: Subject = new Subject() + + beforeEach(async () => { + TestBed.configureTestingModule({ + imports: [ToastsComponent, NgxBootstrapIconsModule.pick(allIcons)], + providers: [ + provideHttpClient(withInterceptorsFromDi()), + provideHttpClientTesting(), + ], + }).compileComponents() + + fixture = TestBed.createComponent(ToastsComponent) + toastService = TestBed.inject(ToastService) + jest.replaceProperty(toastService, 'showToast', toastSubject) + + component = fixture.componentInstance + + fixture.detectChanges() + }) + + it('should create', () => { + expect(component).toBeTruthy() + }) + + it('should close toast', () => { + component.toasts = [toast] + const closeToastSpy = jest.spyOn(toastService, 'closeToast') + component.closeToast() + expect(component.toasts).toEqual([]) + expect(closeToastSpy).toHaveBeenCalledWith(toast) + }) + + it('should unsubscribe', () => { + const unsubscribeSpy = jest.spyOn( + (component as any).subscription, + 'unsubscribe' + ) + component.ngOnDestroy() + expect(unsubscribeSpy).toHaveBeenCalled() + }) + + it('should subscribe to toastService', () => { + component.ngOnInit() + toastSubject.next(toast) + expect(component.toasts).toEqual([toast]) + }) +}) diff --git a/src-ui/src/app/components/common/toasts/toasts.component.ts b/src-ui/src/app/components/common/toasts/toasts.component.ts new file mode 100644 index 000000000..53b6e1895 --- /dev/null +++ b/src-ui/src/app/components/common/toasts/toasts.component.ts @@ -0,0 +1,43 @@ +import { Component, OnDestroy, OnInit } from '@angular/core' +import { + NgbAccordionModule, + NgbProgressbarModule, +} from '@ng-bootstrap/ng-bootstrap' +import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' +import { Subscription } from 'rxjs' +import { Toast, ToastService } from 'src/app/services/toast.service' +import { ToastComponent } from '../toast/toast.component' + +@Component({ + selector: 'pngx-toasts', + templateUrl: './toasts.component.html', + styleUrls: ['./toasts.component.scss'], + imports: [ + ToastComponent, + NgbAccordionModule, + NgbProgressbarModule, + NgxBootstrapIconsModule, + ], +}) +export class ToastsComponent implements OnInit, OnDestroy { + constructor(public toastService: ToastService) {} + + private subscription: Subscription + + public toasts: Toast[] = [] // array to force change detection + + ngOnDestroy(): void { + this.subscription?.unsubscribe() + } + + ngOnInit(): void { + this.subscription = this.toastService.showToast.subscribe((toast) => { + this.toasts = toast ? [toast] : [] + }) + } + + closeToast() { + this.toastService.closeToast(this.toasts[0]) + this.toasts = [] + } +} diff --git a/src-ui/src/app/components/dashboard/dashboard.component.spec.ts b/src-ui/src/app/components/dashboard/dashboard.component.spec.ts index 2459233dd..2ff5eab78 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.spec.ts +++ b/src-ui/src/app/components/dashboard/dashboard.component.spec.ts @@ -12,10 +12,10 @@ import { SavedView } from 'src/app/data/saved-view' import { SETTINGS_KEYS } from 'src/app/data/ui-settings' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' import { PermissionsGuard } from 'src/app/guards/permissions.guard' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { SavedViewService } from 'src/app/services/rest/saved-view.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { LogoComponent } from '../common/logo/logo.component' import { PageHeaderComponent } from '../common/page-header/page-header.component' import { DashboardComponent } from './dashboard.component' @@ -68,7 +68,7 @@ describe('DashboardComponent', () => { let fixture: ComponentFixture let settingsService: SettingsService let tourService: TourService - let notificationService: NotificationService + let toastService: ToastService beforeEach(async () => { TestBed.configureTestingModule({ @@ -121,7 +121,7 @@ describe('DashboardComponent', () => { if (key === SETTINGS_KEYS.DASHBOARD_VIEWS_SORT_ORDER) return [0, 2, 3] }) tourService = TestBed.inject(TourService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) fixture = TestBed.createComponent(DashboardComponent) component = fixture.componentInstance @@ -166,7 +166,7 @@ describe('DashboardComponent', () => { it('should update saved view sorting on drag + drop, show info', () => { const settingsSpy = jest.spyOn(settingsService, 'updateDashboardViewsSort') - const notificationSpy = jest.spyOn(notificationService, 'showInfo') + const toastSpy = jest.spyOn(toastService, 'showInfo') jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true)) component.onDrop({ previousIndex: 0, currentIndex: 1 } as CdkDragDrop< SavedView[] @@ -176,7 +176,7 @@ describe('DashboardComponent', () => { saved_views[0], saved_views[3], ]) - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() }) it('should update saved view sorting on drag + drop, show error', () => { @@ -187,13 +187,13 @@ describe('DashboardComponent', () => { fixture = TestBed.createComponent(DashboardComponent) component = fixture.componentInstance fixture.detectChanges() - const notificationSpy = jest.spyOn(notificationService, 'showError') + const toastSpy = jest.spyOn(toastService, 'showError') jest .spyOn(settingsService, 'storeSettings') .mockReturnValue(throwError(() => new Error('unable to save'))) component.onDrop({ previousIndex: 0, currentIndex: 2 } as CdkDragDrop< SavedView[] >) - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() }) }) diff --git a/src-ui/src/app/components/dashboard/dashboard.component.ts b/src-ui/src/app/components/dashboard/dashboard.component.ts index 5ebd39a61..94637ba0f 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.ts +++ b/src-ui/src/app/components/dashboard/dashboard.component.ts @@ -9,9 +9,9 @@ import { Component } from '@angular/core' import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap' import { SavedView } from 'src/app/data/saved-view' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' -import { NotificationService } from 'src/app/services/notification.service' import { SavedViewService } from 'src/app/services/rest/saved-view.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { environment } from 'src/environments/environment' import { LogoComponent } from '../common/logo/logo.component' import { PageHeaderComponent } from '../common/page-header/page-header.component' @@ -43,7 +43,7 @@ export class DashboardComponent extends ComponentWithPermissions { public settingsService: SettingsService, public savedViewService: SavedViewService, private tourService: TourService, - private notificationService: NotificationService + private toastService: ToastService ) { super() @@ -87,13 +87,10 @@ export class DashboardComponent extends ComponentWithPermissions { .updateDashboardViewsSort(this.dashboardViews) .subscribe({ next: () => { - this.notificationService.showInfo($localize`Dashboard updated`) + this.toastService.showInfo($localize`Dashboard updated`) }, error: (e) => { - this.notificationService.showError( - $localize`Error updating dashboard`, - e - ) + this.toastService.showError($localize`Error updating dashboard`, e) }, }) } diff --git a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts index 28b2d85b5..b85a7eaf4 100644 --- a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts +++ b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts @@ -48,7 +48,6 @@ import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe' import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe' import { ComponentRouterService } from 'src/app/services/component-router.service' import { DocumentListViewService } from 'src/app/services/document-list-view.service' -import { NotificationService } from 'src/app/services/notification.service' import { OpenDocumentsService } from 'src/app/services/open-documents.service' import { PermissionsService } from 'src/app/services/permissions.service' import { CorrespondentService } from 'src/app/services/rest/correspondent.service' @@ -59,6 +58,7 @@ import { StoragePathService } from 'src/app/services/rest/storage-path.service' import { TagService } from 'src/app/services/rest/tag.service' import { UserService } from 'src/app/services/rest/user.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { environment } from 'src/environments/environment' import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component' import { CustomFieldsDropdownComponent } from '../common/custom-fields-dropdown/custom-fields-dropdown.component' @@ -127,7 +127,7 @@ describe('DocumentDetailComponent', () => { let documentService: DocumentService let openDocumentsService: OpenDocumentsService let modalService: NgbModal - let notificationService: NotificationService + let toastService: ToastService let documentListViewService: DocumentListViewService let settingsService: SettingsService let customFieldsService: CustomFieldsService @@ -264,7 +264,7 @@ describe('DocumentDetailComponent', () => { openDocumentsService = TestBed.inject(OpenDocumentsService) documentService = TestBed.inject(DocumentService) modalService = TestBed.inject(NgbModal) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) documentListViewService = TestBed.inject(DocumentListViewService) settingsService = TestBed.inject(SettingsService) settingsService.currentUser = { id: 1 } @@ -447,68 +447,68 @@ describe('DocumentDetailComponent', () => { expect(navigateSpy).toHaveBeenCalledWith(['404'], { replaceUrl: true }) }) - it('should support save, close and show success notification', () => { + it('should support save, close and show success toast', () => { initNormally() component.title = 'Foo Bar' const closeSpy = jest.spyOn(component, 'close') const updateSpy = jest.spyOn(documentService, 'update') - const notificationSpy = jest.spyOn(notificationService, 'showInfo') + const toastSpy = jest.spyOn(toastService, 'showInfo') updateSpy.mockImplementation((o) => of(doc)) component.save(true) expect(updateSpy).toHaveBeenCalled() expect(closeSpy).toHaveBeenCalled() - expect(notificationSpy).toHaveBeenCalledWith( + expect(toastSpy).toHaveBeenCalledWith( 'Document "Doc 3" saved successfully.' ) }) - it('should support save without close and show success notification', () => { + it('should support save without close and show success toast', () => { initNormally() component.title = 'Foo Bar' const closeSpy = jest.spyOn(component, 'close') const updateSpy = jest.spyOn(documentService, 'update') - const notificationSpy = jest.spyOn(notificationService, 'showInfo') + const toastSpy = jest.spyOn(toastService, 'showInfo') updateSpy.mockImplementation((o) => of(doc)) component.save() expect(updateSpy).toHaveBeenCalled() expect(closeSpy).not.toHaveBeenCalled() - expect(notificationSpy).toHaveBeenCalledWith( + expect(toastSpy).toHaveBeenCalledWith( 'Document "Doc 3" saved successfully.' ) }) - it('should show notification error on save if error occurs', () => { + it('should show toast error on save if error occurs', () => { currentUserHasObjectPermissions = true initNormally() component.title = 'Foo Bar' const closeSpy = jest.spyOn(component, 'close') const updateSpy = jest.spyOn(documentService, 'update') - const notificationSpy = jest.spyOn(notificationService, 'showError') + const toastSpy = jest.spyOn(toastService, 'showError') const error = new Error('failed to save') updateSpy.mockImplementation(() => throwError(() => error)) component.save() expect(updateSpy).toHaveBeenCalled() expect(closeSpy).not.toHaveBeenCalled() - expect(notificationSpy).toHaveBeenCalledWith( + expect(toastSpy).toHaveBeenCalledWith( 'Error saving document "Doc 3"', error ) }) - it('should show error notification on save but close if user can no longer edit', () => { + it('should show error toast on save but close if user can no longer edit', () => { currentUserHasObjectPermissions = false initNormally() component.title = 'Foo Bar' const closeSpy = jest.spyOn(component, 'close') const updateSpy = jest.spyOn(documentService, 'update') - const notificationSpy = jest.spyOn(notificationService, 'showInfo') + const toastSpy = jest.spyOn(toastService, 'showInfo') updateSpy.mockImplementation(() => throwError(() => new Error('failed to save')) ) component.save(true) expect(updateSpy).toHaveBeenCalled() expect(closeSpy).toHaveBeenCalled() - expect(notificationSpy).toHaveBeenCalledWith( + expect(toastSpy).toHaveBeenCalledWith( 'Document "Doc 3" saved successfully.' ) }) @@ -531,19 +531,19 @@ describe('DocumentDetailComponent', () => { expect }) - it('should show notification error on save & next if error occurs', () => { + it('should show toast error on save & next if error occurs', () => { currentUserHasObjectPermissions = true initNormally() component.title = 'Foo Bar' const closeSpy = jest.spyOn(component, 'close') const updateSpy = jest.spyOn(documentService, 'update') - const notificationSpy = jest.spyOn(notificationService, 'showError') + const toastSpy = jest.spyOn(toastService, 'showError') const error = new Error('failed to save') updateSpy.mockImplementation(() => throwError(() => error)) component.saveEditNext() expect(updateSpy).toHaveBeenCalled() expect(closeSpy).not.toHaveBeenCalled() - expect(notificationSpy).toHaveBeenCalledWith('Error saving document', error) + expect(toastSpy).toHaveBeenCalledWith('Error saving document', error) }) it('should show save button and save & close or save & next', () => { @@ -668,13 +668,13 @@ describe('DocumentDetailComponent', () => { let openModal: NgbModalRef modalService.activeInstances.subscribe((modal) => (openModal = modal[0])) const modalSpy = jest.spyOn(modalService, 'open') - const notificationSpy = jest.spyOn(notificationService, 'showInfo') + const toastSpy = jest.spyOn(toastService, 'showInfo') component.reprocess() const modalCloseSpy = jest.spyOn(openModal, 'close') openModal.componentInstance.confirmClicked.next() expect(bulkEditSpy).toHaveBeenCalledWith([doc.id], 'reprocess', {}) expect(modalSpy).toHaveBeenCalled() - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() expect(modalCloseSpy).toHaveBeenCalled() }) @@ -683,12 +683,12 @@ describe('DocumentDetailComponent', () => { const bulkEditSpy = jest.spyOn(documentService, 'bulkEdit') let openModal: NgbModalRef modalService.activeInstances.subscribe((modal) => (openModal = modal[0])) - const notificationSpy = jest.spyOn(notificationService, 'showError') + const toastSpy = jest.spyOn(toastService, 'showError') component.reprocess() const modalCloseSpy = jest.spyOn(openModal, 'close') bulkEditSpy.mockReturnValue(throwError(() => new Error('error occurred'))) openModal.componentInstance.confirmClicked.next() - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() expect(modalCloseSpy).not.toHaveBeenCalled() }) @@ -942,12 +942,9 @@ describe('DocumentDetailComponent', () => { jest .spyOn(documentService, 'getMetadata') .mockReturnValue(throwError(() => error)) - const notificationSpy = jest.spyOn(notificationService, 'showError') + const toastSpy = jest.spyOn(toastService, 'showError') initNormally() - expect(notificationSpy).toHaveBeenCalledWith( - 'Error retrieving metadata', - error - ) + expect(toastSpy).toHaveBeenCalledWith('Error retrieving metadata', error) }) it('should display custom fields', () => { @@ -1031,7 +1028,7 @@ describe('DocumentDetailComponent', () => { it('should show error if needed for get suggestions', () => { const suggestionsSpy = jest.spyOn(documentService, 'getSuggestions') - const errorSpy = jest.spyOn(notificationService, 'showError') + const errorSpy = jest.spyOn(toastService, 'showError') suggestionsSpy.mockImplementationOnce(() => throwError(() => new Error('failed to get suggestions')) ) diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts index ab8a8943e..27a74cfcd 100644 --- a/src-ui/src/app/components/document-detail/document-detail.component.ts +++ b/src-ui/src/app/components/document-detail/document-detail.component.ts @@ -63,7 +63,6 @@ import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe' import { ComponentRouterService } from 'src/app/services/component-router.service' import { DocumentListViewService } from 'src/app/services/document-list-view.service' import { HotKeyService } from 'src/app/services/hot-key.service' -import { NotificationService } from 'src/app/services/notification.service' import { OpenDocumentsService } from 'src/app/services/open-documents.service' import { PermissionAction, @@ -77,6 +76,7 @@ import { DocumentService } from 'src/app/services/rest/document.service' import { StoragePathService } from 'src/app/services/rest/storage-path.service' import { UserService } from 'src/app/services/rest/user.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter' import * as UTIF from 'utif' import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component' @@ -268,7 +268,7 @@ export class DocumentDetailComponent private openDocumentService: OpenDocumentsService, private documentListViewService: DocumentListViewService, private documentTitlePipe: DocumentTitlePipe, - private notificationService: NotificationService, + private toastService: ToastService, private settings: SettingsService, private storagePathService: StoragePathService, private permissionsService: PermissionsService, @@ -628,7 +628,7 @@ export class DocumentDetailComponent }, error: (error) => { this.metadata = {} // allow display to fallback to tag - this.notificationService.showError( + this.toastService.showError( $localize`Error retrieving metadata`, error ) @@ -657,7 +657,7 @@ export class DocumentDetailComponent }, error: (error) => { this.suggestions = null - this.notificationService.showError( + this.toastService.showError( $localize`Error retrieving suggestions.`, error ) @@ -809,7 +809,7 @@ export class DocumentDetailComponent this.store.next(newValues) this.openDocumentService.setDirty(this.document, false) this.openDocumentService.save() - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Document "${newValues.title}" saved successfully.` ) this.networkActive = false @@ -825,13 +825,13 @@ export class DocumentDetailComponent error: (error) => { this.networkActive = false if (!this.userCanEdit) { - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Document "${this.document.title}" saved successfully.` ) close && this.close() } else { this.error = error.error - this.notificationService.showError( + this.toastService.showError( $localize`Error saving document "${this.document.title}"`, error ) @@ -877,10 +877,7 @@ export class DocumentDetailComponent error: (error) => { this.networkActive = false this.error = error.error - this.notificationService.showError( - $localize`Error saving document`, - error - ) + this.toastService.showError($localize`Error saving document`, error) }, }) } @@ -934,10 +931,7 @@ export class DocumentDetailComponent this.close() }, error: (error) => { - this.notificationService.showError( - $localize`Error deleting document`, - error - ) + this.toastService.showError($localize`Error deleting document`, error) modal.componentInstance.buttonsEnabled = true this.subscribeModalDelete(modal) }, @@ -968,7 +962,7 @@ export class DocumentDetailComponent .bulkEdit([this.document.id], 'reprocess', {}) .subscribe({ next: () => { - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Reprocess operation for "${this.document.title}" will begin in the background. Close and re-open or reload this document after the operation has completed to see new content.` ) if (modal) { @@ -979,7 +973,7 @@ export class DocumentDetailComponent if (modal) { modal.componentInstance.buttonsEnabled = true } - this.notificationService.showError( + this.toastService.showError( $localize`Error executing operation`, error ) @@ -1026,7 +1020,7 @@ export class DocumentDetailComponent }, error: (error) => { this.downloading = false - this.notificationService.showError( + this.toastService.showError( $localize`Error downloading document`, error ) @@ -1335,7 +1329,7 @@ export class DocumentDetailComponent .pipe(first(), takeUntil(this.unsubscribeNotifier)) .subscribe({ next: () => { - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Split operation for "${this.document.title}" will begin in the background.` ) modal.close() @@ -1344,7 +1338,7 @@ export class DocumentDetailComponent if (modal) { modal.componentInstance.buttonsEnabled = true } - this.notificationService.showError( + this.toastService.showError( $localize`Error executing split operation`, error ) @@ -1374,7 +1368,7 @@ export class DocumentDetailComponent .pipe(first(), takeUntil(this.unsubscribeNotifier)) .subscribe({ next: () => { - this.notificationService.show({ + this.toastService.show({ content: $localize`Rotation of "${this.document.title}" will begin in the background. Close and re-open the document after the operation has completed to see the changes.`, delay: 8000, action: this.close.bind(this), @@ -1386,7 +1380,7 @@ export class DocumentDetailComponent if (modal) { modal.componentInstance.buttonsEnabled = true } - this.notificationService.showError( + this.toastService.showError( $localize`Error executing rotate operation`, error ) @@ -1414,7 +1408,7 @@ export class DocumentDetailComponent .pipe(first(), takeUntil(this.unsubscribeNotifier)) .subscribe({ next: () => { - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Delete pages operation for "${this.document.title}" will begin in the background. Close and re-open or reload this document after the operation has completed to see the changes.` ) modal.close() @@ -1423,7 +1417,7 @@ export class DocumentDetailComponent if (modal) { modal.componentInstance.buttonsEnabled = true } - this.notificationService.showError( + this.toastService.showError( $localize`Error executing delete pages operation`, error ) diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts index 58e8d9beb..aa4a07d12 100644 --- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts +++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts @@ -16,7 +16,6 @@ import { StoragePath } from 'src/app/data/storage-path' import { Tag } from 'src/app/data/tag' import { FilterPipe } from 'src/app/pipes/filter.pipe' import { DocumentListViewService } from 'src/app/services/document-list-view.service' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { CorrespondentService } from 'src/app/services/rest/correspondent.service' import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service' @@ -30,6 +29,7 @@ import { StoragePathService } from 'src/app/services/rest/storage-path.service' import { TagService } from 'src/app/services/rest/tag.service' import { UserService } from 'src/app/services/rest/user.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { environment } from 'src/environments/environment' import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component' import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component' @@ -64,7 +64,7 @@ describe('BulkEditorComponent', () => { let permissionsService: PermissionsService let documentListViewService: DocumentListViewService let documentService: DocumentService - let notificationService: NotificationService + let toastService: ToastService let modalService: NgbModal let tagService: TagService let correspondentsService: CorrespondentService @@ -160,7 +160,7 @@ describe('BulkEditorComponent', () => { permissionsService = TestBed.inject(PermissionsService) documentListViewService = TestBed.inject(DocumentListViewService) documentService = TestBed.inject(DocumentService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) modalService = TestBed.inject(NgbModal) tagService = TestBed.inject(TagService) correspondentsService = TestBed.inject(CorrespondentService) @@ -884,7 +884,7 @@ describe('BulkEditorComponent', () => { expect(button.nativeElement.disabled).toBeTruthy() }) - it('should show a warning notification on bulk edit error', () => { + it('should show a warning toast on bulk edit error', () => { jest .spyOn(documentService, 'bulkEdit') .mockReturnValue( @@ -902,12 +902,12 @@ describe('BulkEditorComponent', () => { .mockReturnValue(true) component.showConfirmationDialogs = false fixture.detectChanges() - const notificationSpy = jest.spyOn(notificationService, 'showError') + const toastSpy = jest.spyOn(toastService, 'showError') component.setTags({ itemsToAdd: [{ id: 0 }], itemsToRemove: [], }) - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() }) it('should support redo ocr', () => { @@ -1391,14 +1391,8 @@ describe('BulkEditorComponent', () => { .spyOn(documentListViewService, 'selected', 'get') .mockReturnValue(new Set([3, 4])) fixture.detectChanges() - const notificationServiceShowInfoSpy = jest.spyOn( - notificationService, - 'showInfo' - ) - const notificationServiceShowErrorSpy = jest.spyOn( - notificationService, - 'showError' - ) + const toastServiceShowInfoSpy = jest.spyOn(toastService, 'showInfo') + const toastServiceShowErrorSpy = jest.spyOn(toastService, 'showError') const listReloadSpy = jest.spyOn(documentListViewService, 'reload') component.customFields = [ @@ -1416,11 +1410,11 @@ describe('BulkEditorComponent', () => { expect(modal.componentInstance.documents).toEqual([3, 4]) modal.componentInstance.failed.emit() - expect(notificationServiceShowErrorSpy).toHaveBeenCalled() + expect(toastServiceShowErrorSpy).toHaveBeenCalled() expect(listReloadSpy).not.toHaveBeenCalled() modal.componentInstance.succeeded.emit() - expect(notificationServiceShowInfoSpy).toHaveBeenCalled() + expect(toastServiceShowInfoSpy).toHaveBeenCalled() expect(listReloadSpy).toHaveBeenCalled() httpTestingController.match( `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true` diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts index 72fccac0d..9864761fa 100644 --- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts +++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts @@ -23,7 +23,6 @@ import { Tag } from 'src/app/data/tag' import { SETTINGS_KEYS } from 'src/app/data/ui-settings' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' import { DocumentListViewService } from 'src/app/services/document-list-view.service' -import { NotificationService } from 'src/app/services/notification.service' import { OpenDocumentsService } from 'src/app/services/open-documents.service' import { PermissionAction, @@ -40,6 +39,7 @@ import { import { StoragePathService } from 'src/app/services/rest/storage-path.service' import { TagService } from 'src/app/services/rest/tag.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { MergeConfirmDialogComponent } from '../../common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component' import { RotateConfirmDialogComponent } from '../../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component' import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component' @@ -113,7 +113,7 @@ export class BulkEditorComponent private modalService: NgbModal, private openDocumentService: OpenDocumentsService, private settings: SettingsService, - private notificationService: NotificationService, + private toastService: ToastService, private storagePathService: StoragePathService, private customFieldService: CustomFieldsService, private permissionService: PermissionsService @@ -284,7 +284,7 @@ export class BulkEditorComponent if (modal) { modal.componentInstance.buttonsEnabled = true } - this.notificationService.showError( + this.toastService.showError( $localize`Error executing bulk operation`, error ) @@ -859,7 +859,7 @@ export class BulkEditorComponent } mergeDialog.buttonsEnabled = false this.executeBulkOperation(modal, 'merge', args, mergeDialog.documentIDs) - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Merged document will be queued for consumption.` ) }) @@ -882,7 +882,7 @@ export class BulkEditorComponent dialog.documents = Array.from(this.list.selected) dialog.succeeded.subscribe((result) => { - this.notificationService.showInfo($localize`Custom fields updated.`) + this.toastService.showInfo($localize`Custom fields updated.`) this.list.reload() this.list.reduceSelectionToFilter() this.list.selected.forEach((id) => { @@ -890,7 +890,7 @@ export class BulkEditorComponent }) }) dialog.failed.subscribe((error) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error updating custom fields.`, error ) diff --git a/src-ui/src/app/components/document-list/document-list.component.spec.ts b/src-ui/src/app/components/document-list/document-list.component.spec.ts index 290892411..aae043fdb 100644 --- a/src-ui/src/app/components/document-list/document-list.component.spec.ts +++ b/src-ui/src/app/components/document-list/document-list.component.spec.ts @@ -39,11 +39,11 @@ import { FilterPipe } from 'src/app/pipes/filter.pipe' import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe' import { UsernamePipe } from 'src/app/pipes/username.pipe' import { DocumentListViewService } from 'src/app/services/document-list-view.service' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { DocumentService } from 'src/app/services/rest/document.service' import { SavedViewService } from 'src/app/services/rest/saved-view.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { FileStatus, WebsocketStatusService, @@ -85,7 +85,7 @@ describe('DocumentListComponent', () => { let savedViewService: SavedViewService let router: Router let activatedRoute: ActivatedRoute - let notificationService: NotificationService + let toastService: ToastService let modalService: NgbModal let settingsService: SettingsService let permissionService: PermissionsService @@ -116,7 +116,7 @@ describe('DocumentListComponent', () => { savedViewService = TestBed.inject(SavedViewService) router = TestBed.inject(Router) activatedRoute = TestBed.inject(ActivatedRoute) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) modalService = TestBed.inject(NgbModal) settingsService = TestBed.inject(SettingsService) permissionService = TestBed.inject(PermissionsService) @@ -405,11 +405,11 @@ describe('DocumentListComponent', () => { delete modifiedView.name const savedViewServicePatch = jest.spyOn(savedViewService, 'patch') savedViewServicePatch.mockReturnValue(of(modifiedView)) - const notificationSpy = jest.spyOn(notificationService, 'showInfo') + const toastSpy = jest.spyOn(toastService, 'showInfo') component.saveViewConfig() expect(savedViewServicePatch).toHaveBeenCalledWith(modifiedView) - expect(notificationSpy).toHaveBeenCalledWith( + expect(toastSpy).toHaveBeenCalledWith( `View "${view.name}" saved successfully.` ) }) @@ -427,12 +427,12 @@ describe('DocumentListComponent', () => { }, ], }) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') jest .spyOn(savedViewService, 'patch') .mockReturnValueOnce(throwError(() => new Error('Error saving view'))) component.saveViewConfig() - expect(notificationErrorSpy).toHaveBeenCalledWith( + expect(toastErrorSpy).toHaveBeenCalledWith( 'Failed to save view "Saved View 10".', expect.any(Error) ) @@ -467,7 +467,7 @@ describe('DocumentListComponent', () => { let openModal: NgbModalRef modalService.activeInstances.subscribe((modal) => (openModal = modal[0])) const modalSpy = jest.spyOn(modalService, 'open') - const notificationSpy = jest.spyOn(notificationService, 'showInfo') + const toastSpy = jest.spyOn(toastService, 'showInfo') const savedViewServiceCreate = jest.spyOn(savedViewService, 'create') savedViewServiceCreate.mockReturnValueOnce(of(modifiedView)) component.saveViewConfigAs() @@ -480,7 +480,7 @@ describe('DocumentListComponent', () => { }) expect(savedViewServiceCreate).toHaveBeenCalled() expect(modalSpy).toHaveBeenCalled() - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() expect(modalCloseSpy).toHaveBeenCalled() }) diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts index 397cd0e53..f6b7c181b 100644 --- a/src-ui/src/app/components/document-list/document-list.component.ts +++ b/src-ui/src/app/components/document-list/document-list.component.ts @@ -45,11 +45,11 @@ import { StoragePathNamePipe } from 'src/app/pipes/storage-path-name.pipe' import { UsernamePipe } from 'src/app/pipes/username.pipe' import { DocumentListViewService } from 'src/app/services/document-list-view.service' import { HotKeyService } from 'src/app/services/hot-key.service' -import { NotificationService } from 'src/app/services/notification.service' import { OpenDocumentsService } from 'src/app/services/open-documents.service' import { PermissionsService } from 'src/app/services/permissions.service' import { SavedViewService } from 'src/app/services/rest/saved-view.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { WebsocketStatusService } from 'src/app/services/websocket-status.service' import { filterRulesDiffer, @@ -111,7 +111,7 @@ export class DocumentListComponent public savedViewService: SavedViewService, public route: ActivatedRoute, private router: Router, - private notificationService: NotificationService, + private toastService: ToastService, private modalService: NgbModal, private websocketStatusService: WebsocketStatusService, public openDocumentsService: OpenDocumentsService, @@ -380,13 +380,13 @@ export class DocumentListComponent .subscribe({ next: (view) => { this.unmodifiedSavedView = view - this.notificationService.showInfo( + this.toastService.showInfo( $localize`View "${this.list.activeSavedViewTitle}" saved successfully.` ) this.unmodifiedFilterRules = this.list.filterRules }, error: (err) => { - this.notificationService.showError( + this.toastService.showError( $localize`Failed to save view "${this.list.activeSavedViewTitle}".`, err ) @@ -430,7 +430,7 @@ export class DocumentListComponent .subscribe({ next: () => { modal.close() - this.notificationService.showInfo( + this.toastService.showInfo( $localize`View "${savedView.name}" created successfully.` ) }, diff --git a/src-ui/src/app/components/document-notes/document-notes.component.spec.ts b/src-ui/src/app/components/document-notes/document-notes.component.spec.ts index ff5714538..1c86c03a5 100644 --- a/src-ui/src/app/components/document-notes/document-notes.component.spec.ts +++ b/src-ui/src/app/components/document-notes/document-notes.component.spec.ts @@ -9,10 +9,10 @@ import { of, throwError } from 'rxjs' import { DocumentNote } from 'src/app/data/document-note' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { DocumentNotesService } from 'src/app/services/rest/document-notes.service' import { UserService } from 'src/app/services/rest/user.service' +import { ToastService } from 'src/app/services/toast.service' import { DocumentNotesComponent } from './document-notes.component' const notes: DocumentNote[] = [ @@ -52,7 +52,7 @@ describe('DocumentNotesComponent', () => { let component: DocumentNotesComponent let fixture: ComponentFixture let notesService: DocumentNotesService - let notificationService: NotificationService + let toastService: ToastService beforeEach(async () => { TestBed.configureTestingModule({ @@ -103,7 +103,7 @@ describe('DocumentNotesComponent', () => { }).compileComponents() notesService = TestBed.inject(DocumentNotesService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) fixture = TestBed.createComponent(DocumentNotesComponent) component = fixture.componentInstance fixture.detectChanges() @@ -162,11 +162,11 @@ describe('DocumentNotesComponent', () => { fixture.detectChanges() const addSpy = jest.spyOn(notesService, 'addNote') addSpy.mockReturnValueOnce(throwError(() => new Error('error saving note'))) - const notificationsSpy = jest.spyOn(notificationService, 'showError') + const toastsSpy = jest.spyOn(toastService, 'showError') const addButton = fixture.debugElement.query(By.css('button')) addButton.triggerEventHandler('click') expect(addSpy).toHaveBeenCalledWith(12, note) - expect(notificationsSpy).toHaveBeenCalled() + expect(toastsSpy).toHaveBeenCalled() addSpy.mockReturnValueOnce( of([...notes, { id: 31, note, user: { id: 1 } }]) @@ -194,7 +194,7 @@ describe('DocumentNotesComponent', () => { fixture.detectChanges() const deleteButton = fixture.debugElement.queryAll(By.css('button'))[1] // 0 is add button const deleteSpy = jest.spyOn(notesService, 'deleteNote') - const toastsSpy = jest.spyOn(notificationService, 'showError') + const toastsSpy = jest.spyOn(toastService, 'showError') deleteSpy.mockReturnValueOnce( throwError(() => new Error('error deleting note')) ) diff --git a/src-ui/src/app/components/document-notes/document-notes.component.ts b/src-ui/src/app/components/document-notes/document-notes.component.ts index 32877826f..685d2d93e 100644 --- a/src-ui/src/app/components/document-notes/document-notes.component.ts +++ b/src-ui/src/app/components/document-notes/document-notes.component.ts @@ -10,9 +10,9 @@ import { DocumentNote } from 'src/app/data/document-note' import { User } from 'src/app/data/user' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe' -import { NotificationService } from 'src/app/services/notification.service' import { DocumentNotesService } from 'src/app/services/rest/document-notes.service' import { UserService } from 'src/app/services/rest/user.service' +import { ToastService } from 'src/app/services/toast.service' import { ComponentWithPermissions } from '../with-permissions/with-permissions.component' @Component({ @@ -50,7 +50,7 @@ export class DocumentNotesComponent extends ComponentWithPermissions { constructor( private notesService: DocumentNotesService, - private notificationService: NotificationService, + private toastService: ToastService, private usersService: UserService ) { super() @@ -78,7 +78,7 @@ export class DocumentNotesComponent extends ComponentWithPermissions { }, error: (e) => { this.networkActive = false - this.notificationService.showError($localize`Error saving note`, e) + this.toastService.showError($localize`Error saving note`, e) }, }) } @@ -92,7 +92,7 @@ export class DocumentNotesComponent extends ComponentWithPermissions { }, error: (e) => { this.networkActive = false - this.notificationService.showError($localize`Error deleting note`, e) + this.toastService.showError($localize`Error deleting note`, e) }, }) } diff --git a/src-ui/src/app/components/file-drop/file-drop.component.spec.ts b/src-ui/src/app/components/file-drop/file-drop.component.spec.ts index fa5ebc807..bd3a56a3f 100644 --- a/src-ui/src/app/components/file-drop/file-drop.component.spec.ts +++ b/src-ui/src/app/components/file-drop/file-drop.component.spec.ts @@ -10,28 +10,24 @@ import { } from '@angular/core/testing' import { By } from '@angular/platform-browser' import { NgxFileDropEntry, NgxFileDropModule } from 'ngx-file-drop' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { UploadDocumentsService } from 'src/app/services/upload-documents.service' -import { NotificationListComponent } from '../common/notification-list/notification-list.component' +import { ToastsComponent } from '../common/toasts/toasts.component' import { FileDropComponent } from './file-drop.component' describe('FileDropComponent', () => { let component: FileDropComponent let fixture: ComponentFixture let permissionsService: PermissionsService - let notificationService: NotificationService + let toastService: ToastService let settingsService: SettingsService let uploadDocumentsService: UploadDocumentsService beforeEach(() => { TestBed.configureTestingModule({ - imports: [ - NgxFileDropModule, - FileDropComponent, - NotificationListComponent, - ], + imports: [NgxFileDropModule, FileDropComponent, ToastsComponent], providers: [ provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting(), @@ -40,7 +36,7 @@ describe('FileDropComponent', () => { permissionsService = TestBed.inject(PermissionsService) settingsService = TestBed.inject(SettingsService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) uploadDocumentsService = TestBed.inject(UploadDocumentsService) fixture = TestBed.createComponent(FileDropComponent) @@ -105,7 +101,7 @@ describe('FileDropComponent', () => { fixture.detectChanges() expect(dropzone.classes['hide']).toBeTruthy() // drop - const notificationSpy = jest.spyOn(notificationService, 'show') + const toastSpy = jest.spyOn(toastService, 'show') const uploadSpy = jest.spyOn( UploadDocumentsService.prototype as any, 'uploadFile' @@ -139,7 +135,7 @@ describe('FileDropComponent', () => { } as unknown as NgxFileDropEntry, ]) tick(3000) - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() expect(uploadSpy).toHaveBeenCalled() discardPeriodicTasks() })) diff --git a/src-ui/src/app/components/file-drop/file-drop.component.ts b/src-ui/src/app/components/file-drop/file-drop.component.ts index 65ebe6523..49eb423b2 100644 --- a/src-ui/src/app/components/file-drop/file-drop.component.ts +++ b/src-ui/src/app/components/file-drop/file-drop.component.ts @@ -4,13 +4,13 @@ import { NgxFileDropEntry, NgxFileDropModule, } from 'ngx-file-drop' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionAction, PermissionsService, PermissionType, } from 'src/app/services/permissions.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { UploadDocumentsService } from 'src/app/services/upload-documents.service' @Component({ @@ -26,7 +26,7 @@ export class FileDropComponent { constructor( private settings: SettingsService, - private notificationService: NotificationService, + private toastService: ToastService, private uploadDocumentsService: UploadDocumentsService, private permissionsService: PermissionsService ) {} @@ -90,7 +90,7 @@ export class FileDropComponent { public dropped(files: NgxFileDropEntry[]) { this.uploadDocumentsService.onNgxFileDrop(files) if (files.length > 0) - this.notificationService.showInfo($localize`Initiating upload...`, 3000) + this.toastService.showInfo($localize`Initiating upload...`, 3000) } @HostListener('window:blur', ['$event']) public onWindowBlur() { diff --git a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts index e47422a58..62427f5b4 100644 --- a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts +++ b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts @@ -13,12 +13,12 @@ import { IfPermissionsDirective } from 'src/app/directives/if-permissions.direct import { SortableDirective } from 'src/app/directives/sortable.directive' import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe' import { DocumentListViewService } from 'src/app/services/document-list-view.service' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService, PermissionType, } from 'src/app/services/permissions.service' import { CorrespondentService } from 'src/app/services/rest/correspondent.service' +import { ToastService } from 'src/app/services/toast.service' import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component' import { PageHeaderComponent } from '../../common/page-header/page-header.component' import { ManagementListComponent } from '../management-list/management-list.component' @@ -45,7 +45,7 @@ export class CorrespondentListComponent extends ManagementListComponent { let fixture: ComponentFixture let customFieldsService: CustomFieldsService let modalService: NgbModal - let notificationService: NotificationService + let toastService: ToastService let listViewService: DocumentListViewService let settingsService: SettingsService @@ -89,7 +89,7 @@ describe('CustomFieldsComponent', () => { }) ) modalService = TestBed.inject(NgbModal) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) listViewService = TestBed.inject(DocumentListViewService) settingsService = TestBed.inject(SettingsService) settingsService.currentUser = { id: 0, username: 'test' } @@ -104,8 +104,8 @@ describe('CustomFieldsComponent', () => { it('should support create, show notification on error / success', () => { let modal: NgbModalRef modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1])) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') const reloadSpy = jest.spyOn(component, 'reload') const createButton = fixture.debugElement.queryAll(By.css('button'))[1] @@ -116,12 +116,12 @@ describe('CustomFieldsComponent', () => { // fail first editDialog.failed.emit({ error: 'error creating item' }) - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() expect(reloadSpy).not.toHaveBeenCalled() // succeed editDialog.succeeded.emit(fields[0]) - expect(notificationInfoSpy).toHaveBeenCalled() + expect(toastInfoSpy).toHaveBeenCalled() expect(reloadSpy).toHaveBeenCalled() jest.advanceTimersByTime(100) }) @@ -129,8 +129,8 @@ describe('CustomFieldsComponent', () => { it('should support edit, show notification on error / success', () => { let modal: NgbModalRef modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1])) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') const reloadSpy = jest.spyOn(component, 'reload') const editButton = fixture.debugElement.queryAll(By.css('button'))[2] @@ -142,19 +142,19 @@ describe('CustomFieldsComponent', () => { // fail first editDialog.failed.emit({ error: 'error editing item' }) - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() expect(reloadSpy).not.toHaveBeenCalled() // succeed editDialog.succeeded.emit(fields[0]) - expect(notificationInfoSpy).toHaveBeenCalled() + expect(toastInfoSpy).toHaveBeenCalled() expect(reloadSpy).toHaveBeenCalled() }) it('should support delete, show notification on error / success', () => { let modal: NgbModalRef modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1])) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') const deleteSpy = jest.spyOn(customFieldsService, 'delete') const reloadSpy = jest.spyOn(component, 'reload') @@ -167,7 +167,7 @@ describe('CustomFieldsComponent', () => { // fail first deleteSpy.mockReturnValueOnce(throwError(() => new Error('error deleting'))) editDialog.confirmClicked.emit() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() expect(reloadSpy).not.toHaveBeenCalled() // succeed diff --git a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts index caf20bbb1..b4fd9738d 100644 --- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts +++ b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts @@ -14,12 +14,12 @@ import { import { FILTER_CUSTOM_FIELDS_QUERY } from 'src/app/data/filter-rule-type' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' import { DocumentListViewService } from 'src/app/services/document-list-view.service' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service' import { DocumentService } from 'src/app/services/rest/document.service' import { SavedViewService } from 'src/app/services/rest/saved-view.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component' import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component' import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component' @@ -48,7 +48,7 @@ export class CustomFieldsComponent private customFieldsService: CustomFieldsService, public permissionsService: PermissionsService, private modalService: NgbModal, - private notificationService: NotificationService, + private toastService: ToastService, private documentListViewService: DocumentListViewService, private settingsService: SettingsService, private documentService: DocumentService, @@ -86,9 +86,7 @@ export class CustomFieldsComponent modal.componentInstance.succeeded .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe((newField) => { - this.notificationService.showInfo( - $localize`Saved field "${newField.name}".` - ) + this.toastService.showInfo($localize`Saved field "${newField.name}".`) this.customFieldsService.clearCache() this.settingsService.initializeDisplayFields() this.documentService.reload() @@ -97,7 +95,7 @@ export class CustomFieldsComponent modal.componentInstance.failed .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe((e) => { - this.notificationService.showError($localize`Error saving field.`, e) + this.toastService.showError($localize`Error saving field.`, e) }) } @@ -115,9 +113,7 @@ export class CustomFieldsComponent this.customFieldsService.delete(field).subscribe({ next: () => { modal.close() - this.notificationService.showInfo( - $localize`Deleted field "${field.name}"` - ) + this.toastService.showInfo($localize`Deleted field "${field.name}"`) this.customFieldsService.clearCache() this.settingsService.initializeDisplayFields() this.documentService.reload() @@ -125,7 +121,7 @@ export class CustomFieldsComponent this.reload() }, error: (e) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error deleting field "${field.name}".`, e ) diff --git a/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts b/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts index 6c353f91d..0bca3df1b 100644 --- a/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts +++ b/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts @@ -12,12 +12,12 @@ import { FILTER_HAS_DOCUMENT_TYPE_ANY } from 'src/app/data/filter-rule-type' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' import { SortableDirective } from 'src/app/directives/sortable.directive' import { DocumentListViewService } from 'src/app/services/document-list-view.service' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService, PermissionType, } from 'src/app/services/permissions.service' import { DocumentTypeService } from 'src/app/services/rest/document-type.service' +import { ToastService } from 'src/app/services/toast.service' import { DocumentTypeEditDialogComponent } from '../../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component' import { PageHeaderComponent } from '../../common/page-header/page-header.component' import { ManagementListComponent } from '../management-list/management-list.component' @@ -43,7 +43,7 @@ export class DocumentTypeListComponent extends ManagementListComponent { let mailAccountService: MailAccountService let mailRuleService: MailRuleService let modalService: NgbModal - let notificationService: NotificationService + let toastService: ToastService let permissionsService: PermissionsService let activatedRoute: ActivatedRoute let settingsService: SettingsService @@ -111,7 +111,7 @@ describe('MailComponent', () => { mailAccountService = TestBed.inject(MailAccountService) mailRuleService = TestBed.inject(MailRuleService) modalService = TestBed.inject(NgbModal) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) permissionsService = TestBed.inject(PermissionsService) activatedRoute = TestBed.inject(ActivatedRoute) settingsService = TestBed.inject(SettingsService) @@ -157,25 +157,25 @@ describe('MailComponent', () => { } it('should show errors on load if load mailAccounts failure', () => { - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') jest .spyOn(mailAccountService, 'listAll') .mockImplementation(() => throwError(() => new Error('failed to load mail accounts')) ) completeSetup(mailAccountService) - expect(notificationErrorSpy).toBeCalled() + expect(toastErrorSpy).toBeCalled() }) it('should show errors on load if load mailRules failure', () => { - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') jest .spyOn(mailRuleService, 'listAll') .mockImplementation(() => throwError(() => new Error('failed to load mail rules')) ) completeSetup(mailRuleService) - expect(notificationErrorSpy).toBeCalled() + expect(toastErrorSpy).toBeCalled() }) it('should support edit / create mail account, show error if needed', () => { @@ -184,12 +184,12 @@ describe('MailComponent', () => { modalService.activeInstances.subscribe((refs) => (modal = refs[0])) component.editMailAccount(mailAccounts[0] as MailAccount) let editDialog = modal.componentInstance as MailAccountEditDialogComponent - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') editDialog.failed.emit() - expect(notificationErrorSpy).toBeCalled() + expect(toastErrorSpy).toBeCalled() editDialog.succeeded.emit(mailAccounts[0]) - expect(notificationInfoSpy).toHaveBeenCalledWith( + expect(toastInfoSpy).toHaveBeenCalledWith( `Saved account "${mailAccounts[0].name}".` ) editDialog.cancel() @@ -203,37 +203,35 @@ describe('MailComponent', () => { component.deleteMailAccount(mailAccounts[0] as MailAccount) const deleteDialog = modal.componentInstance as ConfirmDialogComponent const deleteSpy = jest.spyOn(mailAccountService, 'delete') - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') const listAllSpy = jest.spyOn(mailAccountService, 'listAll') deleteSpy.mockReturnValueOnce( throwError(() => new Error('error deleting mail account')) ) deleteDialog.confirm() - expect(notificationErrorSpy).toBeCalled() + expect(toastErrorSpy).toBeCalled() deleteSpy.mockReturnValueOnce(of(true)) deleteDialog.confirm() expect(listAllSpy).toHaveBeenCalled() - expect(notificationInfoSpy).toHaveBeenCalledWith( - 'Deleted mail account "account1"' - ) + expect(toastInfoSpy).toHaveBeenCalledWith('Deleted mail account "account1"') }) it('should support process mail account, show error if needed', () => { completeSetup() const processSpy = jest.spyOn(mailAccountService, 'processAccount') - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') component.processAccount(mailAccounts[0] as MailAccount) expect(processSpy).toHaveBeenCalled() processSpy.mockReturnValueOnce( throwError(() => new Error('error processing mail account')) ) component.processAccount(mailAccounts[0] as MailAccount) - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() processSpy.mockReturnValueOnce(of(true)) component.processAccount(mailAccounts[0] as MailAccount) - expect(notificationInfoSpy).toHaveBeenCalledWith( + expect(toastInfoSpy).toHaveBeenCalledWith( 'Processing mail account "account1"' ) }) @@ -244,12 +242,12 @@ describe('MailComponent', () => { modalService.activeInstances.subscribe((refs) => (modal = refs[0])) component.editMailRule(mailRules[0] as MailRule) const editDialog = modal.componentInstance as MailRuleEditDialogComponent - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') editDialog.failed.emit() - expect(notificationErrorSpy).toBeCalled() + expect(toastErrorSpy).toBeCalled() editDialog.succeeded.emit(mailRules[0]) - expect(notificationInfoSpy).toHaveBeenCalledWith( + expect(toastInfoSpy).toHaveBeenCalledWith( `Saved rule "${mailRules[0].name}".` ) editDialog.cancel() @@ -274,20 +272,18 @@ describe('MailComponent', () => { component.deleteMailRule(mailRules[0] as MailRule) const deleteDialog = modal.componentInstance as ConfirmDialogComponent const deleteSpy = jest.spyOn(mailRuleService, 'delete') - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') const listAllSpy = jest.spyOn(mailRuleService, 'listAll') deleteSpy.mockReturnValueOnce( throwError(() => new Error('error deleting mail rule "rule1"')) ) deleteDialog.confirm() - expect(notificationErrorSpy).toBeCalled() + expect(toastErrorSpy).toBeCalled() deleteSpy.mockReturnValueOnce(of(true)) deleteDialog.confirm() expect(listAllSpy).toHaveBeenCalled() - expect(notificationInfoSpy).toHaveBeenCalledWith( - 'Deleted mail rule "rule1"' - ) + expect(toastInfoSpy).toHaveBeenCalledWith('Deleted mail rule "rule1"') }) it('should support edit permissions on mail rule objects', () => { @@ -307,8 +303,8 @@ describe('MailComponent', () => { } let modal: NgbModalRef modalService.activeInstances.subscribe((refs) => (modal = refs[0])) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') const rulePatchSpy = jest.spyOn(mailRuleService, 'patch') component.editPermissions(mailRules[0] as MailRule) expect(modal).not.toBeUndefined() @@ -320,10 +316,10 @@ describe('MailComponent', () => { ) dialog.confirmClicked.emit({ permissions: perms, merge: true }) expect(rulePatchSpy).toHaveBeenCalled() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() rulePatchSpy.mockReturnValueOnce(of(mailRules[0] as MailRule)) dialog.confirmClicked.emit({ permissions: perms, merge: true }) - expect(notificationInfoSpy).toHaveBeenCalledWith('Permissions updated') + expect(toastInfoSpy).toHaveBeenCalledWith('Permissions updated') modalService.dismissAll() }) @@ -360,15 +356,15 @@ describe('MailComponent', () => { const toggleInput = fixture.debugElement.query( By.css('input[type="checkbox"]') ) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') // fail first patchSpy.mockReturnValueOnce( throwError(() => new Error('Error getting config')) ) toggleInput.nativeElement.click() expect(patchSpy).toHaveBeenCalled() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() // succeed second patchSpy.mockReturnValueOnce(of(mailRules[0] as MailRule)) toggleInput.nativeElement.click() @@ -377,7 +373,7 @@ describe('MailComponent', () => { ) toggleInput.nativeElement.click() expect(patchSpy).toHaveBeenCalled() - expect(notificationInfoSpy).toHaveBeenCalled() + expect(toastInfoSpy).toHaveBeenCalled() }) it('should show success message when oauth account is connected', () => { @@ -385,9 +381,9 @@ describe('MailComponent', () => { jest .spyOn(activatedRoute, 'queryParamMap', 'get') .mockReturnValue(of(convertToParamMap(queryParams))) - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') completeSetup() - expect(notificationInfoSpy).toHaveBeenCalled() + expect(toastInfoSpy).toHaveBeenCalled() }) it('should show error message when oauth account connect fails', () => { @@ -395,9 +391,9 @@ describe('MailComponent', () => { jest .spyOn(activatedRoute, 'queryParamMap', 'get') .mockReturnValue(of(convertToParamMap(queryParams))) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') completeSetup() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() }) it('should open account edit dialog if oauth account is connected', () => { diff --git a/src-ui/src/app/components/manage/mail/mail.component.ts b/src-ui/src/app/components/manage/mail/mail.component.ts index ebe5231e5..8d4222516 100644 --- a/src-ui/src/app/components/manage/mail/mail.component.ts +++ b/src-ui/src/app/components/manage/mail/mail.component.ts @@ -11,7 +11,6 @@ import { ObjectWithPermissions } from 'src/app/data/object-with-permissions' import { SETTINGS_KEYS } from 'src/app/data/ui-settings' import { IfOwnerDirective } from 'src/app/directives/if-owner.directive' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionAction, PermissionsService, @@ -20,6 +19,7 @@ import { AbstractPaperlessService } from 'src/app/services/rest/abstract-paperle import { MailAccountService } from 'src/app/services/rest/mail-account.service' import { MailRuleService } from 'src/app/services/rest/mail-rule.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component' import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component' import { MailAccountEditDialogComponent } from '../../common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component' @@ -71,7 +71,7 @@ export class MailComponent constructor( public mailAccountService: MailAccountService, public mailRuleService: MailRuleService, - private notificationService: NotificationService, + private toastService: ToastService, private modalService: NgbModal, public permissionsService: PermissionsService, private settingsService: SettingsService, @@ -104,7 +104,7 @@ export class MailComponent this.showAccounts = true }, error: (e) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error retrieving mail accounts`, e ) @@ -127,10 +127,7 @@ export class MailComponent this.showRules = true }, error: (e) => { - this.notificationService.showError( - $localize`Error retrieving mail rules`, - e - ) + this.toastService.showError($localize`Error retrieving mail rules`, e) }, }) @@ -138,9 +135,7 @@ export class MailComponent if (params.get('oauth_success')) { const success = params.get('oauth_success') === '1' if (success) { - this.notificationService.showInfo( - $localize`OAuth2 authentication success` - ) + this.toastService.showInfo($localize`OAuth2 authentication success`) this.oAuthAccountId = parseInt(params.get('account_id')) if (this.mailAccounts.length > 0) { this.editMailAccount( @@ -150,7 +145,7 @@ export class MailComponent ) } } else { - this.notificationService.showError( + this.toastService.showError( $localize`OAuth2 authentication failed, see logs for details` ) } @@ -174,7 +169,7 @@ export class MailComponent modal.componentInstance.succeeded .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe((newMailAccount) => { - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Saved account "${newMailAccount.name}".` ) this.mailAccountService.clearCache() @@ -187,7 +182,7 @@ export class MailComponent modal.componentInstance.failed .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe((e) => { - this.notificationService.showError($localize`Error saving account.`, e) + this.toastService.showError($localize`Error saving account.`, e) }) } @@ -205,7 +200,7 @@ export class MailComponent this.mailAccountService.delete(account).subscribe({ next: () => { modal.close() - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Deleted mail account "${account.name}"` ) this.mailAccountService.clearCache() @@ -216,7 +211,7 @@ export class MailComponent }) }, error: (e) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error deleting mail account "${account.name}".`, e ) @@ -228,12 +223,12 @@ export class MailComponent processAccount(account: MailAccount) { this.mailAccountService.processAccount(account).subscribe({ next: () => { - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Processing mail account "${account.name}"` ) }, error: (e) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error processing mail account "${account.name}"`, e ) @@ -252,9 +247,7 @@ export class MailComponent modal.componentInstance.succeeded .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe((newMailRule) => { - this.notificationService.showInfo( - $localize`Saved rule "${newMailRule.name}".` - ) + this.toastService.showInfo($localize`Saved rule "${newMailRule.name}".`) this.mailRuleService.clearCache() this.mailRuleService .listAll(null, null, { full_perms: true }) @@ -265,7 +258,7 @@ export class MailComponent modal.componentInstance.failed .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe((e) => { - this.notificationService.showError($localize`Error saving rule.`, e) + this.toastService.showError($localize`Error saving rule.`, e) }) } @@ -279,14 +272,14 @@ export class MailComponent onMailRuleEnableToggled(rule: MailRule) { this.mailRuleService.patch(rule).subscribe({ next: () => { - this.notificationService.showInfo( + this.toastService.showInfo( rule.enabled ? $localize`Rule "${rule.name}" enabled.` : $localize`Rule "${rule.name}" disabled.` ) }, error: (e) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error toggling rule "${rule.name}".`, e ) @@ -308,7 +301,7 @@ export class MailComponent this.mailRuleService.delete(rule).subscribe({ next: () => { modal.close() - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Deleted mail rule "${rule.name}"` ) this.mailRuleService.clearCache() @@ -319,7 +312,7 @@ export class MailComponent }) }, error: (e) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error deleting mail rule "${rule.name}".`, e ) @@ -344,11 +337,11 @@ export class MailComponent object['set_permissions'] = permissions['set_permissions'] service.patch(object).subscribe({ next: () => { - this.notificationService.showInfo($localize`Permissions updated`) + this.toastService.showInfo($localize`Permissions updated`) modal.close() }, error: (e) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error updating permissions`, e ) diff --git a/src-ui/src/app/components/manage/management-list/management-list.component.spec.ts b/src-ui/src/app/components/manage/management-list/management-list.component.spec.ts index a167edecc..291a71fa3 100644 --- a/src-ui/src/app/components/manage/management-list/management-list.component.spec.ts +++ b/src-ui/src/app/components/manage/management-list/management-list.component.spec.ts @@ -35,13 +35,13 @@ import { SortableDirective } from 'src/app/directives/sortable.directive' import { PermissionsGuard } from 'src/app/guards/permissions.guard' import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe' import { DocumentListViewService } from 'src/app/services/document-list-view.service' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionAction, PermissionsService, } from 'src/app/services/permissions.service' import { BulkEditObjectOperation } from 'src/app/services/rest/abstract-name-filter-service' import { TagService } from 'src/app/services/rest/tag.service' +import { ToastService } from 'src/app/services/toast.service' import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component' import { EditDialogComponent } from '../../common/edit-dialog/edit-dialog.component' import { PageHeaderComponent } from '../../common/page-header/page-header.component' @@ -76,7 +76,7 @@ describe('ManagementListComponent', () => { let fixture: ComponentFixture> let tagService: TagService let modalService: NgbModal - let notificationService: NotificationService + let toastService: ToastService let documentListViewService: DocumentListViewService let permissionsService: PermissionsService @@ -129,7 +129,7 @@ describe('ManagementListComponent', () => { .spyOn(permissionsService, 'currentUserOwnsObject') .mockReturnValue(true) modalService = TestBed.inject(NgbModal) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) documentListViewService = TestBed.inject(DocumentListViewService) fixture = TestBed.createComponent(TagListComponent) component = fixture.componentInstance @@ -160,8 +160,8 @@ describe('ManagementListComponent', () => { it('should support create, show notification on error / success', () => { let modal: NgbModalRef modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1])) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') const reloadSpy = jest.spyOn(component, 'reloadData') const createButton = fixture.debugElement.queryAll(By.css('button'))[3] @@ -172,20 +172,20 @@ describe('ManagementListComponent', () => { // fail first editDialog.failed.emit({ error: 'error creating item' }) - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() expect(reloadSpy).not.toHaveBeenCalled() // succeed editDialog.succeeded.emit() - expect(notificationInfoSpy).toHaveBeenCalled() + expect(toastInfoSpy).toHaveBeenCalled() expect(reloadSpy).toHaveBeenCalled() }) it('should support edit, show notification on error / success', () => { let modal: NgbModalRef modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1])) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') const reloadSpy = jest.spyOn(component, 'reloadData') const editButton = fixture.debugElement.queryAll(By.css('button'))[6] @@ -197,19 +197,19 @@ describe('ManagementListComponent', () => { // fail first editDialog.failed.emit({ error: 'error editing item' }) - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() expect(reloadSpy).not.toHaveBeenCalled() // succeed editDialog.succeeded.emit() - expect(notificationInfoSpy).toHaveBeenCalled() + expect(toastInfoSpy).toHaveBeenCalled() expect(reloadSpy).toHaveBeenCalled() }) it('should support delete, show notification on error / success', () => { let modal: NgbModalRef modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1])) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') const deleteSpy = jest.spyOn(tagService, 'delete') const reloadSpy = jest.spyOn(component, 'reloadData') @@ -222,7 +222,7 @@ describe('ManagementListComponent', () => { // fail first deleteSpy.mockReturnValueOnce(throwError(() => new Error('error deleting'))) editDialog.confirmClicked.emit() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() expect(reloadSpy).not.toHaveBeenCalled() // succeed @@ -293,22 +293,22 @@ describe('ManagementListComponent', () => { bulkEditPermsSpy.mockReturnValueOnce( throwError(() => new Error('error setting permissions')) ) - const errornotificationSpy = jest.spyOn(notificationService, 'showError') + const errorToastSpy = jest.spyOn(toastService, 'showError') modal.componentInstance.confirmClicked.emit({ permissions: {}, merge: true, }) expect(bulkEditPermsSpy).toHaveBeenCalled() - expect(errornotificationSpy).toHaveBeenCalled() + expect(errorToastSpy).toHaveBeenCalled() - const successnotificationSpy = jest.spyOn(notificationService, 'showInfo') + const successToastSpy = jest.spyOn(toastService, 'showInfo') bulkEditPermsSpy.mockReturnValueOnce(of('OK')) modal.componentInstance.confirmClicked.emit({ permissions: {}, merge: true, }) expect(bulkEditPermsSpy).toHaveBeenCalled() - expect(successnotificationSpy).toHaveBeenCalled() + expect(successToastSpy).toHaveBeenCalled() }) it('should support bulk delete objects', () => { @@ -327,19 +327,19 @@ describe('ManagementListComponent', () => { bulkEditSpy.mockReturnValueOnce( throwError(() => new Error('error setting permissions')) ) - const errornotificationSpy = jest.spyOn(notificationService, 'showError') + const errorToastSpy = jest.spyOn(toastService, 'showError') modal.componentInstance.confirmClicked.emit(null) expect(bulkEditSpy).toHaveBeenCalledWith( Array.from(selected), BulkEditObjectOperation.Delete ) - expect(errornotificationSpy).toHaveBeenCalled() + expect(errorToastSpy).toHaveBeenCalled() - const successnotificationSpy = jest.spyOn(notificationService, 'showInfo') + const successToastSpy = jest.spyOn(toastService, 'showInfo') bulkEditSpy.mockReturnValueOnce(of('OK')) modal.componentInstance.confirmClicked.emit(null) expect(bulkEditSpy).toHaveBeenCalled() - expect(successnotificationSpy).toHaveBeenCalled() + expect(successToastSpy).toHaveBeenCalled() }) it('should disallow bulk permissions or delete objects if no global perms', () => { diff --git a/src-ui/src/app/components/manage/management-list/management-list.component.ts b/src-ui/src/app/components/manage/management-list/management-list.component.ts index 6d43741f6..7f7721485 100644 --- a/src-ui/src/app/components/manage/management-list/management-list.component.ts +++ b/src-ui/src/app/components/manage/management-list/management-list.component.ts @@ -27,7 +27,6 @@ import { SortEvent, } from 'src/app/directives/sortable.directive' import { DocumentListViewService } from 'src/app/services/document-list-view.service' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionAction, PermissionsService, @@ -37,6 +36,7 @@ import { AbstractNameFilterService, BulkEditObjectOperation, } from 'src/app/services/rest/abstract-name-filter-service' +import { ToastService } from 'src/app/services/toast.service' import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component' import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component' import { PermissionsDialogComponent } from '../../common/permissions-dialog/permissions-dialog.component' @@ -63,7 +63,7 @@ export abstract class ManagementListComponent protected service: AbstractNameFilterService, private modalService: NgbModal, private editDialogComponent: any, - private notificationService: NotificationService, + private toastService: ToastService, private documentListViewService: DocumentListViewService, private permissionsService: PermissionsService, protected filterRuleType: number, @@ -173,12 +173,12 @@ export abstract class ManagementListComponent activeModal.componentInstance.dialogMode = EditDialogMode.CREATE activeModal.componentInstance.succeeded.subscribe(() => { this.reloadData() - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Successfully created ${this.typeName}.` ) }) activeModal.componentInstance.failed.subscribe((e) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error occurred while creating ${this.typeName}.`, e ) @@ -193,12 +193,12 @@ export abstract class ManagementListComponent activeModal.componentInstance.dialogMode = EditDialogMode.EDIT activeModal.componentInstance.succeeded.subscribe(() => { this.reloadData() - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Successfully updated ${this.typeName} "${object.name}".` ) }) activeModal.componentInstance.failed.subscribe((e) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error occurred while saving ${this.typeName}.`, e ) @@ -234,7 +234,7 @@ export abstract class ManagementListComponent }, error: (error) => { activeModal.componentInstance.buttonsEnabled = true - this.notificationService.showError( + this.toastService.showError( $localize`Error while deleting element`, error ) @@ -313,14 +313,14 @@ export abstract class ManagementListComponent .subscribe({ next: () => { modal.close() - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Permissions updated successfully` ) this.reloadData() }, error: (error) => { modal.componentInstance.buttonsEnabled = true - this.notificationService.showError( + this.toastService.showError( $localize`Error updating permissions`, error ) @@ -349,14 +349,12 @@ export abstract class ManagementListComponent .subscribe({ next: () => { modal.close() - this.notificationService.showInfo( - $localize`Objects deleted successfully` - ) + this.toastService.showInfo($localize`Objects deleted successfully`) this.reloadData() }, error: (error) => { modal.componentInstance.buttonsEnabled = true - this.notificationService.showError( + this.toastService.showError( $localize`Error deleting objects`, error ) diff --git a/src-ui/src/app/components/manage/saved-views/saved-views.component.spec.ts b/src-ui/src/app/components/manage/saved-views/saved-views.component.spec.ts index 18cc3e4b7..10bc5db8e 100644 --- a/src-ui/src/app/components/manage/saved-views/saved-views.component.spec.ts +++ b/src-ui/src/app/components/manage/saved-views/saved-views.component.spec.ts @@ -10,10 +10,10 @@ import { of, throwError } from 'rxjs' import { SavedView } from 'src/app/data/saved-view' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' import { PermissionsGuard } from 'src/app/guards/permissions.guard' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service' import { SavedViewService } from 'src/app/services/rest/saved-view.service' +import { ToastService } from 'src/app/services/toast.service' import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component' import { CheckComponent } from '../../common/input/check/check.component' import { DragDropSelectComponent } from '../../common/input/drag-drop-select/drag-drop-select.component' @@ -32,7 +32,7 @@ describe('SavedViewsComponent', () => { let component: SavedViewsComponent let fixture: ComponentFixture let savedViewService: SavedViewService - let notificationService: NotificationService + let toastService: ToastService beforeEach(async () => { TestBed.configureTestingModule({ @@ -77,7 +77,7 @@ describe('SavedViewsComponent', () => { }).compileComponents() savedViewService = TestBed.inject(SavedViewService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) fixture = TestBed.createComponent(SavedViewsComponent) component = fixture.componentInstance @@ -93,8 +93,8 @@ describe('SavedViewsComponent', () => { }) it('should support save saved views, show error', () => { - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationSpy = jest.spyOn(notificationService, 'show') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastSpy = jest.spyOn(toastService, 'show') const savedViewPatchSpy = jest.spyOn(savedViewService, 'patchMany') const toggle = fixture.debugElement.query( @@ -108,16 +108,16 @@ describe('SavedViewsComponent', () => { throwError(() => new Error('unable to save saved views')) ) component.save() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() expect(savedViewPatchSpy).toHaveBeenCalled() - notificationSpy.mockClear() - notificationErrorSpy.mockClear() + toastSpy.mockClear() + toastErrorSpy.mockClear() savedViewPatchSpy.mockClear() // succeed saved views savedViewPatchSpy.mockReturnValueOnce(of(savedViews as SavedView[])) component.save() - expect(notificationErrorSpy).not.toHaveBeenCalled() + expect(toastErrorSpy).not.toHaveBeenCalled() expect(savedViewPatchSpy).toHaveBeenCalled() }) @@ -150,12 +150,12 @@ describe('SavedViewsComponent', () => { }) it('should support delete saved view', () => { - const notificationSpy = jest.spyOn(notificationService, 'showInfo') + const toastSpy = jest.spyOn(toastService, 'showInfo') const deleteSpy = jest.spyOn(savedViewService, 'delete') deleteSpy.mockReturnValue(of(true)) component.deleteSavedView(savedViews[0] as SavedView) expect(deleteSpy).toHaveBeenCalled() - expect(notificationSpy).toHaveBeenCalledWith( + expect(toastSpy).toHaveBeenCalledWith( `Saved view "${savedViews[0].name}" deleted.` ) }) diff --git a/src-ui/src/app/components/manage/saved-views/saved-views.component.ts b/src-ui/src/app/components/manage/saved-views/saved-views.component.ts index 1803e2b1c..ee2b00c2b 100644 --- a/src-ui/src/app/components/manage/saved-views/saved-views.component.ts +++ b/src-ui/src/app/components/manage/saved-views/saved-views.component.ts @@ -11,9 +11,9 @@ import { BehaviorSubject, Observable, takeUntil } from 'rxjs' import { DisplayMode } from 'src/app/data/document' import { SavedView } from 'src/app/data/saved-view' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' -import { NotificationService } from 'src/app/services/notification.service' import { SavedViewService } from 'src/app/services/rest/saved-view.service' import { SettingsService } from 'src/app/services/settings.service' +import { ToastService } from 'src/app/services/toast.service' import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component' import { DragDropSelectComponent } from '../../common/input/drag-drop-select/drag-drop-select.component' import { NumberComponent } from '../../common/input/number/number.component' @@ -58,7 +58,7 @@ export class SavedViewsComponent constructor( private savedViewService: SavedViewService, private settings: SettingsService, - private notificationService: NotificationService + private toastService: ToastService ) { super() this.settings.organizingSidebarSavedViews = true @@ -129,7 +129,7 @@ export class SavedViewsComponent this.savedViewService.delete(savedView).subscribe(() => { this.savedViewsGroup.removeControl(savedView.id.toString()) this.savedViews.splice(this.savedViews.indexOf(savedView), 1) - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Saved view "${savedView.name}" deleted.` ) this.savedViewService.clearCache() @@ -155,13 +155,11 @@ export class SavedViewsComponent if (changed.length) { this.savedViewService.patchMany(changed).subscribe({ next: () => { - this.notificationService.showInfo( - $localize`Views saved successfully.` - ) + this.toastService.showInfo($localize`Views saved successfully.`) this.store.next(this.savedViewsForm.value) }, error: (error) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error while saving views.`, error ) diff --git a/src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts b/src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts index d49bf4255..89a243324 100644 --- a/src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts +++ b/src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts @@ -13,12 +13,12 @@ import { IfPermissionsDirective } from 'src/app/directives/if-permissions.direct import { SortableDirective } from 'src/app/directives/sortable.directive' import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe' import { DocumentListViewService } from 'src/app/services/document-list-view.service' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService, PermissionType, } from 'src/app/services/permissions.service' import { StoragePathService } from 'src/app/services/rest/storage-path.service' +import { ToastService } from 'src/app/services/toast.service' import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component' import { PageHeaderComponent } from '../../common/page-header/page-header.component' import { ManagementListComponent } from '../management-list/management-list.component' @@ -45,7 +45,7 @@ export class StoragePathListComponent extends ManagementListComponent { constructor( tagService: TagService, modalService: NgbModal, - notificationService: NotificationService, + toastService: ToastService, documentListViewService: DocumentListViewService, permissionsService: PermissionsService ) { @@ -53,7 +53,7 @@ export class TagListComponent extends ManagementListComponent { tagService, modalService, TagEditDialogComponent, - notificationService, + toastService, documentListViewService, permissionsService, FILTER_HAS_TAGS_ALL, diff --git a/src-ui/src/app/components/manage/workflows/workflows.component.spec.ts b/src-ui/src/app/components/manage/workflows/workflows.component.spec.ts index 58f8fbe9a..636e03d54 100644 --- a/src-ui/src/app/components/manage/workflows/workflows.component.spec.ts +++ b/src-ui/src/app/components/manage/workflows/workflows.component.spec.ts @@ -19,9 +19,9 @@ import { WorkflowTriggerType, } from 'src/app/data/workflow-trigger' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { WorkflowService } from 'src/app/services/rest/workflow.service' +import { ToastService } from 'src/app/services/toast.service' import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component' import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component' import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component' @@ -77,7 +77,7 @@ describe('WorkflowsComponent', () => { let fixture: ComponentFixture let workflowService: WorkflowService let modalService: NgbModal - let notificationService: NotificationService + let toastService: ToastService beforeEach(() => { TestBed.configureTestingModule({ @@ -116,7 +116,7 @@ describe('WorkflowsComponent', () => { }) ) modalService = TestBed.inject(NgbModal) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) jest.useFakeTimers() fixture = TestBed.createComponent(WorkflowsComponent) component = fixture.componentInstance @@ -127,8 +127,8 @@ describe('WorkflowsComponent', () => { it('should support create, show notification on error / success', () => { let modal: NgbModalRef modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1])) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') const reloadSpy = jest.spyOn(component, 'reload') const createButton = fixture.debugElement.queryAll(By.css('button'))[1] @@ -139,20 +139,20 @@ describe('WorkflowsComponent', () => { // fail first editDialog.failed.emit({ error: 'error creating item' }) - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() expect(reloadSpy).not.toHaveBeenCalled() // succeed editDialog.succeeded.emit(workflows[0]) - expect(notificationInfoSpy).toHaveBeenCalled() + expect(toastInfoSpy).toHaveBeenCalled() expect(reloadSpy).toHaveBeenCalled() }) it('should support edit, show notification on error / success', () => { let modal: NgbModalRef modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1])) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') const reloadSpy = jest.spyOn(component, 'reload') const editButton = fixture.debugElement.queryAll(By.css('button'))[2] @@ -164,12 +164,12 @@ describe('WorkflowsComponent', () => { // fail first editDialog.failed.emit({ error: 'error editing item' }) - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() expect(reloadSpy).not.toHaveBeenCalled() // succeed editDialog.succeeded.emit(workflows[0]) - expect(notificationInfoSpy).toHaveBeenCalled() + expect(toastInfoSpy).toHaveBeenCalled() expect(reloadSpy).toHaveBeenCalled() }) @@ -240,7 +240,7 @@ describe('WorkflowsComponent', () => { it('should support delete, show notification on error / success', () => { let modal: NgbModalRef modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1])) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') + const toastErrorSpy = jest.spyOn(toastService, 'showError') const deleteSpy = jest.spyOn(workflowService, 'delete') const reloadSpy = jest.spyOn(component, 'reload') @@ -253,7 +253,7 @@ describe('WorkflowsComponent', () => { // fail first deleteSpy.mockReturnValueOnce(throwError(() => new Error('error deleting'))) editDialog.confirmClicked.emit() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() expect(reloadSpy).not.toHaveBeenCalled() // succeed @@ -267,21 +267,21 @@ describe('WorkflowsComponent', () => { const toggleInput = fixture.debugElement.query( By.css('input[type="checkbox"]') ) - const notificationErrorSpy = jest.spyOn(notificationService, 'showError') - const notificationInfoSpy = jest.spyOn(notificationService, 'showInfo') + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') // fail first patchSpy.mockReturnValueOnce( throwError(() => new Error('Error getting config')) ) toggleInput.nativeElement.click() expect(patchSpy).toHaveBeenCalled() - expect(notificationErrorSpy).toHaveBeenCalled() + expect(toastErrorSpy).toHaveBeenCalled() // succeed second patchSpy.mockReturnValueOnce(of(workflows[0])) toggleInput.nativeElement.click() patchSpy.mockReturnValueOnce(of({ ...workflows[0], enabled: false })) toggleInput.nativeElement.click() expect(patchSpy).toHaveBeenCalled() - expect(notificationInfoSpy).toHaveBeenCalled() + expect(toastInfoSpy).toHaveBeenCalled() }) }) diff --git a/src-ui/src/app/components/manage/workflows/workflows.component.ts b/src-ui/src/app/components/manage/workflows/workflows.component.ts index 056e48111..edbca44c8 100644 --- a/src-ui/src/app/components/manage/workflows/workflows.component.ts +++ b/src-ui/src/app/components/manage/workflows/workflows.component.ts @@ -5,9 +5,9 @@ import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' import { delay, takeUntil, tap } from 'rxjs' import { Workflow } from 'src/app/data/workflow' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' -import { NotificationService } from 'src/app/services/notification.service' import { PermissionsService } from 'src/app/services/permissions.service' import { WorkflowService } from 'src/app/services/rest/workflow.service' +import { ToastService } from 'src/app/services/toast.service' import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component' import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component' import { @@ -40,7 +40,7 @@ export class WorkflowsComponent private workflowService: WorkflowService, public permissionsService: PermissionsService, private modalService: NgbModal, - private notificationService: NotificationService + private toastService: ToastService ) { super() } @@ -90,7 +90,7 @@ export class WorkflowsComponent modal.componentInstance.succeeded .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe((newWorkflow) => { - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Saved workflow "${newWorkflow.name}".` ) this.workflowService.clearCache() @@ -99,7 +99,7 @@ export class WorkflowsComponent modal.componentInstance.failed .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe((e) => { - this.notificationService.showError($localize`Error saving workflow.`, e) + this.toastService.showError($localize`Error saving workflow.`, e) }) } @@ -142,14 +142,14 @@ export class WorkflowsComponent this.workflowService.delete(workflow).subscribe({ next: () => { modal.close() - this.notificationService.showInfo( + this.toastService.showInfo( $localize`Deleted workflow "${workflow.name}".` ) this.workflowService.clearCache() this.reload() }, error: (e) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error deleting workflow "${workflow.name}".`, e ) @@ -161,7 +161,7 @@ export class WorkflowsComponent toggleWorkflowEnabled(workflow: Workflow) { this.workflowService.patch(workflow).subscribe({ next: () => { - this.notificationService.showInfo( + this.toastService.showInfo( workflow.enabled ? $localize`Enabled workflow "${workflow.name}"` : $localize`Disabled workflow "${workflow.name}"` @@ -170,7 +170,7 @@ export class WorkflowsComponent this.reload() }, error: (e) => { - this.notificationService.showError( + this.toastService.showError( $localize`Error toggling workflow "${workflow.name}".`, e ) diff --git a/src-ui/src/app/guards/permissions.guard.spec.ts b/src-ui/src/app/guards/permissions.guard.spec.ts index 76ce781a3..77fe615e1 100644 --- a/src-ui/src/app/guards/permissions.guard.spec.ts +++ b/src-ui/src/app/guards/permissions.guard.spec.ts @@ -1,12 +1,12 @@ import { TestBed } from '@angular/core/testing' import { ActivatedRoute, RouterState } from '@angular/router' import { TourService } from 'ngx-ui-tour-ng-bootstrap' -import { NotificationService } from '../services/notification.service' import { PermissionAction, PermissionType, PermissionsService, } from '../services/permissions.service' +import { ToastService } from '../services/toast.service' import { PermissionsGuard } from './permissions.guard' describe('PermissionsGuard', () => { @@ -15,7 +15,7 @@ describe('PermissionsGuard', () => { let route: ActivatedRoute let routerState: RouterState let tourService: TourService - let notificationService: NotificationService + let toastService: ToastService beforeEach(() => { TestBed.configureTestingModule({ @@ -44,13 +44,13 @@ describe('PermissionsGuard', () => { }, }, TourService, - NotificationService, + ToastService, ], }) permissionsService = TestBed.inject(PermissionsService) tourService = TestBed.inject(TourService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) guard = TestBed.inject(PermissionsGuard) route = TestBed.inject(ActivatedRoute) routerState = TestBed.inject(RouterState) @@ -88,11 +88,11 @@ describe('PermissionsGuard', () => { }) jest.spyOn(tourService, 'getStatus').mockImplementation(() => 2) - const notificationSpy = jest.spyOn(notificationService, 'showError') + const toastSpy = jest.spyOn(toastService, 'showError') const canActivate = guard.canActivate(route.snapshot, routerState.snapshot) expect(canActivate).toHaveProperty('root') // returns UrlTree - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() }) }) diff --git a/src-ui/src/app/guards/permissions.guard.ts b/src-ui/src/app/guards/permissions.guard.ts index 2b3486887..c820edea2 100644 --- a/src-ui/src/app/guards/permissions.guard.ts +++ b/src-ui/src/app/guards/permissions.guard.ts @@ -6,15 +6,15 @@ import { UrlTree, } from '@angular/router' import { TourService } from 'ngx-ui-tour-ng-bootstrap' -import { NotificationService } from '../services/notification.service' import { PermissionsService } from '../services/permissions.service' +import { ToastService } from '../services/toast.service' @Injectable() export class PermissionsGuard { constructor( private permissionsService: PermissionsService, private router: Router, - private notificationService: NotificationService, + private toastService: ToastService, private tourService: TourService ) {} @@ -32,7 +32,7 @@ export class PermissionsGuard { ) { // Check if tour is running 1 = TourState.ON if (this.tourService.getStatus() !== 1) { - this.notificationService.showError( + this.toastService.showError( $localize`You don't have permissions to do that` ) } diff --git a/src-ui/src/app/services/notification.service.spec.ts b/src-ui/src/app/services/notification.service.spec.ts deleted file mode 100644 index 2729dd89e..000000000 --- a/src-ui/src/app/services/notification.service.spec.ts +++ /dev/null @@ -1,109 +0,0 @@ -import { TestBed } from '@angular/core/testing' -import { NotificationService } from './notification.service' - -describe('NotificationService', () => { - let notificationService: NotificationService - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [NotificationService], - }) - - notificationService = TestBed.inject(NotificationService) - }) - - it('adds notification on show', () => { - const notification = { - title: 'Title', - content: 'content', - delay: 5000, - } - notificationService.show(notification) - - notificationService.getNotifications().subscribe((notifications) => { - expect(notifications).toContainEqual(notification) - }) - }) - - it('adds a unique id to notification on show', () => { - const notification = { - title: 'Title', - content: 'content', - delay: 5000, - } - notificationService.show(notification) - - notificationService.getNotifications().subscribe((notifications) => { - expect(notifications[0].id).toBeDefined() - }) - }) - - it('parses error string to object on show', () => { - const notification = { - title: 'Title', - content: 'content', - delay: 5000, - error: 'Error string', - } - notificationService.show(notification) - - notificationService.getNotifications().subscribe((notifications) => { - expect(notifications[0].error).toEqual('Error string') - }) - }) - - it('creates notifications with defaults on showInfo and showError', () => { - notificationService.showInfo('Info notification') - notificationService.showError('Error notification') - - notificationService.getNotifications().subscribe((notifications) => { - expect(notifications).toContainEqual({ - content: 'Info notification', - delay: 5000, - }) - expect(notifications).toContainEqual({ - content: 'Error notification', - delay: 10000, - }) - }) - }) - - it('removes notification on close', () => { - const notification = { - title: 'Title', - content: 'content', - delay: 5000, - } - notificationService.show(notification) - notificationService.closeNotification(notification) - - notificationService.getNotifications().subscribe((notifications) => { - expect(notifications).toHaveLength(0) - }) - }) - - it('clears all notifications on clear', () => { - notificationService.showInfo('Info notification') - notificationService.showError('Error notification') - notificationService.clearNotifications() - - notificationService.getNotifications().subscribe((notifications) => { - expect(notifications).toHaveLength(0) - }) - }) - - it('suppresses popup notifications if suppressPopupNotifications is true', (finish) => { - notificationService.showNotification.subscribe((notification) => { - expect(notification).not.toBeNull() - }) - notificationService.showInfo('Info notification') - - notificationService.showNotification.subscribe((notification) => { - expect(notification).toBeNull() - finish() - }) - - notificationService.suppressPopupNotifications = true - notificationService.showInfo('Info notification') - }) -}) diff --git a/src-ui/src/app/services/notification.service.ts b/src-ui/src/app/services/notification.service.ts deleted file mode 100644 index 63ed69fe2..000000000 --- a/src-ui/src/app/services/notification.service.ts +++ /dev/null @@ -1,87 +0,0 @@ -import { Injectable } from '@angular/core' -import { Subject } from 'rxjs' -import { v4 as uuidv4 } from 'uuid' - -export interface Notification { - id?: string - - content: string - - delay: number - - delayRemaining?: number - - action?: any - - actionName?: string - - classname?: string - - error?: any -} - -@Injectable({ - providedIn: 'root', -}) -export class NotificationService { - constructor() {} - _suppressPopupNotifications: boolean - - set suppressPopupNotifications(value: boolean) { - this._suppressPopupNotifications = value - this.showNotification.next(null) - } - - private notifications: Notification[] = [] - - private notificationsSubject: Subject = new Subject() - - public showNotification: Subject = new Subject() - - show(notification: Notification) { - if (!notification.id) { - notification.id = uuidv4() - } - if (typeof notification.error === 'string') { - try { - notification.error = JSON.parse(notification.error) - } catch (e) {} - } - this.notifications.unshift(notification) - if (!this._suppressPopupNotifications) { - this.showNotification.next(notification) - } - this.notificationsSubject.next(this.notifications) - } - - showError(content: string, error: any = null, delay: number = 10000) { - this.show({ - content: content, - delay: delay, - classname: 'error', - error, - }) - } - - showInfo(content: string, delay: number = 5000) { - this.show({ content: content, delay: delay }) - } - - closeNotification(notification: Notification) { - let index = this.notifications.findIndex((t) => t.id == notification.id) - if (index > -1) { - this.notifications.splice(index, 1) - this.notificationsSubject.next(this.notifications) - } - } - - getNotifications() { - return this.notificationsSubject - } - - clearNotifications() { - this.notifications = [] - this.notificationsSubject.next(this.notifications) - this.showNotification.next(null) - } -} diff --git a/src-ui/src/app/services/settings.service.spec.ts b/src-ui/src/app/services/settings.service.spec.ts index 5353a6f1b..df44013f4 100644 --- a/src-ui/src/app/services/settings.service.spec.ts +++ b/src-ui/src/app/services/settings.service.spec.ts @@ -14,10 +14,10 @@ import { CustomFieldDataType } from '../data/custom-field' import { DEFAULT_DISPLAY_FIELDS, DisplayField } from '../data/document' import { SavedView } from '../data/saved-view' import { SETTINGS_KEYS, UiSettings } from '../data/ui-settings' -import { NotificationService } from './notification.service' import { PermissionsService } from './permissions.service' import { CustomFieldsService } from './rest/custom-fields.service' import { SettingsService } from './settings.service' +import { ToastService } from './toast.service' const customFields = [ { @@ -41,7 +41,7 @@ describe('SettingsService', () => { let customFieldsService: CustomFieldsService let permissionService: PermissionsService let subscription: Subscription - let notificationService: NotificationService + let toastService: ToastService const ui_settings: UiSettings = { user: { @@ -105,7 +105,7 @@ describe('SettingsService', () => { customFieldsService = TestBed.inject(CustomFieldsService) permissionService = TestBed.inject(PermissionsService) settingsService = TestBed.inject(SettingsService) - notificationService = TestBed.inject(NotificationService) + toastService = TestBed.inject(ToastService) // Normally done in app initializer settingsService.initializeSettings().subscribe() }) @@ -122,8 +122,8 @@ describe('SettingsService', () => { expect(req.request.method).toEqual('GET') }) - it('should catch error and show notification on retrieve ui_settings error', fakeAsync(() => { - const notificationSpy = jest.spyOn(notificationService, 'showError') + it('should catch error and show toast on retrieve ui_settings error', fakeAsync(() => { + const toastSpy = jest.spyOn(toastService, 'showError') httpTestingController .expectOne(`${environment.apiBaseUrl}ui_settings/`) .flush( @@ -131,7 +131,7 @@ describe('SettingsService', () => { { status: 403, statusText: 'Forbidden' } ) tick(500) - expect(notificationSpy).toHaveBeenCalled() + expect(toastSpy).toHaveBeenCalled() })) it('calls ui_settings api endpoint with POST on store', () => { diff --git a/src-ui/src/app/services/settings.service.ts b/src-ui/src/app/services/settings.service.ts index 5ad7a0d4a..80e3b3474 100644 --- a/src-ui/src/app/services/settings.service.ts +++ b/src-ui/src/app/services/settings.service.ts @@ -26,13 +26,13 @@ import { UiSettings, } from '../data/ui-settings' import { User } from '../data/user' -import { NotificationService } from './notification.service' import { PermissionAction, PermissionsService, PermissionType, } from './permissions.service' import { CustomFieldsService } from './rest/custom-fields.service' +import { ToastService } from './toast.service' export interface LanguageOption { code: string @@ -294,7 +294,7 @@ export class SettingsService { private meta: Meta, @Inject(LOCALE_ID) private localeId: string, protected http: HttpClient, - private notificationService: NotificationService, + private toastService: ToastService, private permissionsService: PermissionsService, private customFieldsService: CustomFieldsService ) { @@ -307,7 +307,7 @@ export class SettingsService { first(), catchError((error) => { setTimeout(() => { - this.notificationService.showError('Error loading settings', error) + this.toastService.showError('Error loading settings', error) }, 500) return of({ settings: { @@ -601,7 +601,7 @@ export class SettingsService { this.cookieService.get(this.getLanguageCookieName()) ) } catch (error) { - this.notificationService.showError(errorMessage) + this.toastService.showError(errorMessage) console.log(error) } @@ -610,10 +610,10 @@ export class SettingsService { .subscribe({ next: () => { this.updateAppearanceSettings() - this.notificationService.showInfo(successMessage) + this.toastService.showInfo(successMessage) }, error: (e) => { - this.notificationService.showError(errorMessage) + this.toastService.showError(errorMessage) console.log(e) }, }) @@ -633,7 +633,7 @@ export class SettingsService { .pipe(first()) .subscribe({ error: (e) => { - this.notificationService.showError( + this.toastService.showError( 'Error migrating update checking setting' ) console.log(e) @@ -663,7 +663,7 @@ export class SettingsService { this.storeSettings() .pipe(first()) .subscribe(() => { - this.notificationService.showInfo( + this.toastService.showInfo( $localize`You can restart the tour from the settings page.` ) }) diff --git a/src-ui/src/app/services/toast.service.spec.ts b/src-ui/src/app/services/toast.service.spec.ts new file mode 100644 index 000000000..ce50b165e --- /dev/null +++ b/src-ui/src/app/services/toast.service.spec.ts @@ -0,0 +1,109 @@ +import { TestBed } from '@angular/core/testing' +import { ToastService } from './toast.service' + +describe('ToastService', () => { + let toastService: ToastService + + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [ToastService], + }) + + toastService = TestBed.inject(ToastService) + }) + + it('adds toast on show', () => { + const toast = { + title: 'Title', + content: 'content', + delay: 5000, + } + toastService.show(toast) + + toastService.getToasts().subscribe((toasts) => { + expect(toasts).toContainEqual(toast) + }) + }) + + it('adds a unique id to toast on show', () => { + const toast = { + title: 'Title', + content: 'content', + delay: 5000, + } + toastService.show(toast) + + toastService.getToasts().subscribe((toasts) => { + expect(toasts[0].id).toBeDefined() + }) + }) + + it('parses error string to object on show', () => { + const toast = { + title: 'Title', + content: 'content', + delay: 5000, + error: 'Error string', + } + toastService.show(toast) + + toastService.getToasts().subscribe((toasts) => { + expect(toasts[0].error).toEqual('Error string') + }) + }) + + it('creates toasts with defaults on showInfo and showError', () => { + toastService.showInfo('Info toast') + toastService.showError('Error toast') + + toastService.getToasts().subscribe((toasts) => { + expect(toasts).toContainEqual({ + content: 'Info toast', + delay: 5000, + }) + expect(toasts).toContainEqual({ + content: 'Error toast', + delay: 10000, + }) + }) + }) + + it('removes toast on close', () => { + const toast = { + title: 'Title', + content: 'content', + delay: 5000, + } + toastService.show(toast) + toastService.closeToast(toast) + + toastService.getToasts().subscribe((toasts) => { + expect(toasts).toHaveLength(0) + }) + }) + + it('clears all toasts on clearToasts', () => { + toastService.showInfo('Info toast') + toastService.showError('Error toast') + toastService.clearToasts() + + toastService.getToasts().subscribe((toasts) => { + expect(toasts).toHaveLength(0) + }) + }) + + it('suppresses popup toasts if suppressPopupToasts is true', (finish) => { + toastService.showToast.subscribe((toast) => { + expect(toast).not.toBeNull() + }) + toastService.showInfo('Info toast') + + toastService.showToast.subscribe((toast) => { + expect(toast).toBeNull() + finish() + }) + + toastService.suppressPopupToasts = true + toastService.showInfo('Info toast') + }) +}) diff --git a/src-ui/src/app/services/toast.service.ts b/src-ui/src/app/services/toast.service.ts new file mode 100644 index 000000000..b917bf94b --- /dev/null +++ b/src-ui/src/app/services/toast.service.ts @@ -0,0 +1,87 @@ +import { Injectable } from '@angular/core' +import { Subject } from 'rxjs' +import { v4 as uuidv4 } from 'uuid' + +export interface Toast { + id?: string + + content: string + + delay: number + + delayRemaining?: number + + action?: any + + actionName?: string + + classname?: string + + error?: any +} + +@Injectable({ + providedIn: 'root', +}) +export class ToastService { + constructor() {} + _suppressPopupToasts: boolean + + set suppressPopupToasts(value: boolean) { + this._suppressPopupToasts = value + this.showToast.next(null) + } + + private toasts: Toast[] = [] + + private toastsSubject: Subject = new Subject() + + public showToast: Subject = new Subject() + + show(toast: Toast) { + if (!toast.id) { + toast.id = uuidv4() + } + if (typeof toast.error === 'string') { + try { + toast.error = JSON.parse(toast.error) + } catch (e) {} + } + this.toasts.unshift(toast) + if (!this._suppressPopupToasts) { + this.showToast.next(toast) + } + this.toastsSubject.next(this.toasts) + } + + showError(content: string, error: any = null, delay: number = 10000) { + this.show({ + content: content, + delay: delay, + classname: 'error', + error, + }) + } + + showInfo(content: string, delay: number = 5000) { + this.show({ content: content, delay: delay }) + } + + closeToast(toast: Toast) { + let index = this.toasts.findIndex((t) => t.id == toast.id) + if (index > -1) { + this.toasts.splice(index, 1) + this.toastsSubject.next(this.toasts) + } + } + + getToasts() { + return this.toastsSubject + } + + clearToasts() { + this.toasts = [] + this.toastsSubject.next(this.toasts) + this.showToast.next(null) + } +} diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss index 103b1b8ba..a3f385ed5 100644 --- a/src-ui/src/styles.scss +++ b/src-ui/src/styles.scss @@ -571,7 +571,7 @@ table.table { } .toast { - --bs-toast-max-width: var(--pngx-notification-max-width); + --bs-toast-max-width: var(--pngx-toast-max-width); } .alert-primary { diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss index 94d78d3c4..cc60d3851 100644 --- a/src-ui/src/theme.scss +++ b/src-ui/src/theme.scss @@ -24,11 +24,11 @@ --pngx-bg-alt2: var(--bs-gray-200); // #e9ecef --pngx-bg-disabled: #f7f7f7; --pngx-focus-alpha: 0.3; - --pngx-notification-max-width: 360px; + --pngx-toast-max-width: 360px; --bs-info: var(--pngx-bg-alt2); --bs-info-rgb: 233, 236, 239; @media screen and (min-width: 1024px) { - --pngx-notification-max-width: 450px; + --pngx-toast-max-width: 450px; } }