handle root requests in tree context

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

@@ -223,7 +223,8 @@ export class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemModelBase>
 	}
 
 	#onReloadRequest = (event: UmbEntityActionEvent) => {
-		if (this.unique === undefined) return;
+		// Only handle children request here. Root request is handled by the tree context
+		if (!this.unique) return;
 		if (event.getUnique() !== this.unique) return;
 		if (event.getEntityType() !== this.entityType) return;
 		this.requestChildren();

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts

@@ -1,5 +1,7 @@
+import { UmbReloadTreeItemChildrenRequestEntityActionEvent } from './reload-tree-item-children/index.js';
 import type { UmbTreeItemModelBase } from './types.js';
 import type { UmbTreeRepository } from './tree-repository.interface.js';
+import { type UmbActionEventContext, UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
 import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
 import type { UmbPagedData } from '@umbraco-cms/backoffice/repository';
 import {
@@ -12,6 +14,8 @@ import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controlle
 import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import type { ProblemDetails } from '@umbraco-cms/backoffice/backend-api';
 import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
+import type { UmbEntityActionEvent } from '@umbraco-cms/backoffice/entity-action';
+import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 
 // TODO: update interface
 export interface UmbTreeContext<TreeItemType extends UmbTreeItemModelBase> extends UmbBaseController {
@@ -27,14 +31,16 @@ export class UmbTreeContextBase<TreeItemType extends UmbTreeItemModelBase>
 	extends UmbBaseController
 	implements UmbTreeContext<TreeItemType>
 {
+	#treeRoot = new UmbObjectState<TreeItemType | undefined>(undefined);
+	treeRoot = this.#treeRoot.asObservable();
+
 	public repository?: UmbTreeRepository<TreeItemType>;
 	public selectableFilter?: (item: TreeItemType) => boolean = () => true;
-
 	public filter?: (item: TreeItemType) => boolean = () => true;
-
 	public readonly selection = new UmbSelectionManager(this._host);
 
 	#treeAlias?: string;
+	#actionEventContext?: UmbActionEventContext;
 
 	#initResolver?: () => void;
 	#initialized = false;
@@ -46,6 +52,20 @@ export class UmbTreeContextBase<TreeItemType extends UmbTreeItemModelBase>
 	constructor(host: UmbControllerHostElement) {
 		super(host);
 		this.provideContext('umbTreeContext', this);
+
+		this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (instance) => {
+			this.#actionEventContext = instance;
+			this.#actionEventContext.removeEventListener(
+				UmbReloadTreeItemChildrenRequestEntityActionEvent.TYPE,
+				this.#onReloadRequest as EventListener,
+			);
+			this.#actionEventContext.addEventListener(
+				UmbReloadTreeItemChildrenRequestEntityActionEvent.TYPE,
+				this.#onReloadRequest as EventListener,
+			);
+		});
+
+		this.requestTreeRoot();
 	}
 
 	// TODO: find a generic way to do this
@@ -69,7 +89,13 @@ export class UmbTreeContextBase<TreeItemType extends UmbTreeItemModelBase>
 
 	public async requestTreeRoot() {
 		await this.#init;
-		return this.repository!.requestTreeRoot();
+		const { data } = await this.repository!.requestTreeRoot();
+
+		if (data) {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			this.#treeRoot.setValue(data);
+		}
 	}
 
 	public async requestRootItems() {
@@ -121,4 +147,23 @@ export class UmbTreeContextBase<TreeItemType extends UmbTreeItemModelBase>
 			},
 		);
 	}
+
+	#onReloadRequest = (event: UmbEntityActionEvent) => {
+		// Only handle root request here. Items are handled by the tree item context
+		const treeRoot = this.#treeRoot.getValue();
+		if (treeRoot === undefined) return;
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		if (event.getUnique() !== treeRoot.unique) return;
+		if (event.getEntityType() !== treeRoot.entityType) return;
+		this.requestRootItems();
+	};
+
+	destroy(): void {
+		this.#actionEventContext?.removeEventListener(
+			UmbReloadTreeItemChildrenRequestEntityActionEvent.TYPE,
+			this.#onReloadRequest as EventListener,
+		);
+		super.destroy();
+	}
 }

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts

@@ -79,19 +79,21 @@ export class UmbTreeElement extends UmbLitElement {
 	private _treeRoot?: UmbTreeItemModelBase;
 
 	#treeContext = new UmbTreeContextBase<UmbTreeItemModelBase>(this);
-
 	#rootItemsObserver?: UmbObserverController<Array<UmbTreeItemModelBase>>;
 
 	constructor() {
 		super();
-		this.#requestTreeRoot();
+		this.#observeTreeRoot();
 	}
 
-	async #requestTreeRoot() {
-		if (!this.#treeContext?.requestTreeRoot) throw new Error('Tree does not support root');
-
-		const { data } = await this.#treeContext.requestTreeRoot();
-		this._treeRoot = data;
+	#observeTreeRoot() {
+		this.observe(
+			this.#treeContext.treeRoot,
+			(treeRoot) => {
+				this._treeRoot = treeRoot;
+			},
+			'umbTreeRootObserver',
+		);
 	}
 
 	async #observeRootItems() {