V16 RC: Documents show "Not found" when switching between variant and invariant views, and other edge cases (#19425)

* fix: add a catcher to most `asPromise` for stores to prevent cascading errors

* fix: remove conditional instances - they should be able to be undefined

* fix: check for missing store and extract UmbProblemDetails

* fix: only append data if no error

* fix: adds error handling to missing stores and to extract the ProblemDetails object

* revert commit

* fix: ignore errors completely instead of unsetting stores

* revert commit

* chore: cleanup imports

* fix: do not unset store

* stop observation in a proper way

* stop observation of for document-user-permissions

* check for manager twice

* save action

* save action optional

* simplify init for detail repostiory

* fix routes

* adjusting more not found routes

* fix structure manager clean up

---------

Co-authored-by: Niels Lyngsø <[email protected]>

Author: iOvergaard

src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.context.ts

@@ -77,7 +77,10 @@ export class UmbBackofficeContext extends UmbContextBase {
 	}
 
 	public async serverUpgradeCheck() {
-		const version = await this.observe(this.version).asPromise();
+		const version = await this.observe(this.version)
+			.asPromise()
+			.catch(() => null);
+		if (!version) return null;
 		const repository = new UmbSysinfoRepository(this);
 		return repository.serverUpgradeCheck(version);
 	}

src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts

@@ -548,18 +548,27 @@ export abstract class UmbBlockEntryContext<
 	abstract _gotContentType(contentType: UmbContentTypeModel | undefined): void;
 
 	async #observeVariantId() {
-		if (!this._manager) return;
+		if (!this._manager) {
+			this.removeUmbControllerByAlias('observeVariantId');
+			return;
+		}
 		await this.#contentStructurePromise;
 		if (!this.#contentStructure) {
 			throw new Error('No contentStructure found');
 		}
 
+		if (!this._manager) {
+			// The manager maybe got removed while we awaited the promise above.
+			this.removeUmbControllerByAlias('observeVariantId');
+			return;
+		}
+
 		// observe variantId:
 		this.observe(
 			observeMultiple([
 				this._manager.variantId,
-				this.#contentStructure?.ownerContentTypeObservablePart((x) => x?.variesByCulture),
-				this.#contentStructure?.ownerContentTypeObservablePart((x) => x?.variesBySegment),
+				this.#contentStructure.ownerContentTypeObservablePart((x) => x?.variesByCulture),
+				this.#contentStructure.ownerContentTypeObservablePart((x) => x?.variesBySegment),
 			]),
 			([variantId, variesByCulture, variesBySegment]) => {
 				if (!variantId || variesByCulture === undefined || variesBySegment === undefined) return;

src/Umbraco.Web.UI.Client/src/packages/content/content-type/structure/content-type-structure-manager.class.ts

@@ -182,7 +182,7 @@ export class UmbContentTypeStructureManager<
 			return { data: this.getOwnerContentType(), asObservable: () => this.ownerContentType };
 		}
 		await this.#initRepository;
-		this.#clear();
+		this.clear();
 		this.#ownerContentTypeUnique = unique;
 		if (!unique) {
 			this.#initRejection?.(`Content Type structure manager could not load: ${unique}`);
@@ -199,7 +199,7 @@ export class UmbContentTypeStructureManager<
 
 	public async createScaffold(preset?: Partial<T>): Promise<UmbRepositoryResponse<T>> {
 		await this.#initRepository;
-		this.#clear();
+		this.clear();
 
 		const repsonse = await this.#repository!.createScaffold(preset);
 		const { data } = repsonse;
@@ -827,7 +827,7 @@ export class UmbContentTypeStructureManager<
 			.filter(UmbFilterDuplicateStrings);
 	}
 
-	#clear() {
+	public clear() {
 		this.#contentTypeObservers.forEach((observer) => observer.destroy());
 		this.#contentTypeObservers = [];
 		this.#repoManager?.clear();

src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor.element.ts

@@ -227,16 +227,16 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 					this.#currentTabComponent = undefined;
 				},
 			});
+		} else {
+			routes.push({
+				path: `**`,
+				component: async () => (await import('@umbraco-cms/backoffice/router')).UmbRouteNotFoundElement,
+				setup: () => {
+					this.#currentTabComponent = undefined;
+				},
+			});
 		}
 
-		routes.push({
-			path: `**`,
-			component: async () => (await import('@umbraco-cms/backoffice/router')).UmbRouteNotFoundElement,
-			setup: () => {
-				this.#currentTabComponent = undefined;
-			},
-		});
-
 		this._routes = routes;
 
 		// If we have a active tab, then we want to make sure its up to date with latest tab id, as an already active route is not getting its setup method triggered again [NL]

