Open entity actions menu as pop up instead of modal (#19185)

* Open entity actions menu as pop up instead of modal

* Update entity-actions-bundle.element.ts

* Update entity-actions-bundle.element.ts

* ensure no indent for the menu items of the entity actions menu

* add scroll container

---------

Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>

src/Umbraco.Web.UI.Client/src/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.ts

@@ -1,9 +1,7 @@
 import { UmbEntityContext } from '../../entity/entity.context.js';
 import type { UmbEntityAction, ManifestEntityActionDefaultKind } from '@umbraco-cms/backoffice/entity-action';
 import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
-import { html, nothing, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbSectionSidebarContext } from '@umbraco-cms/backoffice/section';
-import { UMB_SECTION_SIDEBAR_CONTEXT } from '@umbraco-cms/backoffice/section';
+import { html, nothing, customElement, property, state, ifDefined, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbExtensionsManifestInitializer, createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
@@ -34,19 +32,9 @@ export class UmbEntityActionsBundleElement extends UmbLitElement {
 	@state()
 	_dropdownIsOpen = false;
 
-	#sectionSidebarContext?: UmbSectionSidebarContext;
-
 	// TODO: provide the entity context on a higher level, like the root element of this entity, tree-item/workspace/... [NL]
 	#entityContext = new UmbEntityContext(this);
 
-	constructor() {
-		super();
-
-		this.consumeContext(UMB_SECTION_SIDEBAR_CONTEXT, (sectionContext) => {
-			this.#sectionSidebarContext = sectionContext;
-		});
-	}
-
 	protected override updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		if (_changedProperties.has('entityType') && _changedProperties.has('unique')) {
 			this.#entityContext.setEntityType(this.entityType);
@@ -80,24 +68,7 @@ export class UmbEntityActionsBundleElement extends UmbLitElement {
 		this._firstActionHref = await this._firstActionApi?.getHref();
 	}
 
-	#openContextMenu() {
-		if (!this.entityType) throw new Error('Entity type is not defined');
-		if (this.unique === undefined) throw new Error('Unique is not defined');
-
-		if (this.#sectionSidebarContext) {
-			this.#sectionSidebarContext.toggleContextMenu(this, {
-				entityType: this.entityType,
-				unique: this.unique,
-				headline: this.label,
-			});
-		} else {
-			this._dropdownIsOpen = !this._dropdownIsOpen;
-		}
-	}
-
 	async #onFirstActionClick(event: PointerEvent) {
-		this.#sectionSidebarContext?.closeContextMenu();
-
 		// skip if href is defined
 		if (this._firstActionHref) {
 			return;
@@ -123,19 +94,15 @@ export class UmbEntityActionsBundleElement extends UmbLitElement {
 	#renderMore() {
 		if (this._numberOfActions === 1) return nothing;
 
-		if (this.#sectionSidebarContext) {
-			return html`<uui-button @click=${this.#openContextMenu} label="Open actions menu">
-				<uui-symbol-more></uui-symbol-more>
-			</uui-button>`;
-		}
-
 		return html`
-			<umb-dropdown .open=${this._dropdownIsOpen} @click=${this.#onDropdownClick} compact hide-expand>
-				<uui-symbol-more slot="label"></uui-symbol-more>
-				<umb-entity-action-list
-					@action-executed=${this.#onActionExecuted}
-					.entityType=${this.entityType}
-					.unique=${this.unique}></umb-entity-action-list>
+			<umb-dropdown id="action-modal" .open=${this._dropdownIsOpen} @click=${this.#onDropdownClick} compact hide-expand>
+				<uui-symbol-more slot="label" label="Open actions menu"></uui-symbol-more>
+				<uui-scroll-container>
+					<umb-entity-action-list
+						@action-executed=${this.#onActionExecuted}
+						.entityType=${this.entityType}
+						.unique=${this.unique}></umb-entity-action-list>
+				</uui-scroll-container>
 			</umb-dropdown>
 		`;
 	}
@@ -149,6 +116,14 @@ export class UmbEntityActionsBundleElement extends UmbLitElement {
 			<uui-icon name=${ifDefined(this._firstActionManifest?.meta.icon)}></uui-icon>
 		</uui-button>`;
 	}
+
+	static override styles = [
+		css`
+			uui-scroll-container {
+				max-height: 700px;
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action-list.element.ts

@@ -90,6 +90,7 @@ export class UmbEntityActionListElement extends UmbLitElement {
 	static override styles = [
 		css`
 			:host {
+				--uui-menu-item-indent: 0;
 				--uui-menu-item-flat-structure: 1;
 			}
 		`,