Merge pull request #18172 from umbraco/v15/feature/reworking-error-notifications

Feature: reworking error toast notifications

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts

@@ -584,6 +584,8 @@ export default {
 		deleteLayout: 'You are deleting the layout',
 		deletingALayout:
 			'Modifying layout will result in loss of data for any existing content that is based on this configuration.',
+		seeErrorAction: 'Se fejlen',
+		seeErrorDialogHeadline: 'Fejl detaljer',
 	},
 	dictionary: {
 		noItems: 'Der er ingen ordbogselementer.',

src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts

@@ -614,6 +614,8 @@ export default {
 		deleteLayout: 'You are deleting the layout',
 		deletingALayout:
 			'Modifying layout will result in loss of data for any existing content that is based on this configuration.',
+		seeErrorAction: 'See error',
+		seeErrorDialogHeadline: 'Error details',
 	},
 	dictionary: {
 		importDictionaryItemHelp:

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -610,6 +610,8 @@ export default {
 		deletingALayout:
 			'Modifying layout will result in loss of data for any existing content that is based on this configuration.',
 		selectEditorConfiguration: 'Select configuration',
+		seeErrorAction: 'See error',
+		seeErrorDialogHeadline: 'Error details',
 	},
 	dictionary: {
 		importDictionaryItemHelp:

src/Umbraco.Web.UI.Client/src/packages/core/components/code-block/code-block.element.ts

@@ -68,7 +68,6 @@ export class UmbCodeBlockElement extends LitElement {
 			}
 
 			uui-scroll-container {
-				max-height: 500px;
 				overflow-y: auto;
 				overflow-wrap: anywhere;
 			}

src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts

@@ -11,6 +11,7 @@ import { manifests as iconRegistryManifests } from './icon-registry/manifests.js
 import { manifests as localizationManifests } from './localization/manifests.js';
 import { manifests as menuManifests } from './menu/manifests.js';
 import { manifests as modalManifests } from './modal/manifests.js';
+import { manifests as notificationManifests } from './notification/manifests.js';
 import { manifests as pickerManifests } from './picker/manifests.js';
 import { manifests as propertyActionManifests } from './property-action/manifests.js';
 import { manifests as propertyEditorManifests } from './property-editor/manifests.js';
@@ -40,6 +41,7 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 	...localizationManifests,
 	...menuManifests,
 	...modalManifests,
+	...notificationManifests,
 	...pickerManifests,
 	...propertyActionManifests,
 	...propertyEditorManifests,

src/Umbraco.Web.UI.Client/src/packages/core/notification/controllers/peek-error/index.ts

@@ -0,0 +1 @@
+export * from './peek-error.controller.js';

src/Umbraco.Web.UI.Client/src/packages/core/notification/controllers/peek-error/peek-error-notification.element.ts

@@ -0,0 +1,43 @@
+import { customElement, html, ifDefined, nothing, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { UmbNotificationHandler } from '../../notification-handler.js';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import type { UmbPeekErrorArgs } from '../../types.js';
+import { UMB_ERROR_VIEWER_MODAL } from '../../index.js';
+
+@customElement('umb-peek-error-notification')
+export class UmbPeekErrorNotificationElement extends UmbLitElement {
+	@property({ attribute: false })
+	public data?: UmbPeekErrorArgs;
+
+	public notificationHandler!: UmbNotificationHandler;
+
+	async #onClick() {
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+
+		modalManager.open(this, UMB_ERROR_VIEWER_MODAL, { data: this.data?.details });
+
+		this.notificationHandler.close();
+	}
+
+	protected override render() {
+		return this.data
+			? html`<uui-toast-notification-layout headline=${ifDefined(this.data.headline)}
+					>${this.data.message}${this.data.details
+						? html`<uui-button
+								slot="actions"
+								look="primary"
+								color="danger"
+								label=${this.localize.term('defaultdialogs_seeErrorAction')}
+								@click=${this.#onClick}></uui-button>`
+						: nothing}</uui-toast-notification-layout
+				>`
+			: nothing;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-peek-error-notification': UmbPeekErrorNotificationElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/notification/controllers/peek-error/peek-error.controller.ts

@@ -0,0 +1,32 @@
+import { UMB_NOTIFICATION_CONTEXT } from '../../notification.context.js';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type { UmbPeekErrorArgs } from '../../types.js';
+
+import './peek-error-notification.element.js';
+
+export class UmbPeekErrorController extends UmbControllerBase {
+	async open(args: UmbPeekErrorArgs): Promise<void> {
+		const context = await this.getContext(UMB_NOTIFICATION_CONTEXT);
+
+		context.peek('danger', {
+			elementName: 'umb-peek-error-notification',
+			data: args,
+		});
+
+		// This is a one time off, so we can destroy our selfs.
+		this.destroy();
+
+		return;
+	}
+}
+
+/**
+ *
+ * @param host {UmbControllerHost} - The host controller
+ * @param args {UmbPeekErrorArgs} - The data to pass to the notification
+ * @returns {UmbPeekErrorController} The notification peek controller instance
+ */
+export function umbPeekError(host: UmbControllerHost, args: UmbPeekErrorArgs) {
+	return new UmbPeekErrorController(host).open(args);
+}

src/Umbraco.Web.UI.Client/src/packages/core/notification/extractUmbNotificationColor.function.ts

@@ -1,5 +1,5 @@
-import type { UmbNotificationColor } from './notification.context.js';
 import { EventMessageTypeModel } from '@umbraco-cms/backoffice/external/backend-api';
+import type { UmbNotificationColor } from './types.js';
 
 /**
  *

src/Umbraco.Web.UI.Client/src/packages/core/notification/index.ts

@@ -1,7 +1,9 @@
 import './layouts/default/index.js';
-
-export * from './notification.context.js';
+export * from './controllers/peek-error/index.js';
+export * from './extractUmbNotificationColor.function.js';
+export * from './isUmbNotifications.function.js';
+export * from './modals/error-viewer/index.js';
 export * from './notification-handler.js';
+export * from './notification.context.js';
 
-export * from './isUmbNotifications.function.js';
-export * from './extractUmbNotificationColor.function.js';
+export type * from './types.js';