pass entity to section context

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts

@@ -22,8 +22,8 @@ export class UmbSectionContext {
 	public readonly activeTree = this._activeTree.asObservable();
 
 	// TODO: what is the best context to put this in?
-	private _activeTreeItemKey = new ReplaySubject<string | undefined>(1);
-	public readonly activeTreeItemKey = this._activeTreeItemKey.asObservable();
+	private _activeTreeItem = new ReplaySubject<Entity | undefined>(1);
+	public readonly activeTreeItem = this._activeTreeItem.asObservable();
 
 	// TODO: what is the best context to put this in?
 	private _activeView = new ReplaySubject<ManifestSectionView | undefined>(1);
@@ -47,8 +47,8 @@ export class UmbSectionContext {
 		this._activeTree.next(tree);
 	}
 
-	public setActiveTreeItemKey(key: string) {
-		this._activeTreeItemKey.next(key);
+	public setActiveTreeItem(item: Entity) {
+		this._activeTreeItem.next(item);
 	}
 
 	public setActiveView(view: ManifestSectionView) {

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts

@@ -63,7 +63,7 @@ export default class UmbTreeItemActionElement extends UmbLitElement {
 	private _observeActiveTreeItem() {
 		if (!this._sectionContext) return;
 
-		this.observe(this._sectionContext.activeTreeItemKey, (treeItem) => {
+		this.observe(this._sectionContext.activeTreeItem, (treeItem) => {
 			this._activeTreeItem = treeItem;
 		});
 	}

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page-action-list.element.ts

@@ -73,7 +73,7 @@ export class UmbTreeContextMenuPageActionListElement extends UmbLitElement {
 	private _observeActiveTreeItem() {
 		if (!this._sectionContext) return;
 
-		this.observe(this._sectionContext.activeTreeItemKey, (treeItem) => {
+		this.observe(this._sectionContext.activeTreeItem, (treeItem) => {
 			this._activeTreeItem = treeItem || undefined;
 		});
 	}

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts

@@ -18,6 +18,9 @@ export class UmbTreeItem extends UmbLitElement {
 	@property({ type: String })
 	key = '';
 
+	@property({ type: String })
+	parentKey: string | null = null;
+
 	@property({ type: String })
 	label = '';
 
@@ -121,8 +124,8 @@ export class UmbTreeItem extends UmbLitElement {
 	private _observeActiveTreeItem() {
 		if (!this._sectionContext) return;
 
-		this.observe(this._sectionContext?.activeTreeItemKey, (key) => {
-			this._isActive = this.key === key;
+		this.observe(this._sectionContext?.activeTreeItem, (treeItem) => {
+			this._isActive = this.key === treeItem?.key;
 		});
 	}
 
@@ -171,7 +174,15 @@ export class UmbTreeItem extends UmbLitElement {
 		if (!this._treeContext || !this._sectionContext) return;
 
 		this._sectionContext?.setActiveTree(this._treeContext?.tree);
-		this._sectionContext?.setActiveTreeItemKey(this.key);
+
+		this._sectionContext?.setActiveTreeItem({
+			key: this.key,
+			name: this.label,
+			icon: this.icon,
+			type: this.entityType,
+			hasChildren: this.hasChildren,
+			parentKey: this.parentKey,
+		});
 		this._treeContextMenuService?.open({ name: this.label, key: this.key });
 	}
 

src/Umbraco.Web.UI.Client/src/core/models/index.ts

@@ -21,7 +21,7 @@ export interface Entity {
 	icon: string;
 	type: string;
 	hasChildren: boolean;
-	parentKey: string;
+	parentKey: string | null;
 }
 
 export interface UserEntity extends Entity {