interceptors

Author: loivsen

src/apps/app/app.element.ts

@@ -19,6 +19,11 @@ import {
 } from '@umbraco-cms/backoffice/extension-registry';
 import { filter, first, firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs';
 import { hasOwnOpener, retrieveStoredPath } from '@umbraco-cms/backoffice/utils';
+import {
+	extractUmbNotificationColor,
+	isUmbNotifications,
+	UMB_NOTIFICATION_CONTEXT,
+} from '@umbraco-cms/backoffice/notification';
 
 @customElement('umb-app')
 export class UmbAppElement extends UmbLitElement {
@@ -146,6 +151,7 @@ export class UmbAppElement extends UmbLitElement {
 		super();
 
 		OpenAPI.BASE = window.location.origin;
+		this.#attachApiInterceptor();
 
 		new UmbBundleExtensionInitializer(this, umbExtensionsRegistry);
 
@@ -211,6 +217,32 @@ export class UmbAppElement extends UmbLitElement {
 		}
 	}
 
+	#attachApiInterceptor() {
+		OpenAPI.interceptors.response.use(async (response) => {
+			const umbNotifications = response.headers.get('umb-notifications') as string | null;
+			if (!umbNotifications) return response;
+
+			const notifications = JSON.parse(umbNotifications);
+			if (!isUmbNotifications(notifications)) return response;
+
+			const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
+			for (const notification of notifications) {
+				notificationContext.peek(extractUmbNotificationColor(notification.type), {
+					data: { headline: notification.category, message: notification.message },
+				});
+			}
+
+			const newHeader = new Headers();
+			for (const header of response.headers.entries()) {
+				const [key, value] = header;
+				if (key !== 'umb-notifications') newHeader.set(key, value);
+			}
+
+			const newResponse = { ...response, headers: newHeader };
+			return newResponse;
+		});
+	}
+
 	// TODO: move set initial auth state into auth context
 	async #setAuthStatus() {
 		if (this.bypassAuth) return;

src/packages/core/resources/extractUmbColorNotification.function.ts renamed to src/packages/core/notification/extractUmbNotificationColor.function.ts

@@ -1,7 +1,7 @@
-import type { UmbNotificationColor } from '../notification/notification.context.js';
+import type { UmbNotificationColor } from './notification.context.js';
 import { EventMessageTypeModel } from '@umbraco-cms/backoffice/external/backend-api';
 
-export function extractUmbColorNotification(type: EventMessageTypeModel): UmbNotificationColor {
+export function extractUmbNotificationColor(type: EventMessageTypeModel): UmbNotificationColor {
 	switch (type) {
 		case EventMessageTypeModel.ERROR:
 			return 'danger';

src/packages/core/notification/index.ts

@@ -2,3 +2,6 @@ import './layouts/default/index.js';
 
 export * from './notification.context.js';
 export * from './notification-handler.js';
+
+export * from './isUmbNotifications.function.js';
+export * from './extractUmbNotificationColor.function.js';

src/packages/core/resources/isUmbNotification.function.ts renamed to src/packages/core/notification/isUmbNotifications.function.ts

@@ -1,7 +1,6 @@
-import type { UmbNotificationsEventModel } from './resource.controller.js';
 import { EventMessageTypeModel } from '@umbraco-cms/backoffice/external/backend-api';
 
-export function isUmbNotification(notification: unknown): notification is UmbNotificationsEventModel {
+function objectIsUmbNotification(notification: unknown): notification is UmbNotificationsEventModel {
 	if (typeof notification !== 'object' || notification === null) {
 		return false;
 	}
@@ -13,3 +12,13 @@ export function isUmbNotification(notification: unknown): notification is UmbNot
 		Object.values(EventMessageTypeModel).includes(object.type)
 	);
 }
+
+export interface UmbNotificationsEventModel {
+	category: string;
+	message: string;
+	type: EventMessageTypeModel;
+}
+
+export function isUmbNotifications(notifications: Array<unknown>): notifications is Array<UmbNotificationsEventModel> {
+	return notifications.every(objectIsUmbNotification);
+}

src/packages/core/resources/index.ts

@@ -1,8 +1,5 @@
 export * from './resource.controller.js';
 export * from './tryExecute.function.js';
 export * from './tryExecuteAndNotify.function.js';
-export * from './extractUmbColorNotification.function.js';
 export * from './extractUmbColorVariable.function.js';
-export * from './isUmbNotification.function.js';
-export * from './isUmbNotifications.function.js';
 export * from './apiTypeValidators.function.js';

src/packages/core/resources/isUmbNotifications.function.ts

@@ -1,20 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { UMB_AUTH_CONTEXT } from '../auth/index.js';
 import { isApiError, isCancelError, isCancelablePromise } from './apiTypeValidators.function.js';
-import { extractUmbColorNotification } from './extractUmbColorNotification.function.js';
-import { isUmbNotifications } from './isUmbNotifications.function.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UMB_NOTIFICATION_CONTEXT, type UmbNotificationOptions } from '@umbraco-cms/backoffice/notification';
 import type { UmbDataSourceResponse } from '@umbraco-cms/backoffice/repository';
-import type { EventMessageTypeModel } from '@umbraco-cms/backoffice/external/backend-api';
-
-export interface UmbNotificationsEventModel {
-	category: string;
-	message: string;
-	type: EventMessageTypeModel;
-}
 
 export class UmbResourceController extends UmbControllerBase {
 	#promise: Promise<any>;
@@ -137,9 +128,7 @@ export class UmbResourceController extends UmbControllerBase {
 						break;
 					default:
 						// Other errors
-						if (error && error.body && Array.isArray(error.body) && isUmbNotifications(error.body)) {
-							this.#peekUmbNotifications(error.body);
-						} else if (this.#notificationContext) {
+						if (this.#notificationContext) {
 							this.#notificationContext.peek('danger', {
 								data: {
 									headline: error.body?.title ?? error.name ?? 'Server Error',
@@ -155,21 +144,9 @@ export class UmbResourceController extends UmbControllerBase {
 			}
 		}
 
-		if (Array.isArray(data) && isUmbNotifications(data)) {
-			this.#peekUmbNotifications(data);
-		}
-
 		return { data, error };
 	}
 
-	#peekUmbNotifications(notifications: Array<UmbNotificationsEventModel>) {
-		notifications.forEach((notification) => {
-			this.#notificationContext?.peek(extractUmbColorNotification(notification.type), {
-				data: { headline: notification.category, message: notification.message },
-			});
-		});
-	}
-
 	/**
 	 * Cancel all resources that are currently being executed by this controller if they are cancelable.
 	 *