From 1fc8b4ff7f659a0caf6f59e0c1459fa9d59424cd Mon Sep 17 00:00:00 2001
From: Nathan Woulfe <nathan@nathanw.com.au>
Date: Fri, 9 May 2025 19:05:58 +1000
Subject: [PATCH] Allow configuring collection no-items text via manifest or
 attribute (#19284)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>
---
 .../default/collection-default.context.ts          |  4 ++++
 .../default/collection-default.element.ts          | 14 ++++++++++++--
 .../collection/extensions/collection.extension.ts  |  1 +
 .../src/packages/core/collection/types.ts          |  1 +
 .../media/collection/media-collection.element.ts   |  1 +
 5 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts
index ddea42cdfb..5cbae6cbd8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts
@@ -243,6 +243,10 @@ export class UmbDefaultCollectionContext<
 		return this._manifest;
 	}
 
+	public getEmptyLabel(): string {
+		return this.manifest?.meta.noItemsLabel ?? this.#config?.noItemsLabel ?? '#collection_noItemsTitle';
+	}
+
 	/**
 	 * Requests the collection from the repository.
 	 * @returns {*}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts
index aa08150a8b..94440fa140 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts
@@ -23,6 +23,9 @@ umbExtensionsRegistry.register(manifest);
 
 @customElement('umb-collection-default')
 export class UmbCollectionDefaultElement extends UmbLitElement {
+	//
+	#collectionContext?: UmbDefaultCollectionContext;
+
 	@state()
 	private _routes: Array<UmbRoute> = [];
 
@@ -32,7 +35,8 @@ export class UmbCollectionDefaultElement extends UmbLitElement {
 	@state()
 	private _isDoneLoading = false;
 
-	#collectionContext?: UmbDefaultCollectionContext<any, any>;
+	@state()
+	private _emptyLabel?: string;
 
 	constructor() {
 		super();
@@ -40,6 +44,7 @@ export class UmbCollectionDefaultElement extends UmbLitElement {
 			this.#collectionContext = context;
 			this.#observeCollectionRoutes();
 			this.#observeTotalItems();
+			this.#getEmptyStateLabel();
 			await this.#collectionContext?.requestCollection();
 			this._isDoneLoading = true;
 		});
@@ -69,6 +74,10 @@ export class UmbCollectionDefaultElement extends UmbLitElement {
 		);
 	}
 
+	#getEmptyStateLabel() {
+		this._emptyLabel = this.#collectionContext?.getEmptyLabel();
+	}
+
 	override render() {
 		return this._routes
 			? html`
@@ -98,9 +107,10 @@ export class UmbCollectionDefaultElement extends UmbLitElement {
 
 	#renderEmptyState() {
 		if (!this._isDoneLoading) return nothing;
+
 		return html`
 			<div id="empty-state" class="uui-text">
-				<h4><umb-localize key="collection_noItemsTitle"></umb-localize></h4>
+				<h4>${this.localize.string(this._emptyLabel)}</h4>
 			</div>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/extensions/collection.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/extensions/collection.extension.ts
index 7532fe9acc..56011a2cb8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/extensions/collection.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/extensions/collection.extension.ts
@@ -9,6 +9,7 @@ export interface ManifestCollection
 
 export interface MetaCollection {
 	repositoryAlias: string;
+	noItemsLabel?: string;
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts
index f449868688..3314fef940 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts
@@ -25,6 +25,7 @@ export interface UmbCollectionConfiguration {
 	orderBy?: string;
 	orderDirection?: string;
 	pageSize?: number;
+	noItemsLabel?: string;
 	userDefinedProperties?: Array<UmbCollectionColumnConfiguration>;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts
index 75cc8be0a0..d73710897a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts
@@ -22,6 +22,7 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 		super();
 
 		this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (context) => {
+			// TODO: stop consuming the context both in the default element and here. Instead make the default able to inform when the context is consumed. Or come up with a better system for the controllers to talk together. [NL]
 			this.#collectionContext = context;
 		});