@umbraco-cms/backoffice 18.0.2 → 18.1.0-rc

package/dist-cms/packages/core/resources/api-interceptor.controller.js

@@ -4,6 +4,20 @@ import { isProblemDetailsLike } from './apiTypeValidators.function.js';
 import { UmbAuthSignalerContext } from './auth-signaler.context.js';
 import { UmbControllerBase } from '../../../libs/class-api/index.js';
 const MAX_RETRIES = 3;
+/**
+ * HTTP statuses used by proxies/gateways (nginx, ALB, IIS ARR, Cloudflare's 524/598, etc.) to report that
+ * the origin server *received* the request but didn't respond before the proxy gave up waiting. The action
+ * may still complete (or have completed) on the server.
+ * @see https://github.com/umbraco/Umbraco-CMS/issues/16041
+ */
+const GATEWAY_TIMEOUT_STATUSES = new Set([504, 524, 598]);
+/**
+ * HTTP statuses used by proxies/gateways to report that they could not establish or complete a connection
+ * to the origin server at all (TCP/TLS/DNS failure) — the request never reached the server, so the action
+ * cannot have been performed.
+ * @see https://github.com/umbraco/Umbraco-CMS/issues/16041
+ */
+const GATEWAY_UNREACHABLE_STATUSES = new Set([521, 522, 523, 525, 526, 530, 599]);
 export class UmbApiInterceptorController extends UmbControllerBase {
     /**
      * Store pending requests that received a 401 response and are waiting for re-authentication.
@@ -158,6 +172,32 @@ export class UmbApiInterceptorController extends UmbControllerBase {
                 };
                 return this.#createResponse(notFoundProblemDetails, response);
             }
+            // Special handling for proxy/gateway timeouts. These respond with their own (usually non-JSON) error
+            // page instead of ours, so without this the request would surface as a generic, unhelpful server error.
+            if (GATEWAY_TIMEOUT_STATUSES.has(response.status)) {
+                const timeoutProblemDetails = {
+                    status: response.status,
+                    title: 'The request timed out',
+                    detail: `A proxy or gateway between your browser and the server sent your request through, but didn't receive a response in time (HTTP ${response.status}). The action you performed may still have completed on the server — please check before trying again.`,
+                    errors: undefined,
+                    type: 'GatewayTimeout',
+                    stack: undefined,
+                };
+                return this.#createResponse(timeoutProblemDetails, response);
+            }
+            // Special handling for proxies/gateways that could not reach the server at all (as opposed to
+            // GATEWAY_TIMEOUT_STATUSES, where the server received the request but didn't respond in time).
+            if (GATEWAY_UNREACHABLE_STATUSES.has(response.status)) {
+                const unreachableProblemDetails = {
+                    status: response.status,
+                    title: 'The server could not be reached',
+                    detail: `A proxy or gateway between your browser and the server could not connect to it (HTTP ${response.status}). Your request was not received, so no action was performed — please try again once the connection issue is resolved.`,
+                    errors: undefined,
+                    type: 'GatewayUnreachable',
+                    stack: undefined,
+                };
+                return this.#createResponse(unreachableProblemDetails, response);
+            }
             // For all other errors, we will build a ProblemDetails object
             let problemDetails = {
                 status: response.status,
@@ -204,7 +244,10 @@ export class UmbApiInterceptorController extends UmbControllerBase {
                 if (!isUmbNotifications(notifications))
                     return response;
                 for (const notification of notifications) {
-                    this.#peekError(notification.category, notification.message, undefined, extractUmbNotificationColor(notification.type));
+                    // Backend event messages may contain HTML (e.g. links) and are rendered sanitized by the
+                    // notification layout via htmlMessage. The plain message must stay markup-free because it is
+                    // read by screen readers (see umb-backoffice-notification-container).
+                    this.#peekError(notification.category, this.#extractText(notification.message), undefined, extractUmbNotificationColor(notification.type), notification.message);
                 }
             }
             catch {
@@ -272,20 +315,30 @@ export class UmbApiInterceptorController extends UmbControllerBase {
             },
         });
     }
+    /**
+     * Extracts the plain text of an HTML string using an inert document, so nothing is executed or loaded.
+     * @param {string} html The HTML string.
+     * @returns {string} The text content of the parsed HTML.
+     */
+    #extractText(html) {
+        return new DOMParser().parseFromString(html, 'text/html').body.textContent ?? '';
+    }
     /**
      * Helper to show a notification error.
      * @param {string} headline The headline of the error notification.
      * @param {string} message The message of the error notification.
      * @param {Record<string, string[]>} [errors] Validation errors keyed by field name.
      * @param {UmbNotificationColor} [color] The color of the notification.
+     * @param {string} [htmlMessage] A message rendered as sanitized HTML, taking precedence over `message`.
      */
