Entity Data Picker: Fix "Not Found" in remove dialog for entities without a top-level name

src/Umbraco.Web.UI.Client/examples/picker-data-source/example-document-picker-data-source.ts

@@ -1,11 +1,13 @@
 import { getConfigValue } from '@umbraco-cms/backoffice/utils';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import {
+	UmbDocumentItemDataResolver,
 	UmbDocumentItemRepository,
 	UmbDocumentSearchRepository,
 	UmbDocumentTreeRepository,
 	UMB_DOCUMENT_ENTITY_TYPE,
 } from '@umbraco-cms/backoffice/document';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UMB_DOCUMENT_TYPE_ENTITY_TYPE } from '@umbraco-cms/backoffice/document-type';
 import { UMB_PROPERTY_TYPE_BASED_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/content';
 import type {
@@ -20,6 +22,7 @@ import type {
 	UmbPickerSearchableDataSource,
 	UmbPickerTreeDataSource,
 } from '@umbraco-cms/backoffice/picker-data-source';
+import type { UmbItemDataResolver } from '@umbraco-cms/backoffice/entity-item';
 import type { UmbReferenceByUnique } from '@umbraco-cms/backoffice/models';
 import type { UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search';
 import type { UmbTreeAncestorsOfRequestArgs } from '@umbraco-cms/backoffice/tree';
@@ -84,6 +87,17 @@ export class ExampleDocumentPickerPropertyEditorDataSource
 		return this.#item.requestItems(uniques);
 	}
 
+	/**
+	 * Creates a document item data resolver bound to the given host.
+	 * The resolver reads variant-based names and icons using UMB_VARIANT_CONTEXT,
+	 * so the host must be the element or context that owns the picker in the DOM.
+	 * @param {UmbControllerHost} host The controller host of the picker consumer.
+	 * @returns {UmbItemDataResolver} A resolver that provides language-context-aware metadata for document items.
+	 */
+	createItemDataResolver(host: UmbControllerHost): UmbItemDataResolver {
+		return new UmbDocumentItemDataResolver(host);
+	}
+
 	search(args: UmbSearchRequestArgs) {
 		const allowedContentTypes = this.#getAllowedDocumentTypesConfig();
 		const combinedArgs: UmbDocumentSearchRequestArgs = { ...args, allowedContentTypes };

src/Umbraco.Web.UI.Client/mocks/data/sets/documents/document.data.ts

@@ -126,7 +126,7 @@ export const data: Array<UmbMockDocumentModel> = [
 		template: null,
 		variants: [
 			{
-				state: 'Published' as UmbDocumentVariantState,
+				state: DocumentVariantStateModel.PUBLISHED,
 				publishDate: '2024-01-15T10:05:00.000Z',
 				culture: null,
 				segment: null,
@@ -137,7 +137,7 @@ export const data: Array<UmbMockDocumentModel> = [
 				flags: [],
 			},
 			{
-				state: 'Draft' as UmbDocumentVariantState,
+				state: DocumentVariantStateModel.DRAFT,
 				publishDate: null,
 				culture: null,
 				segment: 's1',
@@ -189,7 +189,7 @@ export const data: Array<UmbMockDocumentModel> = [
 		template: null,
 		variants: [
 			{
-				state: 'Draft' as UmbDocumentVariantState,
+				state: DocumentVariantStateModel.DRAFT,
 				publishDate: null,
 				culture: null,
 				segment: null,
@@ -234,7 +234,7 @@ export const data: Array<UmbMockDocumentModel> = [
 		template: null,
 		variants: [
 			{
-				state: 'Draft' as UmbDocumentVariantState,
+				state: DocumentVariantStateModel.DRAFT,
 				publishDate: null,
 				culture: null,
 				segment: null,

src/Umbraco.Web.UI.Client/src/packages/core/picker-data-source/data-source/types.ts

@@ -1,11 +1,20 @@
-import type { UmbItemModel } from '@umbraco-cms/backoffice/entity-item';
+import type { UmbItemDataResolver, UmbItemModel } from '@umbraco-cms/backoffice/entity-item';
 import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbItemRepository } from '@umbraco-cms/backoffice/repository';
 import type { UmbConfigCollectionModel } from '@umbraco-cms/backoffice/utils';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export interface UmbPickerDataSource<PickedItemType extends UmbItemModel = UmbItemModel>
 	extends UmbItemRepository<PickedItemType>,
 		UmbApi {
 	setConfig?(config: UmbConfigCollectionModel | undefined): void;
 	getConfig?(): UmbConfigCollectionModel | undefined;
+
+	/**
+	 * Creates an item data resolver for this data source, bound to the given host.
+	 * Pass the consuming element or context as host so the resolver can reach local DOM contexts (e.g. `UMB_VARIANT_CONTEXT`).
+	 * @param {UmbControllerHost} host The controller host of the picker consumer.
+	 * @returns {UmbItemDataResolver} A resolver that can provide the display name, icon, and other metadata for an item.
+	 */
+	createItemDataResolver?(host: UmbControllerHost): UmbItemDataResolver;
 }

src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/input/input-entity-data.context.test.ts

@@ -0,0 +1,145 @@
+import { expect } from '@open-wc/testing';
+import { customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import { UmbControllerHostElementMixin } from '@umbraco-cms/backoffice/controller-api';
+import { UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbEntityDataPickerInputContext } from './input-entity-data.context.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type { UmbItemDataResolver, UmbItemModel } from '@umbraco-cms/backoffice/entity-item';
+import type { UmbPickerDataSource } from '@umbraco-cms/backoffice/picker-data-source';
+import type { Observable } from '@umbraco-cms/backoffice/observable-api';
+
+// A test entity model that has a label instead of name, simulating entities like Document
+// where names are variant-dependent and not stored as a top-level property.
+interface UmbTestItemModel extends UmbItemModel {
+	label: string;
+}
+
+// A resolver that derives its display name from item.label, not from any constructor argument.
+// This guarantees the resolver path is genuinely exercised — item.name is undefined for
+// UmbTestItemModel, so any name returned must come through setData/label.
+class UmbTestItemDataResolver extends UmbControllerBase implements UmbItemDataResolver<UmbTestItemModel> {
+	#data = new UmbObjectState<UmbTestItemModel | undefined>(undefined);
+
+	public readonly entityType = this.#data.asObservablePart((x) => x?.entityType);
+	public readonly unique = this.#data.asObservablePart((x) => x?.unique);
+	public readonly icon = this.#data.asObservablePart((x) => x?.icon ?? undefined);
+
+	#name = new UmbStringState(undefined);
+	public readonly name: Observable<string | undefined> = this.#name.asObservable();
+
+	setData(data: UmbTestItemModel | undefined) {
+		this.#data.setValue(data);
+		this.#name.setValue(data?.label);
+	}
+
+	getData(): UmbTestItemModel | undefined {
+		return this.#data.getValue();
+	}
+
+	async getEntityType(): Promise<string | undefined> {
+		return this.observe(this.entityType).asPromise();
+	}
+
+	async getUnique(): Promise<string | undefined> {
+		return this.observe(this.unique).asPromise();
+	}
+
+	async getName(): Promise<string | undefined> {
+		return this.#name.getValue();
+	}
+
+	async getIcon(): Promise<string | undefined> {
+		return this.observe(this.icon).asPromise();
+	}
+}
+
+class UmbTestPickerDataSource extends UmbControllerBase implements UmbPickerDataSource<UmbItemModel> {
+	requestItems(): ReturnType<UmbPickerDataSource['requestItems']> {
+		return Promise.resolve({ data: [] });
+	}
+
+	// requestCollection is required so isPickerCollectionDataSource returns true,
+	// allowing #setModalToken to resolve without throwing.
+	requestCollection() {
+		return Promise.resolve({ data: { items: [], total: 0 } });
+	}
+}
+
+class UmbTestPickerDataSourceWithResolver extends UmbTestPickerDataSource {
+	createItemDataResolver(host: UmbControllerHost): UmbItemDataResolver {
+		return new UmbTestItemDataResolver(host);
+	}
+}
+
+@customElement('test-entity-data-picker-context-host')
+class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
+
+// Exposes the protected _requestItemName method and bypasses the item manager so
+// tests do not need the repository extension to be registered.
+class UmbTestEntityDataPickerInputContext extends UmbEntityDataPickerInputContext {
+	#testItems = new Map<string, UmbItemModel>();
+
+	setTestItem(item: UmbItemModel) {
+		this.#testItems.set(item.unique, item);
+	}
+
+	override getSelectedItemByUnique(unique: string): UmbItemModel | undefined {
+		return this.#testItems.get(unique);
+	}
+
+	async requestItemName(unique: string): Promise<string> {
+		return this._requestItemName(unique);
+	}
+}
+
+describe('UmbEntityDataPickerInputContext._requestItemName', () => {
+	let hostElement: UmbTestControllerHostElement;
+	let context: UmbTestEntityDataPickerInputContext;
+
+	beforeEach(() => {
+		hostElement = new UmbTestControllerHostElement();
+		document.body.appendChild(hostElement);
+		context = new UmbTestEntityDataPickerInputContext(hostElement);
+	});
+
+	afterEach(() => {
+		context.destroy();
+		document.body.innerHTML = '';
+	});
+
+	it('should return the name resolved from item data by the data source resolver', async () => {
+		const item: UmbTestItemModel = { unique: 'test-1', entityType: 'test', label: 'Resolved Label' };
+		context.setTestItem(item);
+		context.setDataSourceApi(new UmbTestPickerDataSourceWithResolver(hostElement));
+
+		const name = await context.requestItemName('test-1');
+		expect(name).to.equal('Resolved Label');
+	});
+
+	it('should fall back to item.name when the data source provides no resolver', async () => {
+		const item: UmbItemModel = { unique: 'test-2', entityType: 'test', name: 'Item Name' };
+		context.setTestItem(item);
+		context.setDataSourceApi(new UmbTestPickerDataSource(hostElement));
+
+		const name = await context.requestItemName('test-2');
+		expect(name).to.equal('Item Name');
+	});
+
+	it('should fall back to item.name when the resolver returns undefined', async () => {
+		// UmbItemModel has name but no label. UmbTestItemDataResolver reads .label, which is
+		// undefined here, so getName() returns undefined — exercising the if(name) guard in
+		// _requestItemName and ensuring it falls through to super._requestItemName.
+		const item: UmbItemModel = { unique: 'test-3', entityType: 'test', name: 'Fallback Name' };
+		context.setTestItem(item);
+		context.setDataSourceApi(new UmbTestPickerDataSourceWithResolver(hostElement));
+
+		const name = await context.requestItemName('test-3');
+		expect(name).to.equal('Fallback Name');
+	});
+
+	it('should return #general_notFound when no item is found for the given unique', async () => {
+		const name = await context.requestItemName('non-existent');
+		expect(name).to.equal('#general_notFound');
+	});
+});

src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/input/input-entity-data.context.ts

@@ -45,6 +45,32 @@ export class UmbEntityDataPickerInputContext extends UmbPickerInputContext<
 		super(host, UMB_ENTITY_DATA_PICKER_ITEM_REPOSITORY_ALIAS);
 	}
 
+	/**
+	 * Resolves the display name for a picked item. If the data source provides a
+	 * {@link UmbPickerDataSource.createItemDataResolver | createItemDataResolver} factory, the resolver is
+	 * instantiated with this context as the host so it can reach local DOM contexts
+	 * (e.g. UMB_VARIANT_CONTEXT).
+	 * @param {string} unique The unique identifier of the item.
+	 * @returns {Promise<string>} The resolved display name.
+	 * @memberof UmbEntityDataPickerInputContext
+	 */
+	protected override async _requestItemName(unique: string): Promise<string> {
+		const item = this.getSelectedItemByUnique(unique);
+		if (item && this.#dataSourceApi?.createItemDataResolver) {
+			const resolver = this.#dataSourceApi.createItemDataResolver(this);
+			resolver.setData(item);
+			try {
+				const name = await resolver.getName();
+				if (name) {
+					return name;
+				}
+			} finally {
+				this.removeUmbController(resolver);
+			}
+		}
+		return super._requestItemName(unique);
+	}
+
 	/**
 	 * Sets the data source API for the input context and updates the modal token accordingly.
 	 * @param {UmbPickerDataSource | undefined} api The data source API to set for the input context.