Document URLs Data Resolver (#19316)

* remove padding

* add document urls data resolver

* use in url info app

* handle invariant cases

* do not render culture if all links have the same culture

* use if defined

* handle variant with no links

* Update types.ts

* fix lint errors

* get variant aware document data

* remove unused

* use media item repository

* temp remove check

* populate url

* add spacing to reference app

* reset the url when removing document or media

* add validator

* make url input required

---------

Co-authored-by: Niels Lyngsø <[email protected]>

Author: madsrasmussen

src/Umbraco.Web.UI.Client/src/packages/core/workspace/info-app/global-components/workspace-info-app-layout.element.ts

@@ -22,10 +22,6 @@ export class UmbWorkspaceInfoAppLayoutElement extends UmbLitElement {
 			uui-box {
 				--uui-box-default-padding: 0;
 			}
-
-			#container {
-				padding-left: var(--uui-size-space-4);
-			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/packages/documents/documents/url/document-urls-data-resolver.ts

@@ -0,0 +1,94 @@
+import type { UmbDocumentUrlModel } from './repository/types.js';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
+import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+
+/**
+ * A controller for resolving data for document urls
+ * @exports
+ * @class UmbDocumentUrlsDataResolver
+ * @augments {UmbControllerBase}
+ */
+export class UmbDocumentUrlsDataResolver extends UmbControllerBase {
+	#appCulture?: string;
+	#propertyDataSetCulture?: UmbVariantId;
+	#data?: Array<UmbDocumentUrlModel> | undefined;
+
+	#init: Promise<unknown>;
+
+	#urls = new UmbArrayState<UmbDocumentUrlModel>([], (url) => url.url);
+	/**
+	 * The urls for the current culture
+	 * @returns {ObservableArray<UmbDocumentUrlModel>} The urls for the current culture
+	 * @memberof UmbDocumentUrlsDataResolver
+	 */
+	public readonly urls = this.#urls.asObservable();
+
+	constructor(host: UmbControllerHost) {
+		super(host);
+
+		// TODO: listen for UMB_VARIANT_CONTEXT when available
+		this.#init = Promise.all([
+			this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (context) => {
+				this.#propertyDataSetCulture = context?.getVariantId();
+				this.#setCultureAwareValues();
+			}).asPromise(),
+		]);
+	}
+
+	/**
+	 * Get the current data
+	 * @returns {Array<UmbDocumentUrlModel> | undefined} The current data
+	 * @memberof UmbDocumentUrlsDataResolver
+	 */
+	getData(): Array<UmbDocumentUrlModel> | undefined {
+		return this.#data;
+	}
+
+	/**
+	 * Set the current data
+	 * @param {Array<UmbDocumentUrlModel> | undefined} data The current data
+	 * @memberof UmbDocumentUrlsDataResolver
+	 */
+	setData(data: Array<UmbDocumentUrlModel> | undefined) {
+		this.#data = data;
+
+		if (!this.#data) {
+			this.#urls.setValue([]);
+			return;
+		}
+
+		this.#setCultureAwareValues();
+	}
+
+	/**
+	 * Get the urls for the current culture
+	 * @returns {(Promise<Array<UmbDocumentUrlModel> | []>)} The urls for the current culture
+	 * @memberof UmbDocumentUrlsDataResolver
+	 */
+	async getUrls(): Promise<Array<UmbDocumentUrlModel> | []> {
+		await this.#init;
+		return this.#urls.getValue();
+	}
+
+	#setCultureAwareValues() {
+		this.#setUrls();
+	}
+
+	#setUrls() {
+		const data = this.#getDataForCurrentCulture();
+		this.#urls.setValue(data ?? []);
+	}
+
+	#getCurrentCulture(): string | undefined {
+		return this.#propertyDataSetCulture?.culture || this.#appCulture;
+	}
+
+	#getDataForCurrentCulture(): Array<UmbDocumentUrlModel> | undefined {
+		const culture = this.#getCurrentCulture();
+		// If there is no culture context (invariant data) we return all urls
+		return culture ? this.#data?.filter((x) => x.culture === culture) : this.#data;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/url/index.ts

@@ -1,3 +1,4 @@
 export { UmbDocumentUrlRepository, UMB_DOCUMENT_URL_REPOSITORY_ALIAS } from './repository/index.js';
 
 export * from './constants.js';
+export * from './document-urls-data-resolver.js';

src/Umbraco.Web.UI.Client/src/packages/documents/documents/url/info-app/document-links-workspace-info-app.element.ts

@@ -2,19 +2,30 @@ import { UmbDocumentUrlRepository } from '../repository/index.js';
 import type { UmbDocumentVariantOptionModel } from '../../types.js';
 import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../workspace/constants.js';
 import type { UmbDocumentUrlModel } from '../repository/types.js';
