Merge pull request #18221 from umbraco/v15/feature/block-type-element-not-found

Feature: block type element not found

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts

@@ -868,6 +868,7 @@ export default {
 		next: 'Next',
 		no: 'No',
 		nodeName: 'Node Name',
+		notFound: 'Not found',
 		of: 'of',
 		off: 'Off',
 		ok: 'OK',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -865,6 +865,7 @@ export default {
 		next: 'Next',
 		no: 'No',
 		nodeName: 'Node Name',
+		notFound: 'Not found',
 		of: 'of',
 		off: 'Off',
 		ok: 'OK',

src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts

@@ -80,12 +80,17 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 			this.#serverUrl = appContext.getServerUrl();
 		});
 
-		this.observe(this.#itemManager.items, (items) => {
-			const item = items[0];
-			if (item) {
+		this.observe(this.#itemManager.statuses, async (statuses) => {
+			const status = statuses[0];
+			if (status?.state.type === 'success') {
+				const item = await this.#itemManager.getItemByUnique(status.unique);
 				this._fallbackIcon = item.icon;
 				this._name = item.name ? this.localize.string(item.name) : this.localize.term('general_unknown');
 				this._description = this.localize.string(item.description);
+			} else if (status?.state.type === 'error') {
+				this._fallbackIcon = 'icon-alert';
+				this._name = this.localize.term('blockEditor_elementTypeDoesNotExistHeadline');
+				this._description = this.localize.term('blockEditor_elementTypeDoesNotExistDescription');
 			}
 		});
 	}

src/Umbraco.Web.UI.Client/src/packages/core/repository/repository-items.manager.ts

@@ -10,7 +10,14 @@ import { UmbEntityUpdatedEvent } from '@umbraco-cms/backoffice/entity-action';
 
 const ObserveRepositoryAlias = Symbol();
 
-// TODO: v16 - add entityType to the type
+interface UmbRepositoryItemsStatus {
+	state: {
+		type: 'success' | 'error' | 'loading';
+		error?: string;
+	};
+	unique: string;
+}
+
 export class UmbRepositoryItemsManager<ItemType extends { unique: string }> extends UmbControllerBase {
 	//
 	repository?: UmbItemRepository<ItemType>;
@@ -31,6 +38,9 @@ export class UmbRepositoryItemsManager<ItemType extends { unique: string }> exte
 	#items = new UmbArrayState<ItemType>([], (x) => this.#getUnique(x));
 	items = this.#items.asObservable();
 
+	#statuses = new UmbArrayState<UmbRepositoryItemsStatus>([], (x) => x.unique);
+	statuses = this.#statuses.asObservable();
+
 	/**
 	 * Creates an instance of UmbRepositoryItemsManager.
 	 * @param {UmbControllerHost} host - The host for the controller.
@@ -91,13 +101,12 @@ export class UmbRepositoryItemsManager<ItemType extends { unique: string }> exte
 		);
 
 		this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (context) => {
-			this.#eventContext = context;
-
-			this.#eventContext.removeEventListener(
+			this.#eventContext?.removeEventListener(
 				UmbEntityUpdatedEvent.TYPE,
 				this.#onEntityUpdatedEvent as unknown as EventListener,
 			);
 
+			this.#eventContext = context;
 			this.#eventContext.addEventListener(
 				UmbEntityUpdatedEvent.TYPE,
 				this.#onEntityUpdatedEvent as unknown as EventListener,
@@ -133,22 +142,78 @@ export class UmbRepositoryItemsManager<ItemType extends { unique: string }> exte
 		await this.#init;
 		if (!this.repository) throw new Error('Repository is not initialized');
 
+		const requestedUniques = this.getUniques();
+
+		this.#statuses.setValue(
+			requestedUniques.map((unique) => ({
+				state: {
+					type: 'loading',
+				},
+				unique,
+			})),
+		);
+
 		// TODO: Test if its just some items that is gone now, if so then just filter them out. (maybe use code from #removeItem)
 		// This is where this.#getUnique comes in play. Unless that can come from the repository, but that collides with the idea of having a multi-type repository. If that happens.
-		const request = this.repository.requestItems(this.getUniques());
+		const request = this.repository.requestItems(requestedUniques);
 		this.#currentRequest = request;
-		const { asObservable } = await request;
+		const { asObservable, data, error } = await request;
 
 		if (this.#currentRequest !== request) {
 			// You are not the newest request, so please back out.
 			return;
 		}
 
+		if (error) {
+			this.#statuses.append(
+				requestedUniques.map((unique) => ({
+					state: {
+						type: 'error',
+						error: '#general_error',
+					},
+					unique,
+				})),
+			);
+			return;
+		}
+
+		// find uniques not resolved:
+		if (data) {
+			// find rejected uniques:
+			const rejectedUniques = requestedUniques.filter(
+				(unique) => !data.find((item) => this.#getUnique(item) === unique),
+			);
+			const resolvedUniques = requestedUniques.filter((unique) => !rejectedUniques.includes(unique));
+			this.#items.remove(rejectedUniques);
+
+			this.#statuses.append([
+				...rejectedUniques.map(
+					(unique) =>
+						({
+							state: {
+								type: 'error',
+								error: '#general_notFound',
+							},
+							unique,
+						}) as UmbRepositoryItemsStatus,
+				),
+				...resolvedUniques.map(
+					(unique) =>
+						({
+							state: {
+								type: 'success',
+							},
+							unique,
+						}) as UmbRepositoryItemsStatus,
+				),
+			]);
+		}
+
 		if (asObservable) {
 			this.observe(
 				asObservable(),
 				(data) => {
-					this.#items.setValue(this.#sortByUniques(data));
+					this.#items.append(this.#sortByUniques(data));
 				},
 				ObserveRepositoryAlias,
 			);
@@ -159,7 +224,17 @@ export class UmbRepositoryItemsManager<ItemType extends { unique: string }> exte
 		await this.#init;
 		if (!this.repository) throw new Error('Repository is not initialized');
 
-		const { data } = await this.repository.requestItems([unique]);
+		const { data, error } = await this.repository.requestItems([unique]);
+
+		if (error) {
+			this.#statuses.appendOne({
+				state: {
+					type: 'error',
+					error: '#general_notFound',
+				},
+				unique,
+			} as UmbRepositoryItemsStatus);
+		}
 
 		if (data) {
 			const items = this.getItems();