peek error modal

Author: nielslyngsoe

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

@@ -15,7 +15,7 @@ export class UmbPeekErrorNotificationElement extends UmbLitElement {
 	async #onClick() {
 		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
 
-		modalManager.open(this, UMB_ERROR_VIEWER_MODAL, { data: this.data });
+		modalManager.open(this, UMB_ERROR_VIEWER_MODAL, { data: this.data?.details });
 
 		this.notificationHandler.close();
 	}
@@ -24,7 +24,12 @@ export class UmbPeekErrorNotificationElement extends UmbLitElement {
 		return this.data
 			? html`<uui-toast-notification-layout headline=${ifDefined(this.data.headline)}
 					>${this.data.message}${this.data.details
-						? html`<uui-button slot="action" look="primary" color="danger" @click=${this.#onClick}></uui-button>`
+						? 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;

src/Umbraco.Web.UI.Client/src/packages/core/notification/modals/error-viewer/error-viewer-modal.element.ts

@@ -1,9 +1,15 @@
 import type { UmbErrorViewerModalData, UmbErrorViewerModalValue } from './error-viewer-modal.token.js';
-import { css, customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 
 @customElement('umb-error-viewer-modal')
 export class UmbErrorViewerModalElement extends UmbModalBaseElement<UmbErrorViewerModalData, UmbErrorViewerModalValue> {
+	@state()
+	_displayError?: string;
+
+	@state()
+	_displayLang?: string;
+
 	// Code adapted from https://stackoverflow.com/a/57668208/12787
 	// Licensed under the permissions of the CC BY-SA 4.0 DEED
 	#stringify(obj: any): string {
@@ -24,12 +30,26 @@ export class UmbErrorViewerModalElement extends UmbModalBaseElement<UmbErrorView
 		return output + '\n}';
 	}
 
+	public override set data(value: UmbErrorViewerModalData | undefined) {
+		super.data = value;
+		console.log(value, typeof value);
+		// is JSON:
+		if (typeof value === 'string') {
+			this._displayLang = 'String';
+			this._displayError = value;
+		} else {
+			this._displayLang = 'JSON';
+			this._displayError = this.#stringify(value);
+		}
+	}
+	public override get data(): UmbErrorViewerModalData | undefined {
+		return super.data;
+	}
+
 	override render() {
 		return html`
-			<umb-body-layout headline=${this.localize.term('general_manifest')} main-no-padding>
-				${this.data
-					? html`<umb-code-block language="JSON" copy>${this.#stringify(this.data)}</umb-code-block>`
-					: nothing}
+			<umb-body-layout headline=${this.localize.term('defaultdialogs_seeErrorDialogHeadline')} main-no-padding>
+				${this.data ? html`<umb-code-block language=${this._displayLang} copy>${this.data}</umb-code-block>` : nothing}
 				<div slot="actions">
 					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
 				</div>

src/Umbraco.Web.UI.Client/src/packages/core/resources/resource.controller.ts

@@ -4,12 +4,7 @@ import { isApiError, isCancelError, isCancelablePromise } from './apiTypeValidat
 import type { XhrRequestOptions } from './types.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,
-	umbPeekError,
-	type UmbNotificationOptions,
-} from '@umbraco-cms/backoffice/notification';
+import { umbPeekError, type UmbNotificationOptions } from '@umbraco-cms/backoffice/notification';
 import type { UmbDataSourceResponse } from '@umbraco-cms/backoffice/repository';
 import {
 	ApiError,
@@ -122,21 +117,17 @@ export class UmbResourceController extends UmbControllerBase {
 									'The Umbraco object cache is corrupt, but your action may still have been executed. Please restart the server to reset the cache. This is a work in progress.';
 							}
 
-							const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
-							notificationContext.peek('danger', {
-								data: {
-									headline,
-									message,
-								},
-								...options,
+							umbPeekError(this, {
+								headline: headline,
+								message: message,
+								details: problemDetails?.errors ?? problemDetails?.detail,
 							});
 						}
 						break;
 					default:
 						// Other errors
 						if (!isCancelledByNotification) {
 							/*
-
 							const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
 							notificationContext.peek('danger', {
 								data: {
@@ -151,9 +142,8 @@ export class UmbResourceController extends UmbControllerBase {
 							*/
 							const headline = problemDetails?.title ?? error.name ?? 'Server Error';
 							umbPeekError(this, {
-								headline: problemDetails?.detail ? headline : undefined,
-								message: problemDetails?.detail ?? headline,
-								details: problemDetails?.errors,
+								message: headline,
+								details: problemDetails?.errors ?? problemDetails?.detail,
 							});
 						}
 				}