-import { css, customElement, html, nothing, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbDocumentUrlsDataResolver } from '../document-urls-data-resolver.js';
+import {
+	css,
+	customElement,
+	html,
+	ifDefined,
+	nothing,
+	repeat,
+	state,
+	when,
+} from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbEntityActionEvent } from '@umbraco-cms/backoffice/entity-action';
 import { UmbRequestReloadStructureForEntityEvent } from '@umbraco-cms/backoffice/entity-action';
 import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
 import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
 import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { debounce } from '@umbraco-cms/backoffice/utils';
-import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
+import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 
 interface UmbDocumentInfoViewLink {
-	culture: string;
-	url: string | undefined;
+	culture: string | null;
+	url: string | null | undefined;
 	state: DocumentVariantStateModel | null | undefined;
 }
 
@@ -37,13 +48,13 @@ export class UmbDocumentLinksWorkspaceInfoAppElement extends UmbLitElement {
 	@state()
 	private _links: Array<UmbDocumentInfoViewLink> = [];
 
-	@state()
-	private _defaultCulture?: string;
-
 	#urls: Array<UmbDocumentUrlModel> = [];
 
 	#documentWorkspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE;
 	#eventContext?: typeof UMB_ACTION_EVENT_CONTEXT.TYPE;
+	#propertyDataSetVariantId?: UmbVariantId;
+
+	#documentUrlsDataResolver? = new UmbDocumentUrlsDataResolver(this);
 
 	constructor() {
 		super();
@@ -88,20 +99,26 @@ export class UmbDocumentLinksWorkspaceInfoAppElement extends UmbLitElement {
 			});
 		});
 
-		this.consumeContext(UMB_APP_LANGUAGE_CONTEXT, (instance) => {
-			this.observe(instance?.appDefaultLanguage, (value) => {
-				this._defaultCulture = value?.unique;
-				this.#setLinks();
-			});
+		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (context) => {
+			this.#propertyDataSetVariantId = context?.getVariantId();
+			this.#setLinks();
+		});
+
+		this.observe(this.#documentUrlsDataResolver?.urls, (urls) => {
+			this.#urls = urls ?? [];
+			this.#setLinks();
 		});
 	}
 
 	#setLinks() {
-		const links: Array<UmbDocumentInfoViewLink> = this.#urls.map((u) => {
-			const culture = u.culture ?? this._defaultCulture ?? '';
-			const url = u.url;
+		const links: Array<UmbDocumentInfoViewLink> = this.#urls.map((url) => {
+			const culture = url.culture;
 			const state = this._variantOptions?.find((variantOption) => variantOption.culture === culture)?.variant?.state;
-			return { culture, url, state };
+			return {
+				culture,
+				url: url.url,
+				state,
+			};
 		});
 
 		this._links = links;
