initial work of entity-actions-bundle

src/Umbraco.Web.UI.Client/libs/section/sidebar/section-sidebar.context.ts

@@ -20,14 +20,13 @@ export class UmbSectionSidebarContext {
 		this.#host = host;
 	}
 
-	toggleContextMenu(entityType: string, unique: string | null | undefined, headline: string) {
-		console.log('open for ', entityType, unique, headline);
+	toggleContextMenu(entityType: string, unique: string | null | undefined, headline: string | undefined) {
 		this.openContextMenu(entityType, unique, headline);
 	}
 
 	// 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 | null | undefined, headline: string) {
+	openContextMenu(entityType: string, unique: string | null | undefined, headline: string | undefined) {
 		this.#entityType.next(entityType);
 		this.#unique.next(unique);
 		this.#headline.next(headline);

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

@@ -0,0 +1,80 @@
+import { css, html, nothing } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property, state } from 'lit/decorators.js';
+import { map } from 'rxjs';
+import { UmbSectionSidebarContext, UMB_SECTION_SIDEBAR_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/section';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+
+@customElement('umb-entity-actions-bundle')
+export class UmbEntityActionsBundleElement extends UmbLitElement {
+	private _entityType?: string;
+	@property({ type: String, attribute: 'entity-type' })
+	public get entityType() {
+		return this._entityType;
+	}
+	public set entityType(value: string | undefined) {
+		const oldValue = this._entityType;
+		if (oldValue === value) return;
+
+		this._entityType = value;
+		this.#observeEntityActions();
+		this.requestUpdate('entityType', oldValue);
+	}
+
+	@property({ type: String })
+	public headline?: string;
+
+	@state()
+	private _hasActions = false;
+
+	#sectionSidebarContext?: UmbSectionSidebarContext;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_SECTION_SIDEBAR_CONTEXT_TOKEN, (sectionContext) => {
+			this.#sectionSidebarContext = sectionContext;
+		});
+	}
+
+	#observeEntityActions() {
+		this.observe(
+			umbExtensionsRegistry
+				.extensionsOfType('entityAction')
+				.pipe(map((actions) => actions.filter((action) => action.conditions.entityTypes.includes(this.entityType!)))),
+			(actions) => {
+				this._hasActions = actions.length > 0;
+				console.log('umb-entity-actions-bundle — observe', this._entityType, this._hasActions);
+			},
+			'observeEntityAction'
+		);
+	}
+
+	private _openActions() {
+		if (!this.entityType) throw new Error('Entity type is not defined');
+		this.#sectionSidebarContext?.toggleContextMenu(this.entityType, undefined, this.headline);
+	}
+
+	render() {
+		return html`
+			${this._hasActions
+				? html`
+						<uui-action-bar slot="actions">
+							<uui-button @click=${this._openActions} label="Open actions menu">
+								<uui-symbol-more></uui-symbol-more>
+							</uui-button>
+						</uui-action-bar>
+				  `
+				: nothing}
+		`;
+	}
+
+	static styles = [UUITextStyles, css``];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-entity-actions-bundle': UmbEntityActionsBundleElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts

@@ -18,6 +18,7 @@ import './table/table.element';
 
 import './entity-action/entity-action-list.element';
 import './entity-action/entity-action.element';
+import './entity-actions-bundle/entity-actions-bundle.element';
 
 import './entity-bulk-action/entity-bulk-action.element';
 

src/Umbraco.Web.UI.Client/src/packages/core/components/menu/menu-item-base/menu-item-base.element.ts