src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/content-detail-workspace-base.ts

@@ -982,6 +982,7 @@ export abstract class UmbContentDetailWorkspaceContextBase<
 
 	override resetState() {
 		super.resetState();
+		this.structure.clear();
 		this.readOnlyGuard.clearRules();
 		this.propertyViewGuard.clearRules();
 		this.propertyWriteGuard.clearRules();

src/Umbraco.Web.UI.Client/src/packages/content/property-type/workspace/property-type-workspace.context.ts

@@ -72,7 +72,11 @@ export class UmbPropertyTypeWorkspaceContext
 			this.#contentTypeContext = context;
 		})
 			.skipHost()
-			.asPromise({ preventTimeout: true });
+			.asPromise({ preventTimeout: true })
+			.catch(() => {
+				// If the context is not available, we can assume that the context is not available.
+				this.#contentTypeContext = undefined;
+			});
 
 		this.routes.setRoutes([
 			{

src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-view.manager.ts

@@ -101,12 +101,12 @@ export class UmbCollectionViewManager extends UmbControllerBase {
 						this.setCurrentView(fallbackView);
 					},
 				});
-			}
 
-			routes.push({
-				path: `**`,
-				component: async () => (await import('@umbraco-cms/backoffice/router')).UmbRouteNotFoundElement,
-			});
+				routes.push({
+					path: `**`,
+					component: async () => (await import('@umbraco-cms/backoffice/router')).UmbRouteNotFoundElement,
+				});
+			}
 		}
 
 		this.#routes.setValue(routes);

src/Umbraco.Web.UI.Client/src/packages/core/repository/detail/detail-repository-base.ts

@@ -33,13 +33,12 @@ export abstract class UmbDetailRepositoryBase<
 		this.detailDataSource = new detailSource(host) as UmbDetailDataSourceType;
 
 		// TODO: ideally no preventTimeouts here.. [NL]
