implement label for entity actions bundle

src/Umbraco.Web.UI.Client/src/assets/lang/da.ts

@@ -62,8 +62,9 @@ export default {
 		unlock: 'Lås op',
 		createblueprint: 'Opret indholdsskabelon',
 		resendInvite: 'Gensend Invitation',
-		editContent: 'Edit content',
-		chooseWhereToImport: 'Choose where to import',
+		editContent: 'Rediger indhold',
+		chooseWhereToImport: 'Vælg hvor du vil importere',
+		viewActionsFor: (name) => (name ? `Se handlinger for '${name}'` : 'Se handlinger'),
 	},
 	actionCategories: {
 		content: 'Indhold',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -72,6 +72,7 @@ export default {
 		wasCopiedTo: 'was copied to',
 		wasDeleted: 'was deleted',
 		wasMovedTo: 'was moved to',
+		viewActionsFor: (name) => (name ? `View actions for '${name}'` : 'View actions'),
 	},
 	actionCategories: {
 		content: 'Content',

src/Umbraco.Web.UI.Client/src/packages/clipboard/clipboard-entry/picker/clipboard-entry-picker.element.ts

@@ -150,7 +150,7 @@ export class UmbClipboardEntryPickerElement extends UmbLitElement {
 				slot="actions"
 				.entityType=${item.entityType}
 				.unique=${item.unique}
-				.label=${item.name}>
+				.label=${this.localize.term('actions_viewActionsFor', [item.name])}>
 			</umb-entity-actions-bundle>
 		`;
 	}

src/Umbraco.Web.UI.Client/src/packages/core/components/dropdown/dropdown.element.ts

@@ -18,7 +18,7 @@ export class UmbDropdownElement extends UmbLitElement {
 	open = false;
 
 	@property()
-	label = '';
+	label?: string;
 
 	@property()
 	look: UUIInterfaceLook = 'default';
@@ -64,9 +64,10 @@ export class UmbDropdownElement extends UmbLitElement {
 			<uui-button
 				id="dropdown-button"
 				popovertarget="dropdown-popover"
+				data-mark="open-dropdown"
 				.look=${this.look}
 				.color=${this.color}
-				.label=${this.label}
+				.label=${this.label ?? ''}
 				.compact=${this.compact}>
 				<slot name="label"></slot>
 				${when(

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

@@ -95,25 +95,33 @@ export class UmbEntityActionsBundleElement extends UmbLitElement {
 		if (this._numberOfActions === 1) return nothing;
 
 		return html`
-			<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>
+			<umb-dropdown
+				id="action-modal"
+				.open=${this._dropdownIsOpen}
+				@click=${this.#onDropdownClick}
+				.label=${this.label}
+				compact
+				hide-expand>
+				<uui-symbol-more slot="label" .label=${this.label}></uui-symbol-more>
 				<uui-scroll-container>
 					<umb-entity-action-list
 						@action-executed=${this.#onActionExecuted}
 						.entityType=${this.entityType}
-						.unique=${this.unique}></umb-entity-action-list>
+						.unique=${this.unique}
+						.label=${this.label}></umb-entity-action-list>
 				</uui-scroll-container>
 			</umb-dropdown>
 		`;
 	}
 
 	#renderFirstAction() {
-		if (!this._firstActionApi) return nothing;
+		if (!this._firstActionApi || !this._firstActionManifest) return nothing;
 		return html`<uui-button
-			label=${ifDefined(this._firstActionManifest?.meta.label)}
+			label=${this.localize.string(this._firstActionManifest.meta.label)}
+			data-mark=${'entity-action:' + this._firstActionManifest.alias}
 			@click=${this.#onFirstActionClick}
 			href="${ifDefined(this._firstActionHref)}">
-			<uui-icon name=${ifDefined(this._firstActionManifest?.meta.icon)}></uui-icon>
+			<uui-icon name=${ifDefined(this._firstActionManifest.meta.icon)}></uui-icon>
 		</uui-button>`;
 	}
 

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

@@ -66,17 +66,18 @@ export class UmbEntityActionDefaultElement<
 	}
 
 	override render() {
-		const label = this.manifest?.meta.label ? this.localize.string(this.manifest.meta.label) : this.manifest?.name;
+		if (!this.manifest) return nothing;
+
+		const label = this.manifest.meta.label ? this.localize.string(this.manifest.meta.label) : this.manifest.name;
 
 		return html`
 			<uui-menu-item
-				label=${ifDefined(this.manifest?.meta.additionalOptions ? label + '…' : label)}
+				label=${ifDefined(this.manifest.meta.additionalOptions ? label + '…' : label)}
+				data-mark=${'entity-action:' + this.manifest.alias}
 				href=${ifDefined(this._href)}
 				@click-label=${this.#onClickLabel}
 				@click=${this.#onClick}>
-				${this.manifest?.meta.icon
-					? html`<umb-icon slot="icon" name="${this.manifest?.meta.icon}"></umb-icon>`
-					: nothing}
+				${this.manifest.meta.icon ? html`<umb-icon slot="icon" name="${this.manifest.meta.icon}"></umb-icon>` : nothing}
 			</uui-menu-item>
 		`;
 	}

src/Umbraco.Web.UI.Client/src/packages/core/entity-action/global-components/entity-actions-table-column-view/entity-actions-table-column-view.element.ts

@@ -1,17 +1,20 @@
-import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
+import type { UmbEntityModel, UmbNamedEntityModel } from '@umbraco-cms/backoffice/entity';
 import { html, nothing, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-entity-actions-table-column-view')
 export class UmbEntityActionsTableColumnViewElement extends UmbLitElement {
 	@property({ attribute: false })
-	value?: UmbEntityModel;
+	value?: UmbEntityModel | UmbNamedEntityModel;
 
 	override render() {
 		if (!this.value) return nothing;
 
 		return html`
-			<umb-entity-actions-bundle .entityType=${this.value.entityType} .unique=${this.value.unique}>
+			<umb-entity-actions-bundle
+				.entityType=${this.value.entityType}
+				.unique=${this.value.unique}
+				.label=${this.localize.term('actions_viewActionsFor', [(this.value as any).name])}>
 			</umb-entity-actions-bundle>
 		`;
 	}

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

@@ -85,7 +85,7 @@ export class UmbMenuItemLayoutElement extends UmbLitElement {
 						slot="actions"
 						.entityType=${this.entityType}
 						.unique=${null}
-						.label=${this.label}>
+						.label=${this.localize.term('actions_viewActionsFor', [this.label])}>
 					</umb-entity-actions-bundle>`
 				: ''}
 			<slot></slot>

src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.element.ts

@@ -42,7 +42,7 @@ export class UmbSectionSidebarMenuWithEntityActionsElement extends UmbSectionSid
 					slot="actions"
 					.unique=${this._unique}
 					.entityType=${this.manifest?.meta.entityType}
-					.label=${this.manifest?.meta.label}>
+					.label=${this.localize.term('actions_viewActionsFor', [this.manifest?.meta.label])}>
 				</umb-entity-actions-bundle>
 			</div>
 		`;

src/Umbraco.Web.UI.Client/src/packages/core/property-action/components/property-action-menu/property-action-menu.element.ts

@@ -44,7 +44,12 @@ export class UmbPropertyActionMenuElement extends UmbLitElement {
 	override render() {
 		if (!this._actions?.length) return nothing;
 		return html`
-			<uui-button id="popover-trigger" popovertarget="property-action-popover" label="Open actions menu" compact>
+			<uui-button
+				id="popover-trigger"
+				popovertarget="property-action-popover"
+				data-mark="open-property-actions"
+				label=${this.localize.term('actions_viewActionsFor')}
+				compact>
 				<uui-symbol-more id="more-symbol"></uui-symbol-more>
 			</uui-button>
 			<uui-popover-container id="property-action-popover">

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

@@ -13,6 +13,7 @@ export abstract class UmbTreeItemElementBase<
 		this._item = newVal;
 
 		if (this._item) {
+			this._label = this.localize.string(this._item?.name ?? '');
 			this.#initTreeItem();
 		}
 	}
@@ -21,6 +22,9 @@ export abstract class UmbTreeItemElementBase<
 	}
 	protected _item?: TreeItemModelType;
 
+	@state()
+	_label?: string;
+
 	@property({ type: Object, attribute: false })
 	public set api(value: TreeItemContextType | undefined) {
 		this.#api = value;
@@ -119,7 +123,6 @@ export abstract class UmbTreeItemElementBase<
 	// Note: Currently we want to prevent opening when the item is in a selectable context, but this might change in the future.
 	// If we like to be able to open items in selectable context, then we might want to make it as a menu item action, so you have to click ... and chose an action called 'Edit'
 	override render() {
-		const label = this.localize.string(this._item?.name ?? '');
 		return html`
 			<uui-menu-item
 				@show-children=${this._onShowChildren}
@@ -133,8 +136,8 @@ export abstract class UmbTreeItemElementBase<
 				.loading=${this._isLoading}
 				.hasChildren=${this._hasChildren}
 				.showChildren=${this._isOpen}
-				.caretLabel=${this.localize.term('visuallyHiddenTexts_expandChildItems') + ' ' + label}
-				label=${label}
+				.caretLabel=${this.localize.term('visuallyHiddenTexts_expandChildItems') + ' ' + this._label}
+				label=${this._label}
 				href="${ifDefined(this._isSelectableContext ? undefined : this._href)}">
 				${this.renderIconContainer()} ${this.renderLabel()} ${this.#renderActions()} ${this.#renderChildItems()}
 				<slot></slot>
@@ -187,7 +190,7 @@ export abstract class UmbTreeItemElementBase<
 				slot="actions"
 				.entityType=${this.#api.entityType}
 				.unique=${this.#api.unique}
-				.label=${this._item.name}>
+				.label=${this.localize.term('actions_viewActionsFor', [this._label])}>
 			</umb-entity-actions-bundle>
 		`;
 	}

src/Umbraco.Web.UI.Client/src/packages/data-type/tree/tree-item-children/collection/views/data-type-tree-item-table-collection-view.element.ts

@@ -94,6 +94,7 @@ export class UmbDataTypeTreeItemTableCollectionViewElement extends UmbLitElement
 							.value=${{
 								entityType: item.entityType,
 								unique: item.unique,
+								name: item.name,
 							}}></umb-entity-actions-table-column-view>`,
 					},
 				],

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/tree-item-children/collection/views/document-type-tree-item-table-collection-view.element.ts

@@ -103,6 +103,7 @@ export class UmbDocumentTypeTreeItemTableCollectionViewElement extends UmbLitEle
 							.value=${{
 								entityType: item.entityType,
 								unique: item.unique,
+								name: item.name,
 							}}></umb-entity-actions-table-column-view>`,
 					},
 				],

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-entity-actions-table-column-view.element.ts

@@ -21,6 +21,7 @@ export class UmbDocumentEntityActionsTableColumnViewElement extends UmbLitElemen
 	override render() {
 		if (!this._value) return nothing;
 
+		// TODO: Missing name to parse on
 		return html`
 			<umb-entity-actions-table-column-view
 				.value=${{ unique: this._value.unique, entityType: this._value.entityType }}>

src/Umbraco.Web.UI.Client/src/packages/extension-insights/collection/views/table/extension-table-collection-view.element.ts

@@ -84,6 +84,7 @@ export class UmbExtensionTableCollectionViewElement extends UmbLitElement {
 							.value=${{
 								entityType: extension.entityType,
 								unique: extension.unique,
+								name: extension.name,
 							}}></umb-entity-actions-table-column-view>`,
 					},
 				],

src/Umbraco.Web.UI.Client/src/packages/language/collection/views/table/language-table-collection-view.element.ts

@@ -100,6 +100,7 @@ export class UmbLanguageTableCollectionViewElement extends UmbLitElement {
 							.value=${{
 								entityType: language.entityType,
 								unique: language.unique,
+								name: language.name,
 							}}></umb-entity-actions-table-column-view>`,
 					},
 				],

src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/tree-item-children/collection/views/media-type-tree-item-table-collection-view.element.ts

@@ -94,6 +94,7 @@ export class UmbMediaTypeTreeItemTableCollectionViewElement extends UmbLitElemen
 							.value=${{
 								entityType: item.entityType,
 								unique: item.unique,
+								name: item.name,
 							}}></umb-entity-actions-table-column-view>`,
 					},
 				],

src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/media-table-collection-view.element.ts

@@ -144,6 +144,7 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement {
 								.value=${{
 									entityType: item.entityType,
 									unique: item.unique,
+									name: item.name,
 								}}></umb-entity-actions-table-column-view>`,
 						};
 					}

src/Umbraco.Web.UI.Client/src/packages/members/member-group/collection/views/table/member-group-table-collection-view.element.ts

@@ -63,6 +63,7 @@ export class UmbMemberGroupTableCollectionViewElement extends UmbLitElement {
 							.value=${{
 								entityType: memberGroup.entityType,
 								unique: memberGroup.unique,
+								name: memberGroup.name,
 							}}></umb-entity-actions-table-column-view>`,
 					},
 				],

src/Umbraco.Web.UI.Client/src/packages/members/member/collection/views/table/member-table-collection-view.element.ts

@@ -108,6 +108,7 @@ export class UmbMemberTableCollectionViewElement extends UmbLitElement {
 							.value=${{
 								entityType: member.entityType,
 								unique: member.unique,
+								name: member.variants[0].name,
 							}}></umb-entity-actions-table-column-view>`,
 					},
 				],

src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/views/user-group-table-collection-view.element.ts

@@ -155,6 +155,7 @@ export class UmbUserGroupCollectionTableViewElement extends UmbLitElement {
 							.value=${{
 								entityType: userGroup.entityType,
 								unique: userGroup.unique,
+								name: userGroup.name,
 							}}></umb-entity-actions-table-column-view>`,
 					},
 				],

