Merge pull request #17755 from umbraco/v15/feature/first-round-of-dat…

…a-marks

Feature: Adding first round of data marks

src/Umbraco.Web.UI.Client/package.json

@@ -28,6 +28,7 @@
 		"./code-editor": "./dist-cms/packages/code-editor/index.js",
 		"./collection": "./dist-cms/packages/core/collection/index.js",
 		"./components": "./dist-cms/packages/core/components/index.js",
+		"./const": "./dist-cms/packages/core/const/index.js",
 		"./content-type": "./dist-cms/packages/core/content-type/index.js",
 		"./content": "./dist-cms/packages/core/content/index.js",
 		"./culture": "./dist-cms/packages/core/culture/index.js",

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-apps.element.ts

@@ -1,12 +1,28 @@
+import { UMB_MARK_ATTRIBUTE_NAME } from '@umbraco-cms/backoffice/const';
+import type { UmbExtensionElementInitializer } from '@umbraco-cms/backoffice/extension-api';
+import type { ManifestHeaderApp } from '@umbraco-cms/backoffice/extension-registry';
 import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
 import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/external/lit';
 
 @customElement('umb-backoffice-header-apps')
 export class UmbBackofficeHeaderAppsElement extends LitElement {
 	override render() {
-		return html` <umb-extension-slot id="apps" type="headerApp"></umb-extension-slot> `;
+		return html`
+			<umb-extension-slot
+				id="apps"
+				type="headerApp"
+				data-mark="header-apps"
+				.renderMethod=${this.#extensionSlotRenderMethod}></umb-extension-slot>
+		`;
 	}
 
+	#extensionSlotRenderMethod = (ext: UmbExtensionElementInitializer<ManifestHeaderApp>) => {
+		if (ext.component) {
+			ext.component.setAttribute(UMB_MARK_ATTRIBUTE_NAME, 'header-app:' + ext.manifest?.alias);
+		}
+		return ext.component;
+	};
+
 	static override styles: CSSResultGroup = [
 		css`
 			#apps {

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts

@@ -54,7 +54,7 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 
 	override render() {
 		return html`
-			<uui-tab-group id="tabs">
+			<uui-tab-group id="tabs" data-mark="section-links">
 				${repeat(
 					this._sections,
 					(section) => section.alias,
@@ -66,7 +66,8 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 								section.manifest?.meta.label
 									? this.localize.string(section.manifest?.meta.label)
 									: section.manifest?.name,
-							)}"></uui-tab>
+							)}"
+							data-mark="section-link:${section.alias}"></uui-tab>
 					`,
 				)}
 			</uui-tab-group>

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts

@@ -80,7 +80,7 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
 			${this._hasProperties
 				? html` <umb-block-workspace-view-edit-properties
 						.managerName=${this.#managerName}
-						class="properties"
+						data-mark="property-group:root"
 						.containerId=${this._containerId}></umb-block-workspace-view-edit-properties>`
 				: ''}
 			${this.hideSingleGroup && this._groups.length === 1
@@ -97,7 +97,7 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
 		return html`
 			<umb-block-workspace-view-edit-properties
 				.managerName=${this.#managerName}
-				class="properties"
+				data-mark="property-group:${group.name}"
 				.containerId=${group.id}></umb-block-workspace-view-edit-properties>
 		`;
 	}

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

@@ -0,0 +1 @@
+export const UMB_MARK_ATTRIBUTE_NAME = 'data-mark';

src/Umbraco.Web.UI.Client/src/packages/core/const/manifests.ts

@@ -0,0 +1 @@
+export const manifests = [];

src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/content-editor-tab.element.ts

@@ -54,7 +54,7 @@ export class UmbContentWorkspaceViewEditTabElement extends UmbLitElement {
 				? html`
 						<uui-box>
 							<umb-content-workspace-view-edit-properties
-								class="properties"
+								data-mark="property-group:root"
 								.containerId=${this._containerId}></umb-content-workspace-view-edit-properties>
 						</uui-box>
 					`
@@ -65,7 +65,7 @@ export class UmbContentWorkspaceViewEditTabElement extends UmbLitElement {
 				(group) =>
 					html`<uui-box .headline=${this.localize.string(group.name) ?? ''}>
 						<umb-content-workspace-view-edit-properties
-							class="properties"
+							data-mark="property-group:${group.name}"
 							.containerId=${group.id}></umb-content-workspace-view-edit-properties>
 					</uui-box>`,
 			)}

src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts

@@ -216,6 +216,7 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 					<umb-form-validation-message>
 						<uui-input
 							id="name-input"
+							data-mark="input:entity-name"
 							name="name"
 							label=${this.localize.term('placeholders_entername')}
 							placeholder=${this.localize.term('placeholders_entername')}

src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts

@@ -19,6 +19,7 @@ import type {
 	UmbPropertyTypeValidationModel,
 } from '@umbraco-cms/backoffice/content-type';
 import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+import { UMB_MARK_ATTRIBUTE_NAME } from '@umbraco-cms/backoffice/const';
 
 /**
  *  @element umb-property
@@ -74,6 +75,7 @@ export class UmbPropertyElement extends UmbLitElement {
 	 */
 	@property({ type: String })
 	public set alias(alias: string) {
+		this.setAttribute(UMB_MARK_ATTRIBUTE_NAME, 'property:' + alias);
 		this.#propertyContext.setAlias(alias);
 	}
 	public get alias() {

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

@@ -14,6 +14,7 @@ import {
 	createExtensionElement,
 } from '@umbraco-cms/backoffice/extension-api';
 import { aliasToPath } from '@umbraco-cms/backoffice/utils';
+import { UMB_MARK_ATTRIBUTE_NAME } from '@umbraco-cms/backoffice/const';
 
 /**
  * @class UmbBaseSectionElement
@@ -49,6 +50,9 @@ export class UmbSectionDefaultElement extends UmbLitElement implements UmbSectio
 
 		new UmbExtensionsElementInitializer(this, umbExtensionsRegistry, 'sectionSidebarApp', null, (sidebarApps) => {
 			const oldValue = this._sidebarApps;
+			sidebarApps.forEach((sidebarApp) => {
+				sidebarApp.component?.setAttribute(UMB_MARK_ATTRIBUTE_NAME, 'section-sidebar:' + sidebarApp.manifest.alias);
+			});
 			this._sidebarApps = sidebarApps;
 			this.requestUpdate('_sidebarApps', oldValue);
 		});

src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts

@@ -1,6 +1,6 @@
 import { UmbSectionSidebarContext } from './section-sidebar.context.js';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UMB_MARK_ATTRIBUTE_NAME } from '@umbraco-cms/backoffice/const';
+import { css, html, customElement, type PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-section-sidebar')
@@ -10,6 +10,11 @@ export class UmbSectionSidebarElement extends UmbLitElement {
 		new UmbSectionSidebarContext(this);
 	}
 
+	protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+		super.firstUpdated(_changedProperties);
+		this.setAttribute(UMB_MARK_ATTRIBUTE_NAME, 'section-sidebar');
+	}
+
 	override render() {
 		return html`
 			<umb-section-sidebar-context-menu>
@@ -21,7 +26,6 @@ export class UmbSectionSidebarElement extends UmbLitElement {
 	}
 
 	static override styles = [
-		UmbTextStyles,
 		css`
 			:host {
 				flex: 0 0 var(--umb-section-sidebar-width);

src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts

@@ -16,6 +16,7 @@ export default defineConfig({
 			'auth/index': './auth/index.ts',
 			'collection/index': './collection/index.ts',
 			'components/index': './components/index.ts',
+			'const/index': './const/index.ts',
 			'content-type/index': './content-type/index.ts',
 			'content/index': './content/index.ts',
 			'culture/index': './culture/index.ts',

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts

@@ -96,9 +96,9 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 				${when(
 					!this.enforceNoFooter,
 					() => html`
-						<umb-workspace-footer slot="footer">
+						<umb-workspace-footer slot="footer" data-mark="workspace:footer">
 							<slot name="footer-info"></slot>
-							<slot name="actions" slot="actions"></slot>
+							<slot name="actions" slot="actions" data-mark="workspace:footer-actions"></slot>
 						</umb-workspace-footer>
 					`,
 				)}
@@ -110,7 +110,7 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 		return html`
 			${!this.hideNavigation && this._workspaceViews.length > 1
 				? html`
-						<uui-tab-group slot="navigation">
+						<uui-tab-group slot="navigation" data-mark="workspace:view-links">
 							${repeat(
 								this._workspaceViews,
 								(view) => view.alias,
@@ -121,7 +121,8 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 											href="${this._routerPath}/view/${view.meta.pathname}"
 											.label="${view.meta.label ? this.localize.string(view.meta.label) : view.name}"
 											?active=${'view/' + view.meta.pathname === this._activePath ||
-											(index === 0 && this._activePath === '')}>
+											(index === 0 && this._activePath === '')}
+											data-mark="workspace:view-link:${view.alias}">
 											<umb-icon slot="icon" name=${view.meta.icon}></umb-icon>
 											${view.meta.label ? this.localize.string(view.meta.label) : view.name}
 										</uui-tab>
@@ -141,7 +142,8 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 				class="back-button"
 				compact
 				href=${this.backPath}
-				label=${this.localize.term('general_back')}>
+				label=${this.localize.term('general_back')}
+				data-mark="action:back">
 				<uui-icon name="icon-arrow-left"></uui-icon>
 			</uui-button>
 		`;

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.ts

@@ -48,6 +48,7 @@ export class UmbWorkspaceHeaderNameEditableElement extends UmbLitElement {
 	override render() {
 		return html`<uui-input
 			id="nameInput"
+			data-mark="input:workspace-name"
 			.value=${this._name}
 			@input="${this.#onNameInput}"
 			required

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts

@@ -225,6 +225,7 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 			? html`
 			<uui-input
 				id="name-input"
+				data-mark="input:entity-name"
 				label=${this.localize.term('placeholders_entername')}
 				.value=${this._name ?? ''}
 				@input=${this.#handleInput}

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view.context.ts

@@ -5,14 +5,15 @@ import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbNumberState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
+import { UMB_MARK_ATTRIBUTE_NAME } from '@umbraco-cms/backoffice/const';
 
 export class UmbWorkspaceSplitViewContext extends UmbContextBase<UmbWorkspaceSplitViewContext> {
 	#workspaceContext?: typeof UMB_VARIANT_WORKSPACE_CONTEXT.TYPE;
 	public getWorkspaceContext() {
 		return this.#workspaceContext;
 	}
 
-	#variantContext?: UmbPropertyDatasetContext;
+	#datasetContext?: UmbPropertyDatasetContext;
 
 	#index = new UmbNumberState(undefined);
 	index = this.#index.asObservable();
@@ -39,17 +40,15 @@ export class UmbWorkspaceSplitViewContext extends UmbContextBase<UmbWorkspaceSpl
 		const index = this.#index.getValue();
 		if (index === undefined) return;
 
-		// TODO: Should splitView be put into its own context?... a split view manager context?   one which might have a reference to the workspace context, so we still can ask that about how to create the variant context.
 		this.observe(
 			this.#workspaceContext.splitView.activeVariantByIndex(index),
 			async (activeVariantInfo) => {
 				if (!activeVariantInfo) return;
 
-				// TODO: Ask workspace context to create the specific variant context.
-
-				this.#variantContext?.destroy();
+				this.#datasetContext?.destroy();
 				const variantId = UmbVariantId.Create(activeVariantInfo);
-				this.#variantContext = this.#workspaceContext?.createPropertyDatasetContext(this, variantId);
+				this.#datasetContext = this.#workspaceContext?.createPropertyDatasetContext(this, variantId);
+				this.getHostElement().setAttribute(UMB_MARK_ATTRIBUTE_NAME, 'workspace-split-view:' + variantId.toString());
 			},
 			'_observeActiveVariant',
 		);

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view.element.ts

@@ -50,7 +50,9 @@ export class UmbWorkspaceSplitViewElement extends UmbLitElement {
 				</slot>
 
 				${this.displayNavigation
-					? html`<umb-workspace-entity-action-menu slot="action-menu"></umb-workspace-entity-action-menu>`
+					? html`<umb-workspace-entity-action-menu
+							slot="action-menu"
+							data-mark="workspace:action-menu"></umb-workspace-entity-action-menu>`
 					: ''}
 				<slot name="action-menu" slot="action-menu"></slot>
 			</umb-workspace-editor>

src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity-detail/global-components/entity-detail-workspace-editor.element.ts

@@ -38,8 +38,8 @@ export class UmbEntityDetailWorkspaceEditorElement extends UmbLitElement {
 				? html`<umb-entity-detail-not-found entity-type=${ifDefined(this._entityType)}></umb-entity-detail-not-found>`
 				: nothing}
 
-			<!-- TODO: It is currently on purpose that the workspace editor is always in the DOM, even when it doesn't have data. 
-			 We currently rely on the entity actions to be available to execute, and we ran into an issue when the entity got deleted; then the DOM got cleared, and the delete action couldn't complete. 
+			<!-- TODO: It is currently on purpose that the workspace editor is always in the DOM, even when it doesn't have data.
+			 We currently rely on the entity actions to be available to execute, and we ran into an issue when the entity got deleted; then the DOM got cleared, and the delete action couldn't complete.
 			 We need to look into loading the entity actions in the workspace context instead so we don't rely on the DOM.
 		 -->
 			<umb-workspace-editor
@@ -54,7 +54,9 @@ export class UmbEntityDetailWorkspaceEditorElement extends UmbLitElement {
 
 	#renderEntityActions() {
 		if (this._isNew) return nothing;
-		return html`<umb-workspace-entity-action-menu slot="action-menu"></umb-workspace-entity-action-menu>`;
+		return html`<umb-workspace-entity-action-menu
+			slot="action-menu"
+			data-mark="workspace:action-menu"></umb-workspace-entity-action-menu>`;
 	}
 
 	static override styles = [

src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace.element.ts

@@ -1,7 +1,8 @@
-import { html, nothing, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { html, nothing, customElement, property, type PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { ManifestWorkspace } from '@umbraco-cms/backoffice/workspace';
 import type { UmbApiConstructorArgumentsMethodType } from '@umbraco-cms/backoffice/extension-api';
+import { UMB_MARK_ATTRIBUTE_NAME } from '@umbraco-cms/backoffice/const';
 
 const apiArgsCreator: UmbApiConstructorArgumentsMethodType<unknown> = (manifest: unknown) => {
 	return [{ manifest }];
@@ -12,6 +13,11 @@ export class UmbWorkspaceElement extends UmbLitElement {
 	@property({ type: String, attribute: 'entity-type' })
 	entityType = '';
 
+	protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+		super.firstUpdated(_changedProperties);
+		this.setAttribute(UMB_MARK_ATTRIBUTE_NAME, 'workspace');
+	}
+
 	override render() {
 		if (!this.entityType) return nothing;
 		return html`<umb-extension-with-api-slot

src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-view.element.ts

@@ -93,7 +93,10 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im
 	// Notice, we have implemented a property-layout for each states of the property editor ui picker, in this way the validation message gets removed once the choose-button is gone. (As we are missing ability to detect if elements got removed from DOM)[NL]
 	#renderChooseButton() {
 		return html`
-			<umb-property-layout label="Property Editor" description=${this.localize.term('propertyEditorPicker_title')}>
+			<umb-property-layout
+				data-mark="property:editorUiAlias"
+				label="Property Editor"
+				description=${this.localize.term('propertyEditorPicker_title')}>
 				<uui-button
 					slot="editor"
 					id="btn-add"
@@ -110,7 +113,10 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im
 	#renderPropertyEditorReference() {
 		if (!this._propertyEditorUiAlias || !this._propertyEditorSchemaAlias) return nothing;
 		return html`
-			<umb-property-layout label="Property Editor" description=${this.localize.term('propertyEditorPicker_title')}>
+			<umb-property-layout
+				data-mark="property:editorUiAlias"
+				label="Property Editor"
+				description=${this.localize.term('propertyEditorPicker_title')}>
 				<umb-ref-property-editor-ui
 					slot="editor"
 					name=${this._propertyEditorUiName ?? ''}

src/Umbraco.Web.UI.Client/src/packages/language/app-language-select/app-language-select.element.ts

@@ -130,7 +130,7 @@ export class UmbAppLanguageSelectElement extends UmbLitElement {
 	}
 
 	#renderTrigger() {
-		return html`<button id="toggle" popovertarget="dropdown-popover">
+		return html`<button id="toggle" data-mark="action:open" popovertarget="dropdown-popover">
 			<span
 				>${this._appLanguage?.name}
 				${this._appLanguageIsReadOnly ? this.#renderReadOnlyTag(this._appLanguage?.unique) : nothing}</span
@@ -140,17 +140,20 @@ export class UmbAppLanguageSelectElement extends UmbLitElement {
 	}
 
 	#renderContent() {
-		return html` <uui-popover-container id="dropdown-popover" @beforetoggle=${this.#onPopoverToggle}>
+		return html` <uui-popover-container
+			id="dropdown-popover"
+			data-mark="app-language-menu"
+			@beforetoggle=${this.#onPopoverToggle}>
 			<umb-popover-layout>
 				${repeat(
 					this._languages,
 					(language) => language.unique,
 					(language) => html`
 						<uui-menu-item
 							label=${ifDefined(language.name)}
-							@click-label=${this.#onLabelClick}
-							data-unique=${ifDefined(language.unique)}
-							?active=${language.unique === this._appLanguage?.unique}>
+							data-mark="${language.entityType}:${language.unique}"
+							?active=${language.unique === this._appLanguage?.unique}
+							@click-label=${this.#onLabelClick}>
 							${this.#isLanguageReadOnly(language.unique) ? this.#renderReadOnlyTag(language.unique) : nothing}
 						</uui-menu-item>
 					`,

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

@@ -96,13 +96,13 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement {
 		return html`
 			<uui-card-media
 				name=${ifDefined(item.name)}
+				data-mark="${item.entityType}:${item.unique}"
 				selectable
 				?select-only=${this._selection.length > 0}
 				?selected=${this.#isSelected(item)}
 				href=${this.#getEditUrl(item)}
 				@selected=${() => this.#onSelect(item)}
-				@deselected=${() => this.#onDeselect(item)}
-				class="media-item">
+				@deselected=${() => this.#onDeselect(item)}>
 				<umb-imaging-thumbnail
 					unique=${item.unique}
 					alt=${ifDefined(item.name)}