@umbraco-cms/backoffice 17.7.0 → 17.7.2

package/dist-cms/packages/core/backend-api/types.gen.d.ts

@@ -7430,6 +7430,7 @@ export type GetImagingResizeUrlsData = {
     path?: never;
     query?: {
         id?: Array<string>;
+        dataTypeId?: string;
         height?: number;
         width?: number;
         mode?: ImageCropModeModel;
@@ -9571,6 +9572,7 @@ export type GetMediaUrlsData = {
     path?: never;
     query?: {
         id?: Array<string>;
+        dataTypeId?: string;
     };
     url: '/umbraco/management/api/v1/media/urls';
 };

package/dist-cms/packages/media/imaging/components/media-thumbnail.element.d.ts

@@ -56,6 +56,7 @@ export declare class UmbMediaThumbnailElement extends UmbLitElement {
     externalLoading: boolean;
     private _isLoading;
     private _thumbnailUrl;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist-cms/packages/media/imaging/components/media-thumbnail.element.js

@@ -11,6 +11,7 @@ import { UmbLitElement } from '../../../core/lit-element/index.js';
 import { UmbTextStyles } from '../../../core/style/index.js';
 import { UMB_ACTION_EVENT_CONTEXT } from '../../../core/action/index.js';
 import { UmbEntityUpdatedEvent } from '../../../core/entity-action/index.js';
+import { UMB_PROPERTY_TYPE_BASED_PROPERTY_CONTEXT } from '../../../content/content/index.js';
 /**
  * Displays a thumbnail for a media item, with optional server-side cropping and transparency support.
  * This is the recommended component for rendering media images in the backoffice.
@@ -20,8 +21,14 @@ import { UmbEntityUpdatedEvent } from '../../../core/entity-action/index.js';
  * @csspart img - The underlying `<img>` element.
  */
 let UmbMediaThumbnailElement = class UmbMediaThumbnailElement extends UmbLitElement {
+    #imagingRepository;
+    #intersectionObserver;
+    #actionEventContext;
+    #dataTypeUnique;
+    #hasRequestedThumbnail;
+    #latestRequest;
     constructor() {
-        super(...arguments);
+        super();
         /**
          * The width of the thumbnail in pixels.
          * @default 300
@@ -59,15 +66,27 @@ let UmbMediaThumbnailElement = class UmbMediaThumbnailElement extends UmbLitElem
         this._isLoading = false;
         this._thumbnailUrl = '';
         this.#imagingRepository = new UmbImagingRepository(this);
+        this.#hasRequestedThumbnail = false;
+        this.#latestRequest = 0;
         this.#onEntityUpdated = (event) => {
             if (event.getUnique() === this.unique) {
                 this.#generateThumbnailUrl();
             }
         };
+        // A picker configured to ignore user start nodes may reference media outside them,
+        // which the server only resolves when told which data type the request originates from.
+        this.consumeContext(UMB_PROPERTY_TYPE_BASED_PROPERTY_CONTEXT, (context) => {
+            this.observe(context?.dataType, (dataType) => {
+                // The context is also lost when the element disconnects, which needs no new request.
+                if (!dataType?.unique)
+                    return;
+                this.#dataTypeUnique = dataType.unique;
+                if (this.#hasRequestedThumbnail) {
+                    this.#generateThumbnailUrl();
+                }
+            }, '_observeDataType');
+        });
     }
-    #imagingRepository;
-    #intersectionObserver;
-    #actionEventContext;
     render() {
         return when(this.externalLoading || this._isLoading, () => this.#renderLoading(), () => this.#renderThumbnail());
     }
@@ -126,12 +145,18 @@ let UmbMediaThumbnailElement = class UmbMediaThumbnailElement extends UmbLitElem
         if (!this.unique)
             return;
         this._isLoading = true;
+        this.#hasRequestedThumbnail = true;
+        const request = ++this.#latestRequest;
         const { data } = await this.#imagingRepository.requestResizedItems([this.unique], {
             height: this.height,
             width: this.width,
             mode: this.mode,
             format: this.format,
+            dataTypeUnique: this.#dataTypeUnique,
         });
+        // A newer request (for example after the data type resolved) supersedes this one.
+        if (request !== this.#latestRequest)
+            return;
         this._thumbnailUrl = data?.[0]?.url ?? '';
         this._isLoading = false;
     }

package/dist-cms/packages/media/imaging/imaging.server.data.js

@@ -23,7 +23,8 @@ export class UmbImagingServerDataSource {
     async getItems(uniques, imagingModel) {
         if (!uniques.length)
             throw new Error('Uniques are missing');
-        const { data, error } = await tryExecute(this.#host, ImagingService.getImagingResizeUrls({ query: { id: uniques, ...imagingModel } }));
+        const { dataTypeUnique, ...resizeModel } = imagingModel ?? {};
+        const { data, error } = await tryExecute(this.#host, ImagingService.getImagingResizeUrls({ query: { id: uniques, ...resizeModel, dataTypeId: dataTypeUnique } }));
         if (data) {
             const items = data.map((item) => this.#mapper(item));
             return { data: items };

package/dist-cms/packages/media/imaging/types.d.ts

@@ -5,6 +5,11 @@ export interface UmbImagingResizeModel {
     width?: number;
     mode?: UmbImagingCropMode;
     format?: string;
+    /**
+     * The unique of the data type the request originates from, such as a media picker.
+     * Media outside the user's start nodes is only resolved when this data type ignores user start nodes.
+     */
+    dataTypeUnique?: string;
 }
 /**
  * Generates a cache key from an imaging resize configuration.

package/dist-cms/packages/media/imaging/types.js

@@ -7,5 +7,5 @@ export { UmbImagingCropMode };
  * @returns {string} The cache key
  */
 export function generateImagingCacheKey(model) {
-    return model ? `${model.width}x${model.height};${model.mode};${model.format}` : 'generic';
+    return model ? `${model.width}x${model.height};${model.mode};${model.format};${model.dataTypeUnique}` : 'generic';
 }

package/dist-cms/packages/media/media/url/info-app/media-link.function.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Returns the URL if it can be offered as a link, i.e. it resolves to an http or https location.
+ * @param {string | undefined} url - The media URL.
+ * @param {string} base - The base used to resolve relative URLs.
+ * @returns {string | undefined} The URL, or undefined if it must not be rendered as a link.
+ */
+export declare function getLinkableMediaUrl(url: string | undefined, base?: string): string | undefined;
+/**
+ * Renders an image preview on a checkerboard background into the given document.
+ * The image is referenced through an `<img>` element, so scripts embedded in an SVG do not run.
+ * @param {Document} document - The document to render into.
+ * @param {string} imageUrl - The URL of the image.
+ */
+export declare function renderImagePreview(document: Document, imageUrl: string): void;

package/dist-cms/packages/media/media/url/info-app/media-link.function.js

@@ -0,0 +1,33 @@
+/**
+ * Returns the URL if it can be offered as a link, i.e. it resolves to an http or https location.
+ * @param {string | undefined} url - The media URL.
+ * @param {string} base - The base used to resolve relative URLs.
+ * @returns {string | undefined} The URL, or undefined if it must not be rendered as a link.
+ */
+export function getLinkableMediaUrl(url, base = window.location.href) {
+    if (!url)
+        return undefined;
+    try {
+        const { protocol } = new URL(url, base);
+        return protocol === 'http:' || protocol === 'https:' ? url : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+/**
+ * Renders an image preview on a checkerboard background into the given document.
+ * The image is referenced through an `<img>` element, so scripts embedded in an SVG do not run.
+ * @param {Document} document - The document to render into.
+ * @param {string} imageUrl - The URL of the image.
+ */
+export function renderImagePreview(document, imageUrl) {
+    const body = document.body ?? document.documentElement.appendChild(document.createElement('body'));
+    body.style.backgroundImage =
+        'linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)';
+    body.style.backgroundSize = '30px 30px';
+    body.style.backgroundPosition = '0 0, 15px 0, 15px -15px, 0px 15px';
+    const image = document.createElement('img');
+    image.src = imageUrl;
+    body.replaceChildren(image);
+}

package/dist-cms/packages/media/media/url/info-app/media-links-workspace-info-app.element.js

@@ -6,11 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbMediaUrlRepository } from '../repository/index.js';
 import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../workspace/constants.js';
+import { getLinkableMediaUrl, renderImagePreview } from './media-link.function.js';
 import { css, customElement, html, nothing, repeat, state, when } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbRequestReloadStructureForEntityEvent } from '../../../../core/entity-action/index.js';
 import { observeMultiple } from '../../../../../libs/observable-api/index.js';
-import { debounce, sanitizeHTML } from '../../../../core/utils/index.js';
+import { debounce } from '../../../../core/utils/index.js';
 let UmbMediaLinksWorkspaceInfoAppElement = class UmbMediaLinksWorkspaceInfoAppElement extends UmbLitElement {
     #mediaUrlRepository;
     #urls;
@@ -80,14 +81,11 @@ let UmbMediaLinksWorkspaceInfoAppElement = class UmbMediaLinksWorkspaceInfoAppEl
         const popup = window.open('', '_blank');
         if (!popup)
             return;
-        const html = `<!doctype html>
-<body style="background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%); background-size:30px 30px; background-position:0 0, 15px 0, 15px -15px, 0px 15px;">
-	<img src="${imagePath}"/>
-	<script>history.pushState(null, null, "${sanitizeHTML(window.location.href)}");</script>
-</body>`;
+        // Re-opening the document gives it this document's URL, without which the popup cannot push a history state for it.
         popup.document.open();
-        popup.document.write(html);
         popup.document.close();
+        renderImagePreview(popup.document, imagePath);
+        popup.history.pushState(null, '', window.location.href);
     }
     #renderContent() {
         if (this._links.length) {
@@ -106,19 +104,27 @@ let UmbMediaLinksWorkspaceInfoAppElement = class UmbMediaLinksWorkspaceInfoAppEl
     #renderLinkItem(item) {
         if (!item.url)
             return nothing;
-        const ext = item.url.split(/[#?]/)[0].split('.').pop()?.trim().toLowerCase();
-        if (ext === 'svg') {
+        const url = getLinkableMediaUrl(item.url);
+        if (!url) {
             return html `
-				<a href="#" target="_blank" class="link-item with-href" @click=${() => this.#openSvg(item.url)}>
+				<div class="link-item">
 					<span class="link-content">${item.url}</span>
+				</div>
+			`;
+        }
+        const ext = url.split(/[#?]/)[0].split('.').pop()?.trim().toLowerCase();
+        if (ext === 'svg') {
+            return html `
+				<a href="#" target="_blank" class="link-item with-href" @click=${() => this.#openSvg(url)}>
+					<span class="link-content">${url}</span>
 					<uui-icon name="icon-out"></uui-icon>
 				</a>
 			`;
         }
         else {
             return html `
-				<a href=${item.url} target="_blank" class="link-item with-href">
-					<span class="link-content">${item.url}</span>
+				<a href=${url} target="_blank" class="link-item with-href">
+					<span class="link-content">${url}</span>
 					<uui-icon name="icon-out"></uui-icon>
 				</a>
 			`;

package/dist-cms/packages/media/media/url/repository/media-url.server.data-source.d.ts

@@ -8,11 +8,7 @@ import { UmbItemServerDataSourceBase } from '../../../../core/repository/index.j
  * @augments {UmbItemServerDataSourceBase}
  */
 export declare class UmbMediaUrlServerDataSource extends UmbItemServerDataSourceBase<MediaUrlInfoResponseModel, UmbMediaUrlModel> {
-    /**
-     * Creates an instance of UmbMediaUrlServerDataSource.
-     * @param {UmbControllerHost} host - The controller host for this controller to be appended to
-     * @memberof UmbMediaUrlServerDataSource
-     */
+    #private;
     constructor(host: UmbControllerHost);
     getItems(uniques: Array<string>): Promise<{
         data: UmbMediaUrlModel[] | undefined;

package/dist-cms/packages/media/media/url/repository/media-url.server.data-source.js

@@ -1,6 +1,7 @@
 import { UmbItemDataApiGetRequestController } from '../../../../core/entity-item/index.js';
 import { MediaService } from '../../../../core/backend-api/index.js';
 import { UmbItemServerDataSourceBase } from '../../../../core/repository/index.js';
+import { UMB_PROPERTY_TYPE_BASED_PROPERTY_CONTEXT } from '../../../../content/content/index.js';
 /**
  * A server data source for Media Urls
  * @class UmbMediaUrlServerDataSource
@@ -12,17 +13,25 @@ export class UmbMediaUrlServerDataSource extends UmbItemServerDataSourceBase {
      * @param {UmbControllerHost} host - The controller host for this controller to be appended to
      * @memberof UmbMediaUrlServerDataSource
      */
+    #dataTypeUnique;
     constructor(host) {
         super(host, {
             mapper,
         });
+        // A picker configured to ignore user start nodes may reference media outside them,
+        // which the server only resolves when told which data type the request originates from.
+        this.consumeContext(UMB_PROPERTY_TYPE_BASED_PROPERTY_CONTEXT, (context) => {
+            this.observe(context?.dataType, (dataType) => {
+                this.#dataTypeUnique = dataType?.unique;
+            }, '_observeDataType');
+        });
     }
     async getItems(uniques) {
         if (!uniques)
             throw new Error('Uniques are missing');
         const itemRequestManager = new UmbItemDataApiGetRequestController(this, {
             // eslint-disable-next-line local-rules/no-direct-api-import
-            api: (args) => MediaService.getMediaUrls({ query: { id: args.uniques } }),
+            api: (args) => MediaService.getMediaUrls({ query: { id: args.uniques, dataTypeId: this.#dataTypeUnique } }),
             uniques,
         });
         const { data, error } = await itemRequestManager.request();

package/dist-cms/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.js

@@ -237,7 +237,7 @@ let UmbInputMultiUrlElement = class UmbInputMultiUrlElement extends UmbFormContr
     }
     async #getUrlForMedia(unique) {
         const { data } = await this.#mediaUrlRepository.requestItems([unique]);
-        return data?.[0].url ?? '';
+        return data?.[0]?.url ?? '';
     }
     async #getNameForDocument(unique) {
         const { data } = await this.#documentItemRepository.requestItems([unique]);

package/dist-cms/packages/preview/context/preview.context.js

@@ -1,19 +1,24 @@
 import { attachLinkInterceptor } from '../utils/index.js';
 import { UmbPreviewRepository } from '../repository/index.js';
+import { UmbPreviewSessionRenewalController } from '../controllers/preview-session-renewal.controller.js';
 import { UMB_PREVIEW_CONTEXT } from './preview.context-token.js';
 import { HubConnectionBuilder, HttpTransportType } from '../../../external/signalr/index.js';
 import { UmbBooleanState, UmbStringState } from '../../../libs/observable-api/index.js';
 import { UmbContextBase } from '../../../libs/class-api/index.js';
 import { UmbLocalizationController } from '../../../libs/localization-api/index.js';
+import { UMB_AUTH_CONTEXT } from '../../core/auth/index.js';
 import { UMB_NOTIFICATION_CONTEXT } from '../../core/notification/index.js';
 import { UMB_SERVER_CONTEXT } from '../../core/server/index.js';
 export class UmbPreviewContext extends UmbContextBase {
+    #authContext;
     #connection;
     #currentArgs;
     #notificationContext;
     #resizeController;
+    #serverContext;
     #serverUrl;
     #previewRepository;
+    #previewSessionRenewal;
     #localize;
     #culture;
     #iframeReady;
@@ -25,6 +30,7 @@ export class UmbPreviewContext extends UmbContextBase {
         this.#currentArgs = {};
         this.#serverUrl = '';
         this.#previewRepository = new UmbPreviewRepository(this);
+        this.#previewSessionRenewal = new UmbPreviewSessionRenewalController(this, this.#previewRepository);
         this.#localize = new UmbLocalizationController(this);
         this.#culture = new UmbStringState(undefined);
         this.culture = this.#culture.asObservable();
@@ -53,8 +59,16 @@ export class UmbPreviewContext extends UmbContextBase {
                 return;
             }
             this.#serverUrl = serverUrl;
+            this.#serverContext = serverContext;
             this.#setPreviewUrl({ serverUrl });
-            this.#initHubConnection(serverUrl, serverContext);
+            this.#initHubConnection();
+        });
+        this.consumeContext(UMB_AUTH_CONTEXT, (authContext) => {
+            this.#authContext = authContext;
+            this.#initHubConnection();
+            if (authContext) {
+                this.#previewSessionRenewal.observeSession(authContext.session$, () => this.#getPreviewSessionArgs());
+            }
         });
         this.consumeContext(UMB_NOTIFICATION_CONTEXT, (notificationContext) => {
             this.#notificationContext = notificationContext;
@@ -70,22 +84,28 @@ export class UmbPreviewContext extends UmbContextBase {
             this.#connection = undefined;
         }
     }
-    async #initHubConnection(serverUrl, serverContext) {
-        const previewHubUrl = `${serverUrl}/umbraco/PreviewHub`;
+    async #initHubConnection() {
+        const authContext = this.#authContext;
+        if (!authContext || !this.#serverUrl)
+            return;
+        const previewHubUrl = `${this.#serverUrl}/umbraco/PreviewHub`;
         // Make sure that no previous connection exists.
         if (this.#connection) {
             await this.#connection.stop();
             this.#connection = undefined;
         }
-        const skipNegotiation = serverContext?.getServerConnection()?.getSignalRSkipNegotiation() ?? false;
-        const hubOptions = {};
+        const skipNegotiation = this.#serverContext?.getServerConnection()?.getSignalRSkipNegotiation() ?? false;
+        const hubOptions = {
+            accessTokenFactory: () => authContext.getLatestToken(),
+        };
         if (skipNegotiation) {
             hubOptions.skipNegotiation = true;
             hubOptions.transport = HttpTransportType.WebSockets;
         }
         this.#connection = new HubConnectionBuilder().withUrl(previewHubUrl, hubOptions).build();
-        this.#connection.on('refreshed', (payload) => {
+        this.#connection.on('refreshed', async (payload) => {
             if (payload === this.#unique.getValue()) {
+                await this.#previewSessionRenewal.renew(this.#getPreviewSessionArgs());
                 this.#setPreviewUrl({ rnd: Math.random() });
             }
         });
@@ -110,6 +130,13 @@ export class UmbPreviewContext extends UmbContextBase {
             });
         }
     }
+    #getPreviewSessionArgs() {
+        return {
+            unique: this.#unique.getValue(),
+            culture: this.#culture.getValue(),
+            segment: this.#segment.getValue(),
+        };
+    }
     async #getPublishedUrl() {
         const unique = this.#unique.getValue();
         if (!unique)

package/dist-cms/packages/preview/controllers/preview-session-renewal.controller.d.ts

@@ -0,0 +1,35 @@
+import { UmbPreviewRepository } from '../repository/preview.repository.js';
+import { UmbControllerBase } from '../../../libs/class-api/index.js';
+import type { Observable } from '../../../external/rxjs/index.js';
+import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
+export interface UmbPreviewSessionRenewalArgs {
+    unique?: string;
+    culture?: string;
+    segment?: string;
+}
+/**
+ * Keeps the website preview session alive for as long as the back-office session is, by asking the server to
+ * renew it whenever the back-office session is renewed.
+ */
+export declare class UmbPreviewSessionRenewalController extends UmbControllerBase {
+    #private;
+    /**
+     * Creates a new {@link UmbPreviewSessionRenewalController}.
+     * @param {UmbControllerHost} host - The controller host.
+     * @param {UmbPreviewRepository} [previewRepository] - Optional repository override; defaults to a new
+     * {@link UmbPreviewRepository}. Intended for testing.
+     */
+    constructor(host: UmbControllerHost, previewRepository?: UmbPreviewRepository);
+    /**
+     * Renews the preview session each time the given back-office session emits a live session.
+     * @param {Observable<unknown>} session - The back-office session; emits a falsy value when there is no session.
+     * @param {() => UmbPreviewSessionRenewalArgs} getArgs - Provides the document currently being previewed.
+     */
+    observeSession(session: Observable<unknown>, getArgs: () => UmbPreviewSessionRenewalArgs): void;
+    /**
+     * Renews the preview session for the given document.
+     * @param {UmbPreviewSessionRenewalArgs} args - The document currently being previewed.
+     * @returns {Promise<void>} Resolves once the renewal has completed or failed.
+     */
+    renew(args: UmbPreviewSessionRenewalArgs): Promise<void>;
+}

package/dist-cms/packages/preview/controllers/preview-session-renewal.controller.js

@@ -0,0 +1,49 @@
+import { UmbPreviewRepository } from '../repository/preview.repository.js';
+import { UmbControllerBase } from '../../../libs/class-api/index.js';
+// The preview app always previews through the built-in document URL provider, whose preview URL is internal
+// and so (re)starts the preview session on the server.
+const UMB_PREVIEW_SESSION_URL_PROVIDER_ALIAS = 'umbDocumentUrlProvider';
+/**
+ * Keeps the website preview session alive for as long as the back-office session is, by asking the server to
+ * renew it whenever the back-office session is renewed.
+ */
+export class UmbPreviewSessionRenewalController extends UmbControllerBase {
+    #previewRepository;
+    /**
+     * Creates a new {@link UmbPreviewSessionRenewalController}.
+     * @param {UmbControllerHost} host - The controller host.
+     * @param {UmbPreviewRepository} [previewRepository] - Optional repository override; defaults to a new
+     * {@link UmbPreviewRepository}. Intended for testing.
+     */
+    constructor(host, previewRepository) {
+        super(host);
+        this.#previewRepository = previewRepository ?? new UmbPreviewRepository(this);
+    }
+    /**
+     * Renews the preview session each time the given back-office session emits a live session.
+     * @param {Observable<unknown>} session - The back-office session; emits a falsy value when there is no session.
+     * @param {() => UmbPreviewSessionRenewalArgs} getArgs - Provides the document currently being previewed.
+     */
+    observeSession(session, getArgs) {
+        this.observe(session, (value) => {
+            if (value) {
+                this.renew(getArgs());
+            }
+        }, '_observePreviewSession');
+    }
+    /**
+     * Renews the preview session for the given document.
+     * @param {UmbPreviewSessionRenewalArgs} args - The document currently being previewed.
+     * @returns {Promise<void>} Resolves once the renewal has completed or failed.
+     */
+    async renew(args) {
+        if (!args.unique)
+            return;
+        try {
+            await this.#previewRepository.getPreviewUrl(args.unique, UMB_PREVIEW_SESSION_URL_PROVIDER_ALIAS, args.culture, args.segment);
+        }
+        catch {
+            // The preview carries on with its current session until that expires.
+        }
+    }
+}