Allow configuring collection no-items text via manifest or attribute (#19284)

Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>

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 {*}

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>
 		`;
 	}

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 {

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>;
 }
 

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;
 		});