-		this.#init = Promise.all([
-			this.consumeContext(detailStoreContextAlias, (instance) => {
-				if (instance) {
-					this.#detailStore = instance;
-				}
-			}).asPromise({ preventTimeout: true }),
-		]);
+		this.#init = this.consumeContext(detailStoreContextAlias, (instance) => {
+			this.#detailStore = instance;
+		})
+			.asPromise({ preventTimeout: true })
+			// Ignore the error, we can assume that the flow was stopped (asPromise failed), but it does not mean that the consumption was not successful.
+			.catch(() => undefined);
 	}
 
 	/**

src/Umbraco.Web.UI.Client/src/packages/core/repository/item/item-repository-base.ts

@@ -4,6 +4,7 @@ import type { UmbItemRepository } from './item-repository.interface.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbItemStore } from '@umbraco-cms/backoffice/store';
 import type { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import { of } from '@umbraco-cms/backoffice/external/rxjs';
 
 export class UmbItemRepositoryBase<ItemType extends { unique: string }>
 	extends UmbRepositoryBase
@@ -22,10 +23,11 @@ export class UmbItemRepositoryBase<ItemType extends { unique: string }>
 		this.#itemSource = new itemSource(host);
 
 		this._init = this.consumeContext(itemStoreContextAlias, (instance) => {
-			if (instance) {
-				this._itemStore = instance as UmbItemStore<ItemType>;
-			}
-		}).asPromise({ preventTimeout: true });
+			this._itemStore = instance;
+		})
+			.asPromise({ preventTimeout: true })
+			// Ignore the error, we can assume that the flow was stopped (asPromise failed), but it does not mean that the consumption was not successful.
+			.catch(() => undefined);
 	}
 
 	/**
@@ -42,18 +44,19 @@ export class UmbItemRepositoryBase<ItemType extends { unique: string }>
 			return {};
 		}
 
-		const { data, error: _error } = await this.#itemSource.getItems(uniques);
+		const { data, error } = await this.#itemSource.getItems(uniques);
 
 		if (!this._itemStore) {
 			// If store is gone, then we are most likely in a disassembled state.
 			return {};
 		}
-		const error: any = _error;
+
 		if (data) {
-			this._itemStore!.appendItems(data);
+			this._itemStore.appendItems(data);
 		}
 
-		return { data, error, asObservable: () => this._itemStore!.items(uniques) };
+		// TODO: Fix the type of error, it should be UmbApiError, but currently it is any.
+		return { data, error: error as any, asObservable: () => this._itemStore!.items(uniques) };
 	}
 
 	/**
@@ -68,6 +71,12 @@ export class UmbItemRepositoryBase<ItemType extends { unique: string }>
 		} catch {
 			return undefined;
 		}
-		return this._itemStore!.items(uniques);
+
+		if (!this._itemStore) {
+			// If store is gone, then we are most likely in a disassembled state.
+			return of([]);
+		}
+
+		return this._itemStore.items(uniques);
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/core/tree/data/tree-repository-base.ts

@@ -12,6 +12,7 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { UmbProblemDetails } from '@umbraco-cms/backoffice/resources';
+import { of } from '@umbraco-cms/backoffice/external/rxjs';
 
 /**
  * Base class for a tree repository.
@@ -61,10 +62,11 @@ export abstract class UmbTreeRepositoryBase<
 		this._treeSource = new treeSourceConstructor(this);
 
 		this._init = this.consumeContext(treeStoreContextAlias, (instance) => {
-			if (instance) {
-				this._treeStore = instance;
-			}
-		}).asPromise({ preventTimeout: true });
+			this._treeStore = instance;
+		})
+			.asPromise({ preventTimeout: true })
+			// Ignore the error, we can assume that the flow was stopped (asPromise failed), but it does not mean that the consumption was not successful.
+			.catch(() => undefined);
 	}
 
 	/**
@@ -84,16 +86,18 @@ export abstract class UmbTreeRepositoryBase<
 		await this._init;
 
 		const { data, error } = await this._treeSource.getRootItems(args);
+
 		if (!this._treeStore) {
 			// If the tree store is not available, then we most likely are in a destructed setting.
 			return {};
 		}
+
 		if (data) {
-			this._treeStore?.appendItems(data.items);
+			this._treeStore.appendItems(data.items);
 		}
 
-		// TODO: Notice we are casting the error here, is that right?
-		return { data, error: error as unknown as UmbProblemDetails, asObservable: () => this._treeStore!.rootItems };
+		// TODO: Fix the type of error, it should be UmbApiError, but currently it is any.
+		return { data, error: error as any, asObservable: () => this._treeStore!.rootItems };
 	}
 
 	/**
@@ -109,13 +113,19 @@ export abstract class UmbTreeRepositoryBase<
 		if (args.parent.entityType === null) throw new Error('Parent entity type is missing');
 		await this._init;
 
-		const { data, error: _error } = await this._treeSource.getChildrenOf(args);
-		const error: any = _error;
+		const { data, error } = await this._treeSource.getChildrenOf(args);
+
+		if (!this._treeStore) {
+			// If the tree store is not available, then we most likely are in a destructed setting.
+			return {};
+		}
+
 		if (data) {
-			this._treeStore?.appendItems(data.items);
+			this._treeStore.appendItems(data.items);
 		}
 
-		return { data, error, asObservable: () => this._treeStore!.childrenOf(args.parent.unique) };
+		// TODO: Fix the type of error, it should be UmbApiError, but currently it is any.
+		return { data, error: error as any, asObservable: () => this._treeStore!.childrenOf(args.parent.unique) };
 	}
 
 	/**
@@ -128,10 +138,11 @@ export abstract class UmbTreeRepositoryBase<
 		if (args.treeItem.unique === undefined) throw new Error('Descendant unique is missing');
 		await this._init;
 
-		const { data, error: _error } = await this._treeSource.getAncestorsOf(args);
-		const error: any = _error;
+		const { data, error } = await this._treeSource.getAncestorsOf(args);
+
 		// TODO: implement observable for ancestor items in the store
-		return { data, error };
+		// TODO: Fix the type of error, it should be UmbApiError, but currently it is any.
+		return { data, error: error as any };
 	}
 
 	/**
@@ -141,7 +152,13 @@ export abstract class UmbTreeRepositoryBase<
 	 */
 	async rootTreeItems() {
 		await this._init;
-		return this._treeStore!.rootItems;
+
+		if (!this._treeStore) {
+			// If the tree store is not available, then we most likely are in a destructed setting.
+			return of([]);
+		}
+
+		return this._treeStore.rootItems;
 	}
 
 	/**
@@ -153,6 +170,12 @@ export abstract class UmbTreeRepositoryBase<
 	async treeItemsOf(parentUnique: string | null) {
 		if (parentUnique === undefined) throw new Error('Parent unique is missing');
 		await this._init;
-		return this._treeStore!.childrenOf(parentUnique);
+
+		if (!this._treeStore) {
+			// If the tree store is not available, then we most likely are in a destructed setting.
+			return of([]);
+		}
+
+		return this._treeStore.childrenOf(parentUnique);
 	}
 }