Feature: Document Workspace Info reload components (#2492)

* Adds Document URL Repository

* Extracts Document Workspace Info Links to its own component

Refactored to use the new Document URL Repository.

Plus other housekeeping on the main Document Workspace Info component.

* Refactored Document Workspace Info History component

to listen for the "Request Reload Structure" event

* Refactored Document Workspace Info Reference component

src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts

@@ -63,6 +63,7 @@ export class UmbHistoryItemElement extends UmbLitElement {
 			.user-info div {
 				display: flex;
 				flex-direction: column;
+				min-width: var(--uui-size-60);
 			}
 
 			.detail {

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

@@ -1,6 +1,7 @@
 export { UmbDocumentDetailRepository, UMB_DOCUMENT_DETAIL_REPOSITORY_ALIAS } from './detail/index.js';
 export { UmbDocumentItemRepository, UMB_DOCUMENT_ITEM_REPOSITORY_ALIAS } from './item/index.js';
 export { UmbDocumentPublishingRepository, UMB_DOCUMENT_PUBLISHING_REPOSITORY_ALIAS } from './publishing/index.js';
+export { UmbDocumentUrlRepository, UMB_DOCUMENT_URL_REPOSITORY_ALIAS } from './url/index.js';
 export { UmbDocumentPreviewRepository } from './preview/index.js';
 
 export type { UmbDocumentItemModel } from './item/types.js';

src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/manifests.ts

@@ -1,5 +1,11 @@
 import { manifests as detailManifests } from './detail/manifests.js';
 import { manifests as itemManifests } from './item/manifests.js';
 import { manifests as publishingManifests } from './publishing/manifests.js';
+import { manifests as urlManifests } from './url/manifests.js';
 
-export const manifests: Array<UmbExtensionManifest> = [...detailManifests, ...itemManifests, ...publishingManifests];
+export const manifests: Array<UmbExtensionManifest> = [
+	...detailManifests,
+	...itemManifests,
+	...publishingManifests,
+	...urlManifests,
+];

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

@@ -0,0 +1,2 @@
+export const UMB_DOCUMENT_URL_REPOSITORY_ALIAS = 'Umb.Repository.Document.Url';
+export const UMB_DOCUMENT_URL_STORE_ALIAS = 'Umb.Store.Document.Url';

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

@@ -0,0 +1,13 @@
+import type { UmbDocumentUrlsModel } from './types.js';
+import { UMB_DOCUMENT_URL_STORE_CONTEXT } from './document-url.store.context-token.js';
+import { UmbDocumentUrlServerDataSource } from './document-url.server.data-source.js';
+import { UmbItemRepositoryBase } from '@umbraco-cms/backoffice/repository';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbDocumentUrlRepository extends UmbItemRepositoryBase<UmbDocumentUrlsModel> {
+	constructor(host: UmbControllerHost) {
+		super(host, UmbDocumentUrlServerDataSource, UMB_DOCUMENT_URL_STORE_CONTEXT);
+	}
+}
+
+export { UmbDocumentUrlRepository as api };

src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.server.data-source.ts

@@ -0,0 +1,29 @@
+import type { UmbDocumentUrlsModel } from './types.js';
+import { DocumentService } from '@umbraco-cms/backoffice/external/backend-api';
+import { UmbItemServerDataSourceBase } from '@umbraco-cms/backoffice/repository';
+import type { DocumentUrlInfoResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+/**
+ * A server data source for Document URLs
+ * @class UmbDocumentUrlServerDataSource
+ * @implements {DocumentTreeDataSource}
+ */
+export class UmbDocumentUrlServerDataSource extends UmbItemServerDataSourceBase<
+	DocumentUrlInfoResponseModel,
+	UmbDocumentUrlsModel
+> {
+	/**
+	 * Creates an instance of UmbDocumentUrlServerDataSource.
+	 * @param {UmbControllerHost} host - The controller host for this controller to be appended to
+	 * @memberof UmbDocumentUrlServerDataSource
+	 */
+	constructor(host: UmbControllerHost) {
+		super(host, { getItems, mapper });
+	}
+}
+
+/* eslint-disable local-rules/no-direct-api-import */
+const getItems = (uniques: Array<string>) => DocumentService.getDocumentUrls({ id: uniques });
+
+const mapper = (item: DocumentUrlInfoResponseModel): UmbDocumentUrlsModel => ({ unique: item.id, urls: item.urlInfos });

src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.store.context-token.ts

@@ -0,0 +1,4 @@
+import type UmbDocumentUrlStore from './document-url.store.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export const UMB_DOCUMENT_URL_STORE_CONTEXT = new UmbContextToken<UmbDocumentUrlStore>('UmbDocumentUrlStore');

src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.store.ts

@@ -0,0 +1,23 @@
+import type { UmbDocumentDetailModel } from '../../types.js';
+import { UMB_DOCUMENT_URL_STORE_CONTEXT } from './document-url.store.context-token.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbItemStoreBase } from '@umbraco-cms/backoffice/store';
+
+/**
+ * @class UmbDocumentUrlStore
+ * @augments {UmbStoreBase}
+ * @description - Data Store for Document URLs
+ */
+
+export class UmbDocumentUrlStore extends UmbItemStoreBase<UmbDocumentDetailModel> {
+	/**
+	 * Creates an instance of UmbDocumentUrlStore.
+	 * @param {UmbControllerHost} host - The controller host for this controller to be appended to
+	 * @memberof UmbDocumentUrlStore
+	 */
+	constructor(host: UmbControllerHost) {
+		super(host, UMB_DOCUMENT_URL_STORE_CONTEXT.toString());
+	}
+}
+
+export default UmbDocumentUrlStore;

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

@@ -0,0 +1,2 @@
+export { UmbDocumentUrlRepository } from './document-url.repository.js';
+export { UMB_DOCUMENT_URL_REPOSITORY_ALIAS } from './constants.js';

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

@@ -0,0 +1,18 @@
+import { UMB_DOCUMENT_URL_REPOSITORY_ALIAS, UMB_DOCUMENT_URL_STORE_ALIAS } from './constants.js';
+import type { ManifestItemStore, ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
+
+const urlRepository: ManifestRepository = {
+	type: 'repository',
+	alias: UMB_DOCUMENT_URL_REPOSITORY_ALIAS,
+	name: 'Document Url Repository',
+	api: () => import('./document-url.repository.js'),
+};
+
+const urlStore: ManifestItemStore = {
+	type: 'itemStore',
+	alias: UMB_DOCUMENT_URL_STORE_ALIAS,
+	name: 'Document Url Store',
+	api: () => import('./document-url.store.js'),
+};
+
+export const manifests = [urlRepository, urlStore];

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

@@ -0,0 +1,9 @@
+export interface UmbDocumentUrlsModel {
+	unique: string;
+	urls: Array<UmbDocumentUrlModel>;
+}
+
+export interface UmbDocumentUrlModel {
+	culture?: string | null;
+	url?: string;
+}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts

@@ -1,32 +1,40 @@
 import type { UmbDocumentAuditLogModel } from '../../../audit-log/types.js';
 import { UmbDocumentAuditLogRepository } from '../../../audit-log/index.js';
 import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../document-workspace.context-token.js';
-import { TimeOptions, getDocumentHistoryTagStyleAndText } from './utils.js';
-import { css, html, customElement, state, nothing, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { getDocumentHistoryTagStyleAndText, TimeOptions } from './utils.js';
+import { css, customElement, html, nothing, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbPaginationManager } from '@umbraco-cms/backoffice/utils';
-import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
-import type { UmbUserItemModel } from '@umbraco-cms/backoffice/user';
+import { UmbRequestReloadStructureForEntityEvent } from '@umbraco-cms/backoffice/entity-action';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbUserItemRepository } from '@umbraco-cms/backoffice/user';
+import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
+import type { ManifestEntityAction } from '@umbraco-cms/backoffice/entity-action';
+import type { UmbUserItemModel } from '@umbraco-cms/backoffice/user';
+import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-document-workspace-view-info-history')
 export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
-	@state()
-	_currentPageNumber = 1;
+	#allowedActions = new Set(['Umb.EntityAction.Document.Rollback']);
+
+	#auditLogRepository = new UmbDocumentAuditLogRepository(this);
+
+	#pagination = new UmbPaginationManager();
+
+	#userItemRepository = new UmbUserItemRepository(this);
+
+	#userMap = new Map<string, UmbUserItemModel>();
+
+	#workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE;
 
 	@state()
-	_totalPages = 1;
+	private _currentPageNumber = 1;
 
 	@state()
 	private _items: Array<UmbDocumentAuditLogModel> = [];
 
-	#workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE;
-	#auditLogRepository = new UmbDocumentAuditLogRepository(this);
-	#pagination = new UmbPaginationManager();
-	#userItemRepository = new UmbUserItemRepository(this);
-
-	#userMap = new Map<string, UmbUserItemModel>();
+	@state()
+	private _totalPages = 1;
 
 	constructor() {
 		super();
@@ -35,12 +43,23 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 		this.observe(this.#pagination.currentPage, (number) => (this._currentPageNumber = number));
 		this.observe(this.#pagination.totalPages, (number) => (this._totalPages = number));
 
+		this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (context) => {
+			context.addEventListener(UmbRequestReloadStructureForEntityEvent.TYPE, () => {
+				this.#requestAuditLogs();
+			});
+		});
+
 		this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (instance) => {
 			this.#workspaceContext = instance;
 			this.#requestAuditLogs();
 		});
 	}
 
+	#onPageChange(event: UUIPaginationEvent) {
+		this.#pagination.setCurrentPageNumber(event.target?.current);
+		this.#requestAuditLogs();
+	}
+
 	async #requestAuditLogs() {
 		const unique = this.#workspaceContext?.getUnique();
 		if (!unique) throw new Error('Document unique is required');
@@ -58,11 +77,6 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 		}
 	}
 
-	#onPageChange(event: UUIPaginationEvent) {
-		this.#pagination.setCurrentPageNumber(event.target?.current);
-		this.#requestAuditLogs();
-	}
-
 	async #requestAndCacheUserItems() {
 		const allUsers = this._items?.map((item) => item.user.unique).filter(Boolean) as string[];
 		const uniqueUsers = [...new Set(allUsers)];
@@ -83,90 +97,84 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 	}
 
 	override render() {
-		return html`<uui-box>
-			<umb-localize slot="headline" key="general_history">History</umb-localize>
-			<umb-extension-with-api-slot
+		return html`
+			<uui-box headline=${this.localize.term('general_history')}>
+				<umb-extension-with-api-slot
 				slot="header-actions"
 				type="entityAction"
-				.filter=${(manifest: any) => manifest.alias === 'Umb.EntityAction.Document.Rollback'}></umb-extension-with-api-slot>
+				.filter=${(manifest: ManifestEntityAction) => this.#allowedActions.has(manifest.alias)}></umb-extension-with-api-slot>
 			</uui-button>
-			${this._items ? this.#renderHistory() : html`<uui-loader-circle></uui-loader-circle> `}
+			${when(
+				this._items,
+				() => this.#renderHistory(),
+				() => html`<div id="loader"><uui-loader></uui-loader></div>`,
+			)}
 			${this.#renderPagination()}
-		</uui-box> `;
+		</uui-box>
+		`;
 	}
 
 	#renderHistory() {
-		if (this._items && this._items.length) {
-			return html`
-				<umb-history-list>
-					${repeat(
-						this._items,
-						(item) => item.timestamp,
-						(item) => {
-							const { text, style } = getDocumentHistoryTagStyleAndText(item.logType);
-							const user = this.#userMap.get(item.user.unique);
+		if (!this._items?.length) return html`${this.localize.term('content_noItemsToShow')}`;
+		return html`
+			<umb-history-list>
+				${repeat(
+					this._items,
+					(item) => item.timestamp,
+					(item) => {
+						const { text, style } = getDocumentHistoryTagStyleAndText(item.logType);
+						const user = this.#userMap.get(item.user.unique);
 
-							return html`<umb-history-item
+						return html`
+							<umb-history-item
 								.name=${user?.name ?? 'Unknown'}
 								.detail=${this.localize.date(item.timestamp, TimeOptions)}>
 								<umb-user-avatar
 									slot="avatar"
 									.name=${user?.name}
 									.kind=${user?.kind}
-									.imgUrls=${user?.avatarUrls ?? []}></umb-user-avatar>
-
-								<span class="log-type">
+									.imgUrls=${user?.avatarUrls ?? []}>
+								</umb-user-avatar>
+								<div class="log-type">
 									<uui-tag look=${style.look} color=${style.color}>
 										${this.localize.term(text.label, item.parameters)}
 									</uui-tag>
-									${this.localize.term(text.desc, item.parameters)}
-								</span>
-							</umb-history-item>`;
-						},
-					)}
-				</umb-history-list>
-			`;
-		} else {
-			return html`${this.localize.term('content_noItemsToShow')}`;
-		}
+									<span>${this.localize.term(text.desc, item.parameters)}</span>
+								</div>
+							</umb-history-item>
+						`;
+					},
+				)}
+			</umb-history-list>
+		`;
 	}
 
 	#renderPagination() {
+		if (this._totalPages <= 1) return nothing;
 		return html`
-			${this._totalPages > 1
-				? html`
-						<uui-pagination
-							class="pagination"
-							.current=${this._currentPageNumber}
-							.total=${this._totalPages}
-							@change=${this.#onPageChange}></uui-pagination>
-					`
-				: nothing}
+			<uui-pagination
+				.current=${this._currentPageNumber}
+				.total=${this._totalPages}
+				@change=${this.#onPageChange}></uui-pagination>
 		`;
 	}
 
 	static override styles = [
 		UmbTextStyles,
 		css`
-			uui-loader-circle {
-				font-size: 2rem;
-			}
-
-			uui-tag uui-icon {
-				margin-right: var(--uui-size-space-1);
+			#loader {
+				display: flex;
+				justify-content: center;
 			}
 
 			.log-type {
-				flex-grow: 1;
-				gap: var(--uui-size-space-2);
+				display: grid;
+				grid-template-columns: var(--uui-size-40) auto;
+				gap: var(--uui-size-layout-1);
 			}
 
 			uui-pagination {
 				flex: 1;
-				display: inline-block;
-			}
-
-			.pagination {
 				display: flex;
 				justify-content: center;
 				margin-top: var(--uui-size-layout-1);

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

@@ -0,0 +1,134 @@
+import { UmbDocumentUrlRepository } from '../../../repository/url/document-url.repository.js';
+import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../document-workspace.context-token.js';
+import type { UmbDocumentUrlModel } from '../../../repository/url/types.js';
+import { css, customElement, html, nothing, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbRequestReloadStructureForEntityEvent } from '@umbraco-cms/backoffice/entity-action';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
+
+@customElement('umb-document-workspace-view-info-links')
+export class UmbDocumentWorkspaceViewInfoLinksElement extends UmbLitElement {
+	#documentUrlRepository = new UmbDocumentUrlRepository(this);
+
+	#workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE;
+
+	@state()
+	private _invariantCulture = 'en-US';
+
+	@state()
+	private _items?: Array<UmbDocumentUrlModel>;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (context) => {
+			context.addEventListener(UmbRequestReloadStructureForEntityEvent.TYPE, () => {
+				this.#requestUrls();
+			});
+		});
+
+		this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => {
+			this.#workspaceContext = context;
+			this.#requestUrls();
+		});
+	}
+
+	async #requestUrls() {
+		const unique = this.#workspaceContext?.getUnique();
+		if (!unique) throw new Error('Document unique is required');
+
+		const { data } = await this.#documentUrlRepository.requestItems([unique]);
+
+		if (data?.length) {
+			this._items = data[0].urls;
+		}
+	}
+
+	override render() {
+		return html`
+			<uui-box headline=${this.localize.term('general_links')} style="--uui-box-default-padding: 0;">
+				<div id="link-section">
+					${when(
+						this._items?.length,
+						() => this.#renderUrls(),
+						() => this.#renderUnpublished(),
+					)}
+				</div>
+			</uui-box>
+		`;
+	}
+
+	#renderUrls() {
+		if (!this._items) return nothing;
+		return html`
+			${repeat(
+				this._items!,
+				(item) => item.culture,
+				(item) => html`
+					<a href=${item.url ?? '#'} target="_blank" class="link-item">
+						<span class="culture">${item.culture}</span>
+						<span class="url">${item.url}</span>
+						<uui-icon name="icon-out"></uui-icon>
+					</a>
+				`,
+			)}
+		`;
+	}
+
+	#renderUnpublished() {
+		return html`
+			<div class="link-item">
+				<span class="culture">${this._invariantCulture}</span>
+				<span class="url">
+					<em><umb-localize key="content_parentNotPublishedAnomaly"></umb-localize></em>
+				</span>
+			</div>
+		`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			#link-section {
+				display: flex;
+				flex-direction: column;
+				text-align: left;
+			}
+
+			.link-item {
+				padding: var(--uui-size-space-4) var(--uui-size-space-6);
+				display: grid;
+				grid-template-columns: auto 1fr auto;
+				gap: var(--uui-size-6);
+				color: inherit;
+				text-decoration: none;
+
+				&:is(a) {
+					cursor: pointer;
+				}
+
+				&:is(a):hover {
+					background: var(--uui-color-divider);
+				}
+
+				.culture {
+					color: var(--uui-color-divider-emphasis);
+				}
+
+				uui-icon {
+					margin-right: var(--uui-size-space-2);
+					vertical-align: middle;
+				}
+			}
+		`,
+	];
+}
+
+export default UmbDocumentWorkspaceViewInfoLinksElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-document-workspace-view-info-links': UmbDocumentWorkspaceViewInfoLinksElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts

@@ -1,21 +1,18 @@
 import { UmbDocumentReferenceRepository } from '../../../reference/index.js';
-import { css, html, customElement, state, nothing, repeat, property } from '@umbraco-cms/backoffice/external/lit';
-import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
+import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { isDefaultReference, isDocumentReference, isMediaReference } from '@umbraco-cms/backoffice/relations';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
-import {
-	isDefaultReference,
-	isDocumentReference,
-	isMediaReference,
-	type UmbReferenceModel,
-} from '@umbraco-cms/backoffice/relations';
+import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace';
+import type { UmbReferenceModel } from '@umbraco-cms/backoffice/relations';
+import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-document-workspace-view-info-reference')
 export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement {
 	#itemsPerPage = 10;
-	#referenceRepository;
+
+	#referenceRepository = new UmbDocumentReferenceRepository(this);
 
 	@property()
 	documentUnique = '';
@@ -34,7 +31,6 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement
 
 	constructor() {
 		super();
-		this.#referenceRepository = new UmbDocumentReferenceRepository(this);
 
 		new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
 			.addAdditionalPath('document')
@@ -113,63 +109,65 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement
 	}
 
 	override render() {
-		if (this._items && this._items.length > 0) {
-			return html` <uui-box
-					headline=${this.localize.term('references_labelUsedByItems')}
-					style="--uui-box-default-padding:0">
-					<uui-table>
-						<uui-table-head>
-							<uui-table-head-cell></uui-table-head-cell>
-							<uui-table-head-cell><umb-localize key="general_name">Name</umb-localize></uui-table-head-cell>
-							<uui-table-head-cell><umb-localize key="general_status">Status</umb-localize></uui-table-head-cell>
-							<uui-table-head-cell><umb-localize key="general_typeName">Type Name</umb-localize></uui-table-head-cell>
-							<uui-table-head-cell><umb-localize key="general_type">Type</umb-localize></uui-table-head-cell>
-						</uui-table-head>
-
-						${repeat(
-							this._items,
-							(item) => item.id,
-							(item) =>
-								html`<uui-table-row>
-									<uui-table-cell style="text-align:center;">
-										<umb-icon name=${this.#getIcon(item)}></umb-icon>
-									</uui-table-cell>
-									<uui-table-cell class="link-cell">
-										${isDocumentReference(item)
-											? html` <uui-button
-													label="${this.localize.term('general_edit')} ${item.name}"
-													href=${`${this._editDocumentPath}edit/${item.id}`}>
-													${item.name}
-												</uui-button>`
-											: item.name}
-									</uui-table-cell>
-									<uui-table-cell>
-										${this.#getPublishedStatus(item)
-											? this.localize.term('content_published')
-											: this.localize.term('content_unpublished')}
-									</uui-table-cell>
-									<uui-table-cell>${this.#getContentTypeName(item)}</uui-table-cell>
-									<uui-table-cell>${this.#getContentType(item)}</uui-table-cell>
-								</uui-table-row>`,
-						)}
-					</uui-table>
-				</uui-box>
-				${this.#renderReferencePagination()}`;
-		} else {
-			return nothing;
-		}
+		if (!this._items?.length) return nothing;
+		return html`
+			<uui-box headline=${this.localize.term('references_labelUsedByItems')} style="--uui-box-default-padding:0">
+				<uui-table>
+					<uui-table-head>
+						<uui-table-head-cell></uui-table-head-cell>
+						<uui-table-head-cell><umb-localize key="general_name">Name</umb-localize></uui-table-head-cell>
+						<uui-table-head-cell><umb-localize key="general_status">Status</umb-localize></uui-table-head-cell>
+						<uui-table-head-cell><umb-localize key="general_typeName">Type Name</umb-localize></uui-table-head-cell>
+						<uui-table-head-cell><umb-localize key="general_type">Type</umb-localize></uui-table-head-cell>
+					</uui-table-head>
+					${repeat(
+						this._items,
+						(item) => item.id,
+						(item) => html`
+							<uui-table-row>
+								<uui-table-cell style="text-align:center;">
+									<umb-icon name=${this.#getIcon(item)}></umb-icon>
+								</uui-table-cell>
+								<uui-table-cell class="link-cell">
+									${when(
+										isDocumentReference(item),
+										() => html`
+											<uui-button
+												label="${this.localize.term('general_edit')} ${item.name}"
+												href="${this._editDocumentPath}edit/${item.id}">
+												${item.name}
+											</uui-button>
+										`,
+										() => item.name,
+									)}
+								</uui-table-cell>
+								<uui-table-cell>
+									${this.#getPublishedStatus(item)
+										? this.localize.term('content_published')
+										: this.localize.term('content_unpublished')}
+								</uui-table-cell>
+								<uui-table-cell>${this.#getContentTypeName(item)}</uui-table-cell>
+								<uui-table-cell>${this.#getContentType(item)}</uui-table-cell>
+							</uui-table-row>
+						`,
+					)}
+				</uui-table>
+			</uui-box>
+			${this.#renderReferencePagination()}
+		`;
 	}
 
 	#renderReferencePagination() {
 		if (!this._total) return nothing;
 
 		const totalPages = Math.ceil(this._total / this.#itemsPerPage);
-
 		if (totalPages <= 1) return nothing;
 
-		return html`<div class="pagination">
-			<uui-pagination .total=${totalPages} @change="${this.#onPageChange}"></uui-pagination>
-		</div>`;
+		return html`
+			<div class="pagination">
+				<uui-pagination .total=${totalPages} @change="${this.#onPageChange}"></uui-pagination>
+			</div>
+		`;
 	}
 
 	static override styles = [

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts

@@ -2,36 +2,29 @@ import { UMB_DOCUMENT_PROPERTY_DATASET_CONTEXT } from '../../../property-dataset
 import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../document-workspace.context-token.js';
 import type { UmbDocumentVariantModel } from '../../../types.js';
 import { TimeOptions } from './utils.js';
-import { css, customElement, html, ifDefined, nothing, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, ifDefined, nothing, state } from '@umbraco-cms/backoffice/external/lit';
 import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace';
 import { UMB_TEMPLATE_PICKER_MODAL, UmbTemplateItemRepository } from '@umbraco-cms/backoffice/template';
-import type { DocumentUrlInfoModel } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbDocumentTypeDetailModel } from '@umbraco-cms/backoffice/document-type';
 import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
 
 // import of local components
+import './document-workspace-view-info-links.element.js';
 import './document-workspace-view-info-history.element.js';
 import './document-workspace-view-info-reference.element.js';
 
 @customElement('umb-document-workspace-view-info')
 export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
-	@state()
-	private _invariantCulture = 'en-US';
-
 	@state()
 	private _documentUnique = '';
 
+	// Document Type
 	@state()
-	private _urls?: Array<DocumentUrlInfoModel>;
-
-	/**Document Type */
-	@state()
-	private _documentTypeUnique = '';
+	private _documentTypeUnique?: string = '';
 
 	@state()
 	private _documentTypeName?: string;
@@ -42,7 +35,7 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	@state()
 	private _allowedTemplates?: UmbDocumentTypeDetailModel['allowedTemplates'];
 
-	/**Template */
+	// Template
 	@state()
 	private _templateUnique = '';
 
@@ -78,9 +71,8 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 		});
 
 		this.consumeContext(UMB_DOCUMENT_PROPERTY_DATASET_CONTEXT, (context) => {
-			this.observe(context.currentVariant, (value) => {
-				// TODO: get the correct type automatically
-				this._variant = value as UmbDocumentVariantModel;
+			this.observe(context.currentVariant, (currentVariant) => {
+				this._variant = currentVariant;
 			});
 		});
 	}
@@ -98,14 +90,6 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			'_documentType',
 		);
 
-		this.observe(
-			this.#workspaceContext.urls,
-			(urls) => {
-				this._urls = urls;
-			},
-			'_documentUrls',
-		);
-
 		this.observe(
 			this.#workspaceContext.unique,
 			(unique) => {
@@ -160,50 +144,19 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	override render() {
 		return html`
 			<div class="container">
-				<uui-box headline=${this.localize.term('general_links')} style="--uui-box-default-padding: 0;">
-					<div id="link-section">${this.#renderLinksSection()}</div>
-				</uui-box>
-
+				<umb-document-workspace-view-info-links></umb-document-workspace-view-info-links>
 				<umb-document-workspace-view-info-reference
 					.documentUnique=${this._documentUnique}></umb-document-workspace-view-info-reference>
-
-				<umb-document-workspace-view-info-history
-					.documentUnique=${this._documentUnique}></umb-document-workspace-view-info-history>
+				<umb-document-workspace-view-info-history></umb-document-workspace-view-info-history>
 			</div>
 			<div class="container">
-				<uui-box headline=${this.localize.term('general_general')} id="general-section"
-					>${this.#renderGeneralSection()}</uui-box
-				>
+				<uui-box headline=${this.localize.term('general_general')} id="general-section">
+					${this.#renderGeneralSection()}
+				</uui-box>
 			</div>
 		`;
 	}
 
-	#renderLinksSection() {
-		/** TODO Make sure link section is completed */
-		if (this._urls && this._urls.length) {
-			return html`
-				${repeat(
-					this._urls,
-					(url) => url.culture,
-					(url) => html`
-						<a href=${url.url} target="_blank" class="link-item with-href">
-							<span class="link-language">${url.culture}</span>
-							<span class="link-content"> ${url.url}</span>
-							<uui-icon name="icon-out"></uui-icon>
-						</a>
-					`,
-				)}
-			`;
-		} else {
-			return html`
-				<div class="link-item">
-					<span class="link-language">${this._invariantCulture}</span>
-					<span class="link-content italic"><umb-localize key="content_parentNotPublishedAnomaly"></umb-localize></span>
-				</div>
-			`;
-		}
-	}
-
 	#renderGeneralSection() {
 		const editDocumentTypePath = this._routeBuilder?.({ entityType: 'document-type' }) ?? '';
 		const editTemplatePath = this._routeBuilder?.({ entityType: 'template' }) ?? '';
@@ -292,7 +245,6 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	}
 
 	static override styles = [
-		UmbTextStyles,
 		css`
 			:host {
 				display: grid;
@@ -332,44 +284,6 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			.variant-state > span {
 				color: var(--uui-color-divider-emphasis);
 			}
-
-			// Link section
-
-			#link-section {
-				display: flex;
-				flex-direction: column;
-				text-align: left;
-			}
-
-			.link-item {
-				padding: var(--uui-size-space-4) var(--uui-size-space-6);
-				display: grid;
-				grid-template-columns: auto 1fr auto;
-				gap: var(--uui-size-6);
-				color: inherit;
-				text-decoration: none;
-			}
-
-			.link-language {
-				color: var(--uui-color-divider-emphasis);
-			}
-
-			.link-content.italic {
-				font-style: italic;
-			}
-
-			.link-item uui-icon {
-				margin-right: var(--uui-size-space-2);
-				vertical-align: middle;
-			}
-
-			.link-item.with-href {
-				cursor: pointer;
-			}
-
-			.link-item.with-href:hover {
-				background: var(--uui-color-divider);
-			}
 		`,
 	];
 }