src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/table/user-table-collection-view.element.ts

@@ -151,6 +151,7 @@ export class UmbUserTableCollectionViewElement extends UmbLitElement {
 							.value=${{
 								entityType: user.entityType,
 								unique: user.unique,
+								name: user.name,
 							}}></umb-entity-actions-table-column-view>`,
 					},
 				],

src/Umbraco.Web.UI.Client/src/packages/webhook/webhook/collection/views/table/webhook-table-collection-view.element.ts

@@ -109,6 +109,7 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement {
 							.value=${{
 								entityType: webhook.entityType,
 								unique: webhook.unique,
+								name: webhook.name,
 							}}></umb-entity-actions-table-column-view>`,
 					},
 				],

tests/Umbraco.Tests.AcceptanceTest/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@umbraco/json-models-builders": "^2.0.33",
-    "@umbraco/playwright-testhelpers": "^16.0.11",
+    "@umbraco/playwright-testhelpers": "^16.0.13",
     "camelize": "^1.0.0",
     "dotenv": "^16.3.1",
     "node-fetch": "^2.6.7"

tests/Umbraco.Tests.AcceptanceTest/playwright.config.ts

@@ -33,6 +33,7 @@ export default defineConfig({
     // When working locally it can be a good idea to use trace: 'on-first-retry' instead of 'retain-on-failure', it can cut the local test times in half.
     trace: 'retain-on-failure',
     ignoreHTTPSErrors: true,
+    testIdAttribute: 'data-mark'
   },
 
   /* Configure projects for major browsers */

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/BlockGrid/ContentWithBlockGrid.spec.ts

@@ -33,7 +33,7 @@ test('can create content with an empty block grid', async ({umbracoApi, umbracoU
 
   // Act
   await umbracoUi.content.clickActionsMenuAtRoot();
-  await umbracoUi.content.clickCreateButton();
+  await umbracoUi.content.clickCreateActionMenuOption();
   await umbracoUi.content.chooseDocumentType(documentTypeName);
   await umbracoUi.content.enterContentName(contentName);
   await umbracoUi.content.clickSaveButton();
@@ -57,7 +57,7 @@ test('can publish content with an empty block grid', async ({umbracoApi, umbraco
 
   // Act
   await umbracoUi.content.clickActionsMenuAtRoot();
-  await umbracoUi.content.clickCreateButton();
+  await umbracoUi.content.clickCreateActionMenuOption();
   await umbracoUi.content.chooseDocumentType(documentTypeName);
   await umbracoUi.content.enterContentName(contentName);
   await umbracoUi.content.clickSaveAndPublishButton();
@@ -283,7 +283,7 @@ test('can create content with a block grid with the inline editing mode enabled'
 
   // Act
   await umbracoUi.content.clickActionsMenuAtRoot();
-  await umbracoUi.content.clickCreateButton();
+  await umbracoUi.content.clickCreateActionMenuOption();
   await umbracoUi.content.chooseDocumentType(documentTypeName);
   await umbracoUi.content.enterContentName(contentName);
   await umbracoUi.content.clickSaveButton();