actions: actions are now seperate elements

src/Umbraco.Web.UI.Client/src/backoffice/tree/actions-modal.element.ts

@@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { UmbActionService } from './actions.service';
 import { UmbContextConsumerMixin } from '../../core/context';
 import type { ManifestEntityAction } from '../../core/models';
+import './shared/tree-action.element';
 
 @customElement('umb-actions-modal')
 export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
@@ -22,19 +23,6 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
 			#title > * {
 				margin: 0;
 			}
-
-			.action {
-				display: flex;
-				padding: var(--uui-size-2) var(--uui-size-4);
-				border-bottom: 1px solid var(--uui-color-divider);
-				cursor: pointer;
-				align-items: center;
-				gap: var(--uui-size-3);
-			}
-			.action:hover {
-				background-color: var(--uui-color-surface-emphasis);
-				color: var(--uui-color-interactive-emphasis);
-			}
 		`,
 	];
 
@@ -51,7 +39,7 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
 	@property()
 	name = '';
 
-	private _actionList: ManifestEntityAction[] = [
+	private _actionList: Array<ManifestEntityAction & { loader?: () => Promise<object | HTMLElement> }> = [
 		{
 			name: 'create',
 			alias: 'action.create',
@@ -60,16 +48,7 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
 				icon: 'add',
 				weight: 10,
 			},
-			type: 'entityAction',
+			loader: () => import('./actions/tree-action-create.element'),
-		},
-		{
-			name: 'rename',
-			alias: 'action.rename',
-			meta: {
-				label: 'Rename',
-				icon: 'edit',
-				weight: 20,
-			},
 			type: 'entityAction',
 		},
 		{
@@ -78,8 +57,9 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
 			meta: {
 				label: 'Delete',
 				icon: 'delete',
-				weight: 30,
+				weight: 20,
 			},
+			loader: () => import('./actions/tree-action-delete.element'),
 			type: 'entityAction',
 		},
 		{
@@ -88,8 +68,9 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
 			meta: {
 				label: 'Reload',
 				icon: 'sync',
-				weight: 40,
+				weight: 30,
 			},
+			loader: () => import('./actions/tree-action-reload.element'),
 			type: 'entityAction',
 		},
 	];
@@ -98,12 +79,7 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
 		return this._actionList
 			.sort((a, b) => a.meta.weight - b.meta.weight)
 			.map((action) => {
-				return html`
+				return html`<umb-tree-action .treeAction=${action}></umb-tree-action> `;
-					<div class="action" @keydown=${() => ''} @click=${() => this._actionService?.execute(action)}>
-						<uui-icon .name=${action.meta.icon}></uui-icon>
-						${action.meta.label}
-					</div>
-				`;
 			});
 	}
 

src/Umbraco.Web.UI.Client/src/backoffice/tree/actions.service.ts

@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbContextProviderMixin } from '../../core/context';
-import { ManifestEntityAction } from '../../core/models';
+import type { ManifestEntityAction } from '../../core/models';
 import './actions-modal.element';
 
 @customElement('umb-action-service')

src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-create.element.ts

@@ -0,0 +1,29 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbContextConsumerMixin } from '../../../core/context';
+import type { ManifestEntityAction } from '../../../core/models';
+
+@customElement('umb-tree-action-create')
+export default class UmbTreeActionCreateElement extends UmbContextConsumerMixin(LitElement) {
+	static styles = [UUITextStyles, css``];
+
+	@property({ attribute: false })
+	public treeAction?: ManifestEntityAction;
+
+	private _handleLabelClick() {
+		console.log(this.treeAction, 'label clicked');
+	}
+
+	render() {
+		return html` <uui-menu-item label=${this.treeAction?.meta.label ?? ''} @click-label="${this._handleLabelClick}">
+			<uui-icon slot="icon" name=${this.treeAction?.meta.icon ?? ''}></uui-icon>
+		</uui-menu-item>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-tree-action-create': UmbTreeActionCreateElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-delete.element.ts

@@ -0,0 +1,29 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbContextConsumerMixin } from '../../../core/context';
+import type { ManifestEntityAction } from '../../../core/models';
+
+@customElement('umb-tree-action-delete')
+export default class UmbTreeActionDeleteElement extends UmbContextConsumerMixin(LitElement) {
+	static styles = [UUITextStyles, css``];
+
+	@property({ attribute: false })
+	public treeAction?: ManifestEntityAction;
+
+	private _handleLabelClick() {
+		console.log(this.treeAction, 'label clicked');
+	}
+
+	render() {
+		return html` <uui-menu-item label=${this.treeAction?.meta.label ?? ''} @click-label="${this._handleLabelClick}">
+			<uui-icon slot="icon" name=${this.treeAction?.meta.icon ?? ''}></uui-icon>
+		</uui-menu-item>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-tree-action-delete': UmbTreeActionDeleteElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-reload.element.ts

@@ -0,0 +1,29 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbContextConsumerMixin } from '../../../core/context';
+import type { ManifestEntityAction } from '../../../core/models';
+
+@customElement('umb-tree-action-reload')
+export default class UmbTreeActionReloadElement extends UmbContextConsumerMixin(LitElement) {
+	static styles = [UUITextStyles, css``];
+
+	@property({ attribute: false })
+	public treeAction?: ManifestEntityAction;
+
+	private _handleLabelClick() {
+		console.log(this.treeAction, 'label clicked');
+	}
+
+	render() {
+		return html` <uui-menu-item label=${this.treeAction?.meta.label ?? ''} @click-label="${this._handleLabelClick}">
+			<uui-icon slot="icon" name=${this.treeAction?.meta.icon ?? ''}></uui-icon>
+		</uui-menu-item>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-tree-action-reload': UmbTreeActionReloadElement;
+	}
+}

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

@@ -0,0 +1,47 @@
+import { UUITextStyles } from '@umbraco-ui/uui';
+import { CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+import { createExtensionElement } from '../../../core/extension';
+import type { ManifestEntityAction } from '../../../core/models';
+
+@customElement('umb-tree-action')
+export class UmbTreeActionElement extends LitElement {
+	static styles: CSSResultGroup = [UUITextStyles];
+
+	private _treeAction?: ManifestEntityAction;
+	@property({ type: Object })
+	public get treeAction(): ManifestEntityAction | undefined {
+		return this._treeAction;
+	}
+	public set treeAction(value: ManifestEntityAction | undefined) {
+		this._treeAction = value;
+		this._createElement();
+	}
+
+	@state()
+	private _element?: UmbTreeActionElement;
+
+	private async _createElement() {
+		if (!this.treeAction) return;
+
+		try {
+			this._element = (await createExtensionElement(this.treeAction)) as UmbTreeActionElement | undefined;
+			if (!this._element) return;
+
+			this._element.treeAction = this.treeAction;
+		} catch (error) {
+			// TODO: loading JS failed so we should do some nice UI. (This does only happen if extension has a js prop, otherwise we concluded that no source was needed resolved the load.)
+		}
+	}
+
+	render() {
+		return html`${this._element}`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-tree-action': UmbTreeActionElement;
+	}
+}