Backoffice Item Pickers: Show error for missing items in 10 picker types (closes #19329, #20270, #20367)

src/Umbraco.Web.UI.Client/src/packages/core/entity-item/entity-item-ref/entity-item-ref.element.ts

@@ -20,9 +20,6 @@ export class UmbEntityItemRefElement extends UmbLitElement {
 	private _component?: any; // TODO: Add type
 
 	@property({ type: Object, attribute: false })
-	public get item(): UmbEntityModel | undefined {
-		return this.#item;
-	}
 	public set item(value: UmbEntityModel | undefined) {
 		const oldValue = this.#item;
 		this.#item = value;
@@ -41,6 +38,9 @@ export class UmbEntityItemRefElement extends UmbLitElement {
 		// If the component is already created, but the entity type is different, we need to destroy the component.
 		this.#createController(value.entityType);
 	}
+	public get item(): UmbEntityModel | undefined {
+		return this.#item;
+	}
 
 	#readonly = false;
 	@property({ type: Boolean, reflect: true })
@@ -124,20 +124,23 @@ export class UmbEntityItemRefElement extends UmbLitElement {
 	error?: boolean;
 
 	@property({ type: String, attribute: 'error-message', reflect: false })
-	errorMessage?: string;
+	errorMessage?: string | null;
+
+	@property({ type: String, attribute: 'error-detail', reflect: false })
+	errorDetail?: string | null;
 
 	#pathAddendum = new UmbRoutePathAddendumContext(this);
 
 	#onSelected(event: UmbSelectedEvent) {
 		event.stopPropagation();
-		const unique = this.#item?.unique;
+		const unique = this.item?.unique;
 		if (!unique) throw new Error('No unique id found for item');
 		this.dispatchEvent(new UmbSelectedEvent(unique));
 	}
 
 	#onDeselected(event: UmbDeselectedEvent) {
 		event.stopPropagation();
-		const unique = this.#item?.unique;
+		const unique = this.item?.unique;
 		if (!unique) throw new Error('No unique id found for item');
 		this.dispatchEvent(new UmbDeselectedEvent(unique));
 	}
@@ -163,7 +166,7 @@ export class UmbEntityItemRefElement extends UmbLitElement {
 
 				// TODO: I would say this code can use feature of the UmbExtensionsElementInitializer, to set properties and get a fallback element. [NL]
 				// assign the properties to the component
-				component.item = this.#item;
+				component.item = this.item;
 				component.readonly = this.readonly;
 				component.standalone = this.standalone;
 				component.selectOnly = this.selectOnly;
@@ -197,6 +200,7 @@ export class UmbEntityItemRefElement extends UmbLitElement {
 			return html`<uui-ref-node
 				style="color: var(--uui-color-danger);"
 				.name=${this.localize.string(this.errorMessage ?? '#general_notFound')}
+				.detail=${this.errorDetail ?? ''}
 				.readonly=${this.readonly}
 				.standalone=${this.standalone}
 				.selectOnly=${this.selectOnly}

src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts

@@ -122,10 +122,10 @@ export class UmbPickerInputContext<
 			confirmLabel: '#actions_remove',
 		});
 
-		this.#removeItem(unique);
+		this._removeItem(unique);
 	}
 
-	#removeItem(unique: string) {
+	protected _removeItem(unique: string) {
 		const newSelection = this.getSelection().filter((value) => value !== unique);
 		this.setSelection(newSelection);
 		this.getHostElement().dispatchEvent(new UmbChangeEvent());

src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.context.ts

@@ -4,14 +4,40 @@ import { UMB_STATIC_FILE_ITEM_REPOSITORY_ALIAS } from '../../constants.js';
 import type { UmbStaticFileItemModel } from '../../types.js';
 import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbServerFilePathUniqueSerializer } from '@umbraco-cms/backoffice/server-file-system';
+import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
 
 export class UmbStaticFilePickerInputContext extends UmbPickerInputContext<
 	UmbStaticFileItemModel,
 	UmbStaticFileItemModel,
 	UmbStaticFilePickerModalData,
 	UmbStaticFilePickerModalValue
 > {
+	#serializer = new UmbServerFilePathUniqueSerializer();
+	#items: Array<UmbStaticFileItemModel> = [];
+
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_STATIC_FILE_ITEM_REPOSITORY_ALIAS, UMB_STATIC_FILE_PICKER_MODAL);
+
+		// Keep track of items for name lookup
+		this.observe(this.selectedItems, (items) => {
+			this.#items = items;
+		});
+	}
+
+	override async requestRemoveItem(unique: string) {
+		const item = this.#items.find((item) => item.unique === unique);
+
+		// If item doesn't exist, use the file path as the name
+		const name = item?.name ?? this.#serializer.toServerPath(unique) ?? unique;
+
+		await umbConfirmModal(this, {
+			color: 'danger',
+			headline: `#actions_remove?`,
+			content: `#defaultdialogs_confirmremove ${name}?`,
+			confirmLabel: '#actions_remove',
+		});
+
+		this._removeItem(unique);
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.element.ts

@@ -3,8 +3,10 @@ import { UmbStaticFilePickerInputContext } from './input-static-file.context.js'
 import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UmbServerFilePathUniqueSerializer } from '@umbraco-cms/backoffice/server-file-system';
 import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import type { UmbRepositoryItemsStatus } from '@umbraco-cms/backoffice/repository';
+import { UmbServerFilePathUniqueSerializer } from '@umbraco-cms/backoffice/server-file-system';
+import '@umbraco-cms/backoffice/entity-item';
 
 @customElement('umb-input-static-file')
 export class UmbInputStaticFileElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
@@ -79,6 +81,9 @@ export class UmbInputStaticFileElement extends UmbFormControlMixin<string | unde
 	@state()
 	private _items?: Array<UmbStaticFileItemModel>;
 
+	@state()
+	private _statuses?: Array<UmbRepositoryItemsStatus>;
+
 	#pickerContext = new UmbStaticFilePickerInputContext(this);
 
 	constructor() {
@@ -98,20 +103,21 @@ export class UmbInputStaticFileElement extends UmbFormControlMixin<string | unde
 
 		this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')));
 		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
+		this.observe(this.#pickerContext.statuses, (statuses) => (this._statuses = statuses));
 	}
 
 	protected override getFormElement() {
 		return undefined;
 	}
 
 	override render() {
-		if (!this._items) return nothing;
+		if (!this._statuses) return nothing;
 		return html`
 			<uui-ref-list>
 				${repeat(
-					this._items,
-					(item) => item.unique,
-					(item) => this._renderItem(item),
+					this._statuses,
+					(status) => status.unique,
+					(status) => this._renderItem(status),
 				)}
 			</uui-ref-list>
 			${this.#renderAddButton()}
@@ -137,18 +143,24 @@ export class UmbInputStaticFileElement extends UmbFormControlMixin<string | unde
 		`;
 	}
 
-	private _renderItem(item: UmbStaticFileItemModel) {
-		if (!item.unique) return;
-		return html`
-			<uui-ref-node name=${item.name} .detail=${this.#serializer.toServerPath(item.unique) || ''}>
-				<!-- TODO: implement is trashed, if we cant retrieve the item on the server (but only ask the server if we need to anyway...). <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> -->
-				<uui-action-bar slot="actions">
-					<uui-button
-						label=${this.localize.term('general_remove')}
-						@click=${() => this.#pickerContext.requestRemoveItem(item.unique)}></uui-button>
-				</uui-action-bar>
-			</uui-ref-node>
-		`;
+	private _renderItem(status: UmbRepositoryItemsStatus) {
+		const unique = status.unique;
+		const item = this._items?.find((x) => x.unique === unique);
+		const isError = status.state.type === 'error';
+
+		return html`<umb-entity-item-ref
+			id=${unique}
+			.item=${item}
+			?error=${isError}
+			.errorMessage=${status.state.error}
+			.errorDetail=${isError ? this.#serializer.toServerPath(unique) : undefined}
+			?standalone=${this.max === 1}>
+			<uui-action-bar slot="actions">
+				<uui-button
+					label=${this.localize.term('general_remove')}
+					@click=${() => this.#pickerContext.requestRemoveItem(unique)}></uui-button>
+			</uui-action-bar>
+		</umb-entity-item-ref>`;
 	}
 
 	static override styles = [