Merge pull request #2078 from umbraco/v14/bugfix/show-correct-api-error-description

Bugfix: Show correct msg for ApiError

Author: iOvergaard

src/packages/core/notification/layouts/default/notification-layout-default.element.ts

@@ -1,4 +1,12 @@
-import { html, LitElement, customElement, property, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import {
+	html,
+	LitElement,
+	customElement,
+	property,
+	ifDefined,
+	nothing,
+	css,
+} from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbNotificationDefaultData, UmbNotificationHandler } from '@umbraco-cms/backoffice/notification';
 
@@ -16,11 +24,45 @@ export class UmbNotificationLayoutDefaultElement extends LitElement {
 		return html`
 			<uui-toast-notification-layout id="layout" headline="${ifDefined(this.data.headline)}" class="uui-text">
 				<div id="message">${this.data.message}</div>
+				${this.#renderStructuredList(this.data.structuredList)}
 			</uui-toast-notification-layout>
 		`;
 	}
 
-	static override styles = [UmbTextStyles];
+	#renderStructuredList(list: unknown) {
+		if (!this.data.structuredList) return nothing;
+		if (typeof list !== 'object' || list === null) return nothing;
+
+		return html`${Object.entries(list).map(
+			([property, errors]) =>
+				html`<div class="structured-list">
+					<p>${property}:</p>
+					<ul>
+						${this.#renderListItem(errors)}
+					</ul>
+				</div>`,
+		)}`;
+	}
+
+	#renderListItem(items: unknown) {
+		if (Array.isArray(items)) {
+			return items.map((item) => html`<li>${item}</li>`);
+		} else {
+			return html`<li>${items}</li>`;
+		}
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			.structured-list ul {
+				margin: 0;
+			}
+			.structured-list p {
+				margin: var(--uui-size-3) 0 var(--uui-size-1);
+			}
+		`,
+	];
 }
 
 declare global {

src/packages/core/notification/notification.context.ts

@@ -12,6 +12,7 @@ import { UmbBasicState } from '@umbraco-cms/backoffice/observable-api';
 export interface UmbNotificationDefaultData {
 	message: string;
 	headline?: string;
+	structuredList?: Record<string, Array<unknown>>;
 }
 
 /**

src/packages/core/resources/resource.controller.ts

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { UMB_AUTH_CONTEXT } from '../auth/index.js';
 import { isApiError, isCancelError, isCancelablePromise } from './apiTypeValidators.function.js';
-import { UMB_NOTIFICATION_CONTEXT, type UmbNotificationOptions } from '@umbraco-cms/backoffice/notification';
 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';
 
 export class UmbResourceController extends UmbControllerBase {
@@ -133,6 +133,7 @@ export class UmbResourceController extends UmbControllerBase {
 								data: {
 									headline: error.body?.title ?? error.name ?? 'Server Error',
 									message: error.body?.detail ?? error.message ?? 'Something went wrong',
+									structuredList: error.body.errors,
 								},
 								...options,
 							});