block-type element type not found

Author: nielslyngsoe

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

@@ -866,6 +866,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

@@ -862,6 +862,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 (items) => {
+			const status = items[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.string('general_error');
+				this._description = this.localize.string(status.state.error);
 			}
 		});
 	}

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);
+	statuses = this.#statuses.asObservable();
+
 	/**
 	 * Creates an instance of UmbRepositoryItemsManager.
 	 * @param {UmbControllerHost} host - The host for the controller.
@@ -133,22 +143,56 @@ 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();
+
 		// 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),
+			);
+			this.#items.remove(rejectedUniques);
+
+			this.#statuses.append(
+				rejectedUniques.map((unique) => ({
+					state: {
+						type: 'error',
+						error: '#general_notFound',
+					},
+					unique,
+				})),
+			);
+		}
+
 		if (asObservable) {
 			this.observe(
 				asObservable(),
 				(data) => {
-					this.#items.setValue(this.#sortByUniques(data));
+					this.#items.append(this.#sortByUniques(data));
 				},
 				ObserveRepositoryAlias,
 			);