@@ -124,14 +141,12 @@ export class UmbDocumentLinksWorkspaceInfoAppElement extends UmbLitElement {
 		if (!this._unique) return;
 
 		this._loading = true;
-		this.#urls = [];
+		this.#documentUrlsDataResolver?.setData([]);
 
 		const { data } = await this.#documentUrlRepository.requestItems([this._unique]);
 
 		if (data?.length) {
-			const item = data[0];
-			this.#urls = item.urls;
-			this.#setLinks();
+			this.#documentUrlsDataResolver?.setData(data[0].urls);
 		}
 
 		this._loading = false;
@@ -207,7 +222,7 @@ export class UmbDocumentLinksWorkspaceInfoAppElement extends UmbLitElement {
 		}
 
 		return html`
-			<a class="link-item" href=${this.#getTargetUrl(link.url)} target="_blank">
+			<a class="link-item" href=${ifDefined(this.#getTargetUrl(link.url))} target="_blank">
 				<span>
 					${this.#renderLinkCulture(link.culture)}
 					<span>${link.url}</span>
@@ -218,9 +233,9 @@ export class UmbDocumentLinksWorkspaceInfoAppElement extends UmbLitElement {
 	}
 
 	#renderNoLinks() {
-		return html` ${this._variantOptions?.map((variantOption) =>
-			this.#renderEmptyLink(variantOption.culture, variantOption.variant?.state),
-		)}`;
+		return html` ${this._variantOptions
+			?.filter((variantOption) => variantOption.culture === this.#propertyDataSetVariantId?.culture)
+			.map((variantOption) => this.#renderEmptyLink(variantOption.culture, variantOption.variant?.state))}`;
 	}
 
 	#renderEmptyLink(culture: string | null, state: DocumentVariantStateModel | null | undefined) {
@@ -235,6 +250,8 @@ export class UmbDocumentLinksWorkspaceInfoAppElement extends UmbLitElement {
 	#renderLinkCulture(culture: string | null) {
 		if (!culture) return nothing;
 		if (this._links.length === 1) return nothing;
+		const allLinksHaveSameCulture = this._links?.every((link) => link.culture === culture);
+		if (allLinksHaveSameCulture) return nothing;
 		return html`<span class="culture">${culture}</span>`;
 	}
 
@@ -249,10 +266,6 @@ export class UmbDocumentLinksWorkspaceInfoAppElement extends UmbLitElement {
 
 	static override styles = [
 		css`
-			uui-box {
-				--uui-box-default-padding: 0;
-			}
-
 			#loader-container {
 				display: flex;
 				justify-content: center;

src/Umbraco.Web.UI.Client/src/packages/documents/documents/url/repository/types.ts

@@ -4,6 +4,6 @@ export interface UmbDocumentUrlsModel {
 }
 
 export interface UmbDocumentUrlModel {
-	culture?: string | null;
+	culture: string | null;
 	url?: string;
 }

src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts

@@ -21,6 +21,8 @@ import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
 import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
+import { UmbDocumentUrlRepository, UmbDocumentUrlsDataResolver } from '@umbraco-cms/backoffice/document';
+import { UmbMediaUrlRepository } from '@umbraco-cms/backoffice/media';
 
 /**
  * @element umb-input-multi-url
@@ -129,6 +131,7 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement,
 		this.#urls = [...data]; // Unfreeze data coming from State, so we can manipulate it.
 		super.value = this.#urls.map((x) => x.url).join(',');
 		this.#sorter.setModel(this.#urls);
+		this.#populateLinksUrl();
 	}
 	get urls(): Array<UmbLinkPickerLink> {
 		return this.#urls;
@@ -160,6 +163,9 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement,
 	@state()
 	private _modalRoute?: UmbModalRouteBuilder;
 
+	@state()
+	_resolvedLinkUrls: Array<{ unique: string; url: string }> = [];
+
 	#linkPickerModal;
 
 	constructor() {
@@ -229,6 +235,49 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement,
 			});
 	}
 
+	#populateLinksUrl() {
+		// Documents and media have URLs saved in the local link format. Display the actual URL to align with what
+		// the user sees when they selected it initially.
+		this.#urls.forEach(async (link) => {
+			if (!link.unique) return;
+
+			let url: string | undefined = undefined;
+			switch (link.type) {
+				case 'document': {
+					url = await this.#getUrlForDocument(link.unique);
+					break;
+				}
+				case 'media': {
+					url = await this.#getUrlForMedia(link.unique);
+					break;
+				}
+				default:
+					break;
+			}
+
+			if (url) {
+				const resolvedUrl = { unique: link.unique, url };
+				this._resolvedLinkUrls = [...this._resolvedLinkUrls, resolvedUrl];
+			}
+		});
+	}
+
+	async #getUrlForDocument(unique: string) {
+		const documentUrlRepository = new UmbDocumentUrlRepository(this);
+		const { data: documentUrlData } = await documentUrlRepository.requestItems([unique]);
+		const urlsItem = documentUrlData?.[0];
+		const dataResolver = new UmbDocumentUrlsDataResolver(this);
+		dataResolver.setData(urlsItem?.urls);
+		const resolvedUrls = await dataResolver.getUrls();
+		return resolvedUrls?.[0]?.url ?? '';
+	}
+
+	async #getUrlForMedia(unique: string) {
+		const mediaUrlRepository = new UmbMediaUrlRepository(this);
+		const { data: mediaUrlData } = await mediaUrlRepository.requestItems([unique]);
+		return mediaUrlData?.[0].url ?? '';
+	}
+
 	async #requestRemoveItem(index: number) {
 		const item = this.#urls[index];
 		if (!item) throw new Error('Could not find item at index: ' + index);
@@ -307,12 +356,13 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement,
 	#renderItem(link: UmbLinkPickerLink, index: number) {
 		const unique = this.#getUnique(link);
 		const href = this.readonly ? undefined : (this._modalRoute?.({ index }) ?? undefined);
+		const resolvedUrl = this._resolvedLinkUrls.find((url) => url.unique === link.unique)?.url ?? '';
 		return html`
 			<uui-ref-node
 				id=${unique}
 				href=${ifDefined(href)}
 				name=${link.name || ''}
-				detail=${(link.url || '') + (link.queryString || '')}
+				detail=${resolvedUrl + (link.queryString || '')}
 				?readonly=${this.readonly}>
 				<umb-icon slot="icon" name=${link.icon || 'icon-link'}></umb-icon>
 				${when(