@@ -1,29 +1,14 @@
-import { css, html, nothing } from 'lit';
+import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { map } from 'rxjs';
-import {
-	UmbSectionSidebarContext,
-	UMB_SECTION_SIDEBAR_CONTEXT_TOKEN,
-	UmbSectionContext,
-	UMB_SECTION_CONTEXT_TOKEN,
-} from '@umbraco-cms/backoffice/section';
+import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/section';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { ManifestEntityAction, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 
 @customElement('umb-menu-item-base')
 export class UmbMenuItemBaseElement extends UmbLitElement {
-	private _entityType?: string;
 	@property({ type: String, attribute: 'entity-type' })
-	public get entityType() {
-		return this._entityType;
-	}
-	public set entityType(value: string | undefined) {
-		this._entityType = value;
-		this.#observeEntityActions();
-	}
+	public entityType?: string;
 
 	@property({ type: String, attribute: 'icon-name' })
 	public iconName = '';
@@ -37,12 +22,7 @@ export class UmbMenuItemBaseElement extends UmbLitElement {
 	@state()
 	private _href?: string;
 
-	@state()
-	private _hasActions = false;
-
 	#sectionContext?: UmbSectionContext;
-	#sectionSidebarContext?: UmbSectionSidebarContext;
-	#actionObserver?: UmbObserverController<Array<ManifestEntityAction>>;
 
 	constructor() {
 		super();
@@ -51,24 +31,6 @@ export class UmbMenuItemBaseElement extends UmbLitElement {
 			this.#sectionContext = sectionContext;
 			this._observeSection();
 		});
-
-		this.consumeContext(UMB_SECTION_SIDEBAR_CONTEXT_TOKEN, (sectionContext) => {
-			this.#sectionSidebarContext = sectionContext;
-		});
-	}
-
-	#observeEntityActions() {
-		if (this.#actionObserver) this.#actionObserver.destroy();
-
-		this.#actionObserver = this.observe(
-			umbExtensionsRegistry
-				.extensionsOfType('entityAction')
-				.pipe(map((actions) => actions.filter((action) => action.conditions.entityTypes.includes(this.entityType!)))),
-			(actions) => {
-				this._hasActions = actions.length > 0;
-			},
-			'entityAction'
-		);
 	}
 
 	private _observeSection() {
@@ -86,13 +48,8 @@ export class UmbMenuItemBaseElement extends UmbLitElement {
 		return `section/${sectionPathname}/workspace/${this.entityType}`;
 	}
 
-	private _openActions() {
-		if (!this.entityType) throw new Error('Entity type is not defined');
-		this.#sectionSidebarContext?.toggleContextMenu(this.entityType, undefined, this.label);
-	}
-
 	render() {
-		return html` <uui-menu-item href="${ifDefined(this._href)}" label=${this.label} ?has-children=${this.hasChildren}
+		return html`<uui-menu-item href="${ifDefined(this._href)}" label=${this.label} ?has-children=${this.hasChildren}
 			>${this.#renderIcon()}${this.#renderActions()}<slot></slot
 		></uui-menu-item>`;
 	}
@@ -102,17 +59,8 @@ export class UmbMenuItemBaseElement extends UmbLitElement {
 	}
 
 	#renderActions() {
-		return html`
-			${this._hasActions
-				? html`
-						<uui-action-bar slot="actions">
-							<uui-button @click=${this._openActions} label="Open actions menu">
-								<uui-symbol-more></uui-symbol-more>
-							</uui-button>
-						</uui-action-bar>
-				  `
-				: nothing}
-		`;
+		return html`<umb-entity-actions-bundle .entityType=${this.entityType} .headline=${this.label}>
+		</umb-entity-actions-bundle>`;
 	}
 
 	static styles = [UUITextStyles, css``];

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/manifests.ts

@@ -1,4 +1,5 @@
 import { DOCUMENT_REPOSITORY_ALIAS } from '../repository/manifests';
+import { DOCUMENT_ENTITY_TYPE, DOCUMENT_ROOT_ENTITY_TYPE } from '..';
 import { UmbCreateDocumentEntityAction } from './create/create.action';
 import { UmbPublishDocumentEntityAction } from './publish.action';
 import { UmbDocumentCultureAndHostnamesEntityAction } from './culture-and-hostnames.action';
@@ -15,8 +16,6 @@ import {
 } from '@umbraco-cms/backoffice/entity-action';
 import { ManifestEntityAction, ManifestModal } from '@umbraco-cms/backoffice/extension-registry';
 
-const entityType = 'document';
-
 const entityActions: Array<ManifestEntityAction> = [
 	{
 		type: 'entityAction',
@@ -30,7 +29,7 @@ const entityActions: Array<ManifestEntityAction> = [
 			api: UmbCreateDocumentEntityAction,
 		},
 		conditions: {
-			entityTypes: [entityType],
+			entityTypes: [DOCUMENT_ROOT_ENTITY_TYPE, DOCUMENT_ENTITY_TYPE],
 		},
 	},
 	{
@@ -45,7 +44,7 @@ const entityActions: Array<ManifestEntityAction> = [
 			api: UmbTrashEntityAction,
 		},
 		conditions: {
-			entityTypes: [entityType],
+			entityTypes: [DOCUMENT_ENTITY_TYPE],
 		},
 	},
 	{
@@ -60,7 +59,7 @@ const entityActions: Array<ManifestEntityAction> = [
 			api: UmbCreateDocumentBlueprintEntityAction,
 		},
 		conditions: {
-			entityTypes: [entityType],
+			entityTypes: [DOCUMENT_ENTITY_TYPE],
 		},
 	},
 	{
@@ -75,7 +74,7 @@ const entityActions: Array<ManifestEntityAction> = [
 			api: UmbMoveEntityAction,
 		},
 		conditions: {
-			entityTypes: [entityType],
+			entityTypes: [DOCUMENT_ENTITY_TYPE],
 		},
 	},
 	{
@@ -90,7 +89,7 @@ const entityActions: Array<ManifestEntityAction> = [
 			api: UmbCopyEntityAction,
 		},
 		conditions: {
-			entityTypes: [entityType],
+			entityTypes: [DOCUMENT_ENTITY_TYPE],
 		},
 	},
 	{
@@ -105,7 +104,7 @@ const entityActions: Array<ManifestEntityAction> = [
 			api: UmbSortChildrenOfEntityAction,
 		},
 		conditions: {
-			entityTypes: [entityType],
+			entityTypes: [DOCUMENT_ROOT_ENTITY_TYPE, DOCUMENT_ENTITY_TYPE],
 		},
 	},
 	{
@@ -120,7 +119,7 @@ const entityActions: Array<ManifestEntityAction> = [
 			api: UmbDocumentCultureAndHostnamesEntityAction,
 		},
 		conditions: {
-			entityTypes: [entityType],
+			entityTypes: [DOCUMENT_ENTITY_TYPE],
 		},
 	},
 	{
@@ -134,7 +133,7 @@ const entityActions: Array<ManifestEntityAction> = [
 			api: UmbDocumentPermissionsEntityAction,
 		},
 		conditions: {
-			entityTypes: [entityType],
+			entityTypes: [DOCUMENT_ENTITY_TYPE],
 		},
 	},
 	{
@@ -148,7 +147,7 @@ const entityActions: Array<ManifestEntityAction> = [
 			api: UmbDocumentPublicAccessEntityAction,
 		},
 		conditions: {
-			entityTypes: [entityType],
+			entityTypes: [DOCUMENT_ENTITY_TYPE],
 		},
 	},
 	{
@@ -162,7 +161,7 @@ const entityActions: Array<ManifestEntityAction> = [
 			api: UmbPublishDocumentEntityAction,
 		},
 		conditions: {
-			entityTypes: [entityType],
+			entityTypes: [DOCUMENT_ENTITY_TYPE],
 		},
 	},
 	{
@@ -176,7 +175,7 @@ const entityActions: Array<ManifestEntityAction> = [
 			api: UmbUnpublishDocumentEntityAction,
 		},
 		conditions: {
-			entityTypes: [entityType],
+			entityTypes: [DOCUMENT_ENTITY_TYPE],
 		},
 	},
 	{
@@ -190,7 +189,7 @@ const entityActions: Array<ManifestEntityAction> = [
 			api: UmbRollbackDocumentEntityAction,
 		},
 		conditions: {
-			entityTypes: [entityType],
+			entityTypes: [DOCUMENT_ENTITY_TYPE],
 		},
 	},
 ];

src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts

@@ -0,0 +1,4 @@
+import './components';
+
+export const DOCUMENT_ROOT_ENTITY_TYPE = 'document-root';
+export const DOCUMENT_ENTITY_TYPE = 'document';

src/Umbraco.Web.UI.Client/src/packages/documents/index.ts

@@ -6,8 +6,8 @@ import { manifests as documentTypeManifests } from './document-types/manifests';
 import { manifests as documentManifests } from './documents/manifests';
 import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
 
-import './document-types/components';
-import './documents/components';
+import './document-types';
+import './documents';
 
 export const manifests = [
 	...dashboardManifests,