From 258a624073aae8cef3f8187b6ea3d217d1f3cf40 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 3 Feb 2023 15:02:58 +0100
Subject: [PATCH] wip headline

---
 .../section-sidebar-context-menu.context.ts   | 25 --------------
 .../section-sidebar-context-menu.element.ts   | 17 ++++++----
 .../section-sidebar.context.ts                | 33 ++++++++++---------
 .../components/tree/tree-item.element.ts      |  2 +-
 4 files changed, 29 insertions(+), 48 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.context.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.context.ts
deleted file mode 100644
index fbb200ceac..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.context.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { UmbContextToken } from '@umbraco-cms/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/controller';
-import { BasicState } from 'libs/observable-api/basic-state';
-
-export class UmbSectionSidebarContextMenuController {
-	#host: UmbControllerHostInterface;
-	#isOpen = new BasicState<boolean>(false);
-	isOpen = this.#isOpen.asObservable();
-
-	constructor(host: UmbControllerHostInterface) {
-		this.#host = host;
-	}
-
-	open() {
-		this.#isOpen.next(true);
-	}
-
-	close() {
-		this.#isOpen.next(false);
-	}
-}
-
-// TODO: that was a long name
-export const UMB_SECTION_SIDEBAR_CONTEXT_MENU_CONTROLLER_CONTEXT_TOKEN =
-	new UmbContextToken<UmbSectionSidebarContextMenuController>(UmbSectionSidebarContextMenuController.name);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
index 238a5a2274..a8b5ed9457 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
@@ -63,17 +63,19 @@ export class UmbSectionSidebarContextMenu extends UmbLitElement {
 	@state()
 	private _unique?: string;
 
-	connectedCallback(): void {
-		super.connectedCallback();
+	@state()
+	private _headline?: string;
+
+	constructor() {
+		super();
 
 		this.consumeContext(UMB_SECTION_SIDEBAR_CONTEXT_TOKEN, (instance) => {
 			this.#sectionSidebarContext = instance;
 
-			this.observe(this.#sectionSidebarContext.contextMenuIsOpen, (isOpen) => {
-				this._isOpen = isOpen;
-				this._entityType = this.#sectionSidebarContext?.getEntityType();
-				this._unique = this.#sectionSidebarContext?.getUnique();
-			});
+			this.observe(this.#sectionSidebarContext.contextMenuIsOpen, (value) => (this._isOpen = value));
+			this.observe(this.#sectionSidebarContext.unique, (value) => (this._unique = value));
+			this.observe(this.#sectionSidebarContext.entityType, (value) => (this._entityType = value));
+			this.observe(this.#sectionSidebarContext.headline, (value) => (this._headline = value));
 		});
 	}
 
@@ -101,6 +103,7 @@ export class UmbSectionSidebarContextMenu extends UmbLitElement {
 	#renderModal() {
 		return this._isOpen
 			? html`<div id="action-modal">
+					<h3>${this._headline}</h3>
 					<umb-entity-action-list
 						entity-type=${ifDefined(this._entityType)}
 						unique=${ifDefined(this._unique)}></umb-entity-action-list>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.context.ts
index a07c257330..d869159a1e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.context.ts
@@ -1,5 +1,6 @@
 import { UmbContextToken } from '@umbraco-cms/context-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { StringState } from '@umbraco-cms/observable-api';
 import { BasicState } from 'libs/observable-api/basic-state';
 
 export class UmbSectionSidebarContext {
@@ -7,35 +8,37 @@ export class UmbSectionSidebarContext {
 	#contextMenuIsOpen = new BasicState<boolean>(false);
 	contextMenuIsOpen = this.#contextMenuIsOpen.asObservable();
 
-	#entityType?: string;
-	#unique?: string;
+	#entityType = new StringState<undefined>(undefined);
+	entityType = this.#entityType.asObservable();
 
-	getUnique() {
-		return this.#unique;
-	}
+	#unique = new StringState<undefined>(undefined);
+	unique = this.#unique.asObservable();
 
-	getEntityType() {
-		return this.#entityType;
-	}
+	#headline = new StringState<undefined>(undefined);
+	headline = this.#headline.asObservable();
 
 	constructor(host: UmbControllerHostInterface) {
 		this.#host = host;
 	}
 
-	toggleContextMenu(entityType: string, unique: string) {
-		this.#unique === unique ? this.closeContextMenu() : this.openContextMenu(entityType, unique);
+	toggleContextMenu(entityType: string, unique: string, headline: string) {
+		this.#unique.getValue() === unique ? this.closeContextMenu() : this.openContextMenu(entityType, unique, headline);
 	}
 
-	openContextMenu(entityType: string, unique: string) {
-		this.#entityType = entityType;
-		this.#unique = unique;
+	// TODO: we wont get notified about tree item name changes because we don't have a subscription
+	// we need to figure out how we best can handle this when we only know the entity and unique id
+	openContextMenu(entityType: string, unique: string, headline: string) {
+		this.#entityType.next(entityType);
+		this.#unique.next(unique);
+		this.#headline.next(headline);
 		this.#contextMenuIsOpen.next(true);
 	}
 
 	closeContextMenu() {
 		this.#contextMenuIsOpen.next(false);
-		this.#entityType = undefined;
-		this.#unique = undefined;
+		this.#entityType.next(undefined);
+		this.#unique.next(undefined);
+		this.#headline.next(undefined);
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts
index f80cda5261..dbfdd0aad1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts
@@ -208,7 +208,7 @@ export class UmbTreeItem extends UmbLitElement {
 			hasChildren: this.hasChildren,
 			parentKey: this.parentKey,
 		});
-		this._sectionSidebarContext?.toggleContextMenu(this.entityType, this.key);
+		this._sectionSidebarContext?.toggleContextMenu(this.entityType, this.key, this.label);
 	}
 
 	render() {