-    async #peekError(headline, message, errors, color) {
+    async #peekError(headline, message, errors, color, htmlMessage) {
         // Store the host for usage in the following async context
         const host = this._host;
         // This late importing is done to avoid circular reference [NL]
         (await import('../notification/index.js')).umbPeekError(host, {
             headline,
             message,
+            htmlMessage,
             errors,
             color,
         });

package/dist-cms/packages/core/resources/resource.controller.js

@@ -28,6 +28,23 @@ export class UmbResourceController extends UmbControllerBase {
         else if (UmbApiError.isUmbApiError(error)) {
             return error;
         }
+        else if (error instanceof TypeError) {
+            // The fetch() promise rejects with a TypeError when it never received a response at all, e.g. a DNS
+            // failure, a refused/reset connection, or a proxy (such as Cloudflare) dropping the connection on a
+            // long-running request. This is distinct from an HTTP error response, which resolves normally.
+            // This check is intentionally broad: an unrelated TypeError thrown elsewhere in the same promise
+            // chain would also land here and be reported as "Connection lost", since this method has no way
+            // to distinguish it from a genuine fetch() rejection.
+            // See https://github.com/umbraco/Umbraco-CMS/issues/16041
+            return new UmbApiError('Connection lost', 0, null, {
+                status: 0,
+                title: 'Connection lost',
+                detail: `The connection to the server was lost while the request was in progress (${error.message}). If you were saving or publishing, it may have completed on the server — please check before trying again.`,
+                errors: undefined,
+                type: 'NetworkError',
+                stack: error.stack,
+            });
+        }
         // If the error is not recognizable, for example if it has no ProblemDetails body, we will return a generic UmbApiError.
         // This is to ensure that we always return an UmbApiError, so we can handle it in a consistent way.
         return new UmbApiError(error instanceof Error ? error.message : 'Unknown error', 0, null, {

package/dist-cms/packages/core/search/search-modal/search-modal.element.js

@@ -74,7 +74,7 @@ let UmbSearchModalElement = class UmbSearchModalElement extends UmbLitElement {
                 }
                 if (searchApi) {
                     const searcher = {
-                        name: controller.manifest.meta?.label || controller.manifest.name,
+                        name: this.localize.string(controller.manifest.meta?.label) || controller.manifest.name,
                         api: searchApi,
                         alias: controller.alias,
                         sectionAlias: controller.manifest.meta?.sectionAlias,

package/dist-cms/packages/core/section/components/input-section/input-section.element.d.ts

@@ -12,7 +12,7 @@ export declare class UmbInputSectionElement extends UmbInputSectionElement_base
     get min(): number;
     /**
      * Min validation message.
-     * @type {boolean}
+     * @type {string}
      * @attr
      * @default
      */
@@ -27,7 +27,7 @@ export declare class UmbInputSectionElement extends UmbInputSectionElement_base
     get max(): number;
     /**
      * Max validation message.
-     * @type {boolean}
+     * @type {string}
      * @attr
      * @default
      */

package/dist-cms/packages/core/section/components/input-section/input-section.element.js

@@ -51,14 +51,14 @@ let UmbInputSectionElement = class UmbInputSectionElement extends UmbFormControl
         super();
         /**
          * Min validation message.
-         * @type {boolean}
+         * @type {string}
          * @attr
          * @default
          */
-        this.minMessage = 'This field need more items';
+        this.minMessage = 'This field needs more items';
         /**
          * Max validation message.
-         * @type {boolean}
+         * @type {string}
          * @attr
          * @default
          */
@@ -111,7 +111,7 @@ __decorate([
     property({ type: Number })
 ], UmbInputSectionElement.prototype, "max", null);
 __decorate([
-    property({ type: String, attribute: 'min-message' })
+    property({ type: String, attribute: 'max-message' })
 ], UmbInputSectionElement.prototype, "maxMessage", void 0);
 __decorate([
     property({ type: String })

package/dist-cms/packages/core/section/section-sidebar/section-sidebar.element.js

@@ -41,7 +41,6 @@ let UmbSectionSidebarElement = class UmbSectionSidebarElement extends UmbLitElem
 
 			#scroll-container {
 				height: 100%;
-				overflow-y: auto;
 			}
 		`,
     ]; }

package/dist-cms/packages/core/server/server-connection.js

@@ -41,8 +41,15 @@ export class UmbServerConnection extends UmbControllerBase {
      * @memberof UmbServerConnection
      */
     async connect() {
-        await this.#setStatus();
-        await this.#setServerConfiguration();
+        // Independent reads, but both are required for the backoffice to function.
+        const results = await Promise.allSettled([this.#setStatus(), this.#setServerConfiguration()]);
+        const errors = results
+            .filter((result) => result.status === 'rejected')
+            .map((result) => result.reason);
+        if (errors.length) {
+            throw errors.length === 1 ? errors[0] : new AggregateError(errors, 'Failed to connect to the Umbraco server');
+        }
+        this.#isConnected.setValue(true);
         return this;
     }
     /**
@@ -78,7 +85,6 @@ export class UmbServerConnection extends UmbControllerBase {
         if (error) {
             throw error;
         }
-        this.#isConnected.setValue(true);
         this.#status = data?.serverStatus ?? RuntimeLevelModel.UNKNOWN;
     }
     async #setServerConfiguration() {

package/dist-cms/packages/core/sorter/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './sortable-list.element.js';
+export * from './sortable-list-item.element.js';

package/dist-cms/packages/core/sorter/components/index.js

@@ -0,0 +1,2 @@
+export * from './sortable-list.element.js';
+export * from './sortable-list-item.element.js';

package/dist-cms/packages/core/sorter/components/sortable-list-item.element.d.ts

@@ -0,0 +1,40 @@
+import { UmbLitElement } from '../../lit-element/index.js';
+/**
+ * @element umb-sortable-list-item
+ * @slot - The content of the item.
+ * @slot actions - Actions to render for the item, e.g. a remove button.
+ */
+export declare class UmbSortableListItemElement extends UmbLitElement {
+    #private;
+    /**
+     * The item's unique identifier, used by the parent `umb-sortable-list` to track it while sorting.
+     * @type {string}
+     */
+    unique?: string;
+    /**
+     * Disables the item, hiding the drag handle and actions.
+     * @type {boolean}
+     * @attr
+     */
+    disabled: boolean;
+    /**
+     * Hides the drag handle.
+     * @type {boolean}
+     * @attr hide-handle
+     */
+    hideHandle: boolean;
+    /**
+     * Hides the actions slot.
+     * @type {boolean}
+     * @attr hide-actions
+     */
+    hideActions: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export default UmbSortableListItemElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-sortable-list-item': UmbSortableListItemElement;
+    }
+}

package/dist-cms/packages/core/sorter/components/sortable-list-item.element.js

@@ -0,0 +1,104 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, customElement, html, nothing, property } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+/**
+ * @element umb-sortable-list-item
+ * @slot - The content of the item.
+ * @slot actions - Actions to render for the item, e.g. a remove button.
+ */
+let UmbSortableListItemElement = class UmbSortableListItemElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Disables the item, hiding the drag handle and actions.
+         * @type {boolean}
+         * @attr
+         */
+        this.disabled = false;
+        /**
+         * Hides the drag handle.
+         * @type {boolean}
+         * @attr hide-handle
+         */
+        this.hideHandle = false;
+        /**
+         * Hides the actions slot.
+         * @type {boolean}
+         * @attr hide-actions
+         */
+        this.hideActions = false;
+    }
+    render() {
+        return html `
+			${this.#renderHandle()}
+			<slot></slot>
+			${this.#renderActions()}
+		`;
+    }
+    #renderHandle() {
+        if (this.hideHandle || this.disabled)
+            return nothing;
+        return html `<uui-icon name="icon-grip" class="handle"></uui-icon>`;
+    }
+    #renderActions() {
+        if (this.hideActions || this.disabled)
+            return nothing;
+        return html `<div class="actions"><slot name="actions"></slot></div>`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-6);
+				padding: var(--uui-size-3) 0;
+				background-color: var(--uui-color-surface);
+			}
+
+			:host([drag-placeholder]) {
+				opacity: 0.5;
+			}
+
+			.handle {
+				flex: 0 0 var(--uui-size-6);
+				cursor: grab;
+
+				&:active {
+					cursor: grabbing;
+				}
+			}
+
+			::slotted(*) {
+				flex: 1;
+			}
+
+			.actions {
+				flex: 0 0 auto;
+				display: flex;
+				justify-content: flex-end;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ attribute: 'data-sort-entry-id', reflect: true })
+], UmbSortableListItemElement.prototype, "unique", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbSortableListItemElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-handle' })
+], UmbSortableListItemElement.prototype, "hideHandle", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-actions' })
+], UmbSortableListItemElement.prototype, "hideActions", void 0);
+UmbSortableListItemElement = __decorate([
+    customElement('umb-sortable-list-item')
+], UmbSortableListItemElement);
+export { UmbSortableListItemElement };
+export default UmbSortableListItemElement;

package/dist-cms/packages/core/sorter/components/sortable-list.element.d.ts

@@ -0,0 +1,76 @@
+import type { TemplateResult } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+/**
+ * @element umb-sortable-list
+ * @fires UmbChangeEvent when the order of items has changed
+ * @example
+ * ```html
+ * <umb-sortable-list
+ *     .items=${this.items}
+ *     .getUnique=${(item) => item.alias}
+ *     .renderMethod=${(item) => html`
+ *         <umb-sortable-list-item .unique=${item.alias}>
+ *             <uui-input .value=${item.name}></uui-input>
+ *             <uui-button slot="actions" label="Remove"></uui-button>
+ *         </umb-sortable-list-item>
+ *     `}
+ *     @change=${this.#onSort}>
+ * </umb-sortable-list>
+ * ```
+ */
+export declare class UmbSortableListElement<T = unknown> extends UmbLitElement {
+    #private;
+    /**
+     * An identifier shared between sortable lists, allowing items to be dragged from one list to another that shares the same identifier.
+     * @type {string}
+     * @attr
+     */
+    get identifier(): string | undefined;
+    set identifier(value: string | undefined);
+    /**
+     * The selector used to find the items to sort within this element's shadow root.
+     * @type {string}
+     * @attr item-selector
+     */
+    get itemSelector(): string;
+    set itemSelector(value: string);
+    /**
+     * The selector used to find the drag handle within an item. If not found, the whole item is draggable.
+     * @type {string}
+     * @attr handle-selector
+     */
+    get handleSelector(): string;
+    set handleSelector(value: string);
+    /**
+     * The items to render and sort.
+     * @type {Array<T>}
+     */
+    get items(): Array<T>;
+    set items(items: Array<T> | undefined);
+    /**
+     * Resolves the unique identifier of an item, used to keep track of items while sorting.
+     * @type {(item: T) => string}
+     */
+    getUnique: (item: T) => string;
+    /**
+     * Renders the markup for an item. The returned template must be rooted at an element carrying
+     * the item's unique identifier via a `data-sort-entry-id` attribute, e.g. `umb-sortable-list-item`'s `unique` property.
+     * @type {(item: T, index: number) => TemplateResult}
+     */
+    renderMethod: (item: T, index: number) => TemplateResult;
+    /**
+     * Disables sorting.
+     * @type {boolean}
+     * @attr
+     */
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    render(): unknown;
+    static readonly styles: import("lit").CSSResult[];
+}
+export default UmbSortableListElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-sortable-list': UmbSortableListElement;
+    }
+}

package/dist-cms/packages/core/sorter/components/sortable-list.element.js

@@ -0,0 +1,175 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UmbSorterController } from '../sorter.controller.js';
+import { css, customElement, html, nothing, property, repeat } from '../../../../external/lit/index.js';
+import { UmbChangeEvent } from '../../event/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '../../../../external/uui/index.js';
+/**
+ * @element umb-sortable-list
+ * @fires UmbChangeEvent when the order of items has changed
+ * @example
+ * ```html
+ * <umb-sortable-list
+ *     .items=${this.items}
+ *     .getUnique=${(item) => item.alias}
+ *     .renderMethod=${(item) => html`
+ *         <umb-sortable-list-item .unique=${item.alias}>
+ *             <uui-input .value=${item.name}></uui-input>
+ *             <uui-button slot="actions" label="Remove"></uui-button>
+ *         </umb-sortable-list-item>
+ *     `}
+ *     @change=${this.#onSort}>
+ * </umb-sortable-list>
+ * ```
+ */
+let UmbSortableListElement = class UmbSortableListElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.#sorterConfig = {
+            getUniqueOfElement: (element) => element.dataset.sortEntryId,
+            getUniqueOfModel: (model) => this.getUnique(model),
+            itemSelector: 'umb-sortable-list-item',
+            handleSelector: '.handle',
+            onChange: ({ model }) => {
+                this.items = model;
+                this.dispatchEvent(new UmbChangeEvent());
+            },
+        };
+        this.#sorter = new UmbSorterController(this, this.#sorterConfig);
+        this.#items = [];
+        /**
+         * Resolves the unique identifier of an item, used to keep track of items while sorting.
+         * @type {(item: T) => string}
+         */
+        this.getUnique = () => '';
+        /**
+         * Renders the markup for an item. The returned template must be rooted at an element carrying
+         * the item's unique identifier via a `data-sort-entry-id` attribute, e.g. `umb-sortable-list-item`'s `unique` property.
+         * @type {(item: T, index: number) => TemplateResult}
+         */
+        this.renderMethod = () => html ``;
+        this.#disabled = false;
+    }
+    #sorterConfig;
+    #sorter;
+    /**
+     * An identifier shared between sortable lists, allowing items to be dragged from one list to another that shares the same identifier.
+     * @type {string}
+     * @attr
+     */
+    get identifier() {
+        // UmbSorterController assigns a Symbol default when none is set, so only surface an explicit string identifier.
+        return typeof this.#sorterConfig.identifier === 'string' ? this.#sorterConfig.identifier : undefined;
+    }
+    set identifier(value) {
+        this.#sorterConfig.identifier = value || undefined;
+    }
+    /**
+     * The selector used to find the items to sort within this element's shadow root.
+     * @type {string}
+     * @attr item-selector
+     */
+    get itemSelector() {
+        return this.#sorterConfig.itemSelector;
+    }
+    set itemSelector(value) {
+        this.#sorterConfig.itemSelector = value || 'umb-sortable-list-item';
+    }
+    /**
+     * The selector used to find the drag handle within an item. If not found, the whole item is draggable.
+     * @type {string}
+     * @attr handle-selector
+     */
+    get handleSelector() {
+        return this.#sorterConfig.handleSelector ?? '';
+    }
+    set handleSelector(value) {
+        this.#sorterConfig.handleSelector = value || '.handle';
+    }
+    /**
+     * The items to render and sort.
+     * @type {Array<T>}
+     */
+    get items() {
+        return this.#items;
+    }
+    set items(items) {
+        this.#items = items ?? [];
+        this.#sorter.setModel(this.#items);
+    }
+    #items;
+    /**
+     * Disables sorting.
+     * @type {boolean}
+     * @attr
+     */
+    set disabled(value) {
+        this.#disabled = value;
+        this.#updateSorterState();
+    }
+    get disabled() {
+        return this.#disabled;
+    }
+    #disabled;
+    #updateSorterState() {
+        if (this.#disabled) {
+            this.#sorter.disable();
+        }
+        else {
+            this.#sorter.enable();
+        }
+    }
+    render() {
+        if (!this.items.length)
+            return nothing;
+        return repeat(this.items, (item) => this.getUnique(item), (item, index) => this.renderMethod(item, index));
+    }
+    static { this.styles = [
+        UUIBlinkKeyframes,
+        css `
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: 1px;
+			}
+
+			[drag-placeholder] {
+				animation: ${UUIBlinkAnimationValue};
+				background-color: color-mix(in srgb, var(--uui-color-interactive-emphasis) 15%, transparent) !important;
+				border-radius: var(--uui-border-radius);
+				border: 2px solid var(--uui-color-interactive-emphasis);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property()
+], UmbSortableListElement.prototype, "identifier", null);
+__decorate([
+    property({ attribute: 'item-selector' })
+], UmbSortableListElement.prototype, "itemSelector", null);
+__decorate([
+    property({ attribute: 'handle-selector' })
+], UmbSortableListElement.prototype, "handleSelector", null);
+__decorate([
+    property({ type: Array })
+], UmbSortableListElement.prototype, "items", null);
+__decorate([
+    property({ attribute: false })
+], UmbSortableListElement.prototype, "getUnique", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbSortableListElement.prototype, "renderMethod", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbSortableListElement.prototype, "disabled", null);
+UmbSortableListElement = __decorate([
+    customElement('umb-sortable-list')
+], UmbSortableListElement);
+export { UmbSortableListElement };
+export default UmbSortableListElement;

package/dist-cms/packages/core/sorter/index.d.ts

@@ -1,2 +1,3 @@
 export * from './sorter.controller.js';
 export * from './replacement-resolver-as-grid.function.js';
+export * from './components/index.js';

package/dist-cms/packages/core/sorter/index.js

@@ -1,2 +1,3 @@
 export * from './sorter.controller.js';
 export * from './replacement-resolver-as-grid.function.js';
+export * from './components/index.js';