From 3dc9b15afe46e97b6312c45d0b8fd1cb51922a65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Sat, 7 Dec 2024 19:45:38 +0100 Subject: [PATCH 01/12] Add data-marks --- src/Umbraco.Web.UI.Client/package.json | 1 + .../backoffice-header-apps.element.ts | 18 +++++++++++++++++- .../backoffice-header-sections.element.ts | 5 +++-- .../block-workspace-view-edit-tab.element.ts | 4 ++-- .../src/packages/core/const/index.ts | 1 + .../src/packages/core/const/manifests.ts | 1 + .../views/edit/content-editor-tab.element.ts | 4 ++-- ...property-workspace-view-settings.element.ts | 1 + .../core/property/property/property.element.ts | 2 ++ .../core/section/section-default.element.ts | 4 ++++ .../section-sidebar/section-sidebar.element.ts | 11 ++++++++--- .../workspace-editor.element.ts | 14 ++++++++------ .../workspace-header-name-editable.element.ts | 1 + ...pace-split-view-variant-selector.element.ts | 1 + .../workspace-split-view.element.ts | 4 +++- .../entity-detail-workspace-editor.element.ts | 8 +++++--- .../core/workspace/workspace.element.ts | 8 +++++++- ...data-type-details-workspace-view.element.ts | 10 ++++++++-- .../app-language-select.element.ts | 13 ++++++++----- .../grid/media-grid-collection-view.element.ts | 4 ++-- .../input-media/input-media.element.ts | 1 + .../media-picker/media-picker-modal.element.ts | 1 + src/Umbraco.Web.UI.Client/tsconfig.json | 4 +++- 23 files changed, 90 insertions(+), 31 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/const/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/const/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index ac0729df99a7..d65d3e34db98 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/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", diff --git a/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-apps.element.ts b/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-apps.element.ts index 1e30c0abe37a..c2821dfcc9a0 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-apps.element.ts +++ b/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` `; + return html` + + `; } + #extensionSlotRenderMethod = (ext: UmbExtensionElementInitializer) => { + if (ext.component) { + ext.component.setAttribute(UMB_MARK_ATTRIBUTE_NAME, 'header-app/' + ext.manifest?.alias); + } + return ext.component; + }; + static override styles: CSSResultGroup = [ css` #apps { diff --git a/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts b/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts index f0588625ce1d..3aa0ccfbd717 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts +++ b/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` - + ${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, - )}"> + )}" + data-mark="section-link/${section.alias}"> `, )} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts index 34e88a91a285..06250d293c92 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts +++ b/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` ` : ''} ${this.hideSingleGroup && this._groups.length === 1 @@ -97,7 +97,7 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement { return html` `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/const/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/const/index.ts new file mode 100644 index 000000000000..ece824c3a9c7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/const/index.ts @@ -0,0 +1 @@ +export const UMB_MARK_ATTRIBUTE_NAME = 'data-mark'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/const/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/const/manifests.ts new file mode 100644 index 000000000000..a3c4e6ad4404 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/const/manifests.ts @@ -0,0 +1 @@ +export const manifests = []; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/content-editor-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/content-editor-tab.element.ts index bb8a5a451f56..c0bd11837b2c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/content-editor-tab.element.ts +++ b/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` ` @@ -65,7 +65,7 @@ export class UmbContentWorkspaceViewEditTabElement extends UmbLitElement { (group) => html` `, )} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts index 592f3095de7f..b8b3d35d7e91 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts +++ b/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 { 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); }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts index 94adf049df04..4d686d9f4cea 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts @@ -1,15 +1,21 @@ 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') export class UmbSectionSidebarElement extends UmbLitElement { + // constructor() { super(); new UmbSectionSidebarContext(this); } + protected override firstUpdated(_changedProperties: PropertyValueMap | Map): void { + super.firstUpdated(_changedProperties); + this.setAttribute(UMB_MARK_ATTRIBUTE_NAME, 'section-sidebar'); + } + override render() { return html` @@ -21,7 +27,6 @@ export class UmbSectionSidebarElement extends UmbLitElement { } static override styles = [ - UmbTextStyles, css` :host { flex: 0 0 var(--umb-section-sidebar-width); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts index 7b23377d0615..0e71ed7ccd32 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts @@ -86,7 +86,7 @@ export class UmbWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + ${this.#renderBackButton()} ${this.#renderViews()} @@ -96,9 +96,9 @@ export class UmbWorkspaceEditorElement extends UmbLitElement { ${when( !this.enforceNoFooter, () => html` - + - + `, )} @@ -110,7 +110,7 @@ export class UmbWorkspaceEditorElement extends UmbLitElement { return html` ${!this.hideNavigation && this._workspaceViews.length > 1 ? html` - + ${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}"> ${view.meta.label ? this.localize.string(view.meta.label) : view.name} @@ -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="workspace-back-button"> `; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.ts index 8ad2277539ea..b806fe22fd99 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.ts +++ b/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` ${this.displayNavigation - ? html`` + ? html`` : ''} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity-detail/global-components/entity-detail-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity-detail/global-components/entity-detail-workspace-editor.element.ts index e57bc1d2c7d5..66b2d00312f1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity-detail/global-components/entity-detail-workspace-editor.element.ts +++ b/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`` : nothing} - `; + return html``; } static override styles = [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace.element.ts index b447843035bc..71fe6ee2a1bd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace.element.ts +++ b/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 = (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 | Map): void { + super.firstUpdated(_changedProperties); + this.setAttribute(UMB_MARK_ATTRIBUTE_NAME, 'workspace'); + } + override render() { if (!this.entityType) return nothing; return html` + + + return html`