From 7912e61e2918bcabb4f7c8d4fdc84f2f9d837cd7 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 27 Jun 2025 21:04:21 +0200 Subject: [PATCH 001/118] wip section menu expansion --- .../section-sidebar-menu.context.token.ts | 6 ++ .../context/section-sidebar-menu.context.ts | 12 +++ .../expansion-manager/expansion-manager.ts | 85 +++++++++++++++++++ .../expansion-manager/index.ts | 1 + .../expansion-manager/types.ts | 3 + .../section-sidebar-menu.element.ts | 17 ++++ .../section-main/section-main.element.ts | 5 +- .../packages/core/section/section.context.ts | 2 + .../tree-expansion-manager.ts | 6 +- .../tree-menu-item-default.element.ts | 37 +++++++- .../src/packages/core/tree/tree.element.ts | 7 ++ .../events/expansion-change.event.ts | 8 ++ .../core/utils/expansion/events/index.ts | 1 + .../packages/core/utils/expansion/index.ts | 1 + .../src/packages/core/utils/index.ts | 1 + .../umbraco-news-dashboard.element.ts | 55 +++++++++++- 16 files changed, 241 insertions(+), 6 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.token.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/expansion-manager.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/types.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-change.event.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.token.ts new file mode 100644 index 000000000000..175ad9a9dbad --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.token.ts @@ -0,0 +1,6 @@ +import type { UmbSectionSidebarMenuContext } from './section-sidebar-menu.context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const UMB_SECTION_SIDEBAR_MENU_CONTEXT = new UmbContextToken( + 'UmbSectionSidebarMenuContext', +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts new file mode 100644 index 000000000000..e1e9e11fd64f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts @@ -0,0 +1,12 @@ +import { UmbMenuExpansionManager } from '../expansion-manager/index.js'; +import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './section-sidebar-menu.context.token.js'; +import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; + +export class UmbSectionSidebarMenuContext extends UmbContextBase { + public readonly expansion = new UmbMenuExpansionManager(this); + + constructor(host: UmbControllerHost) { + super(host, UMB_SECTION_SIDEBAR_MENU_CONTEXT.toString()); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/expansion-manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/expansion-manager.ts new file mode 100644 index 000000000000..4b69108d5f9c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/expansion-manager.ts @@ -0,0 +1,85 @@ +import type { UmbMenuExpansionModel } from './types.js'; +import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; +import { UmbArrayState, type Observable } from '@umbraco-cms/backoffice/observable-api'; + +/** + * Manages the expansion state of a tree + * @exports + * @class UmbTreeExpansionManager + * @augments {UmbControllerBase} + */ +export class UmbMenuExpansionManager extends UmbControllerBase { + #expansion = new UmbArrayState([], (x) => x.entityType + x.unique); + expansion = this.#expansion.asObservable(); + + /** + * Checks if an entity is expanded + * @param {UmbEntityModel} entity The entity to check + * @param {string} entity.entityType The entity type + * @param {string} entity.unique The unique key + * @returns {Observable} True if the entity is expanded + * @memberof UmbTreeExpansionManager + */ + isExpanded(entity: UmbEntityModel): Observable { + return this.#expansion.asObservablePart((entries) => + entries?.some((entry) => entry.entityType === entity.entityType && entry.unique === entity.unique), + ); + } + + /** + * Sets the expansion state + * @param {UmbMenuExpansionModel | undefined} expansion The expansion state + * @memberof UmbTreeExpansionManager + * @returns {void} + */ + setExpansion(expansion: UmbMenuExpansionModel): void { + this.#expansion.setValue(expansion); + } + + /** + * Gets the expansion state + * @memberof UmbTreeExpansionManager + * @returns {UmbMenuExpansionModel} The expansion state + */ + getExpansion(): UmbMenuExpansionModel { + return this.#expansion.getValue(); + } + + updateExpansion(expansion: UmbMenuExpansionModel): void { + this.#expansion.append(expansion); + } + + /** + * Opens a child tree item + * @param {UmbEntityModel} entity The entity to open + * @param {string} entity.entityType The entity type + * @param {string} entity.unique The unique key + * @memberof UmbTreeExpansionManager + * @returns {Promise} + */ + public async expandItem(entity: UmbEntityModel): Promise { + this.#expansion.appendOne(entity); + } + + /** + * Closes a child tree item + * @param {UmbEntityModel} entity The entity to close + * @param {string} entity.entityType The entity type + * @param {string} entity.unique The unique key + * @memberof UmbTreeExpansionManager + * @returns {Promise} + */ + public async collapseItem(entity: UmbEntityModel): Promise { + this.#expansion.filter((x) => x.entityType !== entity.entityType || x.unique !== entity.unique); + } + + /** + * Closes all child tree items + * @memberof UmbTreeExpansionManager + * @returns {Promise} + */ + public async collapseAll(): Promise { + this.#expansion.setValue([]); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/index.ts new file mode 100644 index 000000000000..84d2e28140e0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/index.ts @@ -0,0 +1 @@ +export * from './expansion-manager.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/types.ts new file mode 100644 index 000000000000..f8e8127414f6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/types.ts @@ -0,0 +1,3 @@ +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; + +export type UmbMenuExpansionModel = Array; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index 2c7c75e35120..f3ae02537f04 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -5,6 +5,7 @@ import { css, html, customElement, property } from '@umbraco-cms/backoffice/exte import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './context/section-sidebar-menu.context.token.js'; // TODO: Move to separate file: const manifest: UmbExtensionManifestKind = { @@ -34,6 +35,22 @@ export class UmbSectionSidebarMenuElement< return html`

${this.localize.string(this.manifest?.meta?.label ?? '')}

`; } + #context?: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE; + + constructor() { + super(); + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (context) => { + this.#context = context; + this.#observeExpansion(); + }); + } + + #observeExpansion() { + this.observe(this.#context?.expansion.expansion, (items) => { + console.log('Expanded items:', items); + }); + } + override render() { return html` ${this.renderHeader()} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-main/section-main.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-main/section-main.element.ts index 144a2b27049c..ebae159f82fe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-main/section-main.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-main/section-main.element.ts @@ -1,8 +1,9 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-section-main') -export class UmbSectionMainElement extends LitElement { +export class UmbSectionMainElement extends UmbLitElement { override render() { return html`
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.ts index fbb626897fb3..5cd54f3fd96d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.ts @@ -1,3 +1,4 @@ +import { UmbSectionSidebarMenuContext } from '../menu/section-sidebar-menu/context/section-sidebar-menu.context.js'; import type { ManifestSection } from './extensions/section.extension.js'; import { UmbStringState } from '@umbraco-cms/backoffice/observable-api'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; @@ -14,6 +15,7 @@ export class UmbSectionContext extends UmbContextBase { constructor(host: UmbControllerHost) { super(host, UMB_SECTION_CONTEXT); + new UmbSectionSidebarMenuContext(this); } public setManifest(manifest?: ManifestSection) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/expansion-manager/tree-expansion-manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/expansion-manager/tree-expansion-manager.ts index a2144f8c1cc0..f19739d90516 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/expansion-manager/tree-expansion-manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/expansion-manager/tree-expansion-manager.ts @@ -2,6 +2,7 @@ import type { UmbTreeExpansionModel } from './types.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import { UmbArrayState, type Observable } from '@umbraco-cms/backoffice/observable-api'; +import { UmbExpansionChangeEvent } from '@umbraco-cms/backoffice/utils'; /** * Manages the expansion state of a tree @@ -10,7 +11,7 @@ import { UmbArrayState, type Observable } from '@umbraco-cms/backoffice/observab * @augments {UmbControllerBase} */ export class UmbTreeExpansionManager extends UmbControllerBase { - #expansion = new UmbArrayState([], (x) => x.unique); + #expansion = new UmbArrayState([], (x) => x.entityType + x.unique); expansion = this.#expansion.asObservable(); /** @@ -56,6 +57,7 @@ export class UmbTreeExpansionManager extends UmbControllerBase { */ public async expandItem(entity: UmbEntityModel): Promise { this.#expansion.appendOne(entity); + this.getHostElement().dispatchEvent(new UmbExpansionChangeEvent()); } /** @@ -68,6 +70,7 @@ export class UmbTreeExpansionManager extends UmbControllerBase { */ public async collapseItem(entity: UmbEntityModel): Promise { this.#expansion.filter((x) => x.entityType !== entity.entityType || x.unique !== entity.unique); + this.getHostElement().dispatchEvent(new UmbExpansionChangeEvent()); } /** @@ -77,5 +80,6 @@ export class UmbTreeExpansionManager extends UmbControllerBase { */ public async collapseAll(): Promise { this.#expansion.setValue([]); + this.getHostElement().dispatchEvent(new UmbExpansionChangeEvent()); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item-default/tree-menu-item-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item-default/tree-menu-item-default.element.ts index 93ce54fa6d57..8c443d9f5398 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item-default/tree-menu-item-default.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item-default/tree-menu-item-default.element.ts @@ -1,9 +1,13 @@ +import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from '../../menu/section-sidebar-menu/context/section-sidebar-menu.context.token.js'; import type { ManifestMenuItemTreeKind } from './types.js'; -import { html, nothing, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { html, nothing, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import type { UmbMenuItemElement } from '@umbraco-cms/backoffice/menu'; +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; +import type { UmbExpansionChangeEvent } from '@umbraco-cms/backoffice/utils'; +import type { UmbTreeElement } from '../tree.element.js'; // TODO: Move to separate file: const manifest: UmbExtensionManifestKind = { @@ -23,6 +27,33 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM @property({ type: Object }) manifest?: ManifestMenuItemTreeKind; + @state() + _expansion: Array = []; + + #context?: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE; + + constructor() { + super(); + // TODO: make another context abstraction UMB_MENU_CONTEXT + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (context) => { + this.#context = context; + this.#observeExpansion(); + }); + } + + #observeExpansion() { + this.observe(this.#context?.expansion.expansion, (items) => { + this._expansion = items || []; + }); + } + + #onExpansionChange(event: UmbExpansionChangeEvent) { + event.stopPropagation(); + const target = event.target as UmbTreeElement; + const expansion = target.getExpansion(); + this.#context?.expansion.updateExpansion(expansion); + } + override render() { return this.manifest ? html` @@ -34,7 +65,9 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM selectable: false, multiple: false, }, - }}> + expansion: this._expansion, + }} + @expansion-change=${this.#onExpansionChange}> ` : nothing; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts index 889ab0849b0b..a091f5e73269 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts @@ -18,6 +18,13 @@ export class UmbTreeElement extends UmbExtensionElementAndApiSlotElementBase = []; + + constructor() { + super(); + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (context) => { + this.#context = context; + this.#observeExpansion(); + }); + } + + #onExpand() { + const item: UmbEntityModel = { + entityType: 'document', + unique: '315c76fd-2446-4a4d-9762-e002ff31a220', + }; + this.#context?.expansion.expandItem(item); + } + + #onCollapse(event: PointerEvent, item: UmbEntityModel) { + this.#context?.expansion.collapseItem(item); + } + + #onCollapseAll() { + this.#context?.expansion.collapseAll(); + } + + #observeExpansion() { + this.observe(this.#context?.expansion.expansion, (items) => { + this._expansion = items || []; + }); + } + override render() { return html`
+
+ + + ${repeat( + this._expansion, + (item) => item.unique, + (item) => + html`
+ ${item.entityType} + ${item.unique} +
`, + )} +
+

${this.localize.term('welcomeDashboard_ourUmbracoHeadline')}

${this.localize.term('welcomeDashboard_ourUmbracoDescription')}

From 286587e3cc733579645967af5d8ab230b5e57d2c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Sat, 28 Jun 2025 18:08:18 +0200 Subject: [PATCH 002/118] make section context local to each section --- .../components/backoffice-main.element.ts | 1 + .../conditions/section-alias.condition.ts | 2 +- .../default/default-section.context.ts | 10 +++++++ .../default-section.element.ts} | 26 ++++++++++++++----- .../core/section/default/manifests.ts | 20 ++++++++++++++ .../packages/core/section/default/types.ts | 11 ++++++++ .../section/extensions/section.extension.ts | 1 + .../src/packages/core/section/index.ts | 7 ++--- .../core/section/section.context.token.ts | 4 +++ .../packages/core/section/section.context.ts | 6 +---- .../core/workspace/workspace.element.ts | 2 +- 11 files changed, 73 insertions(+), 17 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.context.ts rename src/Umbraco.Web.UI.Client/src/packages/core/section/{section-default.element.ts => default/default-section.element.ts} (84%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/section/default/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/section/default/types.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.token.ts diff --git a/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-main.element.ts b/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-main.element.ts index 0550e6c52cc3..70f1a9202b93 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-main.element.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-main.element.ts @@ -78,6 +78,7 @@ export class UmbBackofficeMainElement extends UmbLitElement { this._routes = newRoutes; } + // TODO: v17. Remove this section context when we have api's as part of the section manifest. private _provideSectionContext(sectionManifest: ManifestSection) { if (!this._sectionContext) { this._sectionContext = new UmbSectionContext(this); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/conditions/section-alias.condition.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/conditions/section-alias.condition.ts index 9a18d0ce1551..fb5026e5d10a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/conditions/section-alias.condition.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/conditions/section-alias.condition.ts @@ -1,5 +1,5 @@ import { UmbConditionBase } from '../../extension-registry/conditions/condition-base.controller.js'; -import { UMB_SECTION_CONTEXT } from '../section.context.js'; +import { UMB_SECTION_CONTEXT } from '../section.context.token.js'; import type { SectionAliasConditionConfig } from './types.js'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.context.ts new file mode 100644 index 000000000000..65f07289a862 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.context.ts @@ -0,0 +1,10 @@ +import { UmbSectionSidebarMenuContext } from '../../menu/section-sidebar-menu/context/section-sidebar-menu.context.js'; +import { UmbSectionContext } from '../section.context.js'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; + +export class UmbDefaultSectionContext extends UmbSectionContext { + constructor(host: UmbControllerHost) { + super(host); + new UmbSectionSidebarMenuContext(this); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.element.ts similarity index 84% rename from src/Umbraco.Web.UI.Client/src/packages/core/section/section-default.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.element.ts index 7161de8a2ac0..1a1cd6728c04 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-default.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.element.ts @@ -1,6 +1,6 @@ -import type { ManifestSectionRoute } from './extensions/section-route.extension.js'; -import type { UmbSectionMainViewElement } from './section-main-views/section-main-views.element.js'; -import type { ManifestSection, UmbSectionElement } from './types.js'; +import type { ManifestSectionRoute } from '../extensions/section-route.extension.js'; +import type { UmbSectionMainViewElement } from '../section-main-views/section-main-views.element.js'; +import type { ManifestSection, UmbSectionElement } from '../types.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, nothing, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; @@ -15,13 +15,14 @@ import { } from '@umbraco-cms/backoffice/extension-api'; import { aliasToPath } from '@umbraco-cms/backoffice/utils'; import { UMB_MARK_ATTRIBUTE_NAME } from '@umbraco-cms/backoffice/const'; +import { UmbDefaultSectionContext } from './default-section.context.js'; /** * @class UmbBaseSectionElement * @description - Element hosting sections and section navigation. */ @customElement('umb-section-default') -export class UmbSectionDefaultElement extends UmbLitElement implements UmbSectionElement { +export class UmbDefaultSectionElement extends UmbLitElement implements UmbSectionElement { private _manifest?: ManifestSection | undefined; @property({ type: Object, attribute: false }) @@ -32,7 +33,7 @@ export class UmbSectionDefaultElement extends UmbLitElement implements UmbSectio const oldValue = this._manifest; if (oldValue === value) return; this._manifest = value; - + this.#api.setManifest(value); this.requestUpdate('manifest', oldValue); } @@ -45,6 +46,9 @@ export class UmbSectionDefaultElement extends UmbLitElement implements UmbSectio @state() _splitPanelPosition = '300px'; + // TODO: v17: Move this to a manifest api. It will have to wait for a major as it will be a breaking change. + #api = new UmbDefaultSectionContext(this); + constructor() { super(); @@ -111,7 +115,7 @@ export class UmbSectionDefaultElement extends UmbLitElement implements UmbSectio ...routes, { path: '**', - component: () => import('./section-main-views/section-main-views.element.js'), + component: () => import('../section-main-views/section-main-views.element.js'), setup: (element) => { (element as UmbSectionMainViewElement).sectionAlias = this.manifest?.alias; }, @@ -177,8 +181,16 @@ export class UmbSectionDefaultElement extends UmbLitElement implements UmbSectio ]; } +export { UmbDefaultSectionElement as element }; + declare global { interface HTMLElementTagNameMap { - 'umb-section-default': UmbSectionDefaultElement; + 'umb-section-default': UmbDefaultSectionElement; } } + +/** + * + * @deprecated Since 16. Use UmbDefaultSectionElement instead. UmbSectionDefaultElement will be removed in v18. + */ +export { UmbDefaultSectionElement as UmbSectionDefaultElement }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/default/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/default/manifests.ts new file mode 100644 index 000000000000..1802584f0f23 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/default/manifests.ts @@ -0,0 +1,20 @@ +import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'kind', + alias: 'Umb.Kind.Section.Default', + matchKind: 'default', + matchType: 'section', + manifest: { + type: 'section', + kind: 'default', + weight: 1000, + element: () => import('./default-section.element.js'), + meta: { + label: '', + pathname: '', + }, + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/default/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/default/types.ts new file mode 100644 index 000000000000..17eeb41ff005 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/default/types.ts @@ -0,0 +1,11 @@ +import type { ManifestSection } from '../../section/extensions/index.js'; + +export interface ManifestSectionDefaultKind extends ManifestSection { + kind: 'default'; +} + +declare global { + interface UmbExtensionManifestMap { + umbDefaultSectionKind: ManifestSectionDefaultKind; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/section.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/section.extension.ts index 63f363013bac..b3d90397f536 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/section.extension.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/section.extension.ts @@ -2,6 +2,7 @@ import type { UmbSectionElement } from './section-element.interface.js'; import type { ManifestElement, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api'; export interface ManifestSection + // TODO: v17 change to extend Element and Api extends ManifestElement, ManifestWithDynamicConditions { type: 'section'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts index 9ac642e834b7..760f55081380 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts @@ -1,11 +1,12 @@ +export * from '../menu/section-sidebar-menu-with-entity-actions/index.js'; +export * from '../menu/section-sidebar-menu/index.js'; export * from './components/index.js'; export * from './constants.js'; -export * from './section-default.element.js'; +export * from './default/default-section.element.js'; export * from './section-main/index.js'; export * from './section-picker-modal/section-picker-modal.token.js'; export * from './section-sidebar-context-menu/index.js'; -export * from '../menu/section-sidebar-menu-with-entity-actions/index.js'; -export * from '../menu/section-sidebar-menu/index.js'; export * from './section-sidebar/index.js'; export * from './section.context.js'; +export * from './section.context.token.js'; export type * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.token.ts new file mode 100644 index 000000000000..b70b7b5ebfe4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.token.ts @@ -0,0 +1,4 @@ +import type { UmbSectionContext } from './section.context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const UMB_SECTION_CONTEXT = new UmbContextToken('UmbSectionContext'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.ts index 5cd54f3fd96d..44e7556ba6ac 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.ts @@ -1,7 +1,6 @@ -import { UmbSectionSidebarMenuContext } from '../menu/section-sidebar-menu/context/section-sidebar-menu.context.js'; import type { ManifestSection } from './extensions/section.extension.js'; +import { UMB_SECTION_CONTEXT } from './section.context.token.js'; import { UmbStringState } from '@umbraco-cms/backoffice/observable-api'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; @@ -15,7 +14,6 @@ export class UmbSectionContext extends UmbContextBase { constructor(host: UmbControllerHost) { super(host, UMB_SECTION_CONTEXT); - new UmbSectionSidebarMenuContext(this); } public setManifest(manifest?: ManifestSection) { @@ -28,5 +26,3 @@ export class UmbSectionContext extends UmbContextBase { return this.#manifestPathname.getValue(); } } - -export const UMB_SECTION_CONTEXT = new UmbContextToken('UmbSectionContext'); 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 b54f387944d4..b532e4f367fd 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,3 +1,4 @@ +import type { ManifestWorkspace } from './extensions/types.js'; import { nothing, customElement, property, type PropertyValueMap, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { @@ -7,7 +8,6 @@ import { } from '@umbraco-cms/backoffice/extension-api'; import { UMB_MARK_ATTRIBUTE_NAME } from '@umbraco-cms/backoffice/const'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -import type { ManifestWorkspace } from './extensions/types.js'; const apiArgsCreator: UmbApiConstructorArgumentsMethodType = (manifest: unknown) => { return [{ manifest }]; From 652afb1c5f5a6e38395cc725c43478a593a94710 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Sat, 28 Jun 2025 18:17:37 +0200 Subject: [PATCH 003/118] split kind manifest from element file --- .../src/packages/core/tree/index.ts | 2 +- .../src/packages/core/tree/manifests.ts | 6 ++++-- .../core/tree/tree-menu-item-default/index.ts | 1 - .../packages/core/tree/tree-menu-item/index.ts | 1 + .../core/tree/tree-menu-item/manifests.ts | 14 ++++++++++++++ .../tree-menu-item.element.ts} | 17 +---------------- .../types.ts | 0 .../src/packages/core/tree/types.ts | 2 +- 8 files changed, 22 insertions(+), 21 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item-default/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/manifests.ts rename src/Umbraco.Web.UI.Client/src/packages/core/tree/{tree-menu-item-default/tree-menu-item-default.element.ts => tree-menu-item/tree-menu-item.element.ts} (82%) rename src/Umbraco.Web.UI.Client/src/packages/core/tree/{tree-menu-item-default => tree-menu-item}/types.ts (100%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts index e80702822ee9..58d6e6f14f3e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts @@ -6,7 +6,7 @@ export * from './entity-actions/reload-tree-item-children/index.js'; export * from './entity-actions/sort-children-of/index.js'; export * from './folder/index.js'; export * from './tree-item/index.js'; -export * from './tree-menu-item-default/index.js'; +export * from './tree-menu-item/index.js'; export * from './tree.element.js'; export type * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/manifests.ts index e1972b17cc9a..ec8a28e85f2a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/manifests.ts @@ -1,8 +1,9 @@ -import { manifests as folderManifests } from './folder/manifests.js'; import { manifests as defaultTreeItemManifests } from './tree-item/tree-item-default/manifests.js'; import { manifests as defaultTreeManifests } from './default/manifests.js'; -import { manifests as treePickerManifests } from './tree-picker-modal/manifests.js'; import { manifests as entityActionManifests } from './entity-actions/manifests.js'; +import { manifests as folderManifests } from './folder/manifests.js'; +import { manifests as treeMenuItemManifests } from './tree-menu-item/manifests.js'; +import { manifests as treePickerManifests } from './tree-picker-modal/manifests.js'; import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ @@ -10,5 +11,6 @@ export const manifests: Array = ...defaultTreeManifests, ...entityActionManifests, ...folderManifests, + ...treeMenuItemManifests, ...treePickerManifests, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item-default/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item-default/index.ts deleted file mode 100644 index af047cc2d43d..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item-default/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './tree-menu-item-default.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/index.ts new file mode 100644 index 000000000000..c4d5f8a3f079 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/index.ts @@ -0,0 +1 @@ +export * from './tree-menu-item.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/manifests.ts new file mode 100644 index 000000000000..1ace3b635eb4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/manifests.ts @@ -0,0 +1,14 @@ +import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'kind', + alias: 'Umb.Kind.Tree', + matchKind: 'tree', + matchType: 'menuItem', + manifest: { + type: 'menuItem', + element: () => import('./tree-menu-item.element.js'), + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item-default/tree-menu-item-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts similarity index 82% rename from src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item-default/tree-menu-item-default.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts index 8c443d9f5398..bf4cb427a349 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item-default/tree-menu-item-default.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts @@ -1,26 +1,11 @@ import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from '../../menu/section-sidebar-menu/context/section-sidebar-menu.context.token.js'; +import type { UmbTreeElement } from '../tree.element.js'; import type { ManifestMenuItemTreeKind } from './types.js'; import { html, nothing, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; -import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import type { UmbMenuItemElement } from '@umbraco-cms/backoffice/menu'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import type { UmbExpansionChangeEvent } from '@umbraco-cms/backoffice/utils'; -import type { UmbTreeElement } from '../tree.element.js'; - -// TODO: Move to separate file: -const manifest: UmbExtensionManifestKind = { - type: 'kind', - alias: 'Umb.Kind.Tree', - matchKind: 'tree', - matchType: 'menuItem', - manifest: { - type: 'menuItem', - elementName: 'umb-menu-item-tree-default', - }, -}; -umbExtensionsRegistry.register(manifest); @customElement('umb-menu-item-tree-default') export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbMenuItemElement { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item-default/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/types.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item-default/types.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/types.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/types.ts index f4cbd0559396..16a9c910a943 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/types.ts @@ -3,7 +3,7 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; export type * from './entity-actions/types.js'; export type * from './extensions/types.js'; export type * from './folder/types.js'; -export type * from './tree-menu-item-default/types.js'; +export type * from './tree-menu-item/types.js'; export interface UmbTreeItemModelBase extends UmbEntityModel { name: string; From c1f10b9fa132ab71c0e4e05221b6fdc96805b6b4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 1 Jul 2025 15:31:04 +0200 Subject: [PATCH 004/118] make generic entity expansion manager --- .../context/section-sidebar-menu.context.ts | 4 +- .../expansion-manager/index.ts | 1 - .../tree-expansion-manager.ts | 25 +++++------- .../core/tree/expansion-manager/types.ts | 4 +- .../expansion/entity-expansion.manager.ts} | 38 +++++++++---------- .../expansion/events/entity-expanded.event.ts | 0 .../packages/core/utils/expansion/index.ts | 2 + .../expansion}/types.ts | 2 +- 8 files changed, 34 insertions(+), 42 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/index.ts rename src/Umbraco.Web.UI.Client/src/packages/core/{menu/section-sidebar-menu/expansion-manager/expansion-manager.ts => utils/expansion/entity-expansion.manager.ts} (69%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-expanded.event.ts rename src/Umbraco.Web.UI.Client/src/packages/core/{menu/section-sidebar-menu/expansion-manager => utils/expansion}/types.ts (53%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts index e1e9e11fd64f..61944610068b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts @@ -1,10 +1,10 @@ -import { UmbMenuExpansionManager } from '../expansion-manager/index.js'; import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './section-sidebar-menu.context.token.js'; +import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export class UmbSectionSidebarMenuContext extends UmbContextBase { - public readonly expansion = new UmbMenuExpansionManager(this); + public readonly expansion = new UmbEntityExpansionManager(this); constructor(host: UmbControllerHost) { super(host, UMB_SECTION_SIDEBAR_MENU_CONTEXT.toString()); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/index.ts deleted file mode 100644 index 84d2e28140e0..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './expansion-manager.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/expansion-manager/tree-expansion-manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/expansion-manager/tree-expansion-manager.ts index f19739d90516..26f6bba57deb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/expansion-manager/tree-expansion-manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/expansion-manager/tree-expansion-manager.ts @@ -1,8 +1,8 @@ import type { UmbTreeExpansionModel } from './types.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; -import { UmbArrayState, type Observable } from '@umbraco-cms/backoffice/observable-api'; -import { UmbExpansionChangeEvent } from '@umbraco-cms/backoffice/utils'; +import type { Observable } from '@umbraco-cms/backoffice/observable-api'; +import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; /** * Manages the expansion state of a tree @@ -11,8 +11,8 @@ import { UmbExpansionChangeEvent } from '@umbraco-cms/backoffice/utils'; * @augments {UmbControllerBase} */ export class UmbTreeExpansionManager extends UmbControllerBase { - #expansion = new UmbArrayState([], (x) => x.entityType + x.unique); - expansion = this.#expansion.asObservable(); + #manager = new UmbEntityExpansionManager(this); + expansion = this.#manager.expansion; /** * Checks if an entity is expanded @@ -23,9 +23,7 @@ export class UmbTreeExpansionManager extends UmbControllerBase { * @memberof UmbTreeExpansionManager */ isExpanded(entity: UmbEntityModel): Observable { - return this.#expansion.asObservablePart((entries) => - entries?.some((entry) => entry.entityType === entity.entityType && entry.unique === entity.unique), - ); + return this.#manager.isExpanded(entity); } /** @@ -35,7 +33,7 @@ export class UmbTreeExpansionManager extends UmbControllerBase { * @returns {void} */ setExpansion(expansion: UmbTreeExpansionModel): void { - this.#expansion.setValue(expansion); + this.#manager.setExpansion(expansion); } /** @@ -44,7 +42,7 @@ export class UmbTreeExpansionManager extends UmbControllerBase { * @returns {UmbTreeExpansionModel} The expansion state */ getExpansion(): UmbTreeExpansionModel { - return this.#expansion.getValue(); + return this.#manager.getExpansion(); } /** @@ -56,8 +54,7 @@ export class UmbTreeExpansionManager extends UmbControllerBase { * @returns {Promise} */ public async expandItem(entity: UmbEntityModel): Promise { - this.#expansion.appendOne(entity); - this.getHostElement().dispatchEvent(new UmbExpansionChangeEvent()); + this.#manager.expandItem(entity); } /** @@ -69,8 +66,7 @@ export class UmbTreeExpansionManager extends UmbControllerBase { * @returns {Promise} */ public async collapseItem(entity: UmbEntityModel): Promise { - this.#expansion.filter((x) => x.entityType !== entity.entityType || x.unique !== entity.unique); - this.getHostElement().dispatchEvent(new UmbExpansionChangeEvent()); + this.#manager.collapseItem(entity); } /** @@ -79,7 +75,6 @@ export class UmbTreeExpansionManager extends UmbControllerBase { * @returns {Promise} */ public async collapseAll(): Promise { - this.#expansion.setValue([]); - this.getHostElement().dispatchEvent(new UmbExpansionChangeEvent()); + this.#manager.collapseAll(); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/expansion-manager/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/expansion-manager/types.ts index 7d5c0500296d..0585b8ed8c1a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/expansion-manager/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/expansion-manager/types.ts @@ -1,3 +1,3 @@ -import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; +import type { UmbEntityExpansionModel } from '@umbraco-cms/backoffice/utils'; -export type UmbTreeExpansionModel = Array; +export type UmbTreeExpansionModel = UmbEntityExpansionModel; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/expansion-manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts similarity index 69% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/expansion-manager.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts index 4b69108d5f9c..cae6309065e2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/expansion-manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts @@ -1,15 +1,15 @@ -import type { UmbMenuExpansionModel } from './types.js'; +import type { UmbEntityExpansionModel } from './types.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import { UmbArrayState, type Observable } from '@umbraco-cms/backoffice/observable-api'; /** - * Manages the expansion state of a tree + * Manages an expansion state * @exports - * @class UmbTreeExpansionManager + * @class UmbEntityExpansionManager * @augments {UmbControllerBase} */ -export class UmbMenuExpansionManager extends UmbControllerBase { +export class UmbEntityExpansionManager extends UmbControllerBase { #expansion = new UmbArrayState([], (x) => x.entityType + x.unique); expansion = this.#expansion.asObservable(); @@ -19,7 +19,7 @@ export class UmbMenuExpansionManager extends UmbControllerBase { * @param {string} entity.entityType The entity type * @param {string} entity.unique The unique key * @returns {Observable} True if the entity is expanded - * @memberof UmbTreeExpansionManager + * @memberof UmbEntityExpansionManager */ isExpanded(entity: UmbEntityModel): Observable { return this.#expansion.asObservablePart((entries) => @@ -29,33 +29,29 @@ export class UmbMenuExpansionManager extends UmbControllerBase { /** * Sets the expansion state - * @param {UmbMenuExpansionModel | undefined} expansion The expansion state - * @memberof UmbTreeExpansionManager + * @param {UmbEntityExpansionModel | undefined} expansion The expansion state + * @memberof UmbEntityExpansionManager * @returns {void} */ - setExpansion(expansion: UmbMenuExpansionModel): void { + setExpansion(expansion: UmbEntityExpansionModel): void { this.#expansion.setValue(expansion); } /** * Gets the expansion state - * @memberof UmbTreeExpansionManager - * @returns {UmbMenuExpansionModel} The expansion state + * @memberof UmbEntityExpansionManager + * @returns {UmbEntityExpansionModel} The expansion state */ - getExpansion(): UmbMenuExpansionModel { + getExpansion(): UmbEntityExpansionModel { return this.#expansion.getValue(); } - updateExpansion(expansion: UmbMenuExpansionModel): void { - this.#expansion.append(expansion); - } - /** - * Opens a child tree item + * Expands an entity * @param {UmbEntityModel} entity The entity to open * @param {string} entity.entityType The entity type * @param {string} entity.unique The unique key - * @memberof UmbTreeExpansionManager + * @memberof UmbEntityExpansionManager * @returns {Promise} */ public async expandItem(entity: UmbEntityModel): Promise { @@ -63,11 +59,11 @@ export class UmbMenuExpansionManager extends UmbControllerBase { } /** - * Closes a child tree item + * Collapses an entity * @param {UmbEntityModel} entity The entity to close * @param {string} entity.entityType The entity type * @param {string} entity.unique The unique key - * @memberof UmbTreeExpansionManager + * @memberof UmbEntityExpansionManager * @returns {Promise} */ public async collapseItem(entity: UmbEntityModel): Promise { @@ -75,8 +71,8 @@ export class UmbMenuExpansionManager extends UmbControllerBase { } /** - * Closes all child tree items - * @memberof UmbTreeExpansionManager + * Collapses all expanded entities + * @memberof UmbEntityExpansionManager * @returns {Promise} */ public async collapseAll(): Promise { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-expanded.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-expanded.event.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/index.ts index 978a8e063013..e7c6de45ff21 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/index.ts @@ -1 +1,3 @@ +export * from './entity-expansion.manager.js'; export * from './events/index.js'; +export type * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts similarity index 53% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/types.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts index f8e8127414f6..03eaaf8584e4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion-manager/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts @@ -1,3 +1,3 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; -export type UmbMenuExpansionModel = Array; +export type UmbEntityExpansionModel = Array; From fc2525e058b2dc14e5bde01cb6341a7a66d4d4a2 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 2 Jul 2025 12:16:27 +0200 Subject: [PATCH 005/118] wip menu context --- .../core/menu/components/menu/index.ts | 1 + .../components/menu/menu.context.token.ts | 4 +++ .../core/menu/components/menu/menu.context.ts | 25 +++++++++++++++++++ .../core/menu/components/menu/menu.element.ts | 6 +++++ .../context/section-sidebar-menu.context.ts | 2 +- .../tree-menu-item/tree-menu-item.element.ts | 24 ++++++++---------- 6 files changed, 48 insertions(+), 14 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.token.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/index.ts index 242a263f7af8..b8635a62e62b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/index.ts @@ -1 +1,2 @@ export * from './menu.element.js'; +export * from './menu.context.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.token.ts new file mode 100644 index 000000000000..6385f345782e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.token.ts @@ -0,0 +1,4 @@ +import type { UmbDefaultMenuContext } from './menu.context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const UMB_MENU_CONTEXT = new UmbContextToken('UmbMenuContext'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.ts new file mode 100644 index 000000000000..62d6bc63527e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.ts @@ -0,0 +1,25 @@ +import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from '../../section-sidebar-menu/context/section-sidebar-menu.context.token.js'; +import { UMB_MENU_CONTEXT } from './menu.context.token.js'; +import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; +import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; + +export class UmbDefaultMenuContext extends UmbContextBase { + public readonly expansion = new UmbEntityExpansionManager(this); + + constructor(host: UmbControllerHost) { + super(host, UMB_MENU_CONTEXT); + + // TODO: remove this dependency on the section sidebar menu context + // This is a temporary solution to allow the menu to work in the section sidebar menu + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (context) => { + this.#observeExpansion(context); + }); + } + + #observeExpansion(context: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE | undefined) { + this.observe(context?.expansion.expansion, (items) => { + this.expansion.setExpansion(items || []); + }); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts index 7e051db0e0cd..e5feba328436 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts @@ -1,5 +1,6 @@ import type { ManifestMenu } from '../../menu.extension.js'; import type { ManifestMenuItem } from '../../menu-item.extension.js'; +import { UmbDefaultMenuContext } from './menu.context.js'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -10,6 +11,11 @@ export class UmbMenuElement extends UmbLitElement { @property({ attribute: false }) manifest?: ManifestMenu; + constructor() { + super(); + new UmbDefaultMenuContext(this); + } + override render() { return html` = []; + _menuExpansion: UmbEntityExpansionModel = []; - #context?: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE; + #menuContext?: typeof UMB_MENU_CONTEXT.TYPE; constructor() { super(); - // TODO: make another context abstraction UMB_MENU_CONTEXT - this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (context) => { - this.#context = context; + + this.consumeContext(UMB_MENU_CONTEXT, (context) => { + this.#menuContext = context; this.#observeExpansion(); }); } #observeExpansion() { - this.observe(this.#context?.expansion.expansion, (items) => { - this._expansion = items || []; + this.observe(this.#menuContext?.expansion.expansion, (items) => { + this._menuExpansion = items || []; }); } @@ -36,7 +34,7 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM event.stopPropagation(); const target = event.target as UmbTreeElement; const expansion = target.getExpansion(); - this.#context?.expansion.updateExpansion(expansion); + debugger; } override render() { @@ -50,7 +48,7 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM selectable: false, multiple: false, }, - expansion: this._expansion, + expansion: this._menuExpansion, }} @expansion-change=${this.#onExpansionChange}> ` From 8a146e82f5f210e723b18d2ad812059cf9788931 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 2 Jul 2025 12:23:07 +0200 Subject: [PATCH 006/118] add collapsed and expanded events --- .../utils/expansion/events/entity-collapsed.event.ts | 12 ++++++++++++ .../utils/expansion/events/entity-expanded.event.ts | 12 ++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-collapsed.event.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-collapsed.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-collapsed.event.ts new file mode 100644 index 000000000000..c48e2b08a9c5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-collapsed.event.ts @@ -0,0 +1,12 @@ +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; + +export class UmbEntityCollapsedEvent extends Event { + public static readonly TYPE = 'entity-collapsed'; + entity: UmbEntityModel | undefined; + + public constructor(entity?: UmbEntityModel) { + // mimics the native change event + super(UmbEntityCollapsedEvent.TYPE, { bubbles: true, composed: false, cancelable: false }); + this.entity = entity; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-expanded.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-expanded.event.ts index e69de29bb2d1..6984ec7d80b5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-expanded.event.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-expanded.event.ts @@ -0,0 +1,12 @@ +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; + +export class UmbEntityExpandedEvent extends Event { + public static readonly TYPE = 'entity-expanded'; + entity: UmbEntityModel | undefined; + + public constructor(entity?: UmbEntityModel) { + // mimics the native change event + super(UmbEntityExpandedEvent.TYPE, { bubbles: true, composed: false, cancelable: false }); + this.entity = entity; + } +} From 2c8e185db8345859205dab9fd049e9c78f38afdb Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 2 Jul 2025 12:35:02 +0200 Subject: [PATCH 007/118] Export new expansion entity event modules --- .../src/packages/core/utils/expansion/events/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/index.ts index 72a512498089..1f3f158bbe64 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/index.ts @@ -1 +1,3 @@ export * from './expansion-change.event.js'; +export * from './expansion-entity-collapsed.event.js'; +export * from './expansion-entity-expanded.event.js'; From c2f361960e0aec9750dc1e1753814b88dec65260 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 2 Jul 2025 12:35:17 +0200 Subject: [PATCH 008/118] rename events --- .../utils/expansion/events/entity-collapsed.event.ts | 12 ------------ .../utils/expansion/events/entity-expanded.event.ts | 12 ------------ .../events/expansion-entity-collapsed.event.ts | 12 ++++++++++++ .../events/expansion-entity-expanded.event.ts | 12 ++++++++++++ 4 files changed, 24 insertions(+), 24 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-collapsed.event.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-expanded.event.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-collapsed.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-collapsed.event.ts deleted file mode 100644 index c48e2b08a9c5..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-collapsed.event.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; - -export class UmbEntityCollapsedEvent extends Event { - public static readonly TYPE = 'entity-collapsed'; - entity: UmbEntityModel | undefined; - - public constructor(entity?: UmbEntityModel) { - // mimics the native change event - super(UmbEntityCollapsedEvent.TYPE, { bubbles: true, composed: false, cancelable: false }); - this.entity = entity; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-expanded.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-expanded.event.ts deleted file mode 100644 index 6984ec7d80b5..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/entity-expanded.event.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; - -export class UmbEntityExpandedEvent extends Event { - public static readonly TYPE = 'entity-expanded'; - entity: UmbEntityModel | undefined; - - public constructor(entity?: UmbEntityModel) { - // mimics the native change event - super(UmbEntityExpandedEvent.TYPE, { bubbles: true, composed: false, cancelable: false }); - this.entity = entity; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts new file mode 100644 index 000000000000..9ddc639ce45b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts @@ -0,0 +1,12 @@ +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; + +export class UmbExpansionEntityCollapsedEvent extends Event { + public static readonly TYPE = 'expansion-entity-collapsed'; + entity: UmbEntityModel | undefined; + + public constructor(entity: UmbEntityModel) { + // mimics the native change event + super(UmbExpansionEntityCollapsedEvent.TYPE, { bubbles: true, composed: false, cancelable: false }); + this.entity = entity; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts new file mode 100644 index 000000000000..9ea152cd45c4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts @@ -0,0 +1,12 @@ +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; + +export class UmbExpansionEntityExpandedEvent extends Event { + public static readonly TYPE = 'expansion-entity-expanded'; + entity: UmbEntityModel | undefined; + + public constructor(entity: UmbEntityModel) { + // mimics the native change event + super(UmbExpansionEntityExpandedEvent.TYPE, { bubbles: true, composed: false, cancelable: false }); + this.entity = entity; + } +} From 90a6db29436535b2cac70f5399b655c43bd46fa4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 2 Jul 2025 12:35:43 +0200 Subject: [PATCH 009/118] dispatch events --- .../core/utils/expansion/entity-expansion.manager.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts index cae6309065e2..8d14e0772026 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts @@ -1,4 +1,9 @@ import type { UmbEntityExpansionModel } from './types.js'; +import { + UmbExpansionEntityExpandedEvent, + UmbExpansionEntityCollapsedEvent, + UmbExpansionChangeEvent, +} from './events/index.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import { UmbArrayState, type Observable } from '@umbraco-cms/backoffice/observable-api'; @@ -35,6 +40,7 @@ export class UmbEntityExpansionManager extends UmbControllerBase { */ setExpansion(expansion: UmbEntityExpansionModel): void { this.#expansion.setValue(expansion); + this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } /** @@ -56,6 +62,8 @@ export class UmbEntityExpansionManager extends UmbControllerBase { */ public async expandItem(entity: UmbEntityModel): Promise { this.#expansion.appendOne(entity); + this.getHostElement()?.dispatchEvent(new UmbExpansionEntityExpandedEvent(entity)); + this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } /** @@ -68,6 +76,8 @@ export class UmbEntityExpansionManager extends UmbControllerBase { */ public async collapseItem(entity: UmbEntityModel): Promise { this.#expansion.filter((x) => x.entityType !== entity.entityType || x.unique !== entity.unique); + this.getHostElement()?.dispatchEvent(new UmbExpansionEntityExpandedEvent(entity)); + this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } /** @@ -77,5 +87,6 @@ export class UmbEntityExpansionManager extends UmbControllerBase { */ public async collapseAll(): Promise { this.#expansion.setValue([]); + this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } } From 8316f6663569b7ef35636f5e48e1cbb40eeba824 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 2 Jul 2025 13:01:19 +0200 Subject: [PATCH 010/118] Set tree expansion changes in the menu context --- .../tree-menu-item/tree-menu-item.element.ts | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts index 41059a97c6e5..194cecb434f0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts @@ -1,9 +1,12 @@ -import type { UmbTreeElement } from '../tree.element.js'; import type { ManifestMenuItemTreeKind } from './types.js'; import { html, nothing, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_MENU_CONTEXT, type UmbMenuItemElement } from '@umbraco-cms/backoffice/menu'; -import type { UmbEntityExpansionModel, UmbExpansionChangeEvent } from '@umbraco-cms/backoffice/utils'; +import { + UmbExpansionEntityCollapsedEvent, + UmbExpansionEntityExpandedEvent, + type UmbEntityExpansionModel, +} from '@umbraco-cms/backoffice/utils'; @customElement('umb-menu-item-tree-default') export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbMenuItemElement { @@ -30,11 +33,19 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM }); } - #onExpansionChange(event: UmbExpansionChangeEvent) { + #onEntityExpansionChange(event: UmbExpansionEntityExpandedEvent | UmbExpansionEntityCollapsedEvent) { event.stopPropagation(); - const target = event.target as UmbTreeElement; - const expansion = target.getExpansion(); - debugger; + const eventEntity = event.entity; + + if (!eventEntity) { + throw new Error('Entity is required to toggle expansion.'); + } + + if (event.type === UmbExpansionEntityExpandedEvent.TYPE) { + this.#menuContext?.expansion.expandItem(eventEntity); + } else if (event.type === UmbExpansionEntityCollapsedEvent.TYPE) { + this.#menuContext?.expansion.collapseItem(eventEntity); + } } override render() { @@ -50,7 +61,8 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM }, expansion: this._menuExpansion, }} - @expansion-change=${this.#onExpansionChange}> + @expansion-entity-expanded=${this.#onEntityExpansionChange} + @expansion-entity-collapsed=${this.#onEntityExpansionChange}> ` : nothing; } From 69901570ac359a2b3c967c279560ebb0bc82ea21 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 2 Jul 2025 13:43:40 +0200 Subject: [PATCH 011/118] expand menu from workspace --- .../menu-tree-structure-workspace-context-base.ts | 10 ++++++++++ ...riant-tree-structure-workspace-context-base.ts | 15 +++++++++++++++ .../core/menu/section-sidebar-menu/constants.ts | 1 + .../section-sidebar-menu/context/constants.ts | 1 + .../core/menu/section-sidebar-menu/index.ts | 1 + 5 files changed, 28 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/constants.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts index 5ebd0dc2ae90..a1964621c9fc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts @@ -1,5 +1,6 @@ import type { UmbStructureItemModel } from './types.js'; import { UMB_MENU_STRUCTURE_WORKSPACE_CONTEXT } from './menu-structure-workspace-context.context-token.js'; +import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './section-sidebar-menu/index.js'; import type { UmbTreeRepository, UmbTreeItemModel, UmbTreeRootModel } from '@umbraco-cms/backoffice/tree'; import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; @@ -28,6 +29,7 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex #parentContext = new UmbParentEntityContext(this); #ancestorContext = new UmbAncestorsEntityContext(this); + #sectionSidebarMenuContext?: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE; constructor(host: UmbControllerHost, args: UmbMenuTreeStructureWorkspaceContextBaseArgs) { super(host, UMB_MENU_STRUCTURE_WORKSPACE_CONTEXT); @@ -35,6 +37,10 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex this.provideContext('UmbMenuStructureWorkspaceContext', this); this.#args = args; + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (instance) => { + this.#sectionSidebarMenuContext = instance; + }); + this.consumeContext(UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT, (instance) => { this.#workspaceContext = instance; this.observe(this.#workspaceContext?.unique, (value) => { @@ -98,6 +104,10 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex this.#structure.setValue(structureItems); this.#setParentData(structureItems); this.#setAncestorData(data); + + structureItems.forEach((item) => { + this.#sectionSidebarMenuContext?.expansion.expandItem({ entityType: item.entityType, unique: item.unique }); + }); } } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index db207951b03f..ad3bb8d58e5a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -1,5 +1,6 @@ import type { UmbVariantStructureItemModel } from './types.js'; import { UMB_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT } from './menu-variant-structure-workspace-context.context-token.js'; +import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './section-sidebar-menu/context/section-sidebar-menu.context.token.js'; import type { UmbTreeItemModel, UmbTreeRepository, UmbTreeRootModel } from '@umbraco-cms/backoffice/tree'; import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; @@ -29,6 +30,7 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um #parentContext = new UmbParentEntityContext(this); #ancestorContext = new UmbAncestorsEntityContext(this); + #sectionSidebarMenuContext?: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE; public readonly IS_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT = true; @@ -38,6 +40,10 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um this.provideContext('UmbMenuStructureWorkspaceContext', this); this.#args = args; + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (instance) => { + this.#sectionSidebarMenuContext = instance; + }); + this.consumeContext(UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT, (instance) => { this.#workspaceContext = instance; this.observe( @@ -108,6 +114,15 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um this.#structure.setValue(structureItems); this.#setParentData(structureItems); this.#setAncestorData(data); + + const entities = structureItems.map((item) => { + return { + unique: item.unique, + entityType: item.entityType, + }; + }); + + this.#sectionSidebarMenuContext?.expansion.bulkExpandItem(entities); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/constants.ts new file mode 100644 index 000000000000..9c6a2415c811 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/constants.ts @@ -0,0 +1 @@ +export * from './context/constants.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/constants.ts new file mode 100644 index 000000000000..1918647c8747 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/constants.ts @@ -0,0 +1 @@ +export * from './section-sidebar-menu.context.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/index.ts index 2d3149a8d43d..0371f2072ea1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/index.ts @@ -1 +1,2 @@ export * from './section-sidebar-menu.element.js'; +export * from './constants.js'; From f0719d6cd52eeb6b23dd7ecf9e4cf06819ed561a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 2 Jul 2025 13:44:02 +0200 Subject: [PATCH 012/118] do not allow undefined --- .../utils/expansion/events/expansion-entity-collapsed.event.ts | 2 +- .../utils/expansion/events/expansion-entity-expanded.event.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts index 9ddc639ce45b..7e2b2576a0c1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts @@ -2,7 +2,7 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; export class UmbExpansionEntityCollapsedEvent extends Event { public static readonly TYPE = 'expansion-entity-collapsed'; - entity: UmbEntityModel | undefined; + entity: UmbEntityModel; public constructor(entity: UmbEntityModel) { // mimics the native change event diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts index 9ea152cd45c4..efe83ffee0b7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts @@ -2,7 +2,7 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; export class UmbExpansionEntityExpandedEvent extends Event { public static readonly TYPE = 'expansion-entity-expanded'; - entity: UmbEntityModel | undefined; + entity: UmbEntityModel; public constructor(entity: UmbEntityModel) { // mimics the native change event From e7b50fc5ea77abb452e2ebe58673f9d5733da9e7 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 2 Jul 2025 13:46:59 +0200 Subject: [PATCH 013/118] make menu item feature folder --- .../menu/components/menu-item/link/link-menu-item.element.ts | 2 +- .../menu/components/menu-item/menu-item-default.element.ts | 2 +- .../core/menu/{ => menu-item}/menu-item-element.interface.ts | 0 .../packages/core/menu/{ => menu-item}/menu-item.extension.ts | 0 .../src/packages/core/menu/menu-item/types.ts | 2 ++ src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts | 3 +-- 6 files changed, 5 insertions(+), 4 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/core/menu/{ => menu-item}/menu-item-element.interface.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/menu/{ => menu-item}/menu-item.extension.ts (100%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/types.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/link-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/link-menu-item.element.ts index b902cd18e289..8d42d6967e03 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/link-menu-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/link-menu-item.element.ts @@ -1,4 +1,4 @@ -import type { UmbMenuItemElement } from '../../../menu-item-element.interface.js'; +import type { UmbMenuItemElement } from '../../../menu-item/menu-item-element.interface.js'; import type { ManifestMenuItemLinkKind } from './types.js'; import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item-default.element.ts index 269133145cb4..53ba32b8a414 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item-default.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item-default.element.ts @@ -1,4 +1,4 @@ -import type { UmbMenuItemElement } from '../../menu-item-element.interface.js'; +import type { UmbMenuItemElement } from '../../menu-item/menu-item-element.interface.js'; import type { ManifestMenuItem } from '../../menu-item.extension.js'; import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item-element.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/menu-item-element.interface.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item-element.interface.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/menu-item-element.interface.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/menu-item.extension.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item.extension.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/menu-item.extension.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/types.ts new file mode 100644 index 000000000000..a30e82bccb32 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/types.ts @@ -0,0 +1,2 @@ +export type * from './menu-item-element.interface.js'; +export type * from './menu-item.extension.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts index 93dda2eb92fc..7989f79e7284 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts @@ -2,8 +2,7 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; export type * from './components/types.js'; export type * from './conditions/types.js'; -export type * from './menu-item-element.interface.js'; -export type * from './menu-item.extension.js'; +export type * from './menu-item/types.js'; export type * from './menu.extension.js'; // eslint-disable-next-line @typescript-eslint/no-empty-object-type From 6cf35c192a4e87c186b9615fc149d78439e5171a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 2 Jul 2025 13:51:08 +0200 Subject: [PATCH 014/118] Update menu-variant-tree-structure-workspace-context-base.ts --- ...menu-variant-tree-structure-workspace-context-base.ts | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index ad3bb8d58e5a..6f24daf0d05a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -115,14 +115,9 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um this.#setParentData(structureItems); this.#setAncestorData(data); - const entities = structureItems.map((item) => { - return { - unique: item.unique, - entityType: item.entityType, - }; + structureItems.forEach((item) => { + this.#sectionSidebarMenuContext?.expansion.expandItem({ entityType: item.entityType, unique: item.unique }); }); - - this.#sectionSidebarMenuContext?.expansion.bulkExpandItem(entities); } } From b8878087ee56c7845e09a96b13acd069f75169a0 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 29 Jul 2025 11:02:48 +0200 Subject: [PATCH 015/118] menu: pass expansion as prop to prevent dependency on the section sidebar --- .../core/menu/components/menu/menu.context.ts | 13 ------------- .../core/menu/components/menu/menu.element.ts | 13 +++++++++---- .../section-sidebar-menu.element.ts | 19 +++++++++++++------ 3 files changed, 22 insertions(+), 23 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.ts index 62d6bc63527e..69946af88fb5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.ts @@ -1,4 +1,3 @@ -import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from '../../section-sidebar-menu/context/section-sidebar-menu.context.token.js'; import { UMB_MENU_CONTEXT } from './menu.context.token.js'; import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; @@ -9,17 +8,5 @@ export class UmbDefaultMenuContext extends UmbContextBase { constructor(host: UmbControllerHost) { super(host, UMB_MENU_CONTEXT); - - // TODO: remove this dependency on the section sidebar menu context - // This is a temporary solution to allow the menu to work in the section sidebar menu - this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (context) => { - this.#observeExpansion(context); - }); - } - - #observeExpansion(context: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE | undefined) { - this.observe(context?.expansion.expansion, (items) => { - this.expansion.setExpansion(items || []); - }); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts index e5feba328436..fc23c9f0323e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts @@ -1,8 +1,9 @@ import type { ManifestMenu } from '../../menu.extension.js'; -import type { ManifestMenuItem } from '../../menu-item.extension.js'; +import type { ManifestMenuItem } from '../../menu-item/types.js'; import { UmbDefaultMenuContext } from './menu.context.js'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import type { UmbEntityExpansionModel } from '@umbraco-cms/backoffice/utils'; import '../menu-item/menu-item-default.element.js'; @@ -11,10 +12,14 @@ export class UmbMenuElement extends UmbLitElement { @property({ attribute: false }) manifest?: ManifestMenu; - constructor() { - super(); - new UmbDefaultMenuContext(this); + public get expansion(): UmbEntityExpansionModel { + return this.#context.expansion.getExpansion(); } + public set expansion(value: UmbEntityExpansionModel) { + this.#context.expansion.setExpansion(value); + } + + #context = new UmbDefaultMenuContext(this); override render() { return html` diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index 0a294d4f55a5..3c050d6e1e71 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -1,11 +1,12 @@ import type { ManifestMenu } from '../menu.extension.js'; import type { ManifestSectionSidebarAppBaseMenu, ManifestSectionSidebarAppMenuKind } from './types.js'; +import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './context/section-sidebar-menu.context.token.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './context/section-sidebar-menu.context.token.js'; +import type { UmbEntityExpansionModel } from '@umbraco-cms/backoffice/utils'; // TODO: Move to separate file: const manifest: UmbExtensionManifestKind = { @@ -35,19 +36,22 @@ export class UmbSectionSidebarMenuElement< return html`

${this.localize.string(this.manifest?.meta?.label ?? '')}

`; } - #context?: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE; + #sectionSidebarMenuContext?: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE; + + @state() + private _expansion: UmbEntityExpansionModel = []; constructor() { super(); this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (context) => { - this.#context = context; + this.#sectionSidebarMenuContext = context; this.#observeExpansion(); }); } #observeExpansion() { - this.observe(this.#context?.expansion.expansion, (items) => { - console.log('Expanded items:', items); + this.observe(this.#sectionSidebarMenuContext?.expansion.expansion, (items) => { + this._expansion = items || []; }); } @@ -57,6 +61,9 @@ export class UmbSectionSidebarMenuElement< `; } From 9a57dc7e3b74925c298cbf4740184058f54f9ebe Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 29 Jul 2025 11:03:01 +0200 Subject: [PATCH 016/118] use correct event --- .../packages/core/utils/expansion/entity-expansion.manager.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts index 8d14e0772026..4e0e24b8cd43 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts @@ -76,7 +76,7 @@ export class UmbEntityExpansionManager extends UmbControllerBase { */ public async collapseItem(entity: UmbEntityModel): Promise { this.#expansion.filter((x) => x.entityType !== entity.entityType || x.unique !== entity.unique); - this.getHostElement()?.dispatchEvent(new UmbExpansionEntityExpandedEvent(entity)); + this.getHostElement()?.dispatchEvent(new UmbExpansionEntityCollapsedEvent(entity)); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } From b307d8cb2a416a893b99a9e3f48bbf1ca6d2577d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 29 Jul 2025 13:16:43 +0200 Subject: [PATCH 017/118] Add event listener support to extension slot element Introduces an 'events' property to UmbExtensionSlotElement, allowing dynamic assignment and removal of event listeners on extension components. Event listeners are added when extensions are permitted and removed on disconnect, improving extensibility and event handling for extension slots. --- .../extension-slot/extension-slot.element.ts | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts index 069e41f5dbe4..41874e9787e2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts @@ -88,6 +88,18 @@ export class UmbExtensionSlotElement extends UmbLitElement { } #props?: Record = {}; + @property({ type: Object, attribute: false }) + set events(newVal: Record void> | undefined) { + this.#events = newVal; + if (this.#extensionsController) { + this.#addEventListenersToExtensionElement(); + } + } + get events(): Record void> | undefined { + return this.#events; + } + #events?: Record void> = {}; + @property({ type: String, attribute: 'default-element' }) public defaultElement?: string; @@ -104,6 +116,7 @@ export class UmbExtensionSlotElement extends UmbLitElement { } override disconnectedCallback(): void { // _permitted is reset as the extensionsController fires a callback on destroy. + this.#removeEventListenersFromExtensionElement(); this.#attached = false; this.#extensionsController?.destroy(); this.#extensionsController = undefined; @@ -121,6 +134,7 @@ export class UmbExtensionSlotElement extends UmbLitElement { this.filter, (extensionControllers) => { this._permitted = extensionControllers; + this.#addEventListenersToExtensionElement(); }, undefined, // We can leave the alias undefined as we destroy this our selfs. this.defaultElement, @@ -144,6 +158,34 @@ export class UmbExtensionSlotElement extends UmbLitElement { return this.renderMethod ? this.renderMethod(ext, i) : ext.component; }; + #addEventListenersToExtensionElement() { + this._permitted?.forEach((initializer) => { + const component = initializer.component as HTMLElement; + if (!component) return; + + const events = this.#events; + if (!events) return; + + Object.entries(events).forEach(([eventName, handler]) => { + component.addEventListener(eventName, handler); + }); + }); + } + + #removeEventListenersFromExtensionElement() { + this._permitted?.forEach((initializer) => { + const component = initializer.component as HTMLElement; + if (!component) return; + + const events = this.#events; + if (!events) return; + + Object.entries(events).forEach(([eventName, handler]) => { + component.removeEventListener(eventName, handler); + }); + }); + } + static override styles = css` :host { display: contents; From aaa59afa0749680e06c6840ac8284bbf4b4bcb09 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 29 Jul 2025 13:17:19 +0200 Subject: [PATCH 018/118] Add entity expansion event handling to sidebar menu Introduces handlers for entity expansion and collapse events in the section sidebar menu. This change enables the menu to respond to expansion state changes by updating the context accordingly. --- .../section-sidebar-menu.element.ts | 31 ++++++++++++++++--- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index 3c050d6e1e71..db0b02dbf0c4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -6,7 +6,11 @@ import { css, html, customElement, property, state } from '@umbraco-cms/backoffi import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbEntityExpansionModel } from '@umbraco-cms/backoffice/utils'; +import { + UmbExpansionEntityCollapsedEvent, + UmbExpansionEntityExpandedEvent, + type UmbEntityExpansionModel, +} from '@umbraco-cms/backoffice/utils'; // TODO: Move to separate file: const manifest: UmbExtensionManifestKind = { @@ -39,7 +43,7 @@ export class UmbSectionSidebarMenuElement< #sectionSidebarMenuContext?: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE; @state() - private _expansion: UmbEntityExpansionModel = []; + private _sectionSidebarMenuExpansion: UmbEntityExpansionModel = []; constructor() { super(); @@ -51,10 +55,25 @@ export class UmbSectionSidebarMenuElement< #observeExpansion() { this.observe(this.#sectionSidebarMenuContext?.expansion.expansion, (items) => { - this._expansion = items || []; + this._sectionSidebarMenuExpansion = items || []; }); } + #onEntityExpansionChange(event: UmbExpansionEntityExpandedEvent | UmbExpansionEntityCollapsedEvent) { + event.stopPropagation(); + const eventEntity = event.entity; + + if (!eventEntity) { + throw new Error('Entity is required to toggle expansion.'); + } + + if (event.type === UmbExpansionEntityExpandedEvent.TYPE) { + this.#sectionSidebarMenuContext?.expansion.expandItem(eventEntity); + } else if (event.type === UmbExpansionEntityCollapsedEvent.TYPE) { + this.#sectionSidebarMenuContext?.expansion.collapseItem(eventEntity); + } + } + override render() { return html` ${this.renderHeader()} @@ -62,7 +81,11 @@ export class UmbSectionSidebarMenuElement< type="menu" .filter="${(menu: ManifestMenu) => menu.alias === this.manifest?.meta?.menu}" .props="${{ - expansion: this._expansion, + expansion: this._sectionSidebarMenuExpansion, + }}" + .events="${{ + 'expansion-entity-expanded': this.#onEntityExpansionChange.bind(this), + 'expansion-entity-collapsed': this.#onEntityExpansionChange.bind(this), }}" default-element="umb-menu"> `; From 34922d1887e91b68fdfa2a090514ea1f342090f3 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 29 Jul 2025 14:36:54 +0200 Subject: [PATCH 019/118] Optimize expansion state updates in menu components Introduces a local expansion state to both section sidebar and tree menu item components to prevent unnecessary updates and rerenders. This improves performance by ensuring state updates only occur when needed. --- .../section-sidebar-menu.element.ts | 12 ++++++++++++ .../tree/tree-menu-item/tree-menu-item.element.ts | 11 +++++++++++ 2 files changed, 23 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index db0b02dbf0c4..ea35faece9d0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -45,6 +45,8 @@ export class UmbSectionSidebarMenuElement< @state() private _sectionSidebarMenuExpansion: UmbEntityExpansionModel = []; + #localExpansionState: UmbEntityExpansionModel = []; + constructor() { super(); this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (context) => { @@ -55,6 +57,12 @@ export class UmbSectionSidebarMenuElement< #observeExpansion() { this.observe(this.#sectionSidebarMenuContext?.expansion.expansion, (items) => { + const allEntriesExists = this.#localExpansionState.every((localItem) => + items?.some((item) => item.unique === localItem.unique && item.entityType === localItem.entityType), + ); + + // Ensure that we only updates the expansion (and rerenders) if the state has been changed outside of the component. + if (allEntriesExists) return; this._sectionSidebarMenuExpansion = items || []; }); } @@ -68,8 +76,12 @@ export class UmbSectionSidebarMenuElement< } if (event.type === UmbExpansionEntityExpandedEvent.TYPE) { + this.#localExpansionState.push(eventEntity); this.#sectionSidebarMenuContext?.expansion.expandItem(eventEntity); } else if (event.type === UmbExpansionEntityCollapsedEvent.TYPE) { + this.#localExpansionState = this.#localExpansionState.filter( + (entity) => !(entity.unique === eventEntity.unique && entity.entityType === eventEntity.entityType), + ); this.#sectionSidebarMenuContext?.expansion.collapseItem(eventEntity); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts index 194cecb434f0..1cddbb82606b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts @@ -17,6 +17,7 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM _menuExpansion: UmbEntityExpansionModel = []; #menuContext?: typeof UMB_MENU_CONTEXT.TYPE; + #localExpansionState: UmbEntityExpansionModel = []; constructor() { super(); @@ -29,6 +30,12 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM #observeExpansion() { this.observe(this.#menuContext?.expansion.expansion, (items) => { + const allEntriesExists = this.#localExpansionState.every((localItem) => + items?.some((item) => item.unique === localItem.unique && item.entityType === localItem.entityType), + ); + + // Ensure that we only updates the expansion (and rerenders) if the state has been changed outside of the component. + if (allEntriesExists) return; this._menuExpansion = items || []; }); } @@ -42,8 +49,12 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM } if (event.type === UmbExpansionEntityExpandedEvent.TYPE) { + this.#localExpansionState.push(eventEntity); this.#menuContext?.expansion.expandItem(eventEntity); } else if (event.type === UmbExpansionEntityCollapsedEvent.TYPE) { + this.#localExpansionState = this.#localExpansionState.filter( + (entity) => !(entity.unique === eventEntity.unique && entity.entityType === eventEntity.entityType), + ); this.#menuContext?.expansion.collapseItem(eventEntity); } } From f21224ba70c27f63fac19c0c71568239c820ac83 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 29 Jul 2025 15:39:34 +0200 Subject: [PATCH 020/118] only check if we have a local state already --- .../section-sidebar-menu/section-sidebar-menu.element.ts | 8 +++++--- .../core/tree/tree-menu-item/tree-menu-item.element.ts | 8 +++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index ea35faece9d0..ccbf4554ea76 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -57,9 +57,11 @@ export class UmbSectionSidebarMenuElement< #observeExpansion() { this.observe(this.#sectionSidebarMenuContext?.expansion.expansion, (items) => { - const allEntriesExists = this.#localExpansionState.every((localItem) => - items?.some((item) => item.unique === localItem.unique && item.entityType === localItem.entityType), - ); + const allEntriesExists = + this.#localExpansionState.length > 0 && + this.#localExpansionState.every((localItem) => + items?.some((item) => item.unique === localItem.unique && item.entityType === localItem.entityType), + ); // Ensure that we only updates the expansion (and rerenders) if the state has been changed outside of the component. if (allEntriesExists) return; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts index 1cddbb82606b..888a3370ea05 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts @@ -30,9 +30,11 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM #observeExpansion() { this.observe(this.#menuContext?.expansion.expansion, (items) => { - const allEntriesExists = this.#localExpansionState.every((localItem) => - items?.some((item) => item.unique === localItem.unique && item.entityType === localItem.entityType), - ); + const allEntriesExists = + this.#localExpansionState.length > 0 && + this.#localExpansionState.every((localItem) => + items?.some((item) => item.unique === localItem.unique && item.entityType === localItem.entityType), + ); // Ensure that we only updates the expansion (and rerenders) if the state has been changed outside of the component. if (allEntriesExists) return; From 63f04aee4671262fcf1b290615e35ae054233151 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 29 Jul 2025 17:01:55 +0200 Subject: [PATCH 021/118] add bulk expand method --- .../utils/expansion/entity-expansion.manager.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts index 4e0e24b8cd43..2b4f15484c60 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts @@ -66,6 +66,21 @@ export class UmbEntityExpansionManager extends UmbControllerBase { this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } + /** + * Expands multiple entities + * @param {UmbEntityModel[]} entities The entities to open + * @memberof UmbEntityExpansionManager + * @returns {void} + */ + public expandItemBulk(entities: UmbEntityModel[]): void { + if (!entities || entities.length === 0) return; + this.#expansion.append(entities); + entities.forEach((entity) => { + this.getHostElement()?.dispatchEvent(new UmbExpansionEntityExpandedEvent(entity)); + }); + this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); + } + /** * Collapses an entity * @param {UmbEntityModel} entity The entity to close From e192f6765ebadafef241b84dd49e607c66ead0ae Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 29 Jul 2025 17:02:12 +0200 Subject: [PATCH 022/118] use bulk expand method --- .../menu/menu-tree-structure-workspace-context-base.ts | 9 ++++++--- ...menu-variant-tree-structure-workspace-context-base.ts | 9 ++++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts index a1964621c9fc..a0fa1cfae1d9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts @@ -105,9 +105,12 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex this.#setParentData(structureItems); this.#setAncestorData(data); - structureItems.forEach((item) => { - this.#sectionSidebarMenuContext?.expansion.expandItem({ entityType: item.entityType, unique: item.unique }); - }); + this.#sectionSidebarMenuContext?.expansion.expandItemBulk( + structureItems.map((item) => ({ + entityType: item.entityType, + unique: item.unique, + })), + ); } } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index 6f24daf0d05a..923c0e179681 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -115,9 +115,12 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um this.#setParentData(structureItems); this.#setAncestorData(data); - structureItems.forEach((item) => { - this.#sectionSidebarMenuContext?.expansion.expandItem({ entityType: item.entityType, unique: item.unique }); - }); + this.#sectionSidebarMenuContext?.expansion.expandItemBulk( + structureItems.map((item) => ({ + entityType: item.entityType, + unique: item.unique, + })), + ); } } From a7f4e9e12edf4e92dfb70efb06771df6230f4a07 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 08:57:57 +0200 Subject: [PATCH 023/118] align naming --- .../core/menu/menu-tree-structure-workspace-context-base.ts | 2 +- .../menu/menu-variant-tree-structure-workspace-context-base.ts | 2 +- .../packages/core/utils/expansion/entity-expansion.manager.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts index a0fa1cfae1d9..36b3db0de889 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts @@ -105,7 +105,7 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex this.#setParentData(structureItems); this.#setAncestorData(data); - this.#sectionSidebarMenuContext?.expansion.expandItemBulk( + this.#sectionSidebarMenuContext?.expansion.expandItems( structureItems.map((item) => ({ entityType: item.entityType, unique: item.unique, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index 923c0e179681..c156fcd58c3b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -115,7 +115,7 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um this.#setParentData(structureItems); this.#setAncestorData(data); - this.#sectionSidebarMenuContext?.expansion.expandItemBulk( + this.#sectionSidebarMenuContext?.expansion.expandItems( structureItems.map((item) => ({ entityType: item.entityType, unique: item.unique, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts index 2b4f15484c60..fe0ecb65b85f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts @@ -72,7 +72,7 @@ export class UmbEntityExpansionManager extends UmbControllerBase { * @memberof UmbEntityExpansionManager * @returns {void} */ - public expandItemBulk(entities: UmbEntityModel[]): void { + public expandItems(entities: UmbEntityModel[]): void { if (!entities || entities.length === 0) return; this.#expansion.append(entities); entities.forEach((entity) => { From 7957891e50ec732d06f033c1e6a9fcc9b83ce9a7 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 09:23:10 +0200 Subject: [PATCH 024/118] mute updates --- .../section-sidebar-menu.element.ts | 19 ++++++------------- .../tree-menu-item/tree-menu-item.element.ts | 19 ++++++------------- 2 files changed, 12 insertions(+), 26 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index ccbf4554ea76..91daaddd1f0b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -45,7 +45,7 @@ export class UmbSectionSidebarMenuElement< @state() private _sectionSidebarMenuExpansion: UmbEntityExpansionModel = []; - #localExpansionState: UmbEntityExpansionModel = []; + #muteStateUpdate = false; constructor() { super(); @@ -57,14 +57,7 @@ export class UmbSectionSidebarMenuElement< #observeExpansion() { this.observe(this.#sectionSidebarMenuContext?.expansion.expansion, (items) => { - const allEntriesExists = - this.#localExpansionState.length > 0 && - this.#localExpansionState.every((localItem) => - items?.some((item) => item.unique === localItem.unique && item.entityType === localItem.entityType), - ); - - // Ensure that we only updates the expansion (and rerenders) if the state has been changed outside of the component. - if (allEntriesExists) return; + if (this.#muteStateUpdate) return; this._sectionSidebarMenuExpansion = items || []; }); } @@ -78,13 +71,13 @@ export class UmbSectionSidebarMenuElement< } if (event.type === UmbExpansionEntityExpandedEvent.TYPE) { - this.#localExpansionState.push(eventEntity); + this.#muteStateUpdate = true; this.#sectionSidebarMenuContext?.expansion.expandItem(eventEntity); + this.#muteStateUpdate = false; } else if (event.type === UmbExpansionEntityCollapsedEvent.TYPE) { - this.#localExpansionState = this.#localExpansionState.filter( - (entity) => !(entity.unique === eventEntity.unique && entity.entityType === eventEntity.entityType), - ); + this.#muteStateUpdate = true; this.#sectionSidebarMenuContext?.expansion.collapseItem(eventEntity); + this.#muteStateUpdate = false; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts index 888a3370ea05..5e7adf94c471 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts @@ -17,7 +17,7 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM _menuExpansion: UmbEntityExpansionModel = []; #menuContext?: typeof UMB_MENU_CONTEXT.TYPE; - #localExpansionState: UmbEntityExpansionModel = []; + #muteStateUpdate = false; constructor() { super(); @@ -30,14 +30,7 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM #observeExpansion() { this.observe(this.#menuContext?.expansion.expansion, (items) => { - const allEntriesExists = - this.#localExpansionState.length > 0 && - this.#localExpansionState.every((localItem) => - items?.some((item) => item.unique === localItem.unique && item.entityType === localItem.entityType), - ); - - // Ensure that we only updates the expansion (and rerenders) if the state has been changed outside of the component. - if (allEntriesExists) return; + if (this.#muteStateUpdate) return; this._menuExpansion = items || []; }); } @@ -51,13 +44,13 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM } if (event.type === UmbExpansionEntityExpandedEvent.TYPE) { - this.#localExpansionState.push(eventEntity); + this.#muteStateUpdate = true; this.#menuContext?.expansion.expandItem(eventEntity); + this.#muteStateUpdate = false; } else if (event.type === UmbExpansionEntityCollapsedEvent.TYPE) { - this.#localExpansionState = this.#localExpansionState.filter( - (entity) => !(entity.unique === eventEntity.unique && entity.entityType === eventEntity.entityType), - ); + this.#muteStateUpdate = true; this.#menuContext?.expansion.collapseItem(eventEntity); + this.#muteStateUpdate = false; } } From f566b0f8549a9dc079c5a2880e7d41c773820859 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 11:03:34 +0200 Subject: [PATCH 025/118] lower threshold --- src/Umbraco.Web.UI.Client/devops/module-dependencies/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/devops/module-dependencies/index.js b/src/Umbraco.Web.UI.Client/devops/module-dependencies/index.js index d6e5febf2e30..39746504b55e 100644 --- a/src/Umbraco.Web.UI.Client/devops/module-dependencies/index.js +++ b/src/Umbraco.Web.UI.Client/devops/module-dependencies/index.js @@ -4,7 +4,7 @@ import { createImportMap } from '../importmap/index.js'; const ILLEGAL_CORE_IMPORTS_THRESHOLD = 5; const SELF_IMPORTS_THRESHOLD = 0; -const BIDIRECTIONAL_IMPORTS_THRESHOLD = 18; +const BIDIRECTIONAL_IMPORTS_THRESHOLD = 16; const clientProjectRoot = path.resolve(import.meta.dirname, '../../'); const modulePrefix = '@umbraco-cms/backoffice/'; From 4cf39f02485b5349bc0a2b5e006b2e482f755269 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 11:04:21 +0200 Subject: [PATCH 026/118] add expansion model with target --- .../src/packages/core/utils/expansion/types.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts index 03eaaf8584e4..abbed4173169 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts @@ -1,3 +1,7 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; export type UmbEntityExpansionModel = Array; + +export interface UmbEntityExpansionEntryModel extends UmbEntityModel { + target?: UmbEntityModel; +} From 3f5c665ec33d48213bd464527d7adc9b7a3a2d66 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 11:04:44 +0200 Subject: [PATCH 027/118] add function to link entries --- .../packages/core/utils/expansion/index.ts | 1 + .../core/utils/expansion/utils/index.ts | 1 + .../link-entity-expansion-entries.test.ts | 26 +++++++++++++++++++ .../utils/link-entity-expansion-entries.ts | 22 ++++++++++++++++ 4 files changed, 50 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/utils/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/utils/link-entity-expansion-entries.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/utils/link-entity-expansion-entries.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/index.ts index e7c6de45ff21..ee4761b07d62 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/index.ts @@ -1,3 +1,4 @@ export * from './entity-expansion.manager.js'; export * from './events/index.js'; +export * from './utils/index.js'; export type * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/utils/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/utils/index.ts new file mode 100644 index 000000000000..510a193d399c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/utils/index.ts @@ -0,0 +1 @@ +export * from './link-entity-expansion-entries.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/utils/link-entity-expansion-entries.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/utils/link-entity-expansion-entries.test.ts new file mode 100644 index 000000000000..5c9ec731832b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/utils/link-entity-expansion-entries.test.ts @@ -0,0 +1,26 @@ +import { expect } from '@open-wc/testing'; +import { linkEntityExpansionEntries } from './link-entity-expansion-entries'; + +describe('LinkEntityExpansionEntries', () => { + const input = [ + { entityType: 'document', unique: '1' }, + { entityType: 'document', unique: '2' }, + { entityType: 'document', unique: '3' }, + ]; + + it('should return an array of expansion entries with target', () => { + const result = linkEntityExpansionEntries(input); + expect(result).to.be.an('array').that.has.lengthOf(3); + expect(result[0]).to.have.property('entityType', 'document'); + expect(result[0]).to.have.property('unique', '1'); + expect(result[0]).to.have.property('target').that.deep.equals({ entityType: 'document', unique: '2' }); + + expect(result[1]).to.have.property('entityType', 'document'); + expect(result[1]).to.have.property('unique', '2'); + expect(result[1]).to.have.property('target').that.deep.equals({ entityType: 'document', unique: '3' }); + + expect(result[2]).to.have.property('entityType', 'document'); + expect(result[2]).to.have.property('unique', '3'); + expect(result[2]).to.not.have.property('target'); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/utils/link-entity-expansion-entries.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/utils/link-entity-expansion-entries.ts new file mode 100644 index 000000000000..04759ec3a1f2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/utils/link-entity-expansion-entries.ts @@ -0,0 +1,22 @@ +import type { UmbEntityExpansionEntryModel, UmbEntityExpansionModel } from '../types.js'; +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; + +export const linkEntityExpansionEntries = (data: Array): UmbEntityExpansionModel => { + return data.map((item, index) => { + const result: UmbEntityExpansionEntryModel = { + entityType: item.entityType, + unique: item.unique, + }; + + const next = data[index + 1]; + + if (next) { + result.target = { + entityType: next.entityType, + unique: next.unique, + }; + } + + return result; + }); +}; From 438d6aeeb257eb9f015e840faa43e56879d74891 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 11:04:56 +0200 Subject: [PATCH 028/118] fix self import --- .../section/conditions/section-alias/section-alias.condition.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/conditions/section-alias/section-alias.condition.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/conditions/section-alias/section-alias.condition.ts index 52f2ac41185b..91dc47b6bf6c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/conditions/section-alias/section-alias.condition.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/conditions/section-alias/section-alias.condition.ts @@ -1,8 +1,8 @@ import type { SectionAliasConditionConfig } from '../types.js'; +import { UMB_SECTION_CONTEXT } from '../../section.context.token.js'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api'; import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry'; -import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section'; export class UmbSectionAliasCondition extends UmbConditionBase From 09a76f13aee7376a2201f40656ddbca7af8b64ac Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 11:05:18 +0200 Subject: [PATCH 029/118] export constants --- src/Umbraco.Web.UI.Client/src/packages/core/menu/constants.ts | 1 + src/Umbraco.Web.UI.Client/src/packages/core/menu/index.ts | 1 + 2 files changed, 2 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/constants.ts new file mode 100644 index 000000000000..fd7b96c0f839 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/constants.ts @@ -0,0 +1 @@ +export * from './section-sidebar-menu/constants.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/index.ts index c7d6c36f9e18..cce4aa408e06 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/index.ts @@ -3,6 +3,7 @@ export * from './menu-tree-structure-workspace-context-base.js'; export * from './menu-structure-workspace-context.context-token.js'; export * from './menu-variant-structure-workspace-context.context-token.js'; export * from './menu-variant-tree-structure-workspace-context-base.js'; +export * from './constants.js'; export type * from './types.js'; From 8a408d098c0e29253dca9119b748310688c3d892 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 11:12:39 +0200 Subject: [PATCH 030/118] update js docs for entity expansion manager --- .../expansion/entity-expansion.manager.ts | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts index fe0ecb65b85f..f1c1c6dc3541 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts @@ -1,4 +1,4 @@ -import type { UmbEntityExpansionModel } from './types.js'; +import type { UmbEntityExpansionEntryModel, UmbEntityExpansionModel } from './types.js'; import { UmbExpansionEntityExpandedEvent, UmbExpansionEntityCollapsedEvent, @@ -15,7 +15,7 @@ import { UmbArrayState, type Observable } from '@umbraco-cms/backoffice/observab * @augments {UmbControllerBase} */ export class UmbEntityExpansionManager extends UmbControllerBase { - #expansion = new UmbArrayState([], (x) => x.entityType + x.unique); + #expansion = new UmbArrayState([], (x) => x.entityType + x.unique); expansion = this.#expansion.asObservable(); /** @@ -54,13 +54,16 @@ export class UmbEntityExpansionManager extends UmbControllerBase { /** * Expands an entity - * @param {UmbEntityModel} entity The entity to open + * @param {UmbEntityExpansionEntryModel} entity The entity to open * @param {string} entity.entityType The entity type * @param {string} entity.unique The unique key + * @param {UmbEntityModel} entity.target The target entity to look up + * @param {string} entity.target.entityType The target entity type + * @param {string} entity.target.unique The target unique key * @memberof UmbEntityExpansionManager * @returns {Promise} */ - public async expandItem(entity: UmbEntityModel): Promise { + public async expandItem(entity: UmbEntityExpansionEntryModel): Promise { this.#expansion.appendOne(entity); this.getHostElement()?.dispatchEvent(new UmbExpansionEntityExpandedEvent(entity)); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); @@ -68,11 +71,11 @@ export class UmbEntityExpansionManager extends UmbControllerBase { /** * Expands multiple entities - * @param {UmbEntityModel[]} entities The entities to open + * @param {UmbEntityExpansionModel} entities The entities to open * @memberof UmbEntityExpansionManager * @returns {void} */ - public expandItems(entities: UmbEntityModel[]): void { + public expandItems(entities: UmbEntityExpansionModel): void { if (!entities || entities.length === 0) return; this.#expansion.append(entities); entities.forEach((entity) => { @@ -83,9 +86,12 @@ export class UmbEntityExpansionManager extends UmbControllerBase { /** * Collapses an entity - * @param {UmbEntityModel} entity The entity to close + * @param {UmbEntityExpansionEntryModel} entity The entity to open * @param {string} entity.entityType The entity type * @param {string} entity.unique The unique key + * @param {UmbEntityModel} entity.target The target entity to look up + * @param {string} entity.target.entityType The target entity type + * @param {string} entity.target.unique The target unique key * @memberof UmbEntityExpansionManager * @returns {Promise} */ From 654c558ed43e7abb1e0cb3bd877bf9eb73aa468a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 11:12:51 +0200 Subject: [PATCH 031/118] link entries --- .../menu/menu-tree-structure-workspace-context-base.ts | 8 ++------ .../menu-variant-tree-structure-workspace-context-base.ts | 8 ++------ 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts index 36b3db0de889..a674fa756c4b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts @@ -8,6 +8,7 @@ import { UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/back import { UmbArrayState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbAncestorsEntityContext, UmbParentEntityContext, type UmbEntityModel } from '@umbraco-cms/backoffice/entity'; +import { linkEntityExpansionEntries } from '@umbraco-cms/backoffice/utils'; interface UmbMenuTreeStructureWorkspaceContextBaseArgs { treeRepositoryAlias: string; @@ -105,12 +106,7 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex this.#setParentData(structureItems); this.#setAncestorData(data); - this.#sectionSidebarMenuContext?.expansion.expandItems( - structureItems.map((item) => ({ - entityType: item.entityType, - unique: item.unique, - })), - ); + this.#sectionSidebarMenuContext?.expansion.expandItems(linkEntityExpansionEntries(data)); } } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index c156fcd58c3b..ce304648c06b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -8,6 +8,7 @@ import { UmbArrayState, UmbObjectState } from '@umbraco-cms/backoffice/observabl import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbAncestorsEntityContext, UmbParentEntityContext, type UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import { UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; +import { linkEntityExpansionEntries } from '@umbraco-cms/backoffice/utils'; interface UmbMenuVariantTreeStructureWorkspaceContextBaseArgs { treeRepositoryAlias: string; @@ -115,12 +116,7 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um this.#setParentData(structureItems); this.#setAncestorData(data); - this.#sectionSidebarMenuContext?.expansion.expandItems( - structureItems.map((item) => ({ - entityType: item.entityType, - unique: item.unique, - })), - ); + this.#sectionSidebarMenuContext?.expansion.expandItems(linkEntityExpansionEntries(data)); } } From 56c21ada379a83774fa3be66fc20766316a657ff Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 11:16:04 +0200 Subject: [PATCH 032/118] fix import --- .../core/menu/components/menu-item/menu-item-default.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item-default.element.ts index 53ba32b8a414..c505354ea894 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item-default.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item-default.element.ts @@ -1,5 +1,5 @@ import type { UmbMenuItemElement } from '../../menu-item/menu-item-element.interface.js'; -import type { ManifestMenuItem } from '../../menu-item.extension.js'; +import type { ManifestMenuItem } from '../../menu-item/types.js'; import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section'; From eba4138566c0dae170610a7af34f8a24984a7733 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 11:20:59 +0200 Subject: [PATCH 033/118] do not export from menu here --- src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts index 760f55081380..03fa9cfd53eb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts @@ -1,5 +1,3 @@ -export * from '../menu/section-sidebar-menu-with-entity-actions/index.js'; -export * from '../menu/section-sidebar-menu/index.js'; export * from './components/index.js'; export * from './constants.js'; export * from './default/default-section.element.js'; From ecdc84ab299762206ab29def663bdc7884a2c93e Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 11:21:05 +0200 Subject: [PATCH 034/118] fix import --- .../src/packages/umbraco-news/umbraco-news-dashboard.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts index ebdd979b81bc..89956c3f9deb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts @@ -1,8 +1,8 @@ -import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from '../core/menu/section-sidebar-menu/context/section-sidebar-menu.context.token.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; +import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from '@umbraco-cms/backoffice/menu'; @customElement('umb-umbraco-news-dashboard') export class UmbUmbracoNewsDashboardElement extends UmbLitElement { From d7c1d04ae9106b8f07ae90bd979897ca0b1bb976 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 11:23:33 +0200 Subject: [PATCH 035/118] fix import --- .../src/packages/core/menu/components/menu-item/link/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/types.ts index 2bc68ac163a1..7d812c96d455 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/types.ts @@ -1,4 +1,4 @@ -import type { ManifestMenuItem, MetaMenuItem } from '../../../menu-item.extension.js'; +import type { ManifestMenuItem, MetaMenuItem } from '../../../menu-item/types.js'; export interface ManifestMenuItemLinkKind extends ManifestMenuItem { type: 'menuItem'; From b637fccd090a8dfb41448b25b2306463bde1b8f6 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 12:07:38 +0200 Subject: [PATCH 036/118] align how we register manifests --- .../src/packages/core/menu/manifests.ts | 6 +++++- .../manifests.ts | 14 ++++++++++++++ ...on-sidebar-menu-with-entity-actions.element.ts | 14 -------------- .../core/menu/section-sidebar-menu/manifests.ts | 14 ++++++++++++++ .../section-sidebar-menu.element.ts | 15 --------------- 5 files changed, 33 insertions(+), 30 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu-with-entity-actions/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/manifests.ts index a9d3417c6195..350fea31bce1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/manifests.ts @@ -1,8 +1,12 @@ -import { manifests as menuItemManifests } from './components/menu-item/manifests.js'; import { manifest as menuAliasConditionManifest } from './conditions/menu-alias.condition.js'; +import { manifests as menuItemManifests } from './components/menu-item/manifests.js'; +import { manifests as sectionSidebarMenuManifests } from './section-sidebar-menu/manifests.js'; +import { manifests as sectionSidebarMenuWithEntityActionsManifests } from './section-sidebar-menu-with-entity-actions/manifests.js'; import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ ...menuItemManifests, + ...sectionSidebarMenuManifests, + ...sectionSidebarMenuWithEntityActionsManifests, menuAliasConditionManifest, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu-with-entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu-with-entity-actions/manifests.ts new file mode 100644 index 000000000000..4d7249e76c81 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu-with-entity-actions/manifests.ts @@ -0,0 +1,14 @@ +import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'kind', + alias: 'Umb.Kind.SectionSidebarAppMenuWithEntityActions', + matchKind: 'menuWithEntityActions', + matchType: 'sectionSidebarApp', + manifest: { + type: 'sectionSidebarApp', + element: () => import('./section-sidebar-menu-with-entity-actions.element.js'), + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.element.ts index 84d46fe2a3e7..1ecaa4ebf2db 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.element.ts @@ -1,22 +1,8 @@ import { UmbSectionSidebarMenuElement } from '../section-sidebar-menu/section-sidebar-menu.element.js'; import type { ManifestSectionSidebarAppMenuWithEntityActionsKind } from '../section-sidebar-menu/types.js'; import { css, html, customElement, type PropertyValues, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; -import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbParentEntityContext } from '@umbraco-cms/backoffice/entity'; -const manifestWithEntityActions: UmbExtensionManifestKind = { - type: 'kind', - alias: 'Umb.Kind.SectionSidebarAppMenuWithEntityActions', - matchKind: 'menuWithEntityActions', - matchType: 'sectionSidebarApp', - manifest: { - type: 'sectionSidebarApp', - elementName: 'umb-section-sidebar-menu-with-entity-actions', - }, -}; -umbExtensionsRegistry.register(manifestWithEntityActions); - @customElement('umb-section-sidebar-menu-with-entity-actions') export class UmbSectionSidebarMenuWithEntityActionsElement extends UmbSectionSidebarMenuElement { @state() diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts new file mode 100644 index 000000000000..f04d93e4eacc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts @@ -0,0 +1,14 @@ +import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'kind', + alias: 'Umb.Kind.SectionSidebarAppMenu', + matchKind: 'menu', + matchType: 'sectionSidebarApp', + manifest: { + type: 'sectionSidebarApp', + element: () => import('./section-sidebar-menu.element.js'), + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index 91daaddd1f0b..88ec772d02bf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -3,8 +3,6 @@ import type { ManifestSectionSidebarAppBaseMenu, ManifestSectionSidebarAppMenuKi import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './context/section-sidebar-menu.context.token.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; -import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbExpansionEntityCollapsedEvent, @@ -12,19 +10,6 @@ import { type UmbEntityExpansionModel, } from '@umbraco-cms/backoffice/utils'; -// TODO: Move to separate file: -const manifest: UmbExtensionManifestKind = { - type: 'kind', - alias: 'Umb.Kind.SectionSidebarAppMenu', - matchKind: 'menu', - matchType: 'sectionSidebarApp', - manifest: { - type: 'sectionSidebarApp', - elementName: 'umb-section-sidebar-menu', - }, -}; -umbExtensionsRegistry.register(manifest); - @customElement('umb-section-sidebar-menu') export class UmbSectionSidebarMenuElement< ManifestType extends ManifestSectionSidebarAppBaseMenu = ManifestSectionSidebarAppMenuKind, From fabcad7ba935b68529f5ef98868dd122877f277b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 20:48:32 +0200 Subject: [PATCH 037/118] add specific managers for section sidebar menu --- .../context/section-sidebar-menu.context.ts | 4 +- .../section-sidebar-menu-expansion.manager.ts | 111 ++++++++++++++++++ 2 files changed, 113 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion/section-sidebar-menu-expansion.manager.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts index 0b6392b37bd7..c53aff1ebbc9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts @@ -1,10 +1,10 @@ +import { UmbSectionSidebarMenuExpansionManager } from '../expansion/section-sidebar-menu-expansion.manager.js'; import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './section-sidebar-menu.context.token.js'; -import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export class UmbSectionSidebarMenuContext extends UmbContextBase { - public readonly expansion = new UmbEntityExpansionManager(this); + public readonly expansion = new UmbSectionSidebarMenuExpansionManager(this); constructor(host: UmbControllerHost) { super(host, UMB_SECTION_SIDEBAR_MENU_CONTEXT); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion/section-sidebar-menu-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion/section-sidebar-menu-expansion.manager.ts new file mode 100644 index 000000000000..eb135c61d2e9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion/section-sidebar-menu-expansion.manager.ts @@ -0,0 +1,111 @@ +import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; +import type { Observable } from '@umbraco-cms/backoffice/observable-api'; +import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section'; +import { UmbEntityExpansionManager, type UmbEntityExpansionModel } from '@umbraco-cms/backoffice/utils'; + +/** + * Manages the expansion state of the section sidebar menu. + * @exports + * @class UmbSectionSidebarMenuExpansionManager + * @augments {UmbControllerBase} + */ +export class UmbSectionSidebarMenuExpansionManager extends UmbControllerBase { + #manager = new UmbEntityExpansionManager(this); + public readonly expansion = this.#manager.expansion; + + #sectionContext?: typeof UMB_SECTION_CONTEXT.TYPE; + #currentSectionAlias?: string; + + constructor(host: UmbControllerHost) { + super(host); + + this.consumeContext(UMB_SECTION_CONTEXT, (sectionContext) => { + this.#sectionContext = sectionContext; + this.#observeCurrentSectionAlias(); + }); + } + + #observeCurrentSectionAlias() { + this.observe(this.#sectionContext?.alias, (alias) => { + if (!alias) return; + this.#currentSectionAlias = alias; + console.log(`SectionSidebarMenuExpansionManager: Current section alias set to: ${this.#currentSectionAlias}`); + }); + } + + /** + * Checks if an entity is expanded + * @param {UmbEntityModel} entity The entity to check + * @param {string} entity.entityType The entity type + * @param {string} entity.unique The unique key + * @returns {Observable} True if the entity is expanded + * @memberof UmbSectionSidebarMenuExpansionManager + */ + isExpanded(entity: UmbEntityModel): Observable { + return this.#manager.isExpanded(entity); + } + + /** + * Sets the expansion state + * @param {UmbEntityExpansionModel | undefined} expansion The expansion state + * @memberof UmbSectionSidebarMenuExpansionManager + * @returns {void} + */ + setExpansion(expansion: UmbEntityExpansionModel): void { + this.#manager.setExpansion(expansion); + } + + /** + * Gets the expansion state + * @memberof UmbSectionSidebarMenuExpansionManager + * @returns {UmbEntityExpansionModel} The expansion state + */ + getExpansion(): UmbEntityExpansionModel { + return this.#manager.getExpansion(); + } + + /** + * Opens a menu item + * @param {UmbEntityModel} entity The entity to open + * @param {string} entity.entityType The entity type + * @param {string} entity.unique The unique key + * @memberof UmbSectionSidebarMenuExpansionManager + * @returns {Promise} + */ + public async expandItem(entity: UmbEntityModel): Promise { + this.#manager.expandItem(entity); + } + + /** + * Expands multiple entities + * @param {UmbEntityExpansionModel} entities The entities to open + * @memberof UmbEntityExpansionManager + * @returns {void} + */ + public expandItems(entities: UmbEntityExpansionModel): void { + this.#manager.expandItems(entities); + } + + /** + * Closes a menu item + * @param {UmbEntityModel} entity The entity to close + * @param {string} entity.entityType The entity type + * @param {string} entity.unique The unique key + * @memberof UmbSectionSidebarMenuExpansionManager + * @returns {Promise} + */ + public async collapseItem(entity: UmbEntityModel): Promise { + this.#manager.collapseItem(entity); + } + + /** + * Closes all menu items + * @memberof UmbSectionSidebarMenuExpansionManager + * @returns {Promise} + */ + public async collapseAll(): Promise { + this.#manager.collapseAll(); + } +} From a2939ebe9152e76a8fe6795ccb4bccd65599b114 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 21:40:54 +0200 Subject: [PATCH 038/118] use structure items --- .../core/menu/menu-tree-structure-workspace-context-base.ts | 2 +- .../menu/menu-variant-tree-structure-workspace-context-base.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts index a674fa756c4b..7f70f9102ff5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts @@ -106,7 +106,7 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex this.#setParentData(structureItems); this.#setAncestorData(data); - this.#sectionSidebarMenuContext?.expansion.expandItems(linkEntityExpansionEntries(data)); + this.#sectionSidebarMenuContext?.expansion.expandItems(linkEntityExpansionEntries(structureItems)); } } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index ce304648c06b..7bc17e330794 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -116,7 +116,7 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um this.#setParentData(structureItems); this.#setAncestorData(data); - this.#sectionSidebarMenuContext?.expansion.expandItems(linkEntityExpansionEntries(data)); + this.#sectionSidebarMenuContext?.expansion.expandItems(linkEntityExpansionEntries(structureItems)); } } From d6469ccdf2d052ee6f21b82c916c8579dc97ea18 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 21:50:05 +0200 Subject: [PATCH 039/118] dot not expand current item --- .../menu/menu-tree-structure-workspace-context-base.ts | 9 +++++++-- ...menu-variant-tree-structure-workspace-context-base.ts | 9 +++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts index 7f70f9102ff5..8e8556ccce46 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts @@ -105,8 +105,7 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex this.#structure.setValue(structureItems); this.#setParentData(structureItems); this.#setAncestorData(data); - - this.#sectionSidebarMenuContext?.expansion.expandItems(linkEntityExpansionEntries(structureItems)); + this.#expandSectionSidebarMenu(structureItems); } } } @@ -148,4 +147,10 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex this.#ancestorContext.setAncestors(ancestorEntities); } + + #expandSectionSidebarMenu(structureItems: Array) { + // Filter out the current entity as we don't want to expand it + const expandableItems = structureItems.filter((item) => item.unique !== this.#workspaceContext?.getUnique()); + this.#sectionSidebarMenuContext?.expansion.expandItems(linkEntityExpansionEntries(expandableItems)); + } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index 7bc17e330794..ed95fab10d64 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -115,8 +115,7 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um this.#structure.setValue(structureItems); this.#setParentData(structureItems); this.#setAncestorData(data); - - this.#sectionSidebarMenuContext?.expansion.expandItems(linkEntityExpansionEntries(structureItems)); + this.#expandSectionSidebarMenu(structureItems); } } @@ -157,4 +156,10 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um this.#ancestorContext.setAncestors(ancestorEntities); } + + #expandSectionSidebarMenu(structureItems: Array) { + // Filter out the current entity as we don't want to expand it + const expandableItems = structureItems.filter((item) => item.unique !== this.#workspaceContext?.getUnique()); + this.#sectionSidebarMenuContext?.expansion.expandItems(linkEntityExpansionEntries(expandableItems)); + } } From f68cefca9c5451019fba9ee2fe3270a59c5e560d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Jul 2025 21:50:45 +0200 Subject: [PATCH 040/118] Refactor section sidebar menu to use programmatic extension slot Replaces the template-based with a programmatically created UmbExtensionSlotElement for improved performance and UX. --- .../section-sidebar-menu.element.ts | 47 +++++++++---------- 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index 88ec772d02bf..d927bf780972 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -2,13 +2,10 @@ import type { ManifestMenu } from '../menu.extension.js'; import type { ManifestSectionSidebarAppBaseMenu, ManifestSectionSidebarAppMenuKind } from './types.js'; import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './context/section-sidebar-menu.context.token.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { - UmbExpansionEntityCollapsedEvent, - UmbExpansionEntityExpandedEvent, - type UmbEntityExpansionModel, -} from '@umbraco-cms/backoffice/utils'; +import { UmbExpansionEntityCollapsedEvent, UmbExpansionEntityExpandedEvent } from '@umbraco-cms/backoffice/utils'; +import { UmbExtensionSlotElement } from '../../extension-registry/components/index.js'; @customElement('umb-section-sidebar-menu') export class UmbSectionSidebarMenuElement< @@ -27,23 +24,38 @@ export class UmbSectionSidebarMenuElement< #sectionSidebarMenuContext?: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE; - @state() - private _sectionSidebarMenuExpansion: UmbEntityExpansionModel = []; - + #extensionSlotElement = new UmbExtensionSlotElement(); #muteStateUpdate = false; constructor() { super(); + this.#initExtensionSlotElement(); this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (context) => { this.#sectionSidebarMenuContext = context; this.#observeExpansion(); }); } + #initExtensionSlotElement() { + /* For better performance and UX we prevent lit from doing unnecessary rerenders we programmatically create the element, + and manually update the props when needed. */ + + this.#extensionSlotElement.type = 'menu'; + this.#extensionSlotElement.filter = (menu: ManifestMenu) => menu.alias === this.manifest?.meta?.menu; + this.#extensionSlotElement.defaultElement = 'umb-menu'; + this.#extensionSlotElement.events = { + 'expansion-entity-expanded': this.#onEntityExpansionChange.bind(this), + 'expansion-entity-collapsed': this.#onEntityExpansionChange.bind(this), + }; + } + #observeExpansion() { this.observe(this.#sectionSidebarMenuContext?.expansion.expansion, (items) => { if (this.#muteStateUpdate) return; - this._sectionSidebarMenuExpansion = items || []; + + this.#extensionSlotElement.props = { + expansion: items || [], + }; }); } @@ -67,20 +79,7 @@ export class UmbSectionSidebarMenuElement< } override render() { - return html` - ${this.renderHeader()} - - `; + return html` ${this.renderHeader()} ${this.#extensionSlotElement}`; } static override styles = [ From af2d4e655587325556ac9fef87c2c3edfa1629a0 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 10:41:12 +0200 Subject: [PATCH 041/118] add section context extension --- .../extensions/section-context.extension.ts | 17 +++++++++++++++++ .../packages/core/section/extensions/types.ts | 1 + .../packages/core/section/section.context.ts | 19 +++++++++++++++++++ 3 files changed, 37 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/section-context.extension.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/section-context.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/section-context.extension.ts new file mode 100644 index 000000000000..25e0e114cc2e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/section-context.extension.ts @@ -0,0 +1,17 @@ +import type { ManifestApi, ManifestWithDynamicConditions, UmbApi } from '@umbraco-cms/backoffice/extension-api'; + +export interface ManifestSectionContext + extends ManifestWithDynamicConditions, + ManifestApi { + type: 'sectionContext'; + meta: MetaType; +} + +// eslint-disable-next-line @typescript-eslint/no-empty-object-type +export interface MetaSectionContext {} + +declare global { + interface UmbExtensionManifestMap { + UmbManifestSectionContext: ManifestSectionContext; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/types.ts index e4d5de7f8b8f..9e65c9399679 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/types.ts @@ -1,3 +1,4 @@ +export type * from './section-context.extension.js'; export type * from './section-element.interface.js'; export type * from './section-sidebar-app-element.interface.js'; export type * from './section-view-element.interface.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.ts index 44e7556ba6ac..510697e14607 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section.context.ts @@ -3,6 +3,8 @@ import { UMB_SECTION_CONTEXT } from './section.context.token.js'; import { UmbStringState } from '@umbraco-cms/backoffice/observable-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; +import { UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; export class UmbSectionContext extends UmbContextBase { #manifestAlias = new UmbStringState(undefined); @@ -12,8 +14,11 @@ export class UmbSectionContext extends UmbContextBase { public readonly pathname = this.#manifestPathname.asObservable(); public readonly label = this.#manifestLabel.asObservable(); + #sectionContextExtensionController?: UmbExtensionsApiInitializer; + constructor(host: UmbControllerHost) { super(host, UMB_SECTION_CONTEXT); + this.#createSectionContextExtensions(); } public setManifest(manifest?: ManifestSection) { @@ -25,4 +30,18 @@ export class UmbSectionContext extends UmbContextBase { getPathname() { return this.#manifestPathname.getValue(); } + + #createSectionContextExtensions() { + if (this.#sectionContextExtensionController) { + this.#sectionContextExtensionController.destroy(); + } + + this.#sectionContextExtensionController = new UmbExtensionsApiInitializer( + this, + umbExtensionsRegistry, + 'sectionContext', + [], + undefined, + ); + } } From 8ce93ab25d21057725f0e3d5624c24c00b075b98 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 10:42:25 +0200 Subject: [PATCH 042/118] register menu as section context instead of hardcoding --- .../menu/section-sidebar-menu/context/manifests.ts | 10 ++++++++++ .../context/section-sidebar-menu.context.ts | 2 ++ .../core/menu/section-sidebar-menu/manifests.ts | 2 ++ .../core/section/default/default-section.context.ts | 2 -- .../core/section/default/default-section.element.ts | 2 +- 5 files changed, 15 insertions(+), 3 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/manifests.ts new file mode 100644 index 000000000000..728af606ea32 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/manifests.ts @@ -0,0 +1,10 @@ +import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'sectionContext', + alias: 'Umb.SectionContext.SectionSidebarMenu', + name: 'Section Sidebar Menu Section Context', + api: () => import('./section-sidebar-menu.context.js'), + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts index c53aff1ebbc9..52ab685c183a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts @@ -10,3 +10,5 @@ export class UmbSectionSidebarMenuContext extends UmbContextBase { super(host, UMB_SECTION_SIDEBAR_MENU_CONTEXT); } } + +export { UmbSectionSidebarMenuContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts index f04d93e4eacc..33405dc70a5c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts @@ -1,3 +1,4 @@ +import { manifests as sectionContextManifests } from './context/manifests.js'; import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ @@ -11,4 +12,5 @@ export const manifests: Array = element: () => import('./section-sidebar-menu.element.js'), }, }, + ...sectionContextManifests, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.context.ts index 65f07289a862..26378d491464 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.context.ts @@ -1,10 +1,8 @@ -import { UmbSectionSidebarMenuContext } from '../../menu/section-sidebar-menu/context/section-sidebar-menu.context.js'; import { UmbSectionContext } from '../section.context.js'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export class UmbDefaultSectionContext extends UmbSectionContext { constructor(host: UmbControllerHost) { super(host); - new UmbSectionSidebarMenuContext(this); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.element.ts index 1a1cd6728c04..c078cca5044b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.element.ts @@ -1,6 +1,7 @@ import type { ManifestSectionRoute } from '../extensions/section-route.extension.js'; import type { UmbSectionMainViewElement } from '../section-main-views/section-main-views.element.js'; import type { ManifestSection, UmbSectionElement } from '../types.js'; +import { UmbDefaultSectionContext } from './default-section.context.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, nothing, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; @@ -15,7 +16,6 @@ import { } from '@umbraco-cms/backoffice/extension-api'; import { aliasToPath } from '@umbraco-cms/backoffice/utils'; import { UMB_MARK_ATTRIBUTE_NAME } from '@umbraco-cms/backoffice/const'; -import { UmbDefaultSectionContext } from './default-section.context.js'; /** * @class UmbBaseSectionElement From 8d02980250d4fda2b8e7f4058049f18a73ff177a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 10:43:17 +0200 Subject: [PATCH 043/118] rename folder --- .../menu/menu-variant-tree-structure-workspace-context-base.ts | 2 +- .../src/packages/core/menu/section-sidebar-menu/constants.ts | 2 +- .../src/packages/core/menu/section-sidebar-menu/manifests.ts | 2 +- .../{context => section-context}/constants.ts | 0 .../{context => section-context}/manifests.ts | 0 .../section-sidebar-menu.context.token.ts | 0 .../section-sidebar-menu.context.ts | 0 .../menu/section-sidebar-menu/section-sidebar-menu.element.ts | 2 +- 8 files changed, 4 insertions(+), 4 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/{context => section-context}/constants.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/{context => section-context}/manifests.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/{context => section-context}/section-sidebar-menu.context.token.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/{context => section-context}/section-sidebar-menu.context.ts (100%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index ed95fab10d64..76b34df0b72f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -1,6 +1,6 @@ import type { UmbVariantStructureItemModel } from './types.js'; import { UMB_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT } from './menu-variant-structure-workspace-context.context-token.js'; -import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './section-sidebar-menu/context/section-sidebar-menu.context.token.js'; +import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './section-sidebar-menu/section-context/section-sidebar-menu.context.token.js'; import type { UmbTreeItemModel, UmbTreeRepository, UmbTreeRootModel } from '@umbraco-cms/backoffice/tree'; import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/constants.ts index 9c6a2415c811..20b806525025 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/constants.ts @@ -1 +1 @@ -export * from './context/constants.js'; +export * from './section-context/constants.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts index 33405dc70a5c..d56b84dfaa29 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts @@ -1,4 +1,4 @@ -import { manifests as sectionContextManifests } from './context/manifests.js'; +import { manifests as sectionContextManifests } from './section-context/manifests.js'; import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/constants.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/constants.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/manifests.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/manifests.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.context.token.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.token.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.context.token.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.context.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/context/section-sidebar-menu.context.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index d927bf780972..693b212c98d8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -1,6 +1,6 @@ import type { ManifestMenu } from '../menu.extension.js'; import type { ManifestSectionSidebarAppBaseMenu, ManifestSectionSidebarAppMenuKind } from './types.js'; -import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './context/section-sidebar-menu.context.token.js'; +import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './section-context/section-sidebar-menu.context.token.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; From ac11898f85dd013db53294566ba977db2ccf4d43 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 10:48:05 +0200 Subject: [PATCH 044/118] align naming --- .../menu/menu-tree-structure-workspace-context-base.ts | 6 +++--- .../menu-variant-tree-structure-workspace-context-base.ts | 6 +++--- .../section-sidebar-menu/section-context/constants.ts | 2 +- .../section-sidebar-menu/section-context/manifests.ts | 2 +- .../section-context/section-sidebar-menu.context.token.ts | 6 ------ .../section-sidebar-menu.section-context.token.ts | 6 ++++++ ...context.ts => section-sidebar-menu.section-context.ts} | 8 ++++---- .../section-sidebar-menu/section-sidebar-menu.element.ts | 6 +++--- .../umbraco-news/umbraco-news-dashboard.element.ts | 6 +++--- 9 files changed, 24 insertions(+), 24 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.context.token.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.token.ts rename src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/{section-sidebar-menu.context.ts => section-sidebar-menu.section-context.ts} (56%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts index 8e8556ccce46..e15f37677362 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts @@ -1,6 +1,6 @@ import type { UmbStructureItemModel } from './types.js'; import { UMB_MENU_STRUCTURE_WORKSPACE_CONTEXT } from './menu-structure-workspace-context.context-token.js'; -import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './section-sidebar-menu/index.js'; +import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from './section-sidebar-menu/index.js'; import type { UmbTreeRepository, UmbTreeItemModel, UmbTreeRootModel } from '@umbraco-cms/backoffice/tree'; import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; @@ -30,7 +30,7 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex #parentContext = new UmbParentEntityContext(this); #ancestorContext = new UmbAncestorsEntityContext(this); - #sectionSidebarMenuContext?: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE; + #sectionSidebarMenuContext?: typeof UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT.TYPE; constructor(host: UmbControllerHost, args: UmbMenuTreeStructureWorkspaceContextBaseArgs) { super(host, UMB_MENU_STRUCTURE_WORKSPACE_CONTEXT); @@ -38,7 +38,7 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex this.provideContext('UmbMenuStructureWorkspaceContext', this); this.#args = args; - this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (instance) => { + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, (instance) => { this.#sectionSidebarMenuContext = instance; }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index 76b34df0b72f..e712fcd5c9e8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -1,6 +1,6 @@ import type { UmbVariantStructureItemModel } from './types.js'; import { UMB_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT } from './menu-variant-structure-workspace-context.context-token.js'; -import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './section-sidebar-menu/section-context/section-sidebar-menu.context.token.js'; +import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from './section-sidebar-menu/section-context/section-sidebar-menu.section-context.token.js'; import type { UmbTreeItemModel, UmbTreeRepository, UmbTreeRootModel } from '@umbraco-cms/backoffice/tree'; import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; @@ -31,7 +31,7 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um #parentContext = new UmbParentEntityContext(this); #ancestorContext = new UmbAncestorsEntityContext(this); - #sectionSidebarMenuContext?: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE; + #sectionSidebarMenuContext?: typeof UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT.TYPE; public readonly IS_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT = true; @@ -41,7 +41,7 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um this.provideContext('UmbMenuStructureWorkspaceContext', this); this.#args = args; - this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (instance) => { + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, (instance) => { this.#sectionSidebarMenuContext = instance; }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/constants.ts index 1918647c8747..75f40d61ad85 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/constants.ts @@ -1 +1 @@ -export * from './section-sidebar-menu.context.token.js'; +export * from './section-sidebar-menu.section-context.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/manifests.ts index 728af606ea32..19c4552e6d03 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/manifests.ts @@ -5,6 +5,6 @@ export const manifests: Array = type: 'sectionContext', alias: 'Umb.SectionContext.SectionSidebarMenu', name: 'Section Sidebar Menu Section Context', - api: () => import('./section-sidebar-menu.context.js'), + api: () => import('./section-sidebar-menu.section-context.js'), }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.context.token.ts deleted file mode 100644 index 175ad9a9dbad..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.context.token.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { UmbSectionSidebarMenuContext } from './section-sidebar-menu.context.js'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; - -export const UMB_SECTION_SIDEBAR_MENU_CONTEXT = new UmbContextToken( - 'UmbSectionSidebarMenuContext', -); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.token.ts new file mode 100644 index 000000000000..e7411f87297f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.token.ts @@ -0,0 +1,6 @@ +import type { UmbSectionSidebarMenuSectionContext } from './section-sidebar-menu.section-context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT = new UmbContextToken( + 'UmbSectionSidebarMenuSectionContext', +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.ts similarity index 56% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.context.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.ts index 52ab685c183a..b45311922b91 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.ts @@ -1,14 +1,14 @@ import { UmbSectionSidebarMenuExpansionManager } from '../expansion/section-sidebar-menu-expansion.manager.js'; -import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './section-sidebar-menu.context.token.js'; +import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from './section-sidebar-menu.section-context.token.js'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -export class UmbSectionSidebarMenuContext extends UmbContextBase { +export class UmbSectionSidebarMenuSectionContext extends UmbContextBase { public readonly expansion = new UmbSectionSidebarMenuExpansionManager(this); constructor(host: UmbControllerHost) { - super(host, UMB_SECTION_SIDEBAR_MENU_CONTEXT); + super(host, UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT); } } -export { UmbSectionSidebarMenuContext as api }; +export { UmbSectionSidebarMenuSectionContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index 693b212c98d8..d32e321bbee1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -1,6 +1,6 @@ import type { ManifestMenu } from '../menu.extension.js'; import type { ManifestSectionSidebarAppBaseMenu, ManifestSectionSidebarAppMenuKind } from './types.js'; -import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from './section-context/section-sidebar-menu.context.token.js'; +import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from './section-context/section-sidebar-menu.section-context.token.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -22,7 +22,7 @@ export class UmbSectionSidebarMenuElement< return html`

${this.localize.string(this.manifest?.meta?.label ?? '')}

`; } - #sectionSidebarMenuContext?: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE; + #sectionSidebarMenuContext?: typeof UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT.TYPE; #extensionSlotElement = new UmbExtensionSlotElement(); #muteStateUpdate = false; @@ -30,7 +30,7 @@ export class UmbSectionSidebarMenuElement< constructor() { super(); this.#initExtensionSlotElement(); - this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (context) => { + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, (context) => { this.#sectionSidebarMenuContext = context; this.#observeExpansion(); }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts index 89956c3f9deb..f53076bf7d28 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts @@ -2,7 +2,7 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; -import { UMB_SECTION_SIDEBAR_MENU_CONTEXT } from '@umbraco-cms/backoffice/menu'; +import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from '@umbraco-cms/backoffice/menu'; @customElement('umb-umbraco-news-dashboard') export class UmbUmbracoNewsDashboardElement extends UmbLitElement { @@ -29,14 +29,14 @@ export class UmbUmbracoNewsDashboardElement extends UmbLitElement { }, ]; - #context?: typeof UMB_SECTION_SIDEBAR_MENU_CONTEXT.TYPE; + #context?: typeof UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT.TYPE; @state() _expansion: Array = []; constructor() { super(); - this.consumeContext(UMB_SECTION_SIDEBAR_MENU_CONTEXT, (context) => { + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, (context) => { this.#context = context; this.#observeExpansion(); }); From 12723d7d1a3f3572398b84f5007c3cdfd70f836e Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 10:52:32 +0200 Subject: [PATCH 045/118] export extension slot elements --- .../src/packages/core/extension-registry/index.ts | 2 ++ .../menu/section-sidebar-menu/section-sidebar-menu.element.ts | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/index.ts index c73d5980e792..77dbe4fc3e13 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/index.ts @@ -2,6 +2,8 @@ export * from './conditions/index.js'; export * from './initializers/index.js'; export * from './registry.js'; export * from './utils/index.js'; +export * from './components/index.js'; + export type * from './models/types.js'; export type * from './extensions/types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index d32e321bbee1..d29deb4e5a9c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -5,7 +5,7 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbExpansionEntityCollapsedEvent, UmbExpansionEntityExpandedEvent } from '@umbraco-cms/backoffice/utils'; -import { UmbExtensionSlotElement } from '../../extension-registry/components/index.js'; +import { UmbExtensionSlotElement } from '@umbraco-cms/backoffice/extension-registry'; @customElement('umb-section-sidebar-menu') export class UmbSectionSidebarMenuElement< From b549957cc4ac29688fa69387a78419b0c887fa30 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 10:54:11 +0200 Subject: [PATCH 046/118] fix typings --- .../menu/section-sidebar-menu/section-sidebar-menu.element.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index d29deb4e5a9c..50e1e489b1a9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -59,7 +59,8 @@ export class UmbSectionSidebarMenuElement< }); } - #onEntityExpansionChange(event: UmbExpansionEntityExpandedEvent | UmbExpansionEntityCollapsedEvent) { + #onEntityExpansionChange(e: Event) { + const event = e as UmbExpansionEntityExpandedEvent | UmbExpansionEntityCollapsedEvent; event.stopPropagation(); const eventEntity = event.entity; From 2266eeb5474b88af122c5dae3c59b3f08502a6ac Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 10:56:23 +0200 Subject: [PATCH 047/118] destroy extension slot element when host is disconnected --- .../section-sidebar-menu/section-sidebar-menu.element.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index 50e1e489b1a9..d72e4d62c78e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -83,6 +83,11 @@ export class UmbSectionSidebarMenuElement< return html` ${this.renderHeader()} ${this.#extensionSlotElement}`; } + override disconnectedCallback(): void { + super.disconnectedCallback(); + this.#extensionSlotElement.destroy(); + } + static override styles = [ UmbTextStyles, css` From 9204675a45a04a330f65e30b389d9beb506ee208 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 13:10:02 +0200 Subject: [PATCH 048/118] use entry model --- .../src/packages/core/utils/expansion/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts index abbed4173169..90ce2e34336c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts @@ -1,6 +1,6 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; -export type UmbEntityExpansionModel = Array; +export type UmbEntityExpansionModel = Array; export interface UmbEntityExpansionEntryModel extends UmbEntityModel { target?: UmbEntityModel; From 020b752f4e7c8bb6afcb771f46a68dbcb2e7750a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 13:10:18 +0200 Subject: [PATCH 049/118] move and rename --- .../section-sidebar-menu-expansion.manager.ts | 56 ++++++++++++++----- .../section-sidebar-menu.section-context.ts | 4 +- 2 files changed, 44 insertions(+), 16 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/{ => section-context}/expansion/section-sidebar-menu-expansion.manager.ts (55%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion/section-sidebar-menu-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-expansion.manager.ts similarity index 55% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion/section-sidebar-menu-expansion.manager.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-expansion.manager.ts index eb135c61d2e9..52f9fb6448e1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/expansion/section-sidebar-menu-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-expansion.manager.ts @@ -1,21 +1,27 @@ +import { UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT } from '../../global-context/section-sidebar-menu.global-context.token.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import type { Observable } from '@umbraco-cms/backoffice/observable-api'; import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section'; -import { UmbEntityExpansionManager, type UmbEntityExpansionModel } from '@umbraco-cms/backoffice/utils'; +import { + UmbEntityExpansionManager, + type UmbEntityExpansionEntryModel, + type UmbEntityExpansionModel, +} from '@umbraco-cms/backoffice/utils'; /** - * Manages the expansion state of the section sidebar menu. + * Manages the expansion state of a section sidebar menu. * @exports - * @class UmbSectionSidebarMenuExpansionManager + * @class UmbSectionSidebarMenuSectionExpansionManager * @augments {UmbControllerBase} */ -export class UmbSectionSidebarMenuExpansionManager extends UmbControllerBase { +export class UmbSectionSidebarMenuSectionExpansionManager extends UmbControllerBase { #manager = new UmbEntityExpansionManager(this); public readonly expansion = this.#manager.expansion; #sectionContext?: typeof UMB_SECTION_CONTEXT.TYPE; + #globalContext?: typeof UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT.TYPE; #currentSectionAlias?: string; constructor(host: UmbControllerHost) { @@ -25,6 +31,18 @@ export class UmbSectionSidebarMenuExpansionManager extends UmbControllerBase { this.#sectionContext = sectionContext; this.#observeCurrentSectionAlias(); }); + + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT, (globalContext) => { + this.#globalContext = globalContext; + this.#observeGlobalMenuExpansion(); + }); + } + + #observeGlobalMenuExpansion() { + this.observe(this.#globalContext?.expansion.expansion, (expansion) => { + const globalExpansion = expansion || []; + this.#manager.setExpansion(globalExpansion); + }); } #observeCurrentSectionAlias() { @@ -41,7 +59,7 @@ export class UmbSectionSidebarMenuExpansionManager extends UmbControllerBase { * @param {string} entity.entityType The entity type * @param {string} entity.unique The unique key * @returns {Observable} True if the entity is expanded - * @memberof UmbSectionSidebarMenuExpansionManager + * @memberof UmbSectionSidebarMenuSectionExpansionManager */ isExpanded(entity: UmbEntityModel): Observable { return this.#manager.isExpanded(entity); @@ -50,16 +68,17 @@ export class UmbSectionSidebarMenuExpansionManager extends UmbControllerBase { /** * Sets the expansion state * @param {UmbEntityExpansionModel | undefined} expansion The expansion state - * @memberof UmbSectionSidebarMenuExpansionManager + * @memberof UmbSectionSidebarMenuSectionExpansionManager * @returns {void} */ setExpansion(expansion: UmbEntityExpansionModel): void { this.#manager.setExpansion(expansion); + this.#globalContext?.expansion.setExpansion(expansion); } /** * Gets the expansion state - * @memberof UmbSectionSidebarMenuExpansionManager + * @memberof UmbSectionSidebarMenuSectionExpansionManager * @returns {UmbEntityExpansionModel} The expansion state */ getExpansion(): UmbEntityExpansionModel { @@ -68,14 +87,18 @@ export class UmbSectionSidebarMenuExpansionManager extends UmbControllerBase { /** * Opens a menu item - * @param {UmbEntityModel} entity The entity to open + * @param {UmbEntityExpansionEntryModel} entity The entity to open * @param {string} entity.entityType The entity type * @param {string} entity.unique The unique key - * @memberof UmbSectionSidebarMenuExpansionManager + * @param {UmbEntityModel} entity.target The target entity to look up + * @param {string} entity.target.entityType The target entity type + * @param {string} entity.target.unique The target unique key + * @memberof UmbSectionSidebarMenuSectionExpansionManager * @returns {Promise} */ - public async expandItem(entity: UmbEntityModel): Promise { + public async expandItem(entity: UmbEntityExpansionEntryModel): Promise { this.#manager.expandItem(entity); + this.#globalContext?.expansion.expandItem(entity); } /** @@ -86,23 +109,28 @@ export class UmbSectionSidebarMenuExpansionManager extends UmbControllerBase { */ public expandItems(entities: UmbEntityExpansionModel): void { this.#manager.expandItems(entities); + this.#globalContext?.expansion.expandItems(entities); } /** * Closes a menu item - * @param {UmbEntityModel} entity The entity to close + * @param {UmbEntityExpansionEntryModel} entity The entity to open * @param {string} entity.entityType The entity type * @param {string} entity.unique The unique key - * @memberof UmbSectionSidebarMenuExpansionManager + * @param {UmbEntityModel} entity.target The target entity to look up + * @param {string} entity.target.entityType The target entity type + * @param {string} entity.target.unique The target unique key + * @memberof UmbSectionSidebarMenuSectionExpansionManager * @returns {Promise} */ - public async collapseItem(entity: UmbEntityModel): Promise { + public async collapseItem(entity: UmbEntityExpansionEntryModel): Promise { this.#manager.collapseItem(entity); + this.#globalContext?.expansion.collapseItem(entity); } /** * Closes all menu items - * @memberof UmbSectionSidebarMenuExpansionManager + * @memberof UmbSectionSidebarMenuSectionExpansionManager * @returns {Promise} */ public async collapseAll(): Promise { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.ts index b45311922b91..16d875875f2c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.ts @@ -1,10 +1,10 @@ -import { UmbSectionSidebarMenuExpansionManager } from '../expansion/section-sidebar-menu-expansion.manager.js'; +import { UmbSectionSidebarMenuSectionExpansionManager } from './expansion/section-sidebar-menu-expansion.manager.js'; import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from './section-sidebar-menu.section-context.token.js'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export class UmbSectionSidebarMenuSectionContext extends UmbContextBase { - public readonly expansion = new UmbSectionSidebarMenuExpansionManager(this); + public readonly expansion = new UmbSectionSidebarMenuSectionExpansionManager(this); constructor(host: UmbControllerHost) { super(host, UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT); From 44c55fdfe7fa4d6149876ed1c7ae784b185f2e1b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 13:11:03 +0200 Subject: [PATCH 050/118] register global context to hold menu state across sections --- .../global-context/constants.ts | 1 + .../global-context/manifests.ts | 10 ++++++++++ .../section-sidebar-menu.global-context.token.ts | 6 ++++++ .../section-sidebar-menu.global-context.ts | 14 ++++++++++++++ .../core/menu/section-sidebar-menu/manifests.ts | 2 ++ 5 files changed, 33 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/constants.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.token.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/constants.ts new file mode 100644 index 000000000000..b55969770056 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/constants.ts @@ -0,0 +1 @@ +export * from './section-sidebar-menu.global-context.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/manifests.ts new file mode 100644 index 000000000000..1812e1d5f6cb --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/manifests.ts @@ -0,0 +1,10 @@ +import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'globalContext', + alias: 'Umb.GlobalContext.SectionSidebarMenu', + name: 'Section Sidebar Menu Global Context', + api: () => import('./section-sidebar-menu.global-context.js'), + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.token.ts new file mode 100644 index 000000000000..20c8eb36fa84 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.token.ts @@ -0,0 +1,6 @@ +import type { UmbSectionSidebarMenuGlobalContext } from './section-sidebar-menu.global-context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT = new UmbContextToken( + 'UmbSectionSidebarMenuGlobalContext', +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.ts new file mode 100644 index 000000000000..8778d9a2a4ec --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.ts @@ -0,0 +1,14 @@ +import { UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT } from './section-sidebar-menu.global-context.token.js'; +import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; +import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; + +export class UmbSectionSidebarMenuGlobalContext extends UmbContextBase { + public readonly expansion = new UmbEntityExpansionManager(this); + + constructor(host: UmbControllerHost) { + super(host, UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT); + } +} + +export { UmbSectionSidebarMenuGlobalContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts index d56b84dfaa29..b04a4c16615f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/manifests.ts @@ -1,4 +1,5 @@ import { manifests as sectionContextManifests } from './section-context/manifests.js'; +import { manifests as globalContextManifests } from './global-context/manifests.js'; import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ @@ -13,4 +14,5 @@ export const manifests: Array = }, }, ...sectionContextManifests, + ...globalContextManifests, ]; From 4b55108a23f198f83a951135462d43542fdbdc93 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 14:27:34 +0200 Subject: [PATCH 051/118] temp observe section specific expansions --- .../umbraco-news-dashboard.element.ts | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts index f53076bf7d28..570244babafc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts @@ -38,7 +38,7 @@ export class UmbUmbracoNewsDashboardElement extends UmbLitElement { super(); this.consumeContext(UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, (context) => { this.#context = context; - this.#observeExpansion(); + this.#observeSectionExpansion(); }); } @@ -58,7 +58,7 @@ export class UmbUmbracoNewsDashboardElement extends UmbLitElement { this.#context?.expansion.collapseAll(); } - #observeExpansion() { + #observeSectionExpansion() { this.observe(this.#context?.expansion.expansion, (items) => { this._expansion = items || []; }); @@ -66,24 +66,24 @@ export class UmbUmbracoNewsDashboardElement extends UmbLitElement { override render() { return html` +
+ + + ${repeat( + this._expansion, + (item) => item.unique, + (item) => + html`
+ ${item.entityType} + ${item.unique} +
`, + )} +
+
-
- - - ${repeat( - this._expansion, - (item) => item.unique, - (item) => - html`
- ${item.entityType} + ${item.unique} -
`, - )} -
-

${this.localize.term('welcomeDashboard_ourUmbracoHeadline')}

${this.localize.term('welcomeDashboard_ourUmbracoDescription')}

From 489dd2d13329cde6c2dd0175151273c5ab0980a0 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 14:27:54 +0200 Subject: [PATCH 052/118] temp observe section specific expansions --- .../settings-welcome-dashboard.element.ts | 28 ++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts index 858736c51440..eea39a607f80 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts @@ -1,11 +1,37 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from '@umbraco-cms/backoffice/menu'; +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; @customElement('umb-settings-welcome-dashboard') export class UmbSettingsWelcomeDashboardElement extends UmbLitElement { + #context?: typeof UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT.TYPE; + + @state() + _expansion: Array = []; + + constructor() { + super(); + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, (context) => { + this.#context = context; + this.#observeSectionExpansion(); + }); + } + + #observeSectionExpansion() { + this.observe(this.#context?.expansion.expansion, (items) => { + this._expansion = items || []; + }); + } + override render() { return html` + ${repeat( + this._expansion, + (item) => item.unique, + (item) => html`
${item.entityType} + ${item.unique}
`, + )}

From 6a361ff872201af19528a6501e45ba6d6ec86ce8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 14:28:26 +0200 Subject: [PATCH 053/118] add method to collapse multiple items --- .../expansion/entity-expansion.manager.ts | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts index f1c1c6dc3541..a0bb6063fb3a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts @@ -89,9 +89,6 @@ export class UmbEntityExpansionManager extends UmbControllerBase { * @param {UmbEntityExpansionEntryModel} entity The entity to open * @param {string} entity.entityType The entity type * @param {string} entity.unique The unique key - * @param {UmbEntityModel} entity.target The target entity to look up - * @param {string} entity.target.entityType The target entity type - * @param {string} entity.target.unique The target unique key * @memberof UmbEntityExpansionManager * @returns {Promise} */ @@ -101,6 +98,23 @@ export class UmbEntityExpansionManager extends UmbControllerBase { this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } + /** + * Collapses multiple entities + * @param {UmbEntityExpansionModel} entities The entities to close + * @memberof UmbEntityExpansionManager + * @returns {void} + */ + public collapseItems(entities: UmbEntityExpansionModel): void { + if (!entities || entities.length === 0) return; + this.#expansion.filter( + (x) => !entities.some((entity) => entity.entityType === x.entityType && entity.unique === x.unique), + ); + entities.forEach((entity) => { + this.getHostElement()?.dispatchEvent(new UmbExpansionEntityCollapsedEvent(entity)); + }); + this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); + } + /** * Collapses all expanded entities * @memberof UmbEntityExpansionManager From ce59d2ec234666b2f0975c75f028c2a9fcc7d6ca Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 14:58:11 +0200 Subject: [PATCH 054/118] bind expansion to section --- .../section-sidebar-menu-expansion.manager.ts | 44 ++++++++++++------- .../core/menu/section-sidebar-menu/types.ts | 5 +++ 2 files changed, 33 insertions(+), 16 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-expansion.manager.ts index 52f9fb6448e1..cbbad4f5cd2d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-expansion.manager.ts @@ -9,6 +9,7 @@ import { type UmbEntityExpansionEntryModel, type UmbEntityExpansionModel, } from '@umbraco-cms/backoffice/utils'; +import type { UmbEntityExpansionSectionEntryModel } from '../../types.js'; /** * Manages the expansion state of a section sidebar menu. @@ -38,18 +39,18 @@ export class UmbSectionSidebarMenuSectionExpansionManager extends UmbControllerB }); } - #observeGlobalMenuExpansion() { - this.observe(this.#globalContext?.expansion.expansion, (expansion) => { - const globalExpansion = expansion || []; - this.#manager.setExpansion(globalExpansion); - }); - } - #observeCurrentSectionAlias() { this.observe(this.#sectionContext?.alias, (alias) => { if (!alias) return; this.#currentSectionAlias = alias; - console.log(`SectionSidebarMenuExpansionManager: Current section alias set to: ${this.#currentSectionAlias}`); + }); + } + + #observeGlobalMenuExpansion() { + this.observe(this.#globalContext?.expansion.expansion, (expansion) => { + const expansionForCurrentSection = + expansion?.filter((item) => item.sectionAlias === this.#currentSectionAlias) || []; + this.#manager.setExpansion(expansionForCurrentSection); }); } @@ -73,7 +74,8 @@ export class UmbSectionSidebarMenuSectionExpansionManager extends UmbControllerB */ setExpansion(expansion: UmbEntityExpansionModel): void { this.#manager.setExpansion(expansion); - this.#globalContext?.expansion.setExpansion(expansion); + const entries = this.#bindEntriesToSection(expansion); + this.#globalContext?.expansion.setExpansion(entries); } /** @@ -98,7 +100,8 @@ export class UmbSectionSidebarMenuSectionExpansionManager extends UmbControllerB */ public async expandItem(entity: UmbEntityExpansionEntryModel): Promise { this.#manager.expandItem(entity); - this.#globalContext?.expansion.expandItem(entity); + const entries = this.#bindEntriesToSection([entity]); + this.#globalContext?.expansion.expandItem(entries[0]); } /** @@ -109,7 +112,8 @@ export class UmbSectionSidebarMenuSectionExpansionManager extends UmbControllerB */ public expandItems(entities: UmbEntityExpansionModel): void { this.#manager.expandItems(entities); - this.#globalContext?.expansion.expandItems(entities); + const entries = this.#bindEntriesToSection(entities); + this.#globalContext?.expansion.expandItems(entries); } /** @@ -117,15 +121,13 @@ export class UmbSectionSidebarMenuSectionExpansionManager extends UmbControllerB * @param {UmbEntityExpansionEntryModel} entity The entity to open * @param {string} entity.entityType The entity type * @param {string} entity.unique The unique key - * @param {UmbEntityModel} entity.target The target entity to look up - * @param {string} entity.target.entityType The target entity type - * @param {string} entity.target.unique The target unique key * @memberof UmbSectionSidebarMenuSectionExpansionManager * @returns {Promise} */ - public async collapseItem(entity: UmbEntityExpansionEntryModel): Promise { + public async collapseItem(entity: UmbEntityModel): Promise { this.#manager.collapseItem(entity); - this.#globalContext?.expansion.collapseItem(entity); + const entries = this.#bindEntriesToSection([entity]); + this.#globalContext?.expansion.collapseItem(entries[0]); } /** @@ -135,5 +137,15 @@ export class UmbSectionSidebarMenuSectionExpansionManager extends UmbControllerB */ public async collapseAll(): Promise { this.#manager.collapseAll(); + // Collapse all items in the global context matching the current section + const entries = this.#bindEntriesToSection(this.#manager.getExpansion()); + this.#globalContext?.expansion.collapseItems(entries); + } + + #bindEntriesToSection(expansion: UmbEntityExpansionModel): Array { + return expansion.map((item) => ({ + ...item, + sectionAlias: this.#currentSectionAlias, + })); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/types.ts index af00746dafbf..8bd626fd1d20 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/types.ts @@ -1,4 +1,5 @@ import type { ManifestSectionSidebarApp } from '@umbraco-cms/backoffice/section'; +import type { UmbEntityExpansionEntryModel } from '@umbraco-cms/backoffice/utils'; export interface MetaSectionSidebarAppMenuKind { label: string; @@ -24,3 +25,7 @@ export interface ManifestSectionSidebarAppMenuWithEntityActionsKind extends Mani export interface MetaSectionSidebarAppMenuWithEntityActionsKind extends MetaSectionSidebarAppMenuKind { entityType: string; } + +export interface UmbEntityExpansionSectionEntryModel extends UmbEntityExpansionEntryModel { + sectionAlias?: string; +} From aa463faa7afd9b707416ae154eeb9938d35d4c72 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 15:13:40 +0200 Subject: [PATCH 055/118] make entity expansion manager generic --- .../section-sidebar-menu.global-context.ts | 3 +- .../section-sidebar-menu-expansion.manager.ts | 2 +- .../expansion/entity-expansion.manager.ts | 58 +++++++++---------- .../packages/core/utils/expansion/types.ts | 4 +- 4 files changed, 35 insertions(+), 32 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.ts index 8778d9a2a4ec..cfd565756161 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.ts @@ -1,10 +1,11 @@ +import type { UmbEntityExpansionSectionEntryModel } from '../types.js'; import { UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT } from './section-sidebar-menu.global-context.token.js'; import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export class UmbSectionSidebarMenuGlobalContext extends UmbContextBase { - public readonly expansion = new UmbEntityExpansionManager(this); + public readonly expansion = new UmbEntityExpansionManager(this); constructor(host: UmbControllerHost) { super(host, UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-expansion.manager.ts index cbbad4f5cd2d..cb2e6e636d12 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-expansion.manager.ts @@ -1,4 +1,5 @@ import { UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT } from '../../global-context/section-sidebar-menu.global-context.token.js'; +import type { UmbEntityExpansionSectionEntryModel } from '../../types.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; @@ -9,7 +10,6 @@ import { type UmbEntityExpansionEntryModel, type UmbEntityExpansionModel, } from '@umbraco-cms/backoffice/utils'; -import type { UmbEntityExpansionSectionEntryModel } from '../../types.js'; /** * Manages the expansion state of a section sidebar menu. diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts index a0bb6063fb3a..bd29fe1042e0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts @@ -5,7 +5,6 @@ import { UmbExpansionChangeEvent, } from './events/index.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; -import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import { UmbArrayState, type Observable } from '@umbraco-cms/backoffice/observable-api'; /** @@ -14,19 +13,19 @@ import { UmbArrayState, type Observable } from '@umbraco-cms/backoffice/observab * @class UmbEntityExpansionManager * @augments {UmbControllerBase} */ -export class UmbEntityExpansionManager extends UmbControllerBase { - #expansion = new UmbArrayState([], (x) => x.entityType + x.unique); +export class UmbEntityExpansionManager< + EntryModelType extends UmbEntityExpansionEntryModel = UmbEntityExpansionEntryModel, +> extends UmbControllerBase { + #expansion = new UmbArrayState([], (x) => x.entityType + x.unique); expansion = this.#expansion.asObservable(); /** * Checks if an entity is expanded - * @param {UmbEntityModel} entity The entity to check - * @param {string} entity.entityType The entity type - * @param {string} entity.unique The unique key + * @param {EntryModelType} entity The entity to check * @returns {Observable} True if the entity is expanded * @memberof UmbEntityExpansionManager */ - isExpanded(entity: UmbEntityModel): Observable { + isExpanded(entity: EntryModelType): Observable { return this.#expansion.asObservablePart((entries) => entries?.some((entry) => entry.entityType === entity.entityType && entry.unique === entity.unique), ); @@ -34,11 +33,11 @@ export class UmbEntityExpansionManager extends UmbControllerBase { /** * Sets the expansion state - * @param {UmbEntityExpansionModel | undefined} expansion The expansion state + * @param {UmbEntityExpansionModel | undefined} expansion The expansion state * @memberof UmbEntityExpansionManager * @returns {void} */ - setExpansion(expansion: UmbEntityExpansionModel): void { + setExpansion(expansion: UmbEntityExpansionModel): void { this.#expansion.setValue(expansion); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } @@ -48,69 +47,70 @@ export class UmbEntityExpansionManager extends UmbControllerBase { * @memberof UmbEntityExpansionManager * @returns {UmbEntityExpansionModel} The expansion state */ - getExpansion(): UmbEntityExpansionModel { + getExpansion(): UmbEntityExpansionModel { return this.#expansion.getValue(); } /** * Expands an entity - * @param {UmbEntityExpansionEntryModel} entity The entity to open - * @param {string} entity.entityType The entity type - * @param {string} entity.unique The unique key - * @param {UmbEntityModel} entity.target The target entity to look up - * @param {string} entity.target.entityType The target entity type - * @param {string} entity.target.unique The target unique key + * @param {EntryModelType} entity The entity to open * @memberof UmbEntityExpansionManager * @returns {Promise} */ - public async expandItem(entity: UmbEntityExpansionEntryModel): Promise { + public async expandItem(entity: EntryModelType): Promise { this.#expansion.appendOne(entity); - this.getHostElement()?.dispatchEvent(new UmbExpansionEntityExpandedEvent(entity)); + this.getHostElement()?.dispatchEvent( + new UmbExpansionEntityExpandedEvent({ entityType: entity.entityType, unique: entity.unique }), + ); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } /** * Expands multiple entities - * @param {UmbEntityExpansionModel} entities The entities to open + * @param {UmbEntityExpansionModel} entities The entities to open * @memberof UmbEntityExpansionManager * @returns {void} */ - public expandItems(entities: UmbEntityExpansionModel): void { + public expandItems(entities: UmbEntityExpansionModel): void { if (!entities || entities.length === 0) return; this.#expansion.append(entities); entities.forEach((entity) => { - this.getHostElement()?.dispatchEvent(new UmbExpansionEntityExpandedEvent(entity)); + this.getHostElement()?.dispatchEvent( + new UmbExpansionEntityExpandedEvent({ entityType: entity.entityType, unique: entity.unique }), + ); }); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } /** * Collapses an entity - * @param {UmbEntityExpansionEntryModel} entity The entity to open - * @param {string} entity.entityType The entity type - * @param {string} entity.unique The unique key + * @param {EntryModelType} entity The entity to open * @memberof UmbEntityExpansionManager * @returns {Promise} */ - public async collapseItem(entity: UmbEntityModel): Promise { + public async collapseItem(entity: EntryModelType): Promise { this.#expansion.filter((x) => x.entityType !== entity.entityType || x.unique !== entity.unique); - this.getHostElement()?.dispatchEvent(new UmbExpansionEntityCollapsedEvent(entity)); + this.getHostElement()?.dispatchEvent( + new UmbExpansionEntityCollapsedEvent({ entityType: entity.entityType, unique: entity.unique }), + ); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } /** * Collapses multiple entities - * @param {UmbEntityExpansionModel} entities The entities to close + * @param {UmbEntityExpansionModel} entities The entities to close * @memberof UmbEntityExpansionManager * @returns {void} */ - public collapseItems(entities: UmbEntityExpansionModel): void { + public collapseItems(entities: UmbEntityExpansionModel): void { if (!entities || entities.length === 0) return; this.#expansion.filter( (x) => !entities.some((entity) => entity.entityType === x.entityType && entity.unique === x.unique), ); entities.forEach((entity) => { - this.getHostElement()?.dispatchEvent(new UmbExpansionEntityCollapsedEvent(entity)); + this.getHostElement()?.dispatchEvent( + new UmbExpansionEntityCollapsedEvent({ entityType: entity.entityType, unique: entity.unique }), + ); }); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts index 90ce2e34336c..ada5d4b7dd4e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/types.ts @@ -1,6 +1,8 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; -export type UmbEntityExpansionModel = Array; +export type UmbEntityExpansionModel< + EntryModelType extends UmbEntityExpansionEntryModel = UmbEntityExpansionEntryModel, +> = Array; export interface UmbEntityExpansionEntryModel extends UmbEntityModel { target?: UmbEntityModel; From 5d7660e454f7859d454a9e228371e0fd94fcec2f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 20:39:44 +0200 Subject: [PATCH 056/118] add helper method --- ...tion-sidebar-menu-app-expansion.manager.ts | 23 +++++++++++++++++++ .../section-sidebar-menu.global-context.ts | 5 ++-- ...sidebar-menu-section-expansion.manager.ts} | 7 +++--- .../section-sidebar-menu.section-context.ts | 2 +- .../expansion/entity-expansion.manager.ts | 20 ++++++++-------- 5 files changed, 39 insertions(+), 18 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/expansion/section-sidebar-menu-app-expansion.manager.ts rename src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/{section-sidebar-menu-expansion.manager.ts => section-sidebar-menu-section-expansion.manager.ts} (95%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/expansion/section-sidebar-menu-app-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/expansion/section-sidebar-menu-app-expansion.manager.ts new file mode 100644 index 000000000000..5c3a97a5c9fa --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/expansion/section-sidebar-menu-app-expansion.manager.ts @@ -0,0 +1,23 @@ +import type { UmbEntityExpansionSectionEntryModel } from '../../types.js'; +import type { Observable } from '@umbraco-cms/backoffice/observable-api'; +import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; + +/** + * Manages the expansion state of a section sidebar menu. + * @exports + * @class UmbSectionSidebarMenuAppExpansionManager + * @augments {UmbControllerBase} + */ +export class UmbSectionSidebarMenuAppExpansionManager extends UmbEntityExpansionManager { + /** + * Returns an observable of the expansion state filtered by section alias. + * @param {string} sectionAlias The alias of the section to filter by. + * @returns {Observable} An observable of the expansion state for the specified section alias. + * @memberof UmbSectionSidebarMenuAppExpansionManager + */ + expansionBySectionAlias(sectionAlias: string): Observable { + return this._expansion.asObservablePart((entries) => + entries.filter((entry) => entry.sectionAlias === sectionAlias), + ); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.ts index cfd565756161..afcd007487db 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/section-sidebar-menu.global-context.ts @@ -1,11 +1,10 @@ -import type { UmbEntityExpansionSectionEntryModel } from '../types.js'; import { UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT } from './section-sidebar-menu.global-context.token.js'; -import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; +import { UmbSectionSidebarMenuAppExpansionManager } from './expansion/section-sidebar-menu-app-expansion.manager.js'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export class UmbSectionSidebarMenuGlobalContext extends UmbContextBase { - public readonly expansion = new UmbEntityExpansionManager(this); + public readonly expansion = new UmbSectionSidebarMenuAppExpansionManager(this); constructor(host: UmbControllerHost) { super(host, UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts similarity index 95% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-expansion.manager.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts index cb2e6e636d12..6cd2103b4f1a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts @@ -47,10 +47,9 @@ export class UmbSectionSidebarMenuSectionExpansionManager extends UmbControllerB } #observeGlobalMenuExpansion() { - this.observe(this.#globalContext?.expansion.expansion, (expansion) => { - const expansionForCurrentSection = - expansion?.filter((item) => item.sectionAlias === this.#currentSectionAlias) || []; - this.#manager.setExpansion(expansionForCurrentSection); + if (!this.#globalContext || !this.#currentSectionAlias) return; + this.observe(this.#globalContext?.expansion.expansionBySectionAlias(this.#currentSectionAlias), (expansion) => { + this.#manager.setExpansion(expansion); }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.ts index 16d875875f2c..e4cfe3861f78 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.ts @@ -1,4 +1,4 @@ -import { UmbSectionSidebarMenuSectionExpansionManager } from './expansion/section-sidebar-menu-expansion.manager.js'; +import { UmbSectionSidebarMenuSectionExpansionManager } from './expansion/section-sidebar-menu-section-expansion.manager.js'; import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from './section-sidebar-menu.section-context.token.js'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts index bd29fe1042e0..cb585a8b3757 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts @@ -16,8 +16,8 @@ import { UmbArrayState, type Observable } from '@umbraco-cms/backoffice/observab export class UmbEntityExpansionManager< EntryModelType extends UmbEntityExpansionEntryModel = UmbEntityExpansionEntryModel, > extends UmbControllerBase { - #expansion = new UmbArrayState([], (x) => x.entityType + x.unique); - expansion = this.#expansion.asObservable(); + protected _expansion = new UmbArrayState([], (x) => x.entityType + x.unique); + expansion = this._expansion.asObservable(); /** * Checks if an entity is expanded @@ -26,7 +26,7 @@ export class UmbEntityExpansionManager< * @memberof UmbEntityExpansionManager */ isExpanded(entity: EntryModelType): Observable { - return this.#expansion.asObservablePart((entries) => + return this._expansion.asObservablePart((entries) => entries?.some((entry) => entry.entityType === entity.entityType && entry.unique === entity.unique), ); } @@ -38,7 +38,7 @@ export class UmbEntityExpansionManager< * @returns {void} */ setExpansion(expansion: UmbEntityExpansionModel): void { - this.#expansion.setValue(expansion); + this._expansion.setValue(expansion); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } @@ -48,7 +48,7 @@ export class UmbEntityExpansionManager< * @returns {UmbEntityExpansionModel} The expansion state */ getExpansion(): UmbEntityExpansionModel { - return this.#expansion.getValue(); + return this._expansion.getValue(); } /** @@ -58,7 +58,7 @@ export class UmbEntityExpansionManager< * @returns {Promise} */ public async expandItem(entity: EntryModelType): Promise { - this.#expansion.appendOne(entity); + this._expansion.appendOne(entity); this.getHostElement()?.dispatchEvent( new UmbExpansionEntityExpandedEvent({ entityType: entity.entityType, unique: entity.unique }), ); @@ -73,7 +73,7 @@ export class UmbEntityExpansionManager< */ public expandItems(entities: UmbEntityExpansionModel): void { if (!entities || entities.length === 0) return; - this.#expansion.append(entities); + this._expansion.append(entities); entities.forEach((entity) => { this.getHostElement()?.dispatchEvent( new UmbExpansionEntityExpandedEvent({ entityType: entity.entityType, unique: entity.unique }), @@ -89,7 +89,7 @@ export class UmbEntityExpansionManager< * @returns {Promise} */ public async collapseItem(entity: EntryModelType): Promise { - this.#expansion.filter((x) => x.entityType !== entity.entityType || x.unique !== entity.unique); + this._expansion.filter((x) => x.entityType !== entity.entityType || x.unique !== entity.unique); this.getHostElement()?.dispatchEvent( new UmbExpansionEntityCollapsedEvent({ entityType: entity.entityType, unique: entity.unique }), ); @@ -104,7 +104,7 @@ export class UmbEntityExpansionManager< */ public collapseItems(entities: UmbEntityExpansionModel): void { if (!entities || entities.length === 0) return; - this.#expansion.filter( + this._expansion.filter( (x) => !entities.some((entity) => entity.entityType === x.entityType && entity.unique === x.unique), ); entities.forEach((entity) => { @@ -121,7 +121,7 @@ export class UmbEntityExpansionManager< * @returns {Promise} */ public async collapseAll(): Promise { - this.#expansion.setValue([]); + this._expansion.setValue([]); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } } From d2739b985193b89322c355c8a761926f5cc1b5e5 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 31 Jul 2025 20:44:12 +0200 Subject: [PATCH 057/118] remove temp test data --- .../settings-welcome-dashboard.element.ts | 5 ----- .../umbraco-news-dashboard.element.ts | 16 ---------------- 2 files changed, 21 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts index eea39a607f80..f4091401a868 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts @@ -27,11 +27,6 @@ export class UmbSettingsWelcomeDashboardElement extends UmbLitElement { override render() { return html` - ${repeat( - this._expansion, - (item) => item.unique, - (item) => html`

${item.entityType} + ${item.unique}
`, - )}

diff --git a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts index 570244babafc..3a02de58d0d7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts @@ -66,22 +66,6 @@ export class UmbUmbracoNewsDashboardElement extends UmbLitElement { override render() { return html` -

- - - ${repeat( - this._expansion, - (item) => item.unique, - (item) => - html`
- ${item.entityType} + ${item.unique} -
`, - )} -
-
From da567029ceb629d821c369389f33e0aaad50aaec Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 4 Aug 2025 16:00:17 +0200 Subject: [PATCH 058/118] include last item in target --- .../core/menu/menu-tree-structure-workspace-context-base.ts | 5 +++-- .../menu-variant-tree-structure-workspace-context-base.ts | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts index e15f37677362..dbc4593122dd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts @@ -149,8 +149,9 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex } #expandSectionSidebarMenu(structureItems: Array) { + const linkedEntries = linkEntityExpansionEntries(structureItems); // Filter out the current entity as we don't want to expand it - const expandableItems = structureItems.filter((item) => item.unique !== this.#workspaceContext?.getUnique()); - this.#sectionSidebarMenuContext?.expansion.expandItems(linkEntityExpansionEntries(expandableItems)); + const expandableItems = linkedEntries.filter((item) => item.unique !== this.#workspaceContext?.getUnique()); + this.#sectionSidebarMenuContext?.expansion.expandItems(expandableItems); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index e712fcd5c9e8..c6ea7a3cb981 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -158,8 +158,9 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um } #expandSectionSidebarMenu(structureItems: Array) { + const linkedEntries = linkEntityExpansionEntries(structureItems); // Filter out the current entity as we don't want to expand it - const expandableItems = structureItems.filter((item) => item.unique !== this.#workspaceContext?.getUnique()); - this.#sectionSidebarMenuContext?.expansion.expandItems(linkEntityExpansionEntries(expandableItems)); + const expandableItems = linkedEntries.filter((item) => item.unique !== this.#workspaceContext?.getUnique()); + this.#sectionSidebarMenuContext?.expansion.expandItems(expandableItems); } } From 3a9b99b531c9d826f30c5d49a74a2562ad903c0f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 13:39:21 +0200 Subject: [PATCH 059/118] remove unused --- .../settings-welcome-dashboard.element.ts | 2 +- .../umbraco-news-dashboard.element.ts | 18 +----------------- 2 files changed, 2 insertions(+), 18 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts index f4091401a868..47b3a9c5890d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts @@ -1,5 +1,5 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from '@umbraco-cms/backoffice/menu'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts index 3a02de58d0d7..260481c0e3c6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts @@ -1,5 +1,5 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from '@umbraco-cms/backoffice/menu'; @@ -42,22 +42,6 @@ export class UmbUmbracoNewsDashboardElement extends UmbLitElement { }); } - #onExpand() { - const item: UmbEntityModel = { - entityType: 'document', - unique: '315c76fd-2446-4a4d-9762-e002ff31a220', - }; - this.#context?.expansion.expandItem(item); - } - - #onCollapse(event: PointerEvent, item: UmbEntityModel) { - this.#context?.expansion.collapseItem(item); - } - - #onCollapseAll() { - this.#context?.expansion.collapseAll(); - } - #observeSectionExpansion() { this.observe(this.#context?.expansion.expansion, (items) => { this._expansion = items || []; From f412ee65d88b136fdf8f263ac92f604cf0367c06 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 20:26:27 +0200 Subject: [PATCH 060/118] pass full entry to event --- .../packages/core/menu/components/menu/menu.element.ts | 5 +++-- .../core/utils/expansion/entity-expansion.manager.ts | 8 ++------ .../expansion/events/expansion-entity-collapsed.event.ts | 6 +++--- .../expansion/events/expansion-entity-expanded.event.ts | 6 +++--- 4 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts index fc23c9f0323e..673a674c2f19 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts @@ -1,6 +1,7 @@ import type { ManifestMenu } from '../../menu.extension.js'; import type { ManifestMenuItem } from '../../menu-item/types.js'; import { UmbDefaultMenuContext } from './menu.context.js'; +import type { UmbEntityExpansionMenuItemEntryModel } from './types.js'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbEntityExpansionModel } from '@umbraco-cms/backoffice/utils'; @@ -12,10 +13,10 @@ export class UmbMenuElement extends UmbLitElement { @property({ attribute: false }) manifest?: ManifestMenu; - public get expansion(): UmbEntityExpansionModel { + public get expansion(): UmbEntityExpansionModel { return this.#context.expansion.getExpansion(); } - public set expansion(value: UmbEntityExpansionModel) { + public set expansion(value: UmbEntityExpansionModel) { this.#context.expansion.setExpansion(value); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts index cb585a8b3757..900906323b1d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts @@ -59,9 +59,7 @@ export class UmbEntityExpansionManager< */ public async expandItem(entity: EntryModelType): Promise { this._expansion.appendOne(entity); - this.getHostElement()?.dispatchEvent( - new UmbExpansionEntityExpandedEvent({ entityType: entity.entityType, unique: entity.unique }), - ); + this.getHostElement()?.dispatchEvent(new UmbExpansionEntityExpandedEvent(entity)); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } @@ -75,9 +73,7 @@ export class UmbEntityExpansionManager< if (!entities || entities.length === 0) return; this._expansion.append(entities); entities.forEach((entity) => { - this.getHostElement()?.dispatchEvent( - new UmbExpansionEntityExpandedEvent({ entityType: entity.entityType, unique: entity.unique }), - ); + this.getHostElement()?.dispatchEvent(new UmbExpansionEntityExpandedEvent(entity)); }); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts index 7e2b2576a0c1..a12cceae5f39 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts @@ -2,11 +2,11 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; export class UmbExpansionEntityCollapsedEvent extends Event { public static readonly TYPE = 'expansion-entity-collapsed'; - entity: UmbEntityModel; + entry: UmbEntityModel; - public constructor(entity: UmbEntityModel) { + public constructor(entry: UmbEntityModel) { // mimics the native change event super(UmbExpansionEntityCollapsedEvent.TYPE, { bubbles: true, composed: false, cancelable: false }); - this.entity = entity; + this.entry = entry; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts index efe83ffee0b7..3346168d2d2c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts @@ -2,11 +2,11 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; export class UmbExpansionEntityExpandedEvent extends Event { public static readonly TYPE = 'expansion-entity-expanded'; - entity: UmbEntityModel; + entry: UmbEntityModel; - public constructor(entity: UmbEntityModel) { + public constructor(entry: UmbEntityModel) { // mimics the native change event super(UmbExpansionEntityExpandedEvent.TYPE, { bubbles: true, composed: false, cancelable: false }); - this.entity = entity; + this.entry = entry; } } From cebd848b0c3e02d00f4b9a02cd1bd1a6e9f2e129 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 20:33:02 +0200 Subject: [PATCH 061/118] add type for menu item expansion --- .../src/packages/core/menu/components/menu/types.ts | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/types.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/types.ts new file mode 100644 index 000000000000..dc3d827be241 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/types.ts @@ -0,0 +1,5 @@ +import type { UmbEntityExpansionEntryModel } from '@umbraco-cms/backoffice/utils'; + +export interface UmbMenuItemExpansionEntryModel extends UmbEntityExpansionEntryModel { + menuItemAlias: string; +} From dc8c2980514b5324253460f6f61c2f28023b5214 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 20:33:17 +0200 Subject: [PATCH 062/118] export types --- .../src/packages/core/menu/components/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/types.ts index c858b14791dd..e03ad3173595 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/types.ts @@ -1 +1,2 @@ export type * from './menu-item/types.js'; +export type * from './menu/types.js'; From 0a7ec5b07fdca682f37aed4f7fade3fbdb9810a4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 20:34:43 +0200 Subject: [PATCH 063/118] add menuItem alias --- .../tree/tree-menu-item/tree-menu-item.element.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts index 5e7adf94c471..226bb467ef01 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts @@ -37,19 +37,23 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM #onEntityExpansionChange(event: UmbExpansionEntityExpandedEvent | UmbExpansionEntityCollapsedEvent) { event.stopPropagation(); - const eventEntity = event.entity; + const eventEntry = event.entry; - if (!eventEntity) { - throw new Error('Entity is required to toggle expansion.'); + if (!eventEntry) { + throw new Error('Entry is required to toggle expansion.'); + } + + if (!this.manifest) { + throw new Error('Manifest is required to toggle expansion.'); } if (event.type === UmbExpansionEntityExpandedEvent.TYPE) { this.#muteStateUpdate = true; - this.#menuContext?.expansion.expandItem(eventEntity); + this.#menuContext?.expansion.expandItem({ ...eventEntry, menuItemAlias: this.manifest.alias }); this.#muteStateUpdate = false; } else if (event.type === UmbExpansionEntityCollapsedEvent.TYPE) { this.#muteStateUpdate = true; - this.#menuContext?.expansion.collapseItem(eventEntity); + this.#menuContext?.expansion.collapseItem({ ...eventEntry, menuItemAlias: this.manifest.alias }); this.#muteStateUpdate = false; } } From 168bd204dc5646955effcdb7e47cc096cc5cc18a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 20:34:59 +0200 Subject: [PATCH 064/118] Update types.ts --- .../src/packages/core/menu/section-sidebar-menu/types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/types.ts index 8bd626fd1d20..3ce2620b6adc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/types.ts @@ -1,5 +1,5 @@ +import type { UmbMenuItemExpansionEntryModel } from '../components/menu/types.js'; import type { ManifestSectionSidebarApp } from '@umbraco-cms/backoffice/section'; -import type { UmbEntityExpansionEntryModel } from '@umbraco-cms/backoffice/utils'; export interface MetaSectionSidebarAppMenuKind { label: string; @@ -26,6 +26,6 @@ export interface MetaSectionSidebarAppMenuWithEntityActionsKind extends MetaSect entityType: string; } -export interface UmbEntityExpansionSectionEntryModel extends UmbEntityExpansionEntryModel { +export interface UmbEntityExpansionSectionEntryModel extends UmbMenuItemExpansionEntryModel { sectionAlias?: string; } From 14882b023f62003efd4e62c7511f7c40272e7c26 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 20:35:41 +0200 Subject: [PATCH 065/118] support menu item expansion entry --- ...-sidebar-menu-section-expansion.manager.ts | 67 ++++++++----------- 1 file changed, 28 insertions(+), 39 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts index 6cd2103b4f1a..b7e98a5f197e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts @@ -1,15 +1,11 @@ import { UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT } from '../../global-context/section-sidebar-menu.global-context.token.js'; import type { UmbEntityExpansionSectionEntryModel } from '../../types.js'; +import type { UmbMenuItemExpansionEntryModel } from '../../../components/menu/types.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import type { Observable } from '@umbraco-cms/backoffice/observable-api'; import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section'; -import { - UmbEntityExpansionManager, - type UmbEntityExpansionEntryModel, - type UmbEntityExpansionModel, -} from '@umbraco-cms/backoffice/utils'; +import { UmbEntityExpansionManager, type UmbEntityExpansionModel } from '@umbraco-cms/backoffice/utils'; /** * Manages the expansion state of a section sidebar menu. @@ -18,7 +14,7 @@ import { * @augments {UmbControllerBase} */ export class UmbSectionSidebarMenuSectionExpansionManager extends UmbControllerBase { - #manager = new UmbEntityExpansionManager(this); + #manager = new UmbEntityExpansionManager(this); public readonly expansion = this.#manager.expansion; #sectionContext?: typeof UMB_SECTION_CONTEXT.TYPE; @@ -54,24 +50,22 @@ export class UmbSectionSidebarMenuSectionExpansionManager extends UmbControllerB } /** - * Checks if an entity is expanded - * @param {UmbEntityModel} entity The entity to check - * @param {string} entity.entityType The entity type - * @param {string} entity.unique The unique key - * @returns {Observable} True if the entity is expanded + * Checks if an entry is expanded + * @param {UmbMenuItemExpansionEntryModel} entry The entry to check + * @returns {Observable} True if the entry is expanded * @memberof UmbSectionSidebarMenuSectionExpansionManager */ - isExpanded(entity: UmbEntityModel): Observable { - return this.#manager.isExpanded(entity); + isExpanded(entry: UmbMenuItemExpansionEntryModel): Observable { + return this.#manager.isExpanded(entry); } /** * Sets the expansion state - * @param {UmbEntityExpansionModel | undefined} expansion The expansion state + * @param {UmbEntityExpansionModel | undefined} expansion The expansion state * @memberof UmbSectionSidebarMenuSectionExpansionManager * @returns {void} */ - setExpansion(expansion: UmbEntityExpansionModel): void { + setExpansion(expansion: UmbEntityExpansionModel): void { this.#manager.setExpansion(expansion); const entries = this.#bindEntriesToSection(expansion); this.#globalContext?.expansion.setExpansion(entries); @@ -80,52 +74,45 @@ export class UmbSectionSidebarMenuSectionExpansionManager extends UmbControllerB /** * Gets the expansion state * @memberof UmbSectionSidebarMenuSectionExpansionManager - * @returns {UmbEntityExpansionModel} The expansion state + * @returns {UmbEntityExpansionModel} The expansion state */ - getExpansion(): UmbEntityExpansionModel { + getExpansion(): UmbEntityExpansionModel { return this.#manager.getExpansion(); } /** * Opens a menu item - * @param {UmbEntityExpansionEntryModel} entity The entity to open - * @param {string} entity.entityType The entity type - * @param {string} entity.unique The unique key - * @param {UmbEntityModel} entity.target The target entity to look up - * @param {string} entity.target.entityType The target entity type - * @param {string} entity.target.unique The target unique key + * @param {UmbMenuItemExpansionEntryModel} entry The item to open * @memberof UmbSectionSidebarMenuSectionExpansionManager * @returns {Promise} */ - public async expandItem(entity: UmbEntityExpansionEntryModel): Promise { - this.#manager.expandItem(entity); - const entries = this.#bindEntriesToSection([entity]); + public async expandItem(entry: UmbMenuItemExpansionEntryModel): Promise { + this.#manager.expandItem(entry); + const entries = this.#bindEntriesToSection([entry]); this.#globalContext?.expansion.expandItem(entries[0]); } /** * Expands multiple entities - * @param {UmbEntityExpansionModel} entities The entities to open + * @param {UmbEntityExpansionModel} entries The entities to open * @memberof UmbEntityExpansionManager * @returns {void} */ - public expandItems(entities: UmbEntityExpansionModel): void { - this.#manager.expandItems(entities); - const entries = this.#bindEntriesToSection(entities); - this.#globalContext?.expansion.expandItems(entries); + public expandItems(entries: UmbEntityExpansionModel): void { + this.#manager.expandItems(entries); + const entriesWithSectionAlias = this.#bindEntriesToSection(entries); + this.#globalContext?.expansion.expandItems(entriesWithSectionAlias); } /** * Closes a menu item - * @param {UmbEntityExpansionEntryModel} entity The entity to open - * @param {string} entity.entityType The entity type - * @param {string} entity.unique The unique key + * @param {UmbMenuItemExpansionEntryModel} entry The item to close * @memberof UmbSectionSidebarMenuSectionExpansionManager * @returns {Promise} */ - public async collapseItem(entity: UmbEntityModel): Promise { - this.#manager.collapseItem(entity); - const entries = this.#bindEntriesToSection([entity]); + public async collapseItem(entry: UmbMenuItemExpansionEntryModel): Promise { + this.#manager.collapseItem(entry); + const entries = this.#bindEntriesToSection([entry]); this.#globalContext?.expansion.collapseItem(entries[0]); } @@ -141,7 +128,9 @@ export class UmbSectionSidebarMenuSectionExpansionManager extends UmbControllerB this.#globalContext?.expansion.collapseItems(entries); } - #bindEntriesToSection(expansion: UmbEntityExpansionModel): Array { + #bindEntriesToSection( + expansion: UmbEntityExpansionModel, + ): UmbEntityExpansionModel { return expansion.map((item) => ({ ...item, sectionAlias: this.#currentSectionAlias, From b8391741c8d4f5afaf9922164009932ff4537013 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 20:44:44 +0200 Subject: [PATCH 066/118] add const for menu item alias + use for breadcrumb and menu item --- .../src/packages/documents/documents/menu/constants.ts | 1 + .../src/packages/documents/documents/menu/manifests.ts | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/constants.ts new file mode 100644 index 000000000000..e2fd4065cc19 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/constants.ts @@ -0,0 +1 @@ +export const UMB_DOCUMENT_MENU_ITEM_ALIAS = 'Umb.MenuItem.Document'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts index dc764170937e..de78c8220c59 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts @@ -1,5 +1,6 @@ import { UMB_DOCUMENT_TREE_ALIAS } from '../tree/index.js'; import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace'; +import { UMB_DOCUMENT_MENU_ITEM_ALIAS } from './constants.js'; export const UMB_CONTENT_MENU_ALIAS = 'Umb.Menu.Content'; @@ -12,7 +13,7 @@ export const manifests: Array = [ { type: 'menuItem', kind: 'tree', - alias: 'Umb.MenuItem.Document', + alias: UMB_DOCUMENT_MENU_ITEM_ALIAS, name: 'Document Menu Item', weight: 200, meta: { @@ -39,6 +40,9 @@ export const manifests: Array = [ kind: 'variantMenuBreadcrumb', alias: 'Umb.WorkspaceFooterApp.Document.Breadcrumb', name: 'Document Breadcrumb Workspace Footer App', + meta: { + menuItemAlias: UMB_DOCUMENT_MENU_ITEM_ALIAS, + }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, From 77685a5a63e7112f34befbdd180aad2eb3621040 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 20:47:51 +0200 Subject: [PATCH 067/118] add data type menu item alias const + apply to breadcrumb --- .../src/packages/data-type/menu/constants.ts | 1 + .../src/packages/data-type/menu/manifests.ts | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/data-type/menu/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/constants.ts new file mode 100644 index 000000000000..c6d19226cb19 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/constants.ts @@ -0,0 +1 @@ +export const UMB_DATA_TYPE_MENU_ITEM_ALIAS = 'Umb.MenuItem.DataTypes'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts index bcd1dda1babc..3f33bfdd8e3e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts @@ -1,10 +1,11 @@ +import { UMB_DATA_TYPE_MENU_ITEM_ALIAS } from './constants.js'; import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace'; export const manifests: Array = [ { type: 'menuItem', kind: 'tree', - alias: 'Umb.MenuItem.DataTypes', + alias: UMB_DATA_TYPE_MENU_ITEM_ALIAS, name: 'Data Types Menu Item', weight: 600, meta: { @@ -31,6 +32,9 @@ export const manifests: Array = [ kind: 'menuBreadcrumb', alias: 'Umb.WorkspaceFooterApp.DataType.Breadcrumb', name: 'Data Type Breadcrumb Workspace Footer App', + meta: { + menuItemAlias: UMB_DATA_TYPE_MENU_ITEM_ALIAS, + }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, From bde787d14b99b1cdd9ad25b868d50fc8ec2a8d76 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 21:03:18 +0200 Subject: [PATCH 068/118] move to correct manifest --- .../menu/menu-tree-structure-workspace-context-base.ts | 9 ++++++++- ...nu-variant-tree-structure-workspace-context-base.ts | 10 ++++++++-- .../src/packages/data-type/menu/manifests.ts | 6 +++--- .../src/packages/documents/documents/menu/manifests.ts | 6 +++--- 4 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts index dbc4593122dd..475298adacfd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts @@ -4,7 +4,10 @@ import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from './section-sidebar-menu import type { UmbTreeRepository, UmbTreeItemModel, UmbTreeRootModel } from '@umbraco-cms/backoffice/tree'; import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; -import { UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; +import { + UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT, + type ManifestWorkspaceFooterAppMenuBreadcrumbKind, +} from '@umbraco-cms/backoffice/workspace'; import { UmbArrayState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbAncestorsEntityContext, UmbParentEntityContext, type UmbEntityModel } from '@umbraco-cms/backoffice/entity'; @@ -16,6 +19,8 @@ interface UmbMenuTreeStructureWorkspaceContextBaseArgs { // TODO: introduce base class for all menu structure workspaces to handle ancestors and parent export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContextBase { + manifest?: ManifestWorkspaceFooterAppMenuBreadcrumbKind; + #workspaceContext?: typeof UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT.TYPE; #args: UmbMenuTreeStructureWorkspaceContextBaseArgs; @@ -152,6 +157,8 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex const linkedEntries = linkEntityExpansionEntries(structureItems); // Filter out the current entity as we don't want to expand it const expandableItems = linkedEntries.filter((item) => item.unique !== this.#workspaceContext?.getUnique()); + console.log(this.manifest); + debugger; this.#sectionSidebarMenuContext?.expansion.expandItems(expandableItems); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index c6ea7a3cb981..4549ea52abe8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -7,7 +7,10 @@ import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import { UmbArrayState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbAncestorsEntityContext, UmbParentEntityContext, type UmbEntityModel } from '@umbraco-cms/backoffice/entity'; -import { UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; +import { + UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT, + type ManifestWorkspaceFooterAppVariantMenuBreadcrumbKind, +} from '@umbraco-cms/backoffice/workspace'; import { linkEntityExpansionEntries } from '@umbraco-cms/backoffice/utils'; interface UmbMenuVariantTreeStructureWorkspaceContextBaseArgs { @@ -16,7 +19,8 @@ interface UmbMenuVariantTreeStructureWorkspaceContextBaseArgs { // TODO: introduce base class for all menu structure workspaces to handle ancestors and parent export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends UmbContextBase { - // + manifest?: ManifestWorkspaceFooterAppVariantMenuBreadcrumbKind; + #workspaceContext?: typeof UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT.TYPE; #args: UmbMenuVariantTreeStructureWorkspaceContextBaseArgs; @@ -161,6 +165,8 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um const linkedEntries = linkEntityExpansionEntries(structureItems); // Filter out the current entity as we don't want to expand it const expandableItems = linkedEntries.filter((item) => item.unique !== this.#workspaceContext?.getUnique()); + console.log(this.manifest); + debugger; this.#sectionSidebarMenuContext?.expansion.expandItems(expandableItems); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts index 3f33bfdd8e3e..f3d146fd96a6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts @@ -20,6 +20,9 @@ export const manifests: Array = [ name: 'Data Type Menu Structure Workspace Context', alias: 'Umb.Context.DataType.Menu.Structure', api: () => import('./data-type-menu-structure.context.js'), + meta: { + menuItemAlias: UMB_DATA_TYPE_MENU_ITEM_ALIAS, + }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, @@ -32,9 +35,6 @@ export const manifests: Array = [ kind: 'menuBreadcrumb', alias: 'Umb.WorkspaceFooterApp.DataType.Breadcrumb', name: 'Data Type Breadcrumb Workspace Footer App', - meta: { - menuItemAlias: UMB_DATA_TYPE_MENU_ITEM_ALIAS, - }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts index de78c8220c59..e9080281e0da 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts @@ -28,6 +28,9 @@ export const manifests: Array = [ name: 'Document Menu Structure Workspace Context', alias: 'Umb.Context.Document.Menu.Structure', api: () => import('./document-menu-structure.context.js'), + meta: { + menuItemAlias: UMB_DOCUMENT_MENU_ITEM_ALIAS, + }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, @@ -40,9 +43,6 @@ export const manifests: Array = [ kind: 'variantMenuBreadcrumb', alias: 'Umb.WorkspaceFooterApp.Document.Breadcrumb', name: 'Document Breadcrumb Workspace Footer App', - meta: { - menuItemAlias: UMB_DOCUMENT_MENU_ITEM_ALIAS, - }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, From d624e26bf1818641b19b5d32e56b0a3be61b126f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 21:12:03 +0200 Subject: [PATCH 069/118] add menu item alias to expand entries --- ...nu-tree-structure-workspace-context-base.ts | 18 +++++++++++++----- ...nt-tree-structure-workspace-context-base.ts | 18 +++++++++++++----- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts index 475298adacfd..b02061fbf447 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts @@ -110,7 +110,11 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex this.#structure.setValue(structureItems); this.#setParentData(structureItems); this.#setAncestorData(data); - this.#expandSectionSidebarMenu(structureItems); + + const menuItemAlias = this.manifest?.meta?.menuItemAlias; + if (menuItemAlias) { + this.#expandSectionSidebarMenu(structureItems, menuItemAlias); + } } } } @@ -153,12 +157,16 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex this.#ancestorContext.setAncestors(ancestorEntities); } - #expandSectionSidebarMenu(structureItems: Array) { + #expandSectionSidebarMenu(structureItems: Array, menuItemAlias: string) { const linkedEntries = linkEntityExpansionEntries(structureItems); // Filter out the current entity as we don't want to expand it const expandableItems = linkedEntries.filter((item) => item.unique !== this.#workspaceContext?.getUnique()); - console.log(this.manifest); - debugger; - this.#sectionSidebarMenuContext?.expansion.expandItems(expandableItems); + const expandableItemsWithMenuItem = expandableItems.map((item) => { + return { + ...item, + menuItemAlias, + }; + }); + this.#sectionSidebarMenuContext?.expansion.expandItems(expandableItemsWithMenuItem); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index 4549ea52abe8..50e40323b39e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -119,7 +119,11 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um this.#structure.setValue(structureItems); this.#setParentData(structureItems); this.#setAncestorData(data); - this.#expandSectionSidebarMenu(structureItems); + + const menuItemAlias = this.manifest?.meta?.menuItemAlias; + if (menuItemAlias) { + this.#expandSectionSidebarMenu(structureItems, menuItemAlias); + } } } @@ -161,12 +165,16 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um this.#ancestorContext.setAncestors(ancestorEntities); } - #expandSectionSidebarMenu(structureItems: Array) { + #expandSectionSidebarMenu(structureItems: Array, menuItemAlias: string) { const linkedEntries = linkEntityExpansionEntries(structureItems); // Filter out the current entity as we don't want to expand it const expandableItems = linkedEntries.filter((item) => item.unique !== this.#workspaceContext?.getUnique()); - console.log(this.manifest); - debugger; - this.#sectionSidebarMenuContext?.expansion.expandItems(expandableItems); + const expandableItemsWithMenuItem = expandableItems.map((item) => { + return { + ...item, + menuItemAlias, + }; + }); + this.#sectionSidebarMenuContext?.expansion.expandItems(expandableItemsWithMenuItem); } } From b3185379371561843026b221fd448f8005092874 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 21:15:20 +0200 Subject: [PATCH 070/118] Update manifests.ts --- .../src/packages/documents/documents/menu/manifests.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts index e9080281e0da..64c5c9dd5136 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts @@ -1,6 +1,6 @@ import { UMB_DOCUMENT_TREE_ALIAS } from '../tree/index.js'; -import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace'; import { UMB_DOCUMENT_MENU_ITEM_ALIAS } from './constants.js'; +import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace'; export const UMB_CONTENT_MENU_ALIAS = 'Umb.Menu.Content'; From 2d046ad1bdd00bdfc89239ee6ebfd368dffb402c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 21:25:54 +0200 Subject: [PATCH 071/118] add menu structure kind types --- .../packages/core/menu/menu-structure/types.ts | 17 +++++++++++++++++ .../src/packages/core/menu/types.ts | 1 + 2 files changed, 18 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-structure/types.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-structure/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-structure/types.ts new file mode 100644 index 000000000000..08be58ee57e1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-structure/types.ts @@ -0,0 +1,17 @@ +import type { ManifestWorkspaceContext } from '@umbraco-cms/backoffice/workspace'; + +export interface ManifestWorkspaceContextMenuStructureKind extends ManifestWorkspaceContext { + type: 'workspaceContext'; + kind: 'menuStructure'; + meta: MetaWorkspaceContextMenuStructureKind; +} + +export interface MetaWorkspaceContextMenuStructureKind { + menuItemAlias: string; +} + +declare global { + interface UmbExtensionManifestMap { + umbManifestWorkspaceContextMenuStructureKind: ManifestWorkspaceContextMenuStructureKind; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts index 7989f79e7284..10f18f3ac4a8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts @@ -3,6 +3,7 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; export type * from './components/types.js'; export type * from './conditions/types.js'; export type * from './menu-item/types.js'; +export type * from './menu-structure/types.js'; export type * from './menu.extension.js'; // eslint-disable-next-line @typescript-eslint/no-empty-object-type From 732d4e7ec6e7a6abdd9d2aa789f17566bfaa4386 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 21:26:12 +0200 Subject: [PATCH 072/118] add kind to manifests --- .../src/packages/data-type/menu/manifests.ts | 1 + .../src/packages/documents/documents/menu/manifests.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts index f3d146fd96a6..82e4e61b759b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts @@ -17,6 +17,7 @@ export const manifests: Array = [ }, { type: 'workspaceContext', + kind: 'menuStructure', name: 'Data Type Menu Structure Workspace Context', alias: 'Umb.Context.DataType.Menu.Structure', api: () => import('./data-type-menu-structure.context.js'), diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts index 64c5c9dd5136..f50b53291103 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts @@ -25,6 +25,7 @@ export const manifests: Array = [ }, { type: 'workspaceContext', + kind: 'menuStructure', name: 'Document Menu Structure Workspace Context', alias: 'Umb.Context.Document.Menu.Structure', api: () => import('./document-menu-structure.context.js'), From 99bb2b3bbbc44152fa28c5e73c89228246b8287d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 21:40:36 +0200 Subject: [PATCH 073/118] add menu item context --- .../core/menu/components/menu-item/constants.ts | 1 + .../packages/core/menu/components/menu-item/index.ts | 1 + .../components/menu-item/menu-item.context.token.ts | 4 ++++ .../menu/components/menu-item/menu-item.context.ts | 12 ++++++++++++ .../core/menu/components/menu/menu.context.ts | 3 ++- .../core/menu/components/menu/menu.element.ts | 12 +++++++----- 6 files changed, 27 insertions(+), 6 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/constants.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.token.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/constants.ts new file mode 100644 index 000000000000..a86e19fbb31f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/constants.ts @@ -0,0 +1 @@ +export * from './menu-item.context.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/index.ts index c324209993f3..03c559668897 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/index.ts @@ -1 +1,2 @@ export * from './menu-item-default.element.js'; +export * from './constants.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.token.ts new file mode 100644 index 000000000000..f51e5f1042ea --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.token.ts @@ -0,0 +1,4 @@ +import type { UmbDefaultMenuItemContext } from './menu-item.context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const UMB_MENU_ITEM_CONTEXT = new UmbContextToken('UmbMenuItemContext'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts new file mode 100644 index 000000000000..ddb61ba8bf34 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts @@ -0,0 +1,12 @@ +import { UMB_MENU_ITEM_CONTEXT } from './menu-item.context.token.js'; +import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; +import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; + +export class UmbDefaultMenuItemContext extends UmbContextBase { + public readonly expansion = new UmbEntityExpansionManager(this); + + constructor(host: UmbControllerHost) { + super(host, UMB_MENU_ITEM_CONTEXT); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.ts index 69946af88fb5..671373df7caf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.context.ts @@ -1,10 +1,11 @@ import { UMB_MENU_CONTEXT } from './menu.context.token.js'; +import type { UmbMenuItemExpansionEntryModel } from './types.js'; import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export class UmbDefaultMenuContext extends UmbContextBase { - public readonly expansion = new UmbEntityExpansionManager(this); + public readonly expansion = new UmbEntityExpansionManager(this); constructor(host: UmbControllerHost) { super(host, UMB_MENU_CONTEXT); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts index 673a674c2f19..513617f4fdba 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts @@ -1,7 +1,8 @@ import type { ManifestMenu } from '../../menu.extension.js'; import type { ManifestMenuItem } from '../../menu-item/types.js'; +import { UmbDefaultMenuItemContext } from '../menu-item/menu-item.context.js'; import { UmbDefaultMenuContext } from './menu.context.js'; -import type { UmbEntityExpansionMenuItemEntryModel } from './types.js'; +import type { UmbMenuItemExpansionEntryModel } from './types.js'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbEntityExpansionModel } from '@umbraco-cms/backoffice/utils'; @@ -13,10 +14,10 @@ export class UmbMenuElement extends UmbLitElement { @property({ attribute: false }) manifest?: ManifestMenu; - public get expansion(): UmbEntityExpansionModel { + public get expansion(): UmbEntityExpansionModel { return this.#context.expansion.getExpansion(); } - public set expansion(value: UmbEntityExpansionModel) { + public set expansion(value: UmbEntityExpansionModel) { this.#context.expansion.setExpansion(value); } @@ -24,11 +25,12 @@ export class UmbMenuElement extends UmbLitElement { override render() { return html` - items.meta.menus.includes(this.manifest!.alias)}> - + `; } } From 4798686583ace1bfb952b88de2adc6243dc13987 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 22:14:26 +0200 Subject: [PATCH 074/118] filter menu items --- .../components/menu-item/menu-item.context.ts | 19 ++++++++++++++++++- .../core/menu/components/menu/constants.ts | 1 + .../core/menu/components/menu/index.ts | 2 +- 3 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts index ddb61ba8bf34..140357dc32c9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts @@ -1,12 +1,29 @@ +import { UMB_MENU_CONTEXT } from '../menu/index.js'; +import type { ManifestMenuItem, UmbMenuItemExpansionEntryModel } from '../../types.js'; import { UMB_MENU_ITEM_CONTEXT } from './menu-item.context.token.js'; import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export class UmbDefaultMenuItemContext extends UmbContextBase { - public readonly expansion = new UmbEntityExpansionManager(this); + public readonly expansion = new UmbEntityExpansionManager(this); + public manifest?: ManifestMenuItem; + + #menuContext?: typeof UMB_MENU_CONTEXT.TYPE; constructor(host: UmbControllerHost) { super(host, UMB_MENU_ITEM_CONTEXT); + + this.consumeContext(UMB_MENU_CONTEXT, (context) => { + this.#menuContext = context; + this.#observeMenuExpansion(); + }); + } + + #observeMenuExpansion() { + this.observe(this.#menuContext?.expansion.expansion, (items) => { + const itemsForMenuItem = items?.filter((item) => item.menuItemAlias === this.manifest?.alias) || []; + this.expansion.setExpansion(itemsForMenuItem); + }); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/constants.ts new file mode 100644 index 000000000000..95d903ca23e5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/constants.ts @@ -0,0 +1 @@ +export * from './menu.context.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/index.ts index b8635a62e62b..be0be98f9710 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/index.ts @@ -1,2 +1,2 @@ export * from './menu.element.js'; -export * from './menu.context.token.js'; +export * from './constants.js'; From ea37741933d4b98246769b463f16c1cbb107be65 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 22:50:16 +0200 Subject: [PATCH 075/118] handle menu item expansion --- .../components/menu-item/menu-item.context.ts | 29 ++--- .../expansion/menu-item-expansion.manager.ts | 116 ++++++++++++++++++ .../tree-menu-item/tree-menu-item.element.ts | 21 ++-- 3 files changed, 138 insertions(+), 28 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/menu-item-expansion.manager.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts index 140357dc32c9..78079c836524 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts @@ -1,29 +1,22 @@ -import { UMB_MENU_CONTEXT } from '../menu/index.js'; -import type { ManifestMenuItem, UmbMenuItemExpansionEntryModel } from '../../types.js'; +import type { ManifestMenuItem } from '../../types.js'; +import { UmbMenuItemExpansionManager } from '../../menu-item/expansion/menu-item-expansion.manager.js'; import { UMB_MENU_ITEM_CONTEXT } from './menu-item.context.token.js'; -import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export class UmbDefaultMenuItemContext extends UmbContextBase { - public readonly expansion = new UmbEntityExpansionManager(this); - public manifest?: ManifestMenuItem; + public readonly expansion = new UmbMenuItemExpansionManager(this); - #menuContext?: typeof UMB_MENU_CONTEXT.TYPE; + #manifest?: ManifestMenuItem | undefined; + public get manifest(): ManifestMenuItem | undefined { + return this.#manifest; + } + public set manifest(value: ManifestMenuItem | undefined) { + this.#manifest = value; + this.expansion.setMenuItemAlias(value?.alias); + } constructor(host: UmbControllerHost) { super(host, UMB_MENU_ITEM_CONTEXT); - - this.consumeContext(UMB_MENU_CONTEXT, (context) => { - this.#menuContext = context; - this.#observeMenuExpansion(); - }); - } - - #observeMenuExpansion() { - this.observe(this.#menuContext?.expansion.expansion, (items) => { - const itemsForMenuItem = items?.filter((item) => item.menuItemAlias === this.manifest?.alias) || []; - this.expansion.setExpansion(itemsForMenuItem); - }); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/menu-item-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/menu-item-expansion.manager.ts new file mode 100644 index 000000000000..9b7e8f2b1a54 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/menu-item-expansion.manager.ts @@ -0,0 +1,116 @@ +import type { UmbMenuItemExpansionEntryModel } from '../../components/menu/types.js'; +import { UMB_MENU_CONTEXT } from '../../components/index.js'; +import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import type { Observable } from '@umbraco-cms/backoffice/observable-api'; +import { UmbEntityExpansionManager, type UmbEntityExpansionModel } from '@umbraco-cms/backoffice/utils'; + +/** + * Manages the expansion state of a menu item + * @exports + * @class UmbMenuItemExpansionManager + * @augments {UmbControllerBase} + */ +export class UmbMenuItemExpansionManager extends UmbControllerBase { + #manager = new UmbEntityExpansionManager(this); + public readonly expansion = this.#manager.expansion; + + #menuItemAlias?: string; + #menuContext?: typeof UMB_MENU_CONTEXT.TYPE; + + constructor(host: UmbControllerHost) { + super(host); + + this.consumeContext(UMB_MENU_CONTEXT, (menuContext) => { + this.#menuContext = menuContext; + this.#observeMenuExpansion(); + }); + } + + #observeMenuExpansion() { + if (!this.#menuItemAlias) return; + this.observe(this.#menuContext?.expansion.expansion, (items) => { + const itemsForMenuItem = items?.filter((item) => item.menuItemAlias === this.#menuItemAlias) || []; + this.#manager.setExpansion(itemsForMenuItem); + }); + } + + setMenuItemAlias(alias: string | undefined): void { + this.#menuItemAlias = alias; + this.#observeMenuExpansion(); + } + + /** + * Checks if an entry is expanded + * @param {UmbMenuItemExpansionEntryModel} entry The entry to check + * @returns {Observable} True if the entry is expanded + * @memberof UmbSectionSidebarMenuSectionExpansionManager + */ + isExpanded(entry: UmbMenuItemExpansionEntryModel): Observable { + return this.#manager.isExpanded(entry); + } + + /** + * Sets the expansion state + * @param {UmbEntityExpansionModel | undefined} expansion The expansion state + * @memberof UmbSectionSidebarMenuSectionExpansionManager + * @returns {void} + */ + setExpansion(expansion: UmbEntityExpansionModel): void { + this.#manager.setExpansion(expansion); + this.#menuContext?.expansion.setExpansion(expansion); + } + + /** + * Gets the expansion state + * @memberof UmbSectionSidebarMenuSectionExpansionManager + * @returns {UmbEntityExpansionModel} The expansion state + */ + getExpansion(): UmbEntityExpansionModel { + return this.#manager.getExpansion(); + } + + /** + * Opens a menu item + * @param {UmbMenuItemExpansionEntryModel} entry The item to open + * @memberof UmbSectionSidebarMenuSectionExpansionManager + * @returns {Promise} + */ + public async expandItem(entry: UmbMenuItemExpansionEntryModel): Promise { + this.#manager.expandItem(entry); + this.#menuContext?.expansion.expandItem(entry); + } + + /** + * Expands multiple entities + * @param {UmbEntityExpansionModel} entries The entities to open + * @memberof UmbEntityExpansionManager + * @returns {void} + */ + public expandItems(entries: UmbEntityExpansionModel): void { + this.#manager.expandItems(entries); + this.#menuContext?.expansion.expandItems(entries); + } + + /** + * Closes a menu item + * @param {UmbMenuItemExpansionEntryModel} entry The item to close + * @memberof UmbSectionSidebarMenuSectionExpansionManager + * @returns {Promise} + */ + public async collapseItem(entry: UmbMenuItemExpansionEntryModel): Promise { + this.#manager.collapseItem(entry); + this.#menuContext?.expansion.collapseItem(entry); + } + + /** + * Closes all menu items + * @memberof UmbSectionSidebarMenuSectionExpansionManager + * @returns {Promise} + */ + public async collapseAll(): Promise { + this.#manager.collapseAll(); + const localEntries = this.#manager.getExpansion(); + this.#menuContext?.expansion.collapseItems(localEntries); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts index 226bb467ef01..e4b8d8f881f7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts @@ -1,7 +1,7 @@ import type { ManifestMenuItemTreeKind } from './types.js'; import { html, nothing, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { UMB_MENU_CONTEXT, type UmbMenuItemElement } from '@umbraco-cms/backoffice/menu'; +import { UMB_MENU_ITEM_CONTEXT, type UmbMenuItemElement } from '@umbraco-cms/backoffice/menu'; import { UmbExpansionEntityCollapsedEvent, UmbExpansionEntityExpandedEvent, @@ -14,24 +14,25 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM manifest?: ManifestMenuItemTreeKind; @state() - _menuExpansion: UmbEntityExpansionModel = []; + _menuItemExpansion: UmbEntityExpansionModel = []; - #menuContext?: typeof UMB_MENU_CONTEXT.TYPE; + #menuItemContext?: typeof UMB_MENU_ITEM_CONTEXT.TYPE; #muteStateUpdate = false; constructor() { super(); - this.consumeContext(UMB_MENU_CONTEXT, (context) => { - this.#menuContext = context; + this.consumeContext(UMB_MENU_ITEM_CONTEXT, (context) => { + this.#menuItemContext = context; this.#observeExpansion(); }); } #observeExpansion() { - this.observe(this.#menuContext?.expansion.expansion, (items) => { + this.observe(this.#menuItemContext?.expansion.expansion, (items) => { if (this.#muteStateUpdate) return; - this._menuExpansion = items || []; + this._menuItemExpansion = items || []; + console.log(`Menu item expansion updated: ${this.manifest?.alias}`, this._menuItemExpansion); }); } @@ -49,11 +50,11 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM if (event.type === UmbExpansionEntityExpandedEvent.TYPE) { this.#muteStateUpdate = true; - this.#menuContext?.expansion.expandItem({ ...eventEntry, menuItemAlias: this.manifest.alias }); + this.#menuItemContext?.expansion.expandItem({ ...eventEntry, menuItemAlias: this.manifest.alias }); this.#muteStateUpdate = false; } else if (event.type === UmbExpansionEntityCollapsedEvent.TYPE) { this.#muteStateUpdate = true; - this.#menuContext?.expansion.collapseItem({ ...eventEntry, menuItemAlias: this.manifest.alias }); + this.#menuItemContext?.expansion.collapseItem({ ...eventEntry, menuItemAlias: this.manifest.alias }); this.#muteStateUpdate = false; } } @@ -69,7 +70,7 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM selectable: false, multiple: false, }, - expansion: this._menuExpansion, + expansion: this._menuItemExpansion, }} @expansion-entity-expanded=${this.#onEntityExpansionChange} @expansion-entity-collapsed=${this.#onEntityExpansionChange}> From 1a1b9b50cb0daeb11bd07a5228a8d1def4bf2f7f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 22:50:24 +0200 Subject: [PATCH 076/118] clean up --- .../menu/section-sidebar-menu/section-sidebar-menu.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index d72e4d62c78e..2b73f52b02a0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -62,7 +62,7 @@ export class UmbSectionSidebarMenuElement< #onEntityExpansionChange(e: Event) { const event = e as UmbExpansionEntityExpandedEvent | UmbExpansionEntityCollapsedEvent; event.stopPropagation(); - const eventEntity = event.entity; + const eventEntity = event.entry; if (!eventEntity) { throw new Error('Entity is required to toggle expansion.'); From d11994b29d2857d5bfcb8929c942157823b9e180 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 6 Aug 2025 23:00:35 +0200 Subject: [PATCH 077/118] fix order --- .../menu/menu-item/expansion/menu-item-expansion.manager.ts | 2 +- .../expansion/section-sidebar-menu-section-expansion.manager.ts | 2 +- .../packages/core/tree/tree-menu-item/tree-menu-item.element.ts | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/menu-item-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/menu-item-expansion.manager.ts index 9b7e8f2b1a54..ae1e1623a0de 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/menu-item-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/menu-item-expansion.manager.ts @@ -109,8 +109,8 @@ export class UmbMenuItemExpansionManager extends UmbControllerBase { * @returns {Promise} */ public async collapseAll(): Promise { - this.#manager.collapseAll(); const localEntries = this.#manager.getExpansion(); + this.#manager.collapseAll(); this.#menuContext?.expansion.collapseItems(localEntries); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts index b7e98a5f197e..121618698683 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts @@ -122,9 +122,9 @@ export class UmbSectionSidebarMenuSectionExpansionManager extends UmbControllerB * @returns {Promise} */ public async collapseAll(): Promise { - this.#manager.collapseAll(); // Collapse all items in the global context matching the current section const entries = this.#bindEntriesToSection(this.#manager.getExpansion()); + this.#manager.collapseAll(); this.#globalContext?.expansion.collapseItems(entries); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts index e4b8d8f881f7..c05927c87238 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts @@ -32,7 +32,6 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM this.observe(this.#menuItemContext?.expansion.expansion, (items) => { if (this.#muteStateUpdate) return; this._menuItemExpansion = items || []; - console.log(`Menu item expansion updated: ${this.manifest?.alias}`, this._menuItemExpansion); }); } From 381cf0da56091ee1aa3a77d4db0790b639bd6ad8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 11:06:55 +0200 Subject: [PATCH 078/118] add example dashboard and entity action --- .../collapse-menu-item.entity-action.ts | 11 ++ .../manifests.ts | 15 +++ .../section-sidebar-menu-expansion/index.ts | 4 + .../playground-dashboard/manifests.ts | 14 +++ ...section-sidebar-menu-playground.element.ts | 111 ++++++++++++++++++ .../menu/section-sidebar-menu/constants.ts | 1 + 6 files changed, 156 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/collapse-menu-item-entity-action/collapse-menu-item.entity-action.ts create mode 100644 src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/collapse-menu-item-entity-action/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/index.ts create mode 100644 src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts diff --git a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/collapse-menu-item-entity-action/collapse-menu-item.entity-action.ts b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/collapse-menu-item-entity-action/collapse-menu-item.entity-action.ts new file mode 100644 index 000000000000..af4c84d952ec --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/collapse-menu-item-entity-action/collapse-menu-item.entity-action.ts @@ -0,0 +1,11 @@ +import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action'; +import { UMB_MENU_ITEM_CONTEXT } from '@umbraco-cms/backoffice/menu'; + +export class UmbCollapseMenuItemEntityAction extends UmbEntityActionBase { + override async execute() { + const context = await this.getContext(UMB_MENU_ITEM_CONTEXT); + context?.expansion.collapseAll(); + } +} + +export { UmbCollapseMenuItemEntityAction as api }; diff --git a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/collapse-menu-item-entity-action/manifests.ts b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/collapse-menu-item-entity-action/manifests.ts new file mode 100644 index 000000000000..69123c7f0c45 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/collapse-menu-item-entity-action/manifests.ts @@ -0,0 +1,15 @@ +export const manifests: Array = [ + { + type: 'entityAction', + kind: 'default', + alias: 'Umb.EntityAction.Document.MenuItem.Collapse', + name: 'Collapse Document Menu Item', + api: () => import('./collapse-menu-item.entity-action.js'), + forEntityTypes: ['document-type-root', 'media-type-root', 'member-type-root', 'data-type-root'], + weight: -10, + meta: { + label: 'Collapse Menu Item', + icon: 'icon-wand', + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/index.ts b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/index.ts new file mode 100644 index 000000000000..c911275efd3e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/index.ts @@ -0,0 +1,4 @@ +import { manifests as playgroundDashboardManifests } from './playground-dashboard/manifests.js'; +import { manifests as collapseMenuItemManifests } from './collapse-menu-item-entity-action/manifests.js'; + +export const manifests: Array = [...playgroundDashboardManifests, ...collapseMenuItemManifests]; diff --git a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/manifests.ts b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/manifests.ts new file mode 100644 index 000000000000..d9d47be8b013 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/manifests.ts @@ -0,0 +1,14 @@ +export const manifests: Array = [ + { + type: 'dashboard', + kind: 'default', + name: 'Example Section Sidebar Menu Playground Dashboard', + alias: 'Example.Dashboard.SectionSidebarMenuPlayground', + element: () => import('./section-sidebar-menu-playground.element.js'), + weight: 3000, + meta: { + label: 'Section Sidebar Menu Playground', + pathname: 'section-sidebar-menu-playground', + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts new file mode 100644 index 000000000000..c09705c8b4ad --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts @@ -0,0 +1,111 @@ +import { html, customElement, LitElement, css, state, repeat } from '@umbraco-cms/backoffice/external/lit'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import { + UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT, + UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, +} from '@umbraco-cms/backoffice/menu'; + +@customElement('example-section-sidebar-menu-playground-dashboard') +export class ExampleSectionSidebarMenuPlaygroundDashboard extends UmbElementMixin(LitElement) { + #globalContext?: typeof UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT.TYPE; + #sectionContext?: typeof UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT.TYPE; + + @state() + _globalExpansion: Array = []; + + @state() + _sectionExpansion: Array = []; + + constructor() { + super(); + + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT, (section) => { + this.#globalContext = section; + this.#observeGlobalExpansion(); + }); + + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, (section) => { + this.#sectionContext = section; + this.#observeSectionExpansion(); + }); + } + + #observeGlobalExpansion() { + this.observe(this.#globalContext?.expansion.expansion, (items) => { + this._globalExpansion = items || []; + }); + } + + #observeSectionExpansion() { + this.observe(this.#sectionContext?.expansion.expansion, (items) => { + this._sectionExpansion = items || []; + }); + } + + override render() { + return html` + + ${repeat( + this._sectionExpansion, + (item) => item.entityType + item.unique, + (item) => this.#renderItem(item), + )} + + + ${repeat( + this._globalExpansion, + (item) => item.entityType + item.unique, + (item) => this.#renderItem(item), + )} + + `; + } + + #renderItem(item: any) { + return html`
+
+ Entity Type: + ${item.entityType} +
+
+ Unique: + ${item.unique} +
+
+ Menu Item Alias: + ${item.menuItemAlias} +
+
+ Section Alias: + ${item.sectionAlias} +
+
`; + } + + static override styles = [ + css` + :host { + display: block; + padding: var(--uui-size-layout-1); + } + + .expansion-entry { + border-bottom: 1px solid var(--uui-color-border); + padding: var(--uui-size-space-2); + margin-bottom: var(--uui-size-space-2); + } + + .label { + font-weight: bold; + } + `, + ]; +} + +export { ExampleSectionSidebarMenuPlaygroundDashboard as element }; + +declare global { + interface HTMLElementTagNameMap { + 'example-section-sidebar-menu-playground-dashboard': ExampleSectionSidebarMenuPlaygroundDashboard; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/constants.ts index 20b806525025..125299d13ae6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/constants.ts @@ -1 +1,2 @@ +export * from './global-context/constants.js'; export * from './section-context/constants.js'; From 1fd858f8a6d5f9f747f287a35692e04327af4ffb Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 11:17:15 +0200 Subject: [PATCH 079/118] import types --- .../section-sidebar-menu-playground.element.ts | 7 ++++--- src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts index c09705c8b4ad..176b057b4642 100644 --- a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts +++ b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts @@ -3,6 +3,7 @@ import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; import { UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT, UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, + type UmbEntityExpansionSectionEntryModel, } from '@umbraco-cms/backoffice/menu'; @customElement('example-section-sidebar-menu-playground-dashboard') @@ -11,10 +12,10 @@ export class ExampleSectionSidebarMenuPlaygroundDashboard extends UmbElementMixi #sectionContext?: typeof UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT.TYPE; @state() - _globalExpansion: Array = []; + _globalExpansion: Array = []; @state() - _sectionExpansion: Array = []; + _sectionExpansion: Array = []; constructor() { super(); @@ -61,7 +62,7 @@ export class ExampleSectionSidebarMenuPlaygroundDashboard extends UmbElementMixi `; } - #renderItem(item: any) { + #renderItem(item: UmbEntityExpansionSectionEntryModel) { return html`
Entity Type: diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts index 10f18f3ac4a8..b7ded130fe98 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts @@ -5,6 +5,7 @@ export type * from './conditions/types.js'; export type * from './menu-item/types.js'; export type * from './menu-structure/types.js'; export type * from './menu.extension.js'; +export type * from './section-sidebar-menu/types.js'; // eslint-disable-next-line @typescript-eslint/no-empty-object-type export interface UmbStructureItemModelBase extends UmbEntityModel {} From b4c83df27eab2d7ba0bd46350d6531d533ee28e4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 11:29:32 +0200 Subject: [PATCH 080/118] align model type names --- .../section-sidebar-menu-playground.element.ts | 8 ++++---- .../section-sidebar-menu-app-expansion.manager.ts | 8 ++++---- .../section-sidebar-menu-section-expansion.manager.ts | 4 ++-- .../src/packages/core/menu/section-sidebar-menu/types.ts | 2 +- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts index 176b057b4642..fb3fb3ad40bd 100644 --- a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts +++ b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts @@ -3,7 +3,7 @@ import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; import { UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT, UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, - type UmbEntityExpansionSectionEntryModel, + type UmbSectionMenuItemExpansionEntryModel, } from '@umbraco-cms/backoffice/menu'; @customElement('example-section-sidebar-menu-playground-dashboard') @@ -12,10 +12,10 @@ export class ExampleSectionSidebarMenuPlaygroundDashboard extends UmbElementMixi #sectionContext?: typeof UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT.TYPE; @state() - _globalExpansion: Array = []; + _globalExpansion: Array = []; @state() - _sectionExpansion: Array = []; + _sectionExpansion: Array = []; constructor() { super(); @@ -62,7 +62,7 @@ export class ExampleSectionSidebarMenuPlaygroundDashboard extends UmbElementMixi `; } - #renderItem(item: UmbEntityExpansionSectionEntryModel) { + #renderItem(item: UmbSectionMenuItemExpansionEntryModel) { return html`
Entity Type: diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/expansion/section-sidebar-menu-app-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/expansion/section-sidebar-menu-app-expansion.manager.ts index 5c3a97a5c9fa..9e58ecca5924 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/expansion/section-sidebar-menu-app-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/global-context/expansion/section-sidebar-menu-app-expansion.manager.ts @@ -1,4 +1,4 @@ -import type { UmbEntityExpansionSectionEntryModel } from '../../types.js'; +import type { UmbSectionMenuItemExpansionEntryModel } from '../../types.js'; import type { Observable } from '@umbraco-cms/backoffice/observable-api'; import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; @@ -8,14 +8,14 @@ import { UmbEntityExpansionManager } from '@umbraco-cms/backoffice/utils'; * @class UmbSectionSidebarMenuAppExpansionManager * @augments {UmbControllerBase} */ -export class UmbSectionSidebarMenuAppExpansionManager extends UmbEntityExpansionManager { +export class UmbSectionSidebarMenuAppExpansionManager extends UmbEntityExpansionManager { /** * Returns an observable of the expansion state filtered by section alias. * @param {string} sectionAlias The alias of the section to filter by. - * @returns {Observable} An observable of the expansion state for the specified section alias. + * @returns {Observable} An observable of the expansion state for the specified section alias. * @memberof UmbSectionSidebarMenuAppExpansionManager */ - expansionBySectionAlias(sectionAlias: string): Observable { + expansionBySectionAlias(sectionAlias: string): Observable { return this._expansion.asObservablePart((entries) => entries.filter((entry) => entry.sectionAlias === sectionAlias), ); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts index 121618698683..162861d5b823 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/expansion/section-sidebar-menu-section-expansion.manager.ts @@ -1,5 +1,5 @@ import { UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT } from '../../global-context/section-sidebar-menu.global-context.token.js'; -import type { UmbEntityExpansionSectionEntryModel } from '../../types.js'; +import type { UmbSectionMenuItemExpansionEntryModel } from '../../types.js'; import type { UmbMenuItemExpansionEntryModel } from '../../../components/menu/types.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; @@ -130,7 +130,7 @@ export class UmbSectionSidebarMenuSectionExpansionManager extends UmbControllerB #bindEntriesToSection( expansion: UmbEntityExpansionModel, - ): UmbEntityExpansionModel { + ): UmbEntityExpansionModel { return expansion.map((item) => ({ ...item, sectionAlias: this.#currentSectionAlias, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/types.ts index 3ce2620b6adc..85a1cf64ab4f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/types.ts @@ -26,6 +26,6 @@ export interface MetaSectionSidebarAppMenuWithEntityActionsKind extends MetaSect entityType: string; } -export interface UmbEntityExpansionSectionEntryModel extends UmbMenuItemExpansionEntryModel { +export interface UmbSectionMenuItemExpansionEntryModel extends UmbMenuItemExpansionEntryModel { sectionAlias?: string; } From bb3e7ea0f9c561e32dc8285824fef9608971638e Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 11:41:25 +0200 Subject: [PATCH 081/118] align naming --- .../section-sidebar-menu.element.ts | 12 ++++++------ .../tree/tree-menu-item/tree-menu-item.element.ts | 14 +++++++------- .../utils/expansion/entity-expansion.manager.ts | 12 ++++++------ .../events/expansion-entity-collapsed.event.ts | 12 ------------ .../events/expansion-entity-expanded.event.ts | 12 ------------ .../events/expansion-entry-collapsed.event.ts | 12 ++++++++++++ .../events/expansion-entry-expanded.event.ts | 12 ++++++++++++ .../packages/core/utils/expansion/events/index.ts | 4 ++-- 8 files changed, 45 insertions(+), 45 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entry-collapsed.event.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entry-expanded.event.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index 2b73f52b02a0..5370bb2a6f67 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -4,7 +4,7 @@ import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from './section-context/sect import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { UmbExpansionEntityCollapsedEvent, UmbExpansionEntityExpandedEvent } from '@umbraco-cms/backoffice/utils'; +import { UmbExpansionEntryCollapsedEvent, UmbExpansionEntryExpandedEvent } from '@umbraco-cms/backoffice/utils'; import { UmbExtensionSlotElement } from '@umbraco-cms/backoffice/extension-registry'; @customElement('umb-section-sidebar-menu') @@ -44,8 +44,8 @@ export class UmbSectionSidebarMenuElement< this.#extensionSlotElement.filter = (menu: ManifestMenu) => menu.alias === this.manifest?.meta?.menu; this.#extensionSlotElement.defaultElement = 'umb-menu'; this.#extensionSlotElement.events = { - 'expansion-entity-expanded': this.#onEntityExpansionChange.bind(this), - 'expansion-entity-collapsed': this.#onEntityExpansionChange.bind(this), + 'expansion-entry-expanded': this.#onEntityExpansionChange.bind(this), + 'expansion-entry-collapsed': this.#onEntityExpansionChange.bind(this), }; } @@ -60,7 +60,7 @@ export class UmbSectionSidebarMenuElement< } #onEntityExpansionChange(e: Event) { - const event = e as UmbExpansionEntityExpandedEvent | UmbExpansionEntityCollapsedEvent; + const event = e as UmbExpansionEntryExpandedEvent | UmbExpansionEntryCollapsedEvent; event.stopPropagation(); const eventEntity = event.entry; @@ -68,11 +68,11 @@ export class UmbSectionSidebarMenuElement< throw new Error('Entity is required to toggle expansion.'); } - if (event.type === UmbExpansionEntityExpandedEvent.TYPE) { + if (event.type === UmbExpansionEntryExpandedEvent.TYPE) { this.#muteStateUpdate = true; this.#sectionSidebarMenuContext?.expansion.expandItem(eventEntity); this.#muteStateUpdate = false; - } else if (event.type === UmbExpansionEntityCollapsedEvent.TYPE) { + } else if (event.type === UmbExpansionEntryCollapsedEvent.TYPE) { this.#muteStateUpdate = true; this.#sectionSidebarMenuContext?.expansion.collapseItem(eventEntity); this.#muteStateUpdate = false; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts index c05927c87238..76877fe8bdc2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts @@ -3,8 +3,8 @@ import { html, nothing, customElement, property, state } from '@umbraco-cms/back import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_MENU_ITEM_CONTEXT, type UmbMenuItemElement } from '@umbraco-cms/backoffice/menu'; import { - UmbExpansionEntityCollapsedEvent, - UmbExpansionEntityExpandedEvent, + UmbExpansionEntryCollapsedEvent, + UmbExpansionEntryExpandedEvent, type UmbEntityExpansionModel, } from '@umbraco-cms/backoffice/utils'; @@ -35,7 +35,7 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM }); } - #onEntityExpansionChange(event: UmbExpansionEntityExpandedEvent | UmbExpansionEntityCollapsedEvent) { + #onExpansionChange(event: UmbExpansionEntryExpandedEvent | UmbExpansionEntryCollapsedEvent) { event.stopPropagation(); const eventEntry = event.entry; @@ -47,11 +47,11 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM throw new Error('Manifest is required to toggle expansion.'); } - if (event.type === UmbExpansionEntityExpandedEvent.TYPE) { + if (event.type === UmbExpansionEntryExpandedEvent.TYPE) { this.#muteStateUpdate = true; this.#menuItemContext?.expansion.expandItem({ ...eventEntry, menuItemAlias: this.manifest.alias }); this.#muteStateUpdate = false; - } else if (event.type === UmbExpansionEntityCollapsedEvent.TYPE) { + } else if (event.type === UmbExpansionEntryCollapsedEvent.TYPE) { this.#muteStateUpdate = true; this.#menuItemContext?.expansion.collapseItem({ ...eventEntry, menuItemAlias: this.manifest.alias }); this.#muteStateUpdate = false; @@ -71,8 +71,8 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM }, expansion: this._menuItemExpansion, }} - @expansion-entity-expanded=${this.#onEntityExpansionChange} - @expansion-entity-collapsed=${this.#onEntityExpansionChange}> + @expansion-entry-expanded=${this.#onExpansionChange} + @expansion-entry-collapsed=${this.#onExpansionChange}> ` : nothing; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts index 900906323b1d..7a4de2c75322 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts @@ -1,7 +1,7 @@ import type { UmbEntityExpansionEntryModel, UmbEntityExpansionModel } from './types.js'; import { - UmbExpansionEntityExpandedEvent, - UmbExpansionEntityCollapsedEvent, + UmbExpansionEntryExpandedEvent, + UmbExpansionEntryCollapsedEvent, UmbExpansionChangeEvent, } from './events/index.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; @@ -59,7 +59,7 @@ export class UmbEntityExpansionManager< */ public async expandItem(entity: EntryModelType): Promise { this._expansion.appendOne(entity); - this.getHostElement()?.dispatchEvent(new UmbExpansionEntityExpandedEvent(entity)); + this.getHostElement()?.dispatchEvent(new UmbExpansionEntryExpandedEvent(entity)); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } @@ -73,7 +73,7 @@ export class UmbEntityExpansionManager< if (!entities || entities.length === 0) return; this._expansion.append(entities); entities.forEach((entity) => { - this.getHostElement()?.dispatchEvent(new UmbExpansionEntityExpandedEvent(entity)); + this.getHostElement()?.dispatchEvent(new UmbExpansionEntryExpandedEvent(entity)); }); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } @@ -87,7 +87,7 @@ export class UmbEntityExpansionManager< public async collapseItem(entity: EntryModelType): Promise { this._expansion.filter((x) => x.entityType !== entity.entityType || x.unique !== entity.unique); this.getHostElement()?.dispatchEvent( - new UmbExpansionEntityCollapsedEvent({ entityType: entity.entityType, unique: entity.unique }), + new UmbExpansionEntryCollapsedEvent({ entityType: entity.entityType, unique: entity.unique }), ); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } @@ -105,7 +105,7 @@ export class UmbEntityExpansionManager< ); entities.forEach((entity) => { this.getHostElement()?.dispatchEvent( - new UmbExpansionEntityCollapsedEvent({ entityType: entity.entityType, unique: entity.unique }), + new UmbExpansionEntryCollapsedEvent({ entityType: entity.entityType, unique: entity.unique }), ); }); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts deleted file mode 100644 index a12cceae5f39..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-collapsed.event.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; - -export class UmbExpansionEntityCollapsedEvent extends Event { - public static readonly TYPE = 'expansion-entity-collapsed'; - entry: UmbEntityModel; - - public constructor(entry: UmbEntityModel) { - // mimics the native change event - super(UmbExpansionEntityCollapsedEvent.TYPE, { bubbles: true, composed: false, cancelable: false }); - this.entry = entry; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts deleted file mode 100644 index 3346168d2d2c..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entity-expanded.event.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; - -export class UmbExpansionEntityExpandedEvent extends Event { - public static readonly TYPE = 'expansion-entity-expanded'; - entry: UmbEntityModel; - - public constructor(entry: UmbEntityModel) { - // mimics the native change event - super(UmbExpansionEntityExpandedEvent.TYPE, { bubbles: true, composed: false, cancelable: false }); - this.entry = entry; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entry-collapsed.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entry-collapsed.event.ts new file mode 100644 index 000000000000..b946982ab964 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entry-collapsed.event.ts @@ -0,0 +1,12 @@ +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; + +export class UmbExpansionEntryCollapsedEvent extends Event { + public static readonly TYPE = 'expansion-entry-collapsed'; + entry: EntryModelType; + + public constructor(entry: EntryModelType) { + // mimics the native change event + super(UmbExpansionEntryCollapsedEvent.TYPE, { bubbles: true, composed: false, cancelable: false }); + this.entry = entry; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entry-expanded.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entry-expanded.event.ts new file mode 100644 index 000000000000..0831115d91fa --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/expansion-entry-expanded.event.ts @@ -0,0 +1,12 @@ +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; + +export class UmbExpansionEntryExpandedEvent extends Event { + public static readonly TYPE = 'expansion-entry-expanded'; + entry: EntryModelType; + + public constructor(entry: EntryModelType) { + // mimics the native change event + super(UmbExpansionEntryExpandedEvent.TYPE, { bubbles: true, composed: false, cancelable: false }); + this.entry = entry; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/index.ts index 1f3f158bbe64..7a4b74e03484 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/events/index.ts @@ -1,3 +1,3 @@ export * from './expansion-change.event.js'; -export * from './expansion-entity-collapsed.event.js'; -export * from './expansion-entity-expanded.event.js'; +export * from './expansion-entry-collapsed.event.js'; +export * from './expansion-entry-expanded.event.js'; From 90315af8bfe54f7e5d8550d92119519f660bbba5 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 11:55:10 +0200 Subject: [PATCH 082/118] use ui component --- ...section-sidebar-menu-playground.element.ts | 38 +++++-------------- 1 file changed, 10 insertions(+), 28 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts index fb3fb3ad40bd..6e0a4d78f2fe 100644 --- a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts +++ b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts @@ -43,6 +43,11 @@ export class ExampleSectionSidebarMenuPlaygroundDashboard extends UmbElementMixi }); } + #onCloseItem(event: PointerEvent, item: UmbSectionMenuItemExpansionEntryModel) { + event.stopPropagation(); + this.#sectionContext?.expansion.collapseItem(item); + } + override render() { return html` @@ -63,24 +68,11 @@ export class ExampleSectionSidebarMenuPlaygroundDashboard extends UmbElementMixi } #renderItem(item: UmbSectionMenuItemExpansionEntryModel) { - return html`
-
- Entity Type: - ${item.entityType} -
-
- Unique: - ${item.unique} -
-
- Menu Item Alias: - ${item.menuItemAlias} -
-
- Section Alias: - ${item.sectionAlias} -
-
`; + return html` + this.#onCloseItem(event, item)}>Close + `; } static override styles = [ @@ -89,16 +81,6 @@ export class ExampleSectionSidebarMenuPlaygroundDashboard extends UmbElementMixi display: block; padding: var(--uui-size-layout-1); } - - .expansion-entry { - border-bottom: 1px solid var(--uui-color-border); - padding: var(--uui-size-space-2); - margin-bottom: var(--uui-size-space-2); - } - - .label { - font-weight: bold; - } `, ]; } From dd49974f78f059121ab8790a62486244ee5d1b81 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 13:42:11 +0200 Subject: [PATCH 083/118] add guard for menu item entry --- .../is-menu-item-expansion-entry.guard.ts | 16 ++++++++++++++++ .../section-sidebar-menu.element.ts | 12 ++++++++---- 2 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/is-menu-item-expansion-entry.guard.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/is-menu-item-expansion-entry.guard.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/is-menu-item-expansion-entry.guard.ts new file mode 100644 index 000000000000..84c6d2441e0c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/is-menu-item-expansion-entry.guard.ts @@ -0,0 +1,16 @@ +import type { UmbMenuItemExpansionEntryModel } from '../../types.js'; + +/** + * Checks if the provided object is a Menu Item Expansion Entry. + * @param {object } object - The object to check. + * @returns {boolean } True if the object is a Menu Item Expansion Entry, false otherwise. + */ +export function isMenuItemExpansionEntry(object: unknown): object is UmbMenuItemExpansionEntryModel { + return ( + typeof object === 'object' && + object !== null && + 'entityType' in object && + 'unique' in object && + 'menuItemAlias' in object + ); +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index 5370bb2a6f67..a551da6b383a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -1,4 +1,5 @@ import type { ManifestMenu } from '../menu.extension.js'; +import { isMenuItemExpansionEntry } from '../menu-item/expansion/is-menu-item-expansion-entry.guard.js'; import type { ManifestSectionSidebarAppBaseMenu, ManifestSectionSidebarAppMenuKind } from './types.js'; import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from './section-context/section-sidebar-menu.section-context.token.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; @@ -62,19 +63,22 @@ export class UmbSectionSidebarMenuElement< #onEntityExpansionChange(e: Event) { const event = e as UmbExpansionEntryExpandedEvent | UmbExpansionEntryCollapsedEvent; event.stopPropagation(); - const eventEntity = event.entry; + const eventEntry = event.entry; - if (!eventEntity) { + if (!eventEntry) { throw new Error('Entity is required to toggle expansion.'); } + // Only react to the event if it is a valid Menu Item Expansion Entry + if (isMenuItemExpansionEntry(eventEntry) === false) return; + if (event.type === UmbExpansionEntryExpandedEvent.TYPE) { this.#muteStateUpdate = true; - this.#sectionSidebarMenuContext?.expansion.expandItem(eventEntity); + this.#sectionSidebarMenuContext?.expansion.expandItem(eventEntry); this.#muteStateUpdate = false; } else if (event.type === UmbExpansionEntryCollapsedEvent.TYPE) { this.#muteStateUpdate = true; - this.#sectionSidebarMenuContext?.expansion.collapseItem(eventEntity); + this.#sectionSidebarMenuContext?.expansion.collapseItem(eventEntry); this.#muteStateUpdate = false; } } From 42f40e406e96211f58c0fdb65935b13bc3edf57f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 15:06:09 +0200 Subject: [PATCH 084/118] use correct type --- .../menu/menu-tree-structure-workspace-context-base.ts | 9 +++------ ...menu-variant-tree-structure-workspace-context-base.ts | 9 +++------ 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts index b02061fbf447..c37a550415cf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts @@ -1,13 +1,10 @@ -import type { UmbStructureItemModel } from './types.js'; +import type { ManifestWorkspaceContextMenuStructureKind, UmbStructureItemModel } from './types.js'; import { UMB_MENU_STRUCTURE_WORKSPACE_CONTEXT } from './menu-structure-workspace-context.context-token.js'; import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from './section-sidebar-menu/index.js'; import type { UmbTreeRepository, UmbTreeItemModel, UmbTreeRootModel } from '@umbraco-cms/backoffice/tree'; import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; -import { - UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT, - type ManifestWorkspaceFooterAppMenuBreadcrumbKind, -} from '@umbraco-cms/backoffice/workspace'; +import { UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import { UmbArrayState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbAncestorsEntityContext, UmbParentEntityContext, type UmbEntityModel } from '@umbraco-cms/backoffice/entity'; @@ -19,7 +16,7 @@ interface UmbMenuTreeStructureWorkspaceContextBaseArgs { // TODO: introduce base class for all menu structure workspaces to handle ancestors and parent export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContextBase { - manifest?: ManifestWorkspaceFooterAppMenuBreadcrumbKind; + manifest?: ManifestWorkspaceContextMenuStructureKind; #workspaceContext?: typeof UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT.TYPE; #args: UmbMenuTreeStructureWorkspaceContextBaseArgs; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index 50e40323b39e..fb86b13b40e7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -1,4 +1,4 @@ -import type { UmbVariantStructureItemModel } from './types.js'; +import type { ManifestWorkspaceContextMenuStructureKind, UmbVariantStructureItemModel } from './types.js'; import { UMB_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT } from './menu-variant-structure-workspace-context.context-token.js'; import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from './section-sidebar-menu/section-context/section-sidebar-menu.section-context.token.js'; import type { UmbTreeItemModel, UmbTreeRepository, UmbTreeRootModel } from '@umbraco-cms/backoffice/tree'; @@ -7,10 +7,7 @@ import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import { UmbArrayState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbAncestorsEntityContext, UmbParentEntityContext, type UmbEntityModel } from '@umbraco-cms/backoffice/entity'; -import { - UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT, - type ManifestWorkspaceFooterAppVariantMenuBreadcrumbKind, -} from '@umbraco-cms/backoffice/workspace'; +import { UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import { linkEntityExpansionEntries } from '@umbraco-cms/backoffice/utils'; interface UmbMenuVariantTreeStructureWorkspaceContextBaseArgs { @@ -19,7 +16,7 @@ interface UmbMenuVariantTreeStructureWorkspaceContextBaseArgs { // TODO: introduce base class for all menu structure workspaces to handle ancestors and parent export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends UmbContextBase { - manifest?: ManifestWorkspaceFooterAppVariantMenuBreadcrumbKind; + manifest?: ManifestWorkspaceContextMenuStructureKind; #workspaceContext?: typeof UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT.TYPE; #args: UmbMenuVariantTreeStructureWorkspaceContextBaseArgs; From 83cf8a0a1250fc49cbe976b133220fcd6420624f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 20:18:11 +0200 Subject: [PATCH 085/118] Update section-sidebar-menu.element.ts --- .../section-sidebar-menu/section-sidebar-menu.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index a551da6b383a..ddc8437d0fda 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -45,8 +45,8 @@ export class UmbSectionSidebarMenuElement< this.#extensionSlotElement.filter = (menu: ManifestMenu) => menu.alias === this.manifest?.meta?.menu; this.#extensionSlotElement.defaultElement = 'umb-menu'; this.#extensionSlotElement.events = { - 'expansion-entry-expanded': this.#onEntityExpansionChange.bind(this), - 'expansion-entry-collapsed': this.#onEntityExpansionChange.bind(this), + 'expansion-entry-expanded': this.#onExpansionChange.bind(this), + 'expansion-entry-collapsed': this.#onExpansionChange.bind(this), }; } @@ -60,7 +60,7 @@ export class UmbSectionSidebarMenuElement< }); } - #onEntityExpansionChange(e: Event) { + #onExpansionChange(e: Event) { const event = e as UmbExpansionEntryExpandedEvent | UmbExpansionEntryCollapsedEvent; event.stopPropagation(); const eventEntry = event.entry; From b849da2d3e3cfda0e1e54549cae675b7e790df70 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 20:18:16 +0200 Subject: [PATCH 086/118] Update entity-expansion.manager.ts --- .../expansion/entity-expansion.manager.ts | 24 ++++++++----------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts index 7a4de2c75322..2e16a5c269b6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/entity-expansion.manager.ts @@ -80,33 +80,29 @@ export class UmbEntityExpansionManager< /** * Collapses an entity - * @param {EntryModelType} entity The entity to open + * @param {EntryModelType} entry The entity to open * @memberof UmbEntityExpansionManager * @returns {Promise} */ - public async collapseItem(entity: EntryModelType): Promise { - this._expansion.filter((x) => x.entityType !== entity.entityType || x.unique !== entity.unique); - this.getHostElement()?.dispatchEvent( - new UmbExpansionEntryCollapsedEvent({ entityType: entity.entityType, unique: entity.unique }), - ); + public async collapseItem(entry: EntryModelType): Promise { + this._expansion.filter((x) => x.entityType !== entry.entityType || x.unique !== entry.unique); + this.getHostElement()?.dispatchEvent(new UmbExpansionEntryCollapsedEvent(entry)); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } /** * Collapses multiple entities - * @param {UmbEntityExpansionModel} entities The entities to close + * @param {UmbEntityExpansionModel} entries The entities to close * @memberof UmbEntityExpansionManager * @returns {void} */ - public collapseItems(entities: UmbEntityExpansionModel): void { - if (!entities || entities.length === 0) return; + public collapseItems(entries: UmbEntityExpansionModel): void { + if (!entries || entries.length === 0) return; this._expansion.filter( - (x) => !entities.some((entity) => entity.entityType === x.entityType && entity.unique === x.unique), + (x) => !entries.some((entry) => entry.entityType === x.entityType && entry.unique === x.unique), ); - entities.forEach((entity) => { - this.getHostElement()?.dispatchEvent( - new UmbExpansionEntryCollapsedEvent({ entityType: entity.entityType, unique: entity.unique }), - ); + entries.forEach((entry) => { + this.getHostElement()?.dispatchEvent(new UmbExpansionEntryCollapsedEvent(entry)); }); this.getHostElement()?.dispatchEvent(new UmbExpansionChangeEvent()); } From 4ffb90464bf30b8d411ea46e301c43bca9f23837 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 20:34:59 +0200 Subject: [PATCH 087/118] export constants --- src/Umbraco.Web.UI.Client/src/packages/data-type/constants.ts | 1 + .../src/packages/documents/documents/constants.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/constants.ts index 71e09a57d2a9..3fa67e05c079 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/constants.ts @@ -1,6 +1,7 @@ export * from './collection/constants.js'; export * from './data-type-root/constants.js'; export * from './entity-actions/constants.js'; +export * from './menu/constants.js'; export * from './modals/constants.js'; export * from './paths.js'; export * from './reference/constants.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/constants.ts index b0cd03a572f1..8b2ea67a99c5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/constants.ts @@ -4,6 +4,7 @@ export * from './collection/constants.js'; export * from './entity-actions/constants.js'; export * from './entity-bulk-actions/constants.js'; export * from './item/constants.js'; +export * from './menu/constants.js'; export * from './modals/constants.js'; export * from './paths.js'; export * from './property-dataset-context/constants.js'; From 82861e8af244111b0e2d0d63b570e4119dff24f1 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 20:41:32 +0200 Subject: [PATCH 088/118] add menuItemAlias to manifest --- .../src/packages/dictionary/constants.ts | 1 + .../src/packages/dictionary/menu-item/constants.ts | 1 + .../src/packages/dictionary/menu-item/manifests.ts | 7 ++++++- 3 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/dictionary/menu-item/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/constants.ts index eb8dd5d7b139..8ed0d150bdcd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/constants.ts @@ -6,5 +6,6 @@ export * from './repository/constants.js'; export * from './search/constants.js'; export * from './tree/constants.js'; export * from './workspace/constants.js'; +export * from './menu-item/constants.js'; export { UMB_DICTIONARY_ROOT_ENTITY_TYPE, UMB_DICTIONARY_ENTITY_TYPE } from './entity.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/menu-item/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/menu-item/constants.ts new file mode 100644 index 000000000000..d2abd8712297 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/menu-item/constants.ts @@ -0,0 +1 @@ +export const UMB_DICTIONARY_MENU_ITEM_ALIAS = 'Umb.MenuItem.Dictionary'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/menu-item/manifests.ts index 03da8a1d404b..109608104cd6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/menu-item/manifests.ts @@ -1,5 +1,6 @@ import { UMB_DICTIONARY_ENTITY_TYPE } from '../entity.js'; import { UMB_DICTIONARY_TREE_ALIAS } from '../tree/index.js'; +import { UMB_DICTIONARY_MENU_ITEM_ALIAS } from './constants.js'; import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace'; import { UMB_TRANSLATION_MENU_ALIAS } from '@umbraco-cms/backoffice/translation'; @@ -7,7 +8,7 @@ export const manifests: Array = [ { type: 'menuItem', kind: 'tree', - alias: 'Umb.MenuItem.Dictionary', + alias: UMB_DICTIONARY_MENU_ITEM_ALIAS, name: 'Dictionary Menu Item', weight: 400, meta: { @@ -21,9 +22,13 @@ export const manifests: Array = [ }, { type: 'workspaceContext', + kind: 'menuStructure', name: 'Dictionary Menu Structure Workspace Context', alias: 'Umb.Context.Dictionary.Menu.Structure', api: () => import('./dictionary-menu-structure.context.js'), + meta: { + menuItemAlias: UMB_DICTIONARY_MENU_ITEM_ALIAS, + }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, From 0414dac823fb503309bc8e36fb75ecfc1712caeb Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 20:44:30 +0200 Subject: [PATCH 089/118] add menuItemAlias to manifest --- .../src/packages/documents/document-types/constants.ts | 1 + .../src/packages/documents/document-types/menu/constants.ts | 1 + .../src/packages/documents/document-types/menu/manifests.ts | 4 ++++ 3 files changed, 6 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/constants.ts index d07e60d1021c..c4577efe6ebb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/constants.ts @@ -5,5 +5,6 @@ export * from './repository/constants.js'; export * from './search/constants.js'; export * from './tree/constants.js'; export * from './workspace/constants.js'; +export * from './menu/constants.js'; export { UMB_DOCUMENT_TYPE_ENTITY_TYPE, UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE } from './entity.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/constants.ts new file mode 100644 index 000000000000..6f56101e30f5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/constants.ts @@ -0,0 +1 @@ +export const UMB_DOCUMENT_TYPE_MENU_ITEM_ALIAS = 'Umb.MenuItem.DocumentTypes'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/manifests.ts index 35ea56aca9f8..3712dcf334af 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/manifests.ts @@ -16,9 +16,13 @@ export const manifests: Array = [ }, { type: 'workspaceContext', + kind: 'menuStructure', name: 'Document Type Menu Structure Workspace Context', alias: 'Umb.Context.DocumentType.Menu.Structure', api: () => import('./document-type-menu-structure.context.js'), + meta: { + menuItemAlias: 'Umb.MenuItem.DocumentTypes', + }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, From 14d0bfd211c1e255de5c84f075fbcd8bab652e13 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 20:47:59 +0200 Subject: [PATCH 090/118] add menuItemAlias to manifest --- .../src/packages/media/media/menu/constants.ts | 1 + .../src/packages/media/media/menu/manifests.ts | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/constants.ts index 11ceb55bf092..34b70788f476 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/constants.ts @@ -1 +1,2 @@ export const UMB_MEDIA_MENU_ALIAS = 'Umb.Menu.Media'; +export const UMB_MEDIA_MENU_ITEM_ALIAS = 'Umb.MenuItem.Media'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/manifests.ts index a4bd3d6b8a4e..63e4d36ffc08 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/manifests.ts @@ -1,5 +1,5 @@ import { UMB_MEDIA_TREE_ALIAS } from '../constants.js'; -import { UMB_MEDIA_MENU_ALIAS } from './constants.js'; +import { UMB_MEDIA_MENU_ALIAS, UMB_MEDIA_MENU_ITEM_ALIAS } from './constants.js'; import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace'; export const manifests: Array = [ @@ -11,7 +11,7 @@ export const manifests: Array = [ { type: 'menuItem', kind: 'tree', - alias: 'Umb.MenuItem.Media', + alias: UMB_MEDIA_MENU_ITEM_ALIAS, name: 'Media Menu Item', weight: 100, meta: { @@ -26,6 +26,9 @@ export const manifests: Array = [ name: 'Media Menu Structure Workspace Context', alias: 'Umb.Context.Media.Menu.Structure', api: () => import('./media-menu-structure.context.js'), + meta: { + menuItemAlias: UMB_MEDIA_MENU_ITEM_ALIAS, + }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, From 08bebca8c6c56c9a8c285c1c3fa5e061938f6bd3 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 20:51:13 +0200 Subject: [PATCH 091/118] add menuItemAlias to manifest --- .../src/packages/media/media-types/constants.ts | 3 ++- .../src/packages/media/media-types/menu/constants.ts | 1 + .../src/packages/media/media-types/menu/manifests.ts | 6 +++++- 3 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/constants.ts index c80e3ac5e4f6..86c491dd0079 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/constants.ts @@ -1,11 +1,12 @@ export * from './entity-actions/constants.js'; export * from './media-type-root/constants.js'; +export * from './menu/constants.js'; export * from './paths.js'; export * from './property-type/constants.js'; export * from './repository/constants.js'; +export * from './search/constants.js'; export * from './tree/constants.js'; export * from './workspace/constants.js'; -export * from './search/constants.js'; export { UMB_MEDIA_TYPE_ENTITY_TYPE, diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/constants.ts new file mode 100644 index 000000000000..462c1600e7ba --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/constants.ts @@ -0,0 +1 @@ +export const UMB_MEDIA_TYPE_MENU_ITEM_ALIAS = 'Umb.MenuItem.MediaTypes'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/manifests.ts index 65107a259681..29db36753368 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/manifests.ts @@ -1,11 +1,12 @@ import { UMB_MEDIA_TYPE_TREE_ALIAS } from '../constants.js'; import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace'; +import { UMB_MEDIA_TYPE_MENU_ITEM_ALIAS } from './constants.js'; export const manifests: Array = [ { type: 'menuItem', kind: 'tree', - alias: 'Umb.MenuItem.MediaTypes', + alias: UMB_MEDIA_TYPE_MENU_ITEM_ALIAS, name: 'Media Types Menu Item', weight: 800, meta: { @@ -19,6 +20,9 @@ export const manifests: Array = [ name: 'Media Type Menu Structure Workspace Context', alias: 'Umb.Context.MediaType.Menu.Structure', api: () => import('./media-type-menu-structure.context.js'), + meta: { + menuItemAlias: UMB_MEDIA_TYPE_MENU_ITEM_ALIAS, + }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, From 078d799399e6a554ef4ce94b0978478c44c31d3a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 20:55:32 +0200 Subject: [PATCH 092/118] add menu item alias --- .../src/packages/members/member-type/constants.ts | 1 + .../src/packages/members/member-type/menu/constants.ts | 1 + .../src/packages/members/member-type/menu/manifests.ts | 8 ++++++-- 3 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/members/member-type/menu/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/constants.ts index 5f144502c4c1..1c409bd6f9d9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/constants.ts @@ -1,5 +1,6 @@ export * from './entity-actions/constants.js'; export * from './member-type-root/constants.js'; +export * from './menu/constants.js'; export * from './paths.js'; export * from './property-type/constants.js'; export * from './repository/constants.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/menu/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/menu/constants.ts new file mode 100644 index 000000000000..9f23bcf60c88 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/menu/constants.ts @@ -0,0 +1 @@ +export const UMB_MEMBER_TYPE_MENU_ITEM_ALIAS = 'Umb.MenuItem.MemberTypes'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/menu/manifests.ts index 9c563c1bd2ae..b00f960418b0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/menu/manifests.ts @@ -1,11 +1,11 @@ -import { UMB_MEMBER_TYPE_TREE_ALIAS } from '../constants.js'; +import { UMB_MEMBER_TYPE_MENU_ITEM_ALIAS, UMB_MEMBER_TYPE_TREE_ALIAS } from '../constants.js'; import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace'; export const manifests: Array = [ { type: 'menuItem', kind: 'tree', - alias: 'Umb.MenuItem.MemberTypes', + alias: UMB_MEMBER_TYPE_MENU_ITEM_ALIAS, name: 'Member Type Menu Item', weight: 700, meta: { @@ -16,9 +16,13 @@ export const manifests: Array = [ }, { type: 'workspaceContext', + kind: 'menuStructure', name: 'Member Type Menu Structure Workspace Context', alias: 'Umb.Context.MemberType.Menu.Structure', api: () => import('./member-type-menu-structure.context.js'), + meta: { + menuItemAlias: UMB_MEMBER_TYPE_MENU_ITEM_ALIAS, + }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, From 55fd94062f754ed81bb764b7e29f0e1d8a0693fc Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 20:58:27 +0200 Subject: [PATCH 093/118] add menuItemAlias to manifest --- .../src/packages/templating/partial-views/constants.ts | 3 ++- .../packages/templating/partial-views/menu/constants.ts | 1 + .../packages/templating/partial-views/menu/manifests.ts | 7 ++++++- 3 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/menu/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/constants.ts index 6afae2870025..f582a679afdc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/constants.ts @@ -1,5 +1,6 @@ export * from './entity-actions/constants.js'; +export * from './entity.js'; +export * from './menu/constants.js'; export * from './repository/constants.js'; export * from './tree/constants.js'; export * from './workspace/constants.js'; -export * from './entity.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/menu/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/menu/constants.ts new file mode 100644 index 000000000000..ad80a4635dea --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/menu/constants.ts @@ -0,0 +1 @@ +export const UMB_PARTIAL_VIEW_MENU_ITEM_ALIAS = 'Umb.MenuItem.PartialView'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/menu/manifests.ts index 414875d9d6d8..7189714ccddf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/menu/manifests.ts @@ -1,11 +1,12 @@ import { UMB_PARTIAL_VIEW_TREE_ALIAS } from '../tree/index.js'; +import { UMB_PARTIAL_VIEW_MENU_ITEM_ALIAS } from './constants.js'; import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace'; export const manifests: Array = [ { type: 'menuItem', kind: 'tree', - alias: 'Umb.MenuItem.PartialView', + alias: UMB_PARTIAL_VIEW_MENU_ITEM_ALIAS, name: 'Partial View Menu Item', weight: 40, meta: { @@ -16,9 +17,13 @@ export const manifests: Array = [ }, { type: 'workspaceContext', + kind: 'menuStructure', name: 'Partial View Menu Structure Workspace Context', alias: 'Umb.Context.PartialView.Menu.Structure', api: () => import('./partial-view-menu-structure.context.js'), + meta: { + menuItemAlias: UMB_PARTIAL_VIEW_MENU_ITEM_ALIAS, + }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, From 93c1a97cea81404f229992ce6e427cebb721a37b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 21:00:25 +0200 Subject: [PATCH 094/118] add menuItemAlias to manifest --- .../src/packages/templating/scripts/menu/manifests.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/menu/manifests.ts index ae46cc2ec9b0..b7960bb90d80 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/menu/manifests.ts @@ -17,9 +17,13 @@ export const manifests: Array = [ }, { type: 'workspaceContext', + kind: 'menuStructure', name: 'Script Menu Structure Workspace Context', alias: 'Umb.Context.Script.Menu.Structure', api: () => import('./script-menu-structure.context.js'), + meta: { + menuItemAlias: UMB_SCRIPT_MENU_ITEM_ALIAS, + }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, From 9267ec7f1dc76efe91045568704e09e9b5bde601 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 21:02:37 +0200 Subject: [PATCH 095/118] add menuItemAlias to manifest --- .../src/packages/templating/stylesheets/constants.ts | 1 + .../src/packages/templating/stylesheets/menu/constants.ts | 1 + .../src/packages/templating/stylesheets/menu/manifests.ts | 7 ++++++- 3 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/menu/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/constants.ts index cb3c3c7348ec..1b0f9b850a05 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/constants.ts @@ -1,5 +1,6 @@ export * from './entity-actions/constants.js'; export * from './global-components/constants.js'; +export * from './menu/constants.js'; export * from './repository/constants.js'; export * from './tree/constants.js'; export * from './workspace/constants.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/menu/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/menu/constants.ts new file mode 100644 index 000000000000..ac1784982e9d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/menu/constants.ts @@ -0,0 +1 @@ +export const UMB_STYLESHEET_MENU_ITEM_ALIAS = 'Umb.MenuItem.Stylesheets'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/menu/manifests.ts index 6e69c7425824..b14e048c3b9b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/menu/manifests.ts @@ -1,11 +1,12 @@ import { UMB_STYLESHEET_TREE_ALIAS } from '../constants.js'; +import { UMB_STYLESHEET_MENU_ITEM_ALIAS } from './constants.js'; import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace'; export const manifests: Array = [ { type: 'menuItem', kind: 'tree', - alias: 'Umb.MenuItem.Stylesheets', + alias: UMB_STYLESHEET_MENU_ITEM_ALIAS, name: 'Stylesheets Menu Item', weight: 20, meta: { @@ -16,9 +17,13 @@ export const manifests: Array = [ }, { type: 'workspaceContext', + kind: 'menuStructure', name: 'Stylesheet Menu Structure Workspace Context', alias: 'Umb.Context.Stylesheet.Menu.Structure', api: () => import('./stylesheet-menu-structure.context.js'), + meta: { + menuItemAlias: UMB_STYLESHEET_MENU_ITEM_ALIAS, + }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, From 96babd8d7ab4ec52c13d55a3f575429c3b101f44 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 21:04:23 +0200 Subject: [PATCH 096/118] add alias --- .../src/packages/templating/templates/constants.ts | 1 + .../src/packages/templating/templates/menu/constants.ts | 1 + .../src/packages/templating/templates/menu/manifests.ts | 6 +++++- 3 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/constants.ts index 9879ba5d2ce6..eac8bbbe487f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/constants.ts @@ -1,4 +1,5 @@ export * from './conditions/constants.js'; +export * from './menu/constants.js'; export * from './repository/constants.js'; export * from './search/constants.js'; export * from './workspace/constants.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/constants.ts new file mode 100644 index 000000000000..0b25774bd486 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/constants.ts @@ -0,0 +1 @@ +export const UMB_TEMPLATE_MENU_ITEM_ALIAS = 'Umb.MenuItem.Templates'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/manifests.ts index 3c63d3fe2bd8..beeb2dcffd53 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/manifests.ts @@ -1,11 +1,12 @@ import { UMB_TEMPLATE_TREE_ALIAS } from '../tree/index.js'; +import { UMB_TEMPLATE_MENU_ITEM_ALIAS } from './constants.js'; import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace'; export const manifests: Array = [ { type: 'menuItem', kind: 'tree', - alias: 'Umb.MenuItem.Templates', + alias: UMB_TEMPLATE_MENU_ITEM_ALIAS, name: 'Templates Menu Item', weight: 40, meta: { @@ -20,6 +21,9 @@ export const manifests: Array = [ name: 'Template Menu Structure Workspace Context', alias: 'Umb.Context.Template.Menu.Structure', api: () => import('./template-menu-structure.context.js'), + meta: { + menuItemAlias: UMB_TEMPLATE_MENU_ITEM_ALIAS, + }, conditions: [ { alias: UMB_WORKSPACE_CONDITION_ALIAS, From 54c1ecfefb68ec9fedd2a3fb0823337d0b51a65b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 21:05:30 +0200 Subject: [PATCH 097/118] add kind --- .../src/packages/media/media-types/menu/manifests.ts | 1 + .../src/packages/media/media/menu/manifests.ts | 1 + .../src/packages/templating/templates/menu/manifests.ts | 1 + 3 files changed, 3 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/manifests.ts index 29db36753368..9272a5fafd40 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/manifests.ts @@ -17,6 +17,7 @@ export const manifests: Array = [ }, { type: 'workspaceContext', + kind: 'menuStructure', name: 'Media Type Menu Structure Workspace Context', alias: 'Umb.Context.MediaType.Menu.Structure', api: () => import('./media-type-menu-structure.context.js'), diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/manifests.ts index 63e4d36ffc08..93bb4b6b5bdf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/manifests.ts @@ -23,6 +23,7 @@ export const manifests: Array = [ }, { type: 'workspaceContext', + kind: 'menuStructure', name: 'Media Menu Structure Workspace Context', alias: 'Umb.Context.Media.Menu.Structure', api: () => import('./media-menu-structure.context.js'), diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/manifests.ts index beeb2dcffd53..02f0e9dd3d09 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/manifests.ts @@ -18,6 +18,7 @@ export const manifests: Array = [ }, { type: 'workspaceContext', + kind: 'menuStructure', name: 'Template Menu Structure Workspace Context', alias: 'Umb.Context.Template.Menu.Structure', api: () => import('./template-menu-structure.context.js'), From 52223898c9220befe179beecafd95ed85abbe9b3 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 21:16:49 +0200 Subject: [PATCH 098/118] fix import path --- .../src/packages/core/menu/components/menu-item/action/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/action/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/action/types.ts index 6e60d0bfdd56..095222cdaf00 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/action/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/action/types.ts @@ -1,4 +1,4 @@ -import type { MetaMenuItem } from '../../../menu-item.extension.js'; +import type { MetaMenuItem } from '../../../menu-item/types.js'; import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api'; import type { UmbAction } from '@umbraco-cms/backoffice/action'; import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; From a52c0dce048259e79528816da524aa0e206073f4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Aug 2025 21:31:44 +0200 Subject: [PATCH 099/118] do not expand menu from modal --- .../menu/menu-tree-structure-workspace-context-base.ts | 8 +++++++- .../menu-variant-tree-structure-workspace-context-base.ts | 8 +++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts index c37a550415cf..3e1bd612ef61 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts @@ -9,6 +9,7 @@ import { UmbArrayState, UmbObjectState } from '@umbraco-cms/backoffice/observabl import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbAncestorsEntityContext, UmbParentEntityContext, type UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import { linkEntityExpansionEntries } from '@umbraco-cms/backoffice/utils'; +import { UMB_MODAL_CONTEXT } from '@umbraco-cms/backoffice/modal'; interface UmbMenuTreeStructureWorkspaceContextBaseArgs { treeRepositoryAlias: string; @@ -33,6 +34,7 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex #parentContext = new UmbParentEntityContext(this); #ancestorContext = new UmbAncestorsEntityContext(this); #sectionSidebarMenuContext?: typeof UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT.TYPE; + #isModalContext: boolean = false; constructor(host: UmbControllerHost, args: UmbMenuTreeStructureWorkspaceContextBaseArgs) { super(host, UMB_MENU_STRUCTURE_WORKSPACE_CONTEXT); @@ -40,6 +42,10 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex this.provideContext('UmbMenuStructureWorkspaceContext', this); this.#args = args; + this.consumeContext(UMB_MODAL_CONTEXT, (modalContext) => { + this.#isModalContext = modalContext !== undefined; + }); + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, (instance) => { this.#sectionSidebarMenuContext = instance; }); @@ -109,7 +115,7 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex this.#setAncestorData(data); const menuItemAlias = this.manifest?.meta?.menuItemAlias; - if (menuItemAlias) { + if (menuItemAlias && !this.#isModalContext) { this.#expandSectionSidebarMenu(structureItems, menuItemAlias); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index fb86b13b40e7..73359aa62d30 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -9,6 +9,7 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbAncestorsEntityContext, UmbParentEntityContext, type UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import { UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import { linkEntityExpansionEntries } from '@umbraco-cms/backoffice/utils'; +import { UMB_MODAL_CONTEXT, type UmbModalContext } from '@umbraco-cms/backoffice/modal'; interface UmbMenuVariantTreeStructureWorkspaceContextBaseArgs { treeRepositoryAlias: string; @@ -33,6 +34,7 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um #parentContext = new UmbParentEntityContext(this); #ancestorContext = new UmbAncestorsEntityContext(this); #sectionSidebarMenuContext?: typeof UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT.TYPE; + #isModalContext: boolean = false; public readonly IS_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT = true; @@ -42,6 +44,10 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um this.provideContext('UmbMenuStructureWorkspaceContext', this); this.#args = args; + this.consumeContext(UMB_MODAL_CONTEXT, (modalContext) => { + this.#isModalContext = modalContext !== undefined; + }); + this.consumeContext(UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, (instance) => { this.#sectionSidebarMenuContext = instance; }); @@ -118,7 +124,7 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um this.#setAncestorData(data); const menuItemAlias = this.manifest?.meta?.menuItemAlias; - if (menuItemAlias) { + if (menuItemAlias && !this.#isModalContext) { this.#expandSectionSidebarMenu(structureItems, menuItemAlias); } } From d30183babb2a49694e6ee042559559f6a855d8ff Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 8 Aug 2025 08:56:36 +0200 Subject: [PATCH 100/118] collect all menu-item files in one folder --- .../packages/core/menu/components/menu-item/action/types.ts | 2 +- .../menu-item/expansion/is-menu-item-expansion-entry.guard.ts | 0 .../menu-item/expansion/menu-item-expansion.manager.ts | 4 ++-- .../menu/components/menu-item/link/link-menu-item.element.ts | 2 +- .../src/packages/core/menu/components/menu-item/link/types.ts | 2 +- .../menu/components/menu-item/menu-item-default.element.ts | 4 ++-- .../{ => components}/menu-item/menu-item-element.interface.ts | 0 .../core/menu/components/menu-item/menu-item.context.ts | 2 +- .../menu/{ => components}/menu-item/menu-item.extension.ts | 0 .../src/packages/core/menu/components/menu-item/types.ts | 2 ++ .../src/packages/core/menu/components/menu/menu.element.ts | 2 +- .../src/packages/core/menu/menu-item/types.ts | 2 -- .../menu/section-sidebar-menu/section-sidebar-menu.element.ts | 2 +- src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts | 1 - 14 files changed, 12 insertions(+), 13 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/core/menu/{ => components}/menu-item/expansion/is-menu-item-expansion-entry.guard.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/menu/{ => components}/menu-item/expansion/menu-item-expansion.manager.ts (96%) rename src/Umbraco.Web.UI.Client/src/packages/core/menu/{ => components}/menu-item/menu-item-element.interface.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/menu/{ => components}/menu-item/menu-item.extension.ts (100%) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/types.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/action/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/action/types.ts index 095222cdaf00..1da233a9bd71 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/action/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/action/types.ts @@ -1,4 +1,4 @@ -import type { MetaMenuItem } from '../../../menu-item/types.js'; +import type { MetaMenuItem } from '../menu-item.extension.js'; import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api'; import type { UmbAction } from '@umbraco-cms/backoffice/action'; import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/is-menu-item-expansion-entry.guard.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/expansion/is-menu-item-expansion-entry.guard.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/is-menu-item-expansion-entry.guard.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/expansion/is-menu-item-expansion-entry.guard.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/menu-item-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/expansion/menu-item-expansion.manager.ts similarity index 96% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/menu-item-expansion.manager.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/expansion/menu-item-expansion.manager.ts index ae1e1623a0de..1598232fdcbd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/expansion/menu-item-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/expansion/menu-item-expansion.manager.ts @@ -1,5 +1,5 @@ -import type { UmbMenuItemExpansionEntryModel } from '../../components/menu/types.js'; -import { UMB_MENU_CONTEXT } from '../../components/index.js'; +import type { UmbMenuItemExpansionEntryModel } from '../../menu/types.js'; +import { UMB_MENU_CONTEXT } from '../../menu/constants.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import type { Observable } from '@umbraco-cms/backoffice/observable-api'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/link-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/link-menu-item.element.ts index 8d42d6967e03..0aeab0024fc6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/link-menu-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/link-menu-item.element.ts @@ -1,4 +1,4 @@ -import type { UmbMenuItemElement } from '../../../menu-item/menu-item-element.interface.js'; +import type { UmbMenuItemElement } from '../menu-item-element.interface.js'; import type { ManifestMenuItemLinkKind } from './types.js'; import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/types.ts index 7d812c96d455..f5be9cefbebc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/types.ts @@ -1,4 +1,4 @@ -import type { ManifestMenuItem, MetaMenuItem } from '../../../menu-item/types.js'; +import type { ManifestMenuItem, MetaMenuItem } from '../menu-item.extension.js'; export interface ManifestMenuItemLinkKind extends ManifestMenuItem { type: 'menuItem'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item-default.element.ts index c505354ea894..035c5f972c4b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item-default.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item-default.element.ts @@ -1,5 +1,5 @@ -import type { UmbMenuItemElement } from '../../menu-item/menu-item-element.interface.js'; -import type { ManifestMenuItem } from '../../menu-item/types.js'; +import type { UmbMenuItemElement } from './menu-item-element.interface.js'; +import type { ManifestMenuItem } from './menu-item.extension.js'; import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/menu-item-element.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item-element.interface.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/menu-item-element.interface.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item-element.interface.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts index 78079c836524..d20e137b1baf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.context.ts @@ -1,5 +1,5 @@ import type { ManifestMenuItem } from '../../types.js'; -import { UmbMenuItemExpansionManager } from '../../menu-item/expansion/menu-item-expansion.manager.js'; +import { UmbMenuItemExpansionManager } from './expansion/menu-item-expansion.manager.js'; import { UMB_MENU_ITEM_CONTEXT } from './menu-item.context.token.js'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/menu-item.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.extension.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/menu-item.extension.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/menu-item.extension.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/types.ts index 1e39b8bf82b8..ed3511d79644 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/types.ts @@ -1,2 +1,4 @@ export type * from './action/types.js'; export type * from './link/types.js'; +export type * from './menu-item-element.interface.js'; +export type * from './menu-item.extension.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts index 513617f4fdba..eba3a96f403a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts @@ -1,6 +1,6 @@ import type { ManifestMenu } from '../../menu.extension.js'; -import type { ManifestMenuItem } from '../../menu-item/types.js'; import { UmbDefaultMenuItemContext } from '../menu-item/menu-item.context.js'; +import type { ManifestMenuItem } from '../menu-item/types.js'; import { UmbDefaultMenuContext } from './menu.context.js'; import type { UmbMenuItemExpansionEntryModel } from './types.js'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/types.ts deleted file mode 100644 index a30e82bccb32..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item/types.ts +++ /dev/null @@ -1,2 +0,0 @@ -export type * from './menu-item-element.interface.js'; -export type * from './menu-item.extension.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index ddc8437d0fda..d89fd5575e81 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -1,5 +1,5 @@ import type { ManifestMenu } from '../menu.extension.js'; -import { isMenuItemExpansionEntry } from '../menu-item/expansion/is-menu-item-expansion-entry.guard.js'; +import { isMenuItemExpansionEntry } from '../components/menu-item/expansion/is-menu-item-expansion-entry.guard.js'; import type { ManifestSectionSidebarAppBaseMenu, ManifestSectionSidebarAppMenuKind } from './types.js'; import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from './section-context/section-sidebar-menu.section-context.token.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts index b7ded130fe98..028299b81adf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/types.ts @@ -2,7 +2,6 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; export type * from './components/types.js'; export type * from './conditions/types.js'; -export type * from './menu-item/types.js'; export type * from './menu-structure/types.js'; export type * from './menu.extension.js'; export type * from './section-sidebar-menu/types.js'; From 4190933e48b7cf6c362c6d1172df296d3404d158 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 8 Aug 2025 09:07:09 +0200 Subject: [PATCH 101/118] fix lint errors --- .../menu/menu-variant-tree-structure-workspace-context-base.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index 73359aa62d30..889bf10f503f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -9,7 +9,7 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbAncestorsEntityContext, UmbParentEntityContext, type UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import { UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import { linkEntityExpansionEntries } from '@umbraco-cms/backoffice/utils'; -import { UMB_MODAL_CONTEXT, type UmbModalContext } from '@umbraco-cms/backoffice/modal'; +import { UMB_MODAL_CONTEXT } from '@umbraco-cms/backoffice/modal'; interface UmbMenuVariantTreeStructureWorkspaceContextBaseArgs { treeRepositoryAlias: string; From 6299e561682eea9fa5541a3a1bc3fcabda60ae4a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 8 Aug 2025 12:31:54 +0200 Subject: [PATCH 102/118] Update content-detail-workspace-base.ts --- .../workspace/content-detail-workspace-base.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/content-detail-workspace-base.ts b/src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/content-detail-workspace-base.ts index db63689544e5..97359f3a36a9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/content-detail-workspace-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/content-detail-workspace-base.ts @@ -924,11 +924,20 @@ export abstract class UmbContentDetailWorkspaceContextBase< if (!eventContext) { throw new Error('Event context is missing'); } - const event = new UmbRequestReloadChildrenOfEntityEvent({ + + const reloadStructureEvent = new UmbRequestReloadStructureForEntityEvent({ entityType: parent.entityType, unique: parent.unique, }); - eventContext.dispatchEvent(event); + + eventContext.dispatchEvent(reloadStructureEvent); + + const reloadChildrenEvent = new UmbRequestReloadChildrenOfEntityEvent({ + entityType: parent.entityType, + unique: parent.unique, + }); + + eventContext.dispatchEvent(reloadChildrenEvent); } async #update(variantIds: Array, saveData: DetailModelType) { From ab2d1f1f44f6bcc613c4dee33b3bde186c5bca85 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 8 Aug 2025 12:48:22 +0200 Subject: [PATCH 103/118] clean up --- .../tree-menu-item/tree-menu-item.element.ts | 2 +- .../settings-welcome-dashboard.element.ts | 23 +------------------ .../umbraco-news-dashboard.element.ts | 23 +------------------ 3 files changed, 3 insertions(+), 45 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts index 76877fe8bdc2..62624dd3d5f7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts @@ -14,7 +14,7 @@ export class UmbMenuItemTreeDefaultElement extends UmbLitElement implements UmbM manifest?: ManifestMenuItemTreeKind; @state() - _menuItemExpansion: UmbEntityExpansionModel = []; + private _menuItemExpansion: UmbEntityExpansionModel = []; #menuItemContext?: typeof UMB_MENU_ITEM_CONTEXT.TYPE; #muteStateUpdate = false; diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts index 47b3a9c5890d..858736c51440 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts @@ -1,30 +1,9 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from '@umbraco-cms/backoffice/menu'; -import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; @customElement('umb-settings-welcome-dashboard') export class UmbSettingsWelcomeDashboardElement extends UmbLitElement { - #context?: typeof UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT.TYPE; - - @state() - _expansion: Array = []; - - constructor() { - super(); - this.consumeContext(UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, (context) => { - this.#context = context; - this.#observeSectionExpansion(); - }); - } - - #observeSectionExpansion() { - this.observe(this.#context?.expansion.expansion, (items) => { - this._expansion = items || []; - }); - } - override render() { return html`
diff --git a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts index 260481c0e3c6..b887ffbdde02 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts @@ -1,8 +1,6 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, customElement, html, state } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; -import { UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT } from '@umbraco-cms/backoffice/menu'; @customElement('umb-umbraco-news-dashboard') export class UmbUmbracoNewsDashboardElement extends UmbLitElement { @@ -29,25 +27,6 @@ export class UmbUmbracoNewsDashboardElement extends UmbLitElement { }, ]; - #context?: typeof UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT.TYPE; - - @state() - _expansion: Array = []; - - constructor() { - super(); - this.consumeContext(UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, (context) => { - this.#context = context; - this.#observeSectionExpansion(); - }); - } - - #observeSectionExpansion() { - this.observe(this.#context?.expansion.expansion, (items) => { - this._expansion = items || []; - }); - } - override render() { return html`
From 70860677914fdeafd70bd80da78605ea0e777b0c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 8 Aug 2025 12:51:11 +0200 Subject: [PATCH 104/118] rename to example --- .../collapse-menu-item.entity-action.ts | 4 ++-- .../section-sidebar-menu-playground.element.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/collapse-menu-item-entity-action/collapse-menu-item.entity-action.ts b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/collapse-menu-item-entity-action/collapse-menu-item.entity-action.ts index af4c84d952ec..7df5c2dc2579 100644 --- a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/collapse-menu-item-entity-action/collapse-menu-item.entity-action.ts +++ b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/collapse-menu-item-entity-action/collapse-menu-item.entity-action.ts @@ -1,11 +1,11 @@ import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action'; import { UMB_MENU_ITEM_CONTEXT } from '@umbraco-cms/backoffice/menu'; -export class UmbCollapseMenuItemEntityAction extends UmbEntityActionBase { +export class ExampleCollapseMenuItemEntityAction extends UmbEntityActionBase { override async execute() { const context = await this.getContext(UMB_MENU_ITEM_CONTEXT); context?.expansion.collapseAll(); } } -export { UmbCollapseMenuItemEntityAction as api }; +export { ExampleCollapseMenuItemEntityAction as api }; diff --git a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts index 6e0a4d78f2fe..ac232d677210 100644 --- a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts +++ b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts @@ -12,10 +12,10 @@ export class ExampleSectionSidebarMenuPlaygroundDashboard extends UmbElementMixi #sectionContext?: typeof UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT.TYPE; @state() - _globalExpansion: Array = []; + private _globalExpansion: Array = []; @state() - _sectionExpansion: Array = []; + private _sectionExpansion: Array = []; constructor() { super(); From 95cb2a7c4db7c14bef52f786e3bebb3298e6d6ed Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 8 Aug 2025 13:26:14 +0200 Subject: [PATCH 105/118] add button to collapse everything within a section --- .../section-sidebar-menu-playground.element.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts index ac232d677210..5f82b4fc45fc 100644 --- a/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts +++ b/src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts @@ -48,9 +48,17 @@ export class ExampleSectionSidebarMenuPlaygroundDashboard extends UmbElementMixi this.#sectionContext?.expansion.collapseItem(item); } + #onCollapseSection() { + this.#sectionContext?.expansion.collapseAll(); + } + override render() { return html` + + + Collapse All ${repeat( this._sectionExpansion, (item) => item.entityType + item.unique, From f46796fce4d203c06324c963e1c06305e2a36ae8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Sun, 10 Aug 2025 22:06:09 +0200 Subject: [PATCH 106/118] fix breadcrumb for non-variant structure --- ...u-tree-structure-workspace-context-base.ts | 52 +++++++++++-------- 1 file changed, 30 insertions(+), 22 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts index 3e1bd612ef61..500c16d7f212 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts @@ -56,12 +56,31 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex if (!value) return; this.#requestStructure(); }); + + this.observe(this.#workspaceContext?.isNew, (value) => { + if (value === undefined) return; + this.#requestStructure(); + }); }); } async #requestStructure() { + const isNew = this.#workspaceContext?.getIsNew(); + const uniqueObservable = isNew + ? this.#workspaceContext?._internal_createUnderParentEntityUnique + : this.#workspaceContext?.unique; + const entityTypeObservable = isNew + ? this.#workspaceContext?._internal_createUnderParentEntityType + : this.#workspaceContext?.entityType; + let structureItems: Array = []; + const unique = (await this.observe(uniqueObservable, () => {})?.asPromise()) as string; + if (unique === undefined) throw new Error('Unique is not available'); + + const entityType = (await this.observe(entityTypeObservable, () => {})?.asPromise()) as string; + if (!entityType) throw new Error('Entity type is not available'); + const treeRepository = await createExtensionApiByAlias>( this, this.#args.treeRepositoryAlias, @@ -80,22 +99,10 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex ]; } - const isNew = this.#workspaceContext?.getIsNew(); - - const entityTypeObservable = isNew - ? this.#workspaceContext?._internal_createUnderParentEntityType - : this.#workspaceContext?.entityType; - const entityType = (await this.observe(entityTypeObservable, () => {})?.asPromise()) as string; - if (!entityType) throw new Error('Entity type is not available'); + const isRoot = entityType === root?.entityType; // If the entity type is different from the root entity type, then we can request the ancestors. - if (entityType !== root?.entityType) { - const uniqueObservable = isNew - ? this.#workspaceContext?._internal_createUnderParentEntityUnique - : this.#workspaceContext?.unique; - const unique = (await this.observe(uniqueObservable, () => {})?.asPromise()) as string; - if (!unique) throw new Error('Unique is not available'); - + if (!isRoot) { const { data } = await treeRepository.requestTreeItemAncestors({ treeItem: { unique, entityType } }); if (data) { @@ -108,18 +115,19 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex }; }); - structureItems.push(...ancestorItems); - - this.#structure.setValue(structureItems); - this.#setParentData(structureItems); this.#setAncestorData(data); - const menuItemAlias = this.manifest?.meta?.menuItemAlias; - if (menuItemAlias && !this.#isModalContext) { - this.#expandSectionSidebarMenu(structureItems, menuItemAlias); - } + structureItems.push(...ancestorItems); } } + + this.#structure.setValue(structureItems); + this.#setParentData(structureItems); + + const menuItemAlias = this.manifest?.meta?.menuItemAlias; + if (menuItemAlias && !this.#isModalContext) { + this.#expandSectionSidebarMenu(structureItems, menuItemAlias); + } } #setParentData(structureItems: Array) { From 70dd7f3af9b80cba6b3cb91692d51277acf264a5 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Sun, 10 Aug 2025 22:20:57 +0200 Subject: [PATCH 107/118] reload entity --- .../entity-detail/entity-detail-workspace-base.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity-detail/entity-detail-workspace-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity-detail/entity-detail-workspace-base.ts index 333c00a22830..4b021f1abde6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity-detail/entity-detail-workspace-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity-detail/entity-detail-workspace-base.ts @@ -388,11 +388,20 @@ export abstract class UmbEntityDetailWorkspaceContextBase< const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT); if (!eventContext) throw new Error('Event context not found.'); - const event = new UmbRequestReloadChildrenOfEntityEvent({ + + const reloadStructureEvent = new UmbRequestReloadStructureForEntityEvent({ entityType: parent.entityType, unique: parent.unique, }); - eventContext.dispatchEvent(event); + + eventContext.dispatchEvent(reloadStructureEvent); + + const reloadChildren = new UmbRequestReloadChildrenOfEntityEvent({ + entityType: parent.entityType, + unique: parent.unique, + }); + + eventContext.dispatchEvent(reloadChildren); } protected async _update(currentData: DetailModelType) { From 98956ad343490e140e0f913570d232e9a5a9d5c9 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Sun, 10 Aug 2025 22:38:53 +0200 Subject: [PATCH 108/118] destroy --- .../menu/menu-tree-structure-workspace-context-base.ts | 8 ++++++++ .../menu-variant-tree-structure-workspace-context-base.ts | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts index 500c16d7f212..048147ec65b3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-tree-structure-workspace-context-base.ts @@ -180,4 +180,12 @@ export abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContex }); this.#sectionSidebarMenuContext?.expansion.expandItems(expandableItemsWithMenuItem); } + + override destroy(): void { + super.destroy(); + this.#structure.destroy(); + this.#parent.destroy(); + this.#parentContext.destroy(); + this.#ancestorContext.destroy(); + } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts index 889bf10f503f..3ef07138e2f3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts @@ -180,4 +180,12 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um }); this.#sectionSidebarMenuContext?.expansion.expandItems(expandableItemsWithMenuItem); } + + override destroy(): void { + super.destroy(); + this.#structure.destroy(); + this.#parent.destroy(); + this.#parentContext.destroy(); + this.#ancestorContext.destroy(); + } } From ad35d497506d670c14680015c6cf279d36b49821 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Sun, 10 Aug 2025 22:57:04 +0200 Subject: [PATCH 109/118] remove self --- .../workspace-menu-breadcrumb.element.ts | 33 ++++++++++++++----- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-breadcrumb/workspace-menu-breadcrumb/workspace-menu-breadcrumb.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-breadcrumb/workspace-menu-breadcrumb/workspace-menu-breadcrumb.element.ts index c23a374acd0d..0fcb8deab4fe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-breadcrumb/workspace-menu-breadcrumb/workspace-menu-breadcrumb.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-breadcrumb/workspace-menu-breadcrumb/workspace-menu-breadcrumb.element.ts @@ -14,6 +14,9 @@ export class UmbWorkspaceBreadcrumbElement extends UmbLitElement { @state() private _structure: UmbStructureItemModel[] = []; + @state() + private _isNew: boolean = false; + // TODO: figure out the correct context type #workspaceContext?: any; #sectionContext?: typeof UMB_SECTION_CONTEXT.TYPE; @@ -28,6 +31,7 @@ export class UmbWorkspaceBreadcrumbElement extends UmbLitElement { this.consumeContext(UMB_WORKSPACE_CONTEXT, (instance) => { this.#workspaceContext = instance as any; + this.#observeIsNew(); this.#observeStructure(); this.#observeName(); }); @@ -38,16 +42,15 @@ export class UmbWorkspaceBreadcrumbElement extends UmbLitElement { }); } - #observeStructure() { - if (!this.#structureContext || !this.#workspaceContext) return; - const isNew = this.#workspaceContext.getIsNew(); - + #observeIsNew() { this.observe( - this.#structureContext.structure, + this.#workspaceContext?.isNew, (value) => { - this._structure = isNew ? value : value.slice(0, -1); + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + this._isNew = value || false; }, - 'menuStructureObserver', + 'breadcrumbWorkspaceIsNewObserver', ); } @@ -61,16 +64,30 @@ export class UmbWorkspaceBreadcrumbElement extends UmbLitElement { ); } + #observeStructure() { + if (!this.#structureContext || !this.#workspaceContext) return; + + this.observe( + this.#structureContext.structure, + (value) => { + this._structure = value; + }, + 'menuStructureObserver', + ); + } + #getHref(structureItem: UmbStructureItemModel) { if (structureItem.isFolder) return undefined; return `section/${this.#sectionContext?.getPathname()}/workspace/${structureItem.entityType}/edit/${structureItem.unique}`; } override render() { + const structure = this._isNew ? this._structure : this._structure.slice(0, -1); + return html` ${map( - this._structure, + structure, (structureItem) => html`${this.localize.string(structureItem.name)} Date: Tue, 12 Aug 2025 10:26:04 +0200 Subject: [PATCH 110/118] Updated acceptance tests to check if a caret button is open before clicking --- .../DefaultConfig/Content/ChildrenContent.spec.ts | 10 +++++----- .../ContentWithAllowedChildNodes.spec.ts | 2 +- .../Content/ContentWithListViewContent.spec.ts | 2 +- .../DefaultConfig/DataType/DataTypeFolder.spec.ts | 2 +- .../tests/DefaultConfig/Media/ListViewMedia.spec.ts | 2 +- .../tests/DefaultConfig/Media/Media.spec.ts | 4 +--- .../Settings/DocumentType/DocumentTypeFolder.spec.ts | 4 ++-- .../Settings/MediaType/MediaTypeFolder.spec.ts | 6 +++--- .../Settings/PartialView/PartialViewFolder.spec.ts | 11 +++++------ .../Settings/Script/ScriptFolder.spec.ts | 12 ++++++------ .../Settings/Stylesheet/StylesheetFolder.spec.ts | 12 ++++++------ .../Users/Permissions/User/ContentStartNodes.spec.ts | 4 ++-- .../Users/Permissions/User/MediaStartNodes.spec.ts | 4 ++-- .../Permissions/UserGroup/ContentStartNodes.spec.ts | 4 ++-- .../UserGroup/DefaultPermissionsInContent.spec.ts | 8 ++++---- .../UserGroup/GranularPermissionsInContent.spec.ts | 2 +- .../Permissions/UserGroup/MediaStartNodes.spec.ts | 4 ++-- 17 files changed, 45 insertions(+), 48 deletions(-) diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ChildrenContent.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ChildrenContent.spec.ts index 40e475199dbc..109ea86a0abf 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ChildrenContent.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ChildrenContent.spec.ts @@ -41,10 +41,10 @@ test('can create child node', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) = expect(await umbracoApi.document.doesNameExist(childContentName)).toBeTruthy(); const childData = await umbracoApi.document.getChildren(contentId); expect(childData[0].variants[0].name).toBe(childContentName); - // verify that the child content displays in the tree after reloading children + // Verify that the child content displays in the tree after reloading children await umbracoUi.content.clickActionsMenuForContent(contentName); await umbracoUi.content.clickReloadChildrenActionMenuOption(); - await umbracoUi.content.clickCaretButtonForContentName(contentName); + await umbracoUi.content.openContentCaretButtonForName(contentName); await umbracoUi.content.doesContentTreeHaveName(childContentName); // Clean @@ -67,7 +67,7 @@ test('can create child node in child node', async ({umbracoApi, umbracoUi}) => { await umbracoUi.content.goToSection(ConstantHelper.sections.content); // Act - await umbracoUi.content.clickCaretButtonForContentName(contentName); + await umbracoUi.content.openContentCaretButtonForName(contentName); await umbracoUi.content.clickActionsMenuForContent(childContentName); await umbracoUi.content.clickCreateActionMenuOption(); await umbracoUi.content.chooseDocumentType(childOfChildDocumentTypeName); @@ -80,7 +80,7 @@ test('can create child node in child node', async ({umbracoApi, umbracoUi}) => { const childOfChildData = await umbracoApi.document.getChildren(childContentId); expect(childOfChildData[0].variants[0].name).toBe(childOfChildContentName); // verify that the child content displays in the tree - await umbracoUi.content.clickCaretButtonForContentName(childContentName); + await umbracoUi.content.openContentCaretButtonForName(childContentName); await umbracoUi.content.doesContentTreeHaveName(childOfChildContentName); // Clean @@ -98,7 +98,7 @@ test('cannot publish child if the parent is not published', async ({umbracoApi, await umbracoUi.content.goToSection(ConstantHelper.sections.content); // Act - await umbracoUi.content.clickCaretButtonForContentName(contentName); + await umbracoUi.content.openContentCaretButtonForName(contentName); await umbracoUi.content.clickActionsMenuForContent(childContentName); await umbracoUi.content.clickPublishActionMenuOption(); await umbracoUi.content.clickConfirmToPublishButton(); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ContentWithDocumentTypeProperties/ContentWithAllowedChildNodes.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ContentWithDocumentTypeProperties/ContentWithAllowedChildNodes.spec.ts index 86124bbebd2d..65437ebcacd7 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ContentWithDocumentTypeProperties/ContentWithAllowedChildNodes.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ContentWithDocumentTypeProperties/ContentWithAllowedChildNodes.spec.ts @@ -84,7 +84,7 @@ test('can create multiple child nodes with different document types', async ({um // verify that the child content displays in the tree after reloading children await umbracoUi.content.clickActionsMenuForContent(contentName); await umbracoUi.content.clickReloadChildrenActionMenuOption(); - await umbracoUi.content.clickCaretButtonForContentName(contentName); + await umbracoUi.content.openContentCaretButtonForName(contentName); await umbracoUi.content.doesContentTreeHaveName(firstChildContentName); await umbracoUi.content.doesContentTreeHaveName(secondChildContentName); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ContentWithListViewContent.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ContentWithListViewContent.spec.ts index 8d0af1b43bb0..6c509ff7bb88 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ContentWithListViewContent.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ContentWithListViewContent.spec.ts @@ -164,7 +164,7 @@ test.skip('child is removed from list after child content is deleted', async ({u expect(await umbracoApi.document.getChildrenAmount(documentId)).toEqual(1); // Act - await umbracoUi.content.clickCaretButtonForContentName(contentName); + await umbracoUi.content.openContentCaretButtonForName(contentName); await umbracoUi.content.clickActionsMenuForContent(childContentName); await umbracoUi.content.clickTrashActionMenuOption(); await umbracoUi.content.clickConfirmTrashButton(); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/DataTypeFolder.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/DataTypeFolder.spec.ts index 7429e8b2e14b..0a274fdd1ba6 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/DataTypeFolder.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/DataTypeFolder.spec.ts @@ -114,7 +114,7 @@ test('can create a folder in a folder in a folder', async ({umbracoApi, umbracoU // Act await umbracoUi.dataType.clickRootFolderCaretButton(); - await umbracoUi.dataType.clickCaretButtonForName(dataTypeFolderName); + await umbracoUi.dataType.openCaretButtonForName(dataTypeFolderName); await umbracoUi.dataType.clickActionsMenuForDataType(childFolderName); await umbracoUi.dataType.createDataTypeFolder(childOfChildFolderName); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Media/ListViewMedia.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Media/ListViewMedia.spec.ts index 8861d71dcc8f..0e2560c55d49 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Media/ListViewMedia.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Media/ListViewMedia.spec.ts @@ -126,7 +126,7 @@ test('can allow bulk move in the media section', async ({umbracoApi, umbracoUi}) await umbracoUi.media.selectMediaWithName(secondMediaFileName); await umbracoUi.waitForTimeout(200); await umbracoUi.media.clickBulkMoveToButton(); - await umbracoUi.media.clickCaretButtonForName('Media'); + await umbracoUi.media.openCaretButtonForName('Media'); await umbracoUi.media.clickModalTextByName(mediaFolderName); await umbracoUi.media.clickChooseModalButton(); await umbracoUi.waitForTimeout(500); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Media/Media.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Media/Media.spec.ts index 954ce8827201..251f455072bd 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Media/Media.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Media/Media.spec.ts @@ -137,10 +137,8 @@ test('can create a folder in a folder', async ({umbracoApi, umbracoUi}) => { await umbracoUi.media.clickSaveButton(); // Assert - //await umbracoUi.media.waitForMediaItemToBeCreated(); // This is flaky, and Playwright seems to succeed even with its default timeout await umbracoUi.media.isMediaTreeItemVisible(parentFolderName); - await umbracoUi.media.isMediaTreeItemVisible(folderName, false); - await umbracoUi.media.clickMediaCaretButtonForName(parentFolderName); + await umbracoUi.media.openMediaCaretButtonForName(parentFolderName); await umbracoUi.media.isMediaTreeItemVisible(folderName, true); // Clean diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/DocumentType/DocumentTypeFolder.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/DocumentType/DocumentTypeFolder.spec.ts index 7ce674fea0b5..4c571df2245f 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/DocumentType/DocumentTypeFolder.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/DocumentType/DocumentTypeFolder.spec.ts @@ -25,7 +25,7 @@ test('can create a empty document type folder', {tag: '@smoke'}, async ({umbraco await umbracoUi.documentType.waitForDocumentTypeToBeCreated(); expect(await umbracoApi.documentType.doesNameExist(documentFolderName)).toBeTruthy(); // Checks if the folder is in the root - await umbracoUi.documentType.clickCaretButtonForName('Document Types'); + await umbracoUi.documentType.openCaretButtonForName('Document Types'); await umbracoUi.documentType.isDocumentTreeItemVisible(documentFolderName); }); @@ -105,7 +105,7 @@ test('can create a folder in a folder in a folder', {tag: '@smoke'}, async ({umb // Act await umbracoUi.documentType.goToSection(ConstantHelper.sections.settings); await umbracoUi.documentType.clickRootFolderCaretButton(); - await umbracoUi.documentType.clickCaretButtonForName(grandParentFolderName); + await umbracoUi.documentType.openCaretButtonForName(grandParentFolderName); await umbracoUi.documentType.clickActionsMenuForName(parentFolderName); await umbracoUi.documentType.clickCreateActionMenuOption(); await umbracoUi.documentType.clickCreateDocumentFolderButton(); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/MediaType/MediaTypeFolder.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/MediaType/MediaTypeFolder.spec.ts index f249e10f2379..fa19f68f4d2c 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/MediaType/MediaTypeFolder.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/MediaType/MediaTypeFolder.spec.ts @@ -82,7 +82,7 @@ test('can create a media type folder in a folder', async ({umbracoApi, umbracoUi // Assert await umbracoUi.mediaType.waitForMediaTypeToBeCreated(); - await umbracoUi.mediaType.clickCaretButtonForName(mediaTypeFolderName); + await umbracoUi.mediaType.openCaretButtonForName(mediaTypeFolderName); await umbracoUi.mediaType.isTreeItemVisible(childFolderName, true); const parentFolderChildren = await umbracoApi.mediaType.getChildren(parentFolderId); expect(parentFolderChildren[0].name).toBe(childFolderName); @@ -102,7 +102,7 @@ test('can create a media type folder in a folder in a folder', async ({umbracoAp // Act await umbracoUi.mediaType.clickRootFolderCaretButton(); - await umbracoUi.mediaType.clickCaretButtonForName(grandparentFolderName); + await umbracoUi.mediaType.openCaretButtonForName(grandparentFolderName); await umbracoUi.mediaType.clickActionsMenuForName(mediaTypeFolderName); await umbracoUi.mediaType.clickCreateActionMenuOption(); await umbracoUi.mediaType.clickFolderButton(); @@ -111,7 +111,7 @@ test('can create a media type folder in a folder in a folder', async ({umbracoAp // Assert await umbracoUi.mediaType.waitForMediaTypeToBeCreated(); - await umbracoUi.mediaType.clickCaretButtonForName(mediaTypeFolderName); + await umbracoUi.mediaType.openCaretButtonForName(mediaTypeFolderName); await umbracoUi.mediaType.isTreeItemVisible(childFolderName, true); const grandParentFolderChildren = await umbracoApi.mediaType.getChildren(grandParentFolderId); expect(grandParentFolderChildren[0].name).toBe(mediaTypeFolderName); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/PartialView/PartialViewFolder.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/PartialView/PartialViewFolder.spec.ts index 3cd2806f9bd1..642cda5801e3 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/PartialView/PartialViewFolder.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/PartialView/PartialViewFolder.spec.ts @@ -69,8 +69,7 @@ test('can create a partial view in a folder', async ({umbracoApi, umbracoUi}) => const childrenData = await umbracoApi.partialView.getChildren(folderPath); expect(childrenData[0].name).toEqual(partialViewFileName); // Verify the partial view is displayed in the folder under the Partial Views section - await umbracoUi.partialView.isPartialViewRootTreeItemVisible(partialViewFileName, false, false); - await umbracoUi.partialView.clickCaretButtonForName(folderName); + await umbracoUi.partialView.openCaretButtonForName(folderName); await umbracoUi.partialView.isPartialViewRootTreeItemVisible(partialViewFileName, true, false); // Clean @@ -86,7 +85,7 @@ test('can create a partial view in a folder in a folder', async ({umbracoApi, um //Act await umbracoUi.partialView.reloadPartialViewTree(); - await umbracoUi.partialView.clickCaretButtonForName(folderName); + await umbracoUi.partialView.openCaretButtonForName(folderName); await umbracoUi.partialView.clickActionsMenuForPartialView(childFolderName); await umbracoUi.partialView.clickCreateOptionsActionMenuOption(); await umbracoUi.partialView.clickNewEmptyPartialViewButton(); @@ -118,7 +117,7 @@ test('can create a folder in a folder', async ({umbracoApi, umbracoUi}) => { expect(await umbracoApi.partialView.doesNameExist(childFolderName)).toBeTruthy(); const partialViewChildren = await umbracoApi.partialView.getChildren('/' + folderName); expect(partialViewChildren[0].path).toBe('/' + folderName + '/' + childFolderName); - await umbracoUi.partialView.clickCaretButtonForName(folderName); + await umbracoUi.partialView.openCaretButtonForName(folderName); await umbracoUi.partialView.isPartialViewRootTreeItemVisible(childFolderName, true, false); }); @@ -132,7 +131,7 @@ test('can create a folder in a folder in a folder', {tag: '@smoke'}, async ({umb // Act await umbracoUi.partialView.reloadPartialViewTree(); - await umbracoUi.partialView.clickCaretButtonForName(folderName); + await umbracoUi.partialView.openCaretButtonForName(folderName); await umbracoUi.partialView.clickActionsMenuForPartialView(childFolderName); await umbracoUi.partialView.createPartialViewFolder(childOfChildFolderName); @@ -141,7 +140,7 @@ test('can create a folder in a folder in a folder', {tag: '@smoke'}, async ({umb expect(await umbracoApi.partialView.doesNameExist(childOfChildFolderName)).toBeTruthy(); const partialViewChildren = await umbracoApi.partialView.getChildren('/' + folderName + '/' + childFolderName); expect(partialViewChildren[0].path).toBe('/' + folderName + '/' + childFolderName + '/' + childOfChildFolderName); - await umbracoUi.partialView.clickCaretButtonForName(childFolderName); + await umbracoUi.partialView.openCaretButtonForName(childFolderName); await umbracoUi.partialView.isPartialViewRootTreeItemVisible(childOfChildFolderName, true, false); }); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Script/ScriptFolder.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Script/ScriptFolder.spec.ts index 9698acb51feb..88117c05b7a6 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Script/ScriptFolder.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Script/ScriptFolder.spec.ts @@ -65,7 +65,7 @@ test('can create a script in a folder', async ({umbracoApi, umbracoUi}) => { expect(scriptChildren[0].path).toBe('/' + scriptFolderName + '/' + scriptName); const scriptData = await umbracoApi.script.get(scriptChildren[0].path); expect(scriptData.content).toBe(scriptContent); - await umbracoUi.stylesheet.clickCaretButtonForName(scriptFolderName); + await umbracoUi.stylesheet.openCaretButtonForName(scriptFolderName); await umbracoUi.script.isScriptRootTreeItemVisible(scriptName, true, false); }); @@ -85,7 +85,7 @@ test('can create a folder in a folder', async ({umbracoApi, umbracoUi}) => { expect(await umbracoApi.script.doesNameExist(childFolderName)).toBeTruthy(); const scriptChildren = await umbracoApi.script.getChildren('/' + scriptFolderName); expect(scriptChildren[0].path).toBe('/' + scriptFolderName + '/' + childFolderName); - await umbracoUi.stylesheet.clickCaretButtonForName(scriptFolderName); + await umbracoUi.stylesheet.openCaretButtonForName(scriptFolderName); await umbracoUi.script.isScriptRootTreeItemVisible(childFolderName, true, false); }); @@ -99,7 +99,7 @@ test('can create a folder in a folder in a folder', {tag: '@smoke'}, async ({umb // Act await umbracoUi.script.reloadScriptTree(); - await umbracoUi.script.clickCaretButtonForName(scriptFolderName); + await umbracoUi.script.openCaretButtonForName(scriptFolderName); await umbracoUi.script.clickActionsMenuForScript(childFolderName); await umbracoUi.script.createScriptFolder(childOfChildFolderName); @@ -108,7 +108,7 @@ test('can create a folder in a folder in a folder', {tag: '@smoke'}, async ({umb expect(await umbracoApi.script.doesNameExist(childOfChildFolderName)).toBeTruthy(); const scriptChildren = await umbracoApi.script.getChildren('/' + scriptFolderName + '/' + childFolderName); expect(scriptChildren[0].path).toBe('/' + scriptFolderName + '/' + childFolderName + '/' + childOfChildFolderName); - await umbracoUi.stylesheet.clickCaretButtonForName(childFolderName); + await umbracoUi.stylesheet.openCaretButtonForName(childFolderName); await umbracoUi.script.isScriptRootTreeItemVisible(childOfChildFolderName, true, false); }); @@ -121,7 +121,7 @@ test('can create a script in a folder in a folder', async ({umbracoApi, umbracoU // Act await umbracoUi.script.reloadScriptTree(); - await umbracoUi.script.clickCaretButtonForName(scriptFolderName); + await umbracoUi.script.openCaretButtonForName(scriptFolderName); await umbracoUi.script.clickActionsMenuForScript(childFolderName); await umbracoUi.script.clickCreateOptionsActionMenuOption(); await umbracoUi.script.clickNewJavascriptFileButton(); @@ -133,7 +133,7 @@ test('can create a script in a folder in a folder', async ({umbracoApi, umbracoU expect(await umbracoApi.script.doesNameExist(scriptName)).toBeTruthy(); const scriptChildren = await umbracoApi.script.getChildren('/' + scriptFolderName + '/' + childFolderName); expect(scriptChildren[0].path).toBe('/' + scriptFolderName + '/' + childFolderName + '/' + scriptName); - await umbracoUi.stylesheet.clickCaretButtonForName(childFolderName); + await umbracoUi.stylesheet.openCaretButtonForName(childFolderName); await umbracoUi.script.isScriptRootTreeItemVisible(scriptName, true, false); }); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Stylesheet/StylesheetFolder.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Stylesheet/StylesheetFolder.spec.ts index 3c270b6d37c2..b2c9f045286f 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Stylesheet/StylesheetFolder.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Stylesheet/StylesheetFolder.spec.ts @@ -59,7 +59,7 @@ test('can create a folder in a folder', async ({umbracoApi, umbracoUi}) => { expect(await umbracoApi.stylesheet.doesNameExist(childFolderName)).toBeTruthy(); const styleChildren = await umbracoApi.stylesheet.getChildren('/' + stylesheetFolderName); expect(styleChildren[0].path).toBe('/' + stylesheetFolderName + '/' + childFolderName); - await umbracoUi.stylesheet.clickCaretButtonForName(stylesheetFolderName); + await umbracoUi.stylesheet.openCaretButtonForName(stylesheetFolderName); await umbracoUi.stylesheet.isStylesheetRootTreeItemVisible(childFolderName, true, false); }); @@ -73,7 +73,7 @@ test('can create a folder in a folder in a folder', {tag: '@smoke'}, async ({umb // Act await umbracoUi.stylesheet.reloadStylesheetTree(); - await umbracoUi.stylesheet.clickCaretButtonForName(stylesheetFolderName); + await umbracoUi.stylesheet.openCaretButtonForName(stylesheetFolderName); await umbracoUi.stylesheet.clickActionsMenuForStylesheet(childFolderName); await umbracoUi.stylesheet.createStylesheetFolder(childOfChildFolderName); @@ -82,7 +82,7 @@ test('can create a folder in a folder in a folder', {tag: '@smoke'}, async ({umb expect(await umbracoApi.stylesheet.doesNameExist(childOfChildFolderName)).toBeTruthy(); const styleChildren = await umbracoApi.stylesheet.getChildren('/' + stylesheetFolderName + '/' + childFolderName); expect(styleChildren[0].path).toBe('/' + stylesheetFolderName + '/' + childFolderName + '/' + childOfChildFolderName); - await umbracoUi.stylesheet.clickCaretButtonForName(childFolderName); + await umbracoUi.stylesheet.openCaretButtonForName(childFolderName); await umbracoUi.stylesheet.isStylesheetRootTreeItemVisible(childOfChildFolderName, true, false); }); @@ -108,7 +108,7 @@ test('can create a stylesheet in a folder', async ({umbracoApi, umbracoUi}) => { expect(stylesheetChildren[0].path).toBe('/' + stylesheetFolderName + '/' + stylesheetName); const stylesheetData = await umbracoApi.stylesheet.get(stylesheetChildren[0].path); expect(stylesheetData.content).toBe(stylesheetContent); - await umbracoUi.stylesheet.clickCaretButtonForName(stylesheetFolderName); + await umbracoUi.stylesheet.openCaretButtonForName(stylesheetFolderName); await umbracoUi.stylesheet.isStylesheetRootTreeItemVisible(stylesheetName, true, false); }); @@ -122,7 +122,7 @@ test('can create a stylesheet in a folder in a folder', async ({umbracoApi, umbr //Act await umbracoUi.stylesheet.reloadStylesheetTree(); - await umbracoUi.stylesheet.clickCaretButtonForName(stylesheetFolderName); + await umbracoUi.stylesheet.openCaretButtonForName(stylesheetFolderName); await umbracoUi.stylesheet.clickActionsMenuForStylesheet(childFolderName); await umbracoUi.stylesheet.clickCreateActionMenuOption(); await umbracoUi.stylesheet.clickNewStylesheetButton(); @@ -137,7 +137,7 @@ test('can create a stylesheet in a folder in a folder', async ({umbracoApi, umbr expect(stylesheetChildren[0].path).toBe('/' + stylesheetFolderName + '/' + childFolderName + '/' + stylesheetName); const stylesheetData = await umbracoApi.stylesheet.get(stylesheetChildren[0].path); expect(stylesheetData.content).toBe(stylesheetContent); - await umbracoUi.stylesheet.clickCaretButtonForName(childFolderName); + await umbracoUi.stylesheet.openCaretButtonForName(childFolderName); await umbracoUi.stylesheet.isStylesheetRootTreeItemVisible(stylesheetName, true, false); }); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/User/ContentStartNodes.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/User/ContentStartNodes.spec.ts index ea84ad5161f3..b2445d458865 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/User/ContentStartNodes.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/User/ContentStartNodes.spec.ts @@ -52,7 +52,7 @@ test('can see root start node and children', async ({umbracoApi, umbracoUi}) => // Assert await umbracoUi.content.isContentInTreeVisible(rootDocumentName); - await umbracoUi.content.clickCaretButtonForContentName(rootDocumentName); + await umbracoUi.content.openContentCaretButtonForName(rootDocumentName); await umbracoUi.content.isChildContentInTreeVisible(rootDocumentName, childDocumentOneName); await umbracoUi.content.isChildContentInTreeVisible(rootDocumentName, childDocumentTwoName); }); @@ -70,7 +70,7 @@ test('can see parent of start node but not access it', async ({umbracoApi, umbra await umbracoUi.content.isContentInTreeVisible(rootDocumentName); await umbracoUi.content.goToContentWithName(rootDocumentName); await umbracoUi.content.doesDocumentWorkspaceHaveText('Access denied'); - await umbracoUi.content.clickCaretButtonForContentName(rootDocumentName); + await umbracoUi.content.openContentCaretButtonForName(rootDocumentName); await umbracoUi.content.isChildContentInTreeVisible(rootDocumentName, childDocumentOneName); await umbracoUi.content.isChildContentInTreeVisible(rootDocumentName, childDocumentTwoName, false); }); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/User/MediaStartNodes.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/User/MediaStartNodes.spec.ts index c8720a7a410d..f16608353b50 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/User/MediaStartNodes.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/User/MediaStartNodes.spec.ts @@ -45,7 +45,7 @@ test('can see root media start node and children', async ({umbracoApi, umbracoUi // Assert await umbracoUi.media.isMediaTreeItemVisible(rootFolderName); - await umbracoUi.media.clickCaretButtonForMediaName(rootFolderName); + await umbracoUi.media.openMediaCaretButtonForName(rootFolderName); await umbracoUi.media.isChildMediaVisible(rootFolderName, childFolderOneName); await umbracoUi.media.isChildMediaVisible(rootFolderName, childFolderTwoName); }); @@ -63,7 +63,7 @@ test('can see parent of start node but not access it', async ({umbracoApi, umbra await umbracoUi.media.isMediaTreeItemVisible(rootFolderName); await umbracoUi.media.goToMediaWithName(rootFolderName); await umbracoUi.media.doesMediaWorkspaceHaveText('Access denied'); - await umbracoUi.media.clickCaretButtonForMediaName(rootFolderName); + await umbracoUi.media.openMediaCaretButtonForName(rootFolderName); await umbracoUi.media.isChildMediaVisible(rootFolderName, childFolderOneName); await umbracoUi.media.isChildMediaVisible(rootFolderName, childFolderTwoName, false); }); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/ContentStartNodes.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/ContentStartNodes.spec.ts index 1648b0e6ff86..82178e73fce0 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/ContentStartNodes.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/ContentStartNodes.spec.ts @@ -53,7 +53,7 @@ test('can see root start node and children', async ({umbracoApi, umbracoUi}) => // Assert await umbracoUi.content.isContentInTreeVisible(rootDocumentName); - await umbracoUi.content.clickCaretButtonForContentName(rootDocumentName); + await umbracoUi.content.openContentCaretButtonForName(rootDocumentName); await umbracoUi.content.isChildContentInTreeVisible(rootDocumentName, childDocumentOneName); await umbracoUi.content.isChildContentInTreeVisible(rootDocumentName, childDocumentTwoName); }); @@ -72,7 +72,7 @@ test('can see parent of start node but not access it', async ({umbracoApi, umbra await umbracoUi.content.isContentInTreeVisible(rootDocumentName); await umbracoUi.content.goToContentWithName(rootDocumentName); await umbracoUi.content.doesDocumentWorkspaceHaveText('Access denied'); - await umbracoUi.content.clickCaretButtonForContentName(rootDocumentName); + await umbracoUi.content.openContentCaretButtonForName(rootDocumentName); await umbracoUi.content.isChildContentInTreeVisible(rootDocumentName, childDocumentOneName); await umbracoUi.content.isChildContentInTreeVisible(rootDocumentName, childDocumentTwoName, false); }); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/DefaultPermissionsInContent.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/DefaultPermissionsInContent.spec.ts index 2960ad27fa56..32837242d172 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/DefaultPermissionsInContent.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/DefaultPermissionsInContent.spec.ts @@ -435,7 +435,7 @@ test.fixme('can move content with move to permission enabled', {tag: '@release'} await umbracoUi.content.goToSection(ConstantHelper.sections.content, false); // Act - await umbracoUi.content.clickCaretButtonForContentName(rootDocumentName); + await umbracoUi.content.openContentCaretButtonForName(rootDocumentName); await umbracoUi.content.clickActionsMenuForContent(childDocumentOneName); await umbracoUi.content.clickMoveToActionMenuOption(); await umbracoUi.content.moveToContentWithName([], moveToDocumentName); @@ -444,7 +444,7 @@ test.fixme('can move content with move to permission enabled', {tag: '@release'} await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.moved); await umbracoUi.content.reloadContentTree(); await umbracoUi.content.isCaretButtonVisibleForContentName(moveToDocumentName, true); - await umbracoUi.content.clickCaretButtonForContentName(moveToDocumentName); + await umbracoUi.content.openContentCaretButtonForName(moveToDocumentName); await umbracoUi.content.isChildContentInTreeVisible(moveToDocumentName, childDocumentOneName, true); await umbracoUi.content.isCaretButtonVisibleForContentName(rootDocumentName, false); expect(await umbracoApi.document.getChildrenAmount(rootDocumentId)).toEqual(0); @@ -489,7 +489,7 @@ test.fixme('can sort children with sort children permission enabled', {tag: '@re // Assert // TODO: uncomment when it is not flaky - await umbracoUi.content.clickCaretButtonForContentName(rootDocumentName); + await umbracoUi.content.openContentCaretButtonForName(rootDocumentName); await umbracoUi.content.doesIndexDocumentInTreeContainName(rootDocumentName, childDocumentTwoName, 0); await umbracoUi.content.doesIndexDocumentInTreeContainName(rootDocumentName, childDocumentOneName, 1); }); @@ -669,4 +669,4 @@ test('can create and update content with permission enabled', {tag: '@release'}, // Cleanup await umbracoApi.document.ensureNameNotExists(updatedDocumentName); -}); +}); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/GranularPermissionsInContent.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/GranularPermissionsInContent.spec.ts index e2cb5eedef93..bd5b2f94d1db 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/GranularPermissionsInContent.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/GranularPermissionsInContent.spec.ts @@ -223,7 +223,7 @@ test('can move a specific content with move to permission enabled', async ({umbr await umbracoUi.content.goToSection(ConstantHelper.sections.content, false); // Act - await umbracoUi.content.clickCaretButtonForContentName(firstDocumentName); + await umbracoUi.content.openContentCaretButtonForName(firstDocumentName); await umbracoUi.content.clickActionsMenuForContent(childDocumentName); await umbracoUi.content.clickMoveToActionMenuOption(); await umbracoUi.content.moveToContentWithName([], moveToDocumentName); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/MediaStartNodes.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/MediaStartNodes.spec.ts index 7c71bb01fcb5..be8b531d44b5 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/MediaStartNodes.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/Permissions/UserGroup/MediaStartNodes.spec.ts @@ -45,7 +45,7 @@ test('can see root media start node and children', {tag: '@release'}, async ({um // Assert await umbracoUi.media.isMediaTreeItemVisible(rootFolderName); - await umbracoUi.media.clickCaretButtonForMediaName(rootFolderName); + await umbracoUi.media.openMediaCaretButtonForName(rootFolderName); await umbracoUi.media.isChildMediaVisible(rootFolderName, childFolderOneName); await umbracoUi.media.isChildMediaVisible(rootFolderName, childFolderTwoName); }); @@ -64,7 +64,7 @@ test('can see parent of start node but not access it', async ({umbracoApi, umbra await umbracoUi.media.isMediaTreeItemVisible(rootFolderName); await umbracoUi.media.goToMediaWithName(rootFolderName); await umbracoUi.media.doesMediaWorkspaceHaveText('Access denied'); - await umbracoUi.media.clickCaretButtonForMediaName(rootFolderName); + await umbracoUi.media.openMediaCaretButtonForName(rootFolderName); await umbracoUi.media.isChildMediaVisible(rootFolderName, childFolderOneName); await umbracoUi.media.isChildMediaVisible(rootFolderName, childFolderTwoName, false); }); From 64617dbcd8e81a9ac3a183c815d5fbf2b3641a63 Mon Sep 17 00:00:00 2001 From: Andreas Zerbst Date: Tue, 12 Aug 2025 10:26:19 +0200 Subject: [PATCH 111/118] Bumped version of test helpers --- tests/Umbraco.Tests.AcceptanceTest/package-lock.json | 9 +++++---- tests/Umbraco.Tests.AcceptanceTest/package.json | 4 ++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json index 32ed4bb4d7cc..fba443cc7d8e 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json +++ b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json @@ -8,7 +8,7 @@ "hasInstallScript": true, "dependencies": { "@umbraco/json-models-builders": "^2.0.37", - "@umbraco/playwright-testhelpers": "^16.0.34", + "@umbraco/playwright-testhelpers": "^16.0.35", "camelize": "^1.0.0", "dotenv": "^16.3.1", "node-fetch": "^2.6.7" @@ -67,9 +67,10 @@ } }, "node_modules/@umbraco/playwright-testhelpers": { - "version": "16.0.34", - "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-16.0.34.tgz", - "integrity": "sha512-hCOqSUrTVZPNxD3DP+olYz/QFc8HwyZ1QZR6gTv87nIkAlvEjk44+7KblPartfBXQDd93uvasptr7dO3XCapZA==", + "version": "16.0.35", + "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-16.0.35.tgz", + "integrity": "sha512-GyyN/GA//uFt/hv7FT/jLN7loTYKYzdr0jq15Fr3lcBEzIjpYoBAb+7IlUjWzkZTkbxU6F0HvTrbTg2fZyyTBA==", + "license": "MIT", "dependencies": { "@umbraco/json-models-builders": "2.0.37", "node-fetch": "^2.6.7" diff --git a/tests/Umbraco.Tests.AcceptanceTest/package.json b/tests/Umbraco.Tests.AcceptanceTest/package.json index 09fce13b54af..694da1116902 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/package.json +++ b/tests/Umbraco.Tests.AcceptanceTest/package.json @@ -22,9 +22,9 @@ }, "dependencies": { "@umbraco/json-models-builders": "^2.0.37", - "@umbraco/playwright-testhelpers": "^16.0.34", + "@umbraco/playwright-testhelpers": "^16.0.35", "camelize": "^1.0.0", "dotenv": "^16.3.1", "node-fetch": "^2.6.7" } -} \ No newline at end of file +} From 6435588c09a479ede2f3bb48325d6a11cbc2f26a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 22 Aug 2025 13:23:01 +0200 Subject: [PATCH 112/118] use const --- .../src/packages/documents/document-types/menu/manifests.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/manifests.ts index 3712dcf334af..1e28f22619f3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/manifests.ts @@ -1,11 +1,12 @@ import { UMB_DOCUMENT_TYPE_TREE_ALIAS } from '../tree/index.js'; +import { UMB_DOCUMENT_TYPE_MENU_ITEM_ALIAS } from './constants.js'; import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace'; export const manifests: Array = [ { type: 'menuItem', kind: 'tree', - alias: 'Umb.MenuItem.DocumentTypes', + alias: UMB_DOCUMENT_TYPE_MENU_ITEM_ALIAS, name: 'Document Types Menu Item', weight: 900, meta: { @@ -21,7 +22,7 @@ export const manifests: Array = [ alias: 'Umb.Context.DocumentType.Menu.Structure', api: () => import('./document-type-menu-structure.context.js'), meta: { - menuItemAlias: 'Umb.MenuItem.DocumentTypes', + menuItemAlias: UMB_DOCUMENT_TYPE_MENU_ITEM_ALIAS, }, conditions: [ { From 7a1b50ccbbed567c30d87d5c85eb052eac3fc911 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 25 Aug 2025 13:00:31 +0200 Subject: [PATCH 113/118] correct --- .../section-sidebar-menu.section-context.token.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.token.ts index e7411f87297f..bdab53e799ff 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-context/section-sidebar-menu.section-context.token.ts @@ -1,6 +1,8 @@ +import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section'; import type { UmbSectionSidebarMenuSectionContext } from './section-sidebar-menu.section-context.js'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; export const UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT = new UmbContextToken( + UMB_SECTION_CONTEXT.contextAlias, 'UmbSectionSidebarMenuSectionContext', ); From a1baf6a81b7d58c1823660fe6685b500b8e90ba9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 25 Aug 2025 13:35:10 +0200 Subject: [PATCH 114/118] using Event Contsants for event map --- .../menu/section-sidebar-menu/section-sidebar-menu.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts index d89fd5575e81..fc50249783b4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts @@ -45,8 +45,8 @@ export class UmbSectionSidebarMenuElement< this.#extensionSlotElement.filter = (menu: ManifestMenu) => menu.alias === this.manifest?.meta?.menu; this.#extensionSlotElement.defaultElement = 'umb-menu'; this.#extensionSlotElement.events = { - 'expansion-entry-expanded': this.#onExpansionChange.bind(this), - 'expansion-entry-collapsed': this.#onExpansionChange.bind(this), + [UmbExpansionEntryExpandedEvent.TYPE]: this.#onExpansionChange.bind(this), + [UmbExpansionEntryCollapsedEvent.TYPE]: this.#onExpansionChange.bind(this), }; } From 628a274c2ec753fcccbe6d3723cebd5dcccba1d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 25 Aug 2025 14:08:26 +0200 Subject: [PATCH 115/118] comment --- .../src/packages/core/menu/components/menu/menu.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts index eba3a96f403a..9ed2c2d95d41 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu/menu.element.ts @@ -24,6 +24,7 @@ export class UmbMenuElement extends UmbLitElement { #context = new UmbDefaultMenuContext(this); override render() { + //TODO: We should probably have resolved the MENU ITEM CONTEXT not by providing it not as an API, currently this work cause menu items does not have APIs as of their manifest. But if they do this, this would be a problem. [NL] return html` Date: Mon, 25 Aug 2025 14:28:18 +0200 Subject: [PATCH 116/118] clean event listeners before adding new ones --- .../components/extension-slot/extension-slot.element.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts index 41874e9787e2..a5828e49b752 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts @@ -166,6 +166,8 @@ export class UmbExtensionSlotElement extends UmbLitElement { const events = this.#events; if (!events) return; + this.#removeEventListenersFromExtensionElement(); + Object.entries(events).forEach(([eventName, handler]) => { component.addEventListener(eventName, handler); }); From 923410e496bc28b6286d3ca2c2256ff6b7edc24e Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 25 Aug 2025 14:44:49 +0200 Subject: [PATCH 117/118] use createObservablePart --- .../expansion/menu-item-expansion.manager.ts | 27 ++++++++++++++----- 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/expansion/menu-item-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/expansion/menu-item-expansion.manager.ts index 1598232fdcbd..f18fcd9bade0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/expansion/menu-item-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/expansion/menu-item-expansion.manager.ts @@ -2,7 +2,11 @@ import type { UmbMenuItemExpansionEntryModel } from '../../menu/types.js'; import { UMB_MENU_CONTEXT } from '../../menu/constants.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import type { Observable } from '@umbraco-cms/backoffice/observable-api'; +import { + createObservablePart, + type UmbObserverController, + type Observable, +} from '@umbraco-cms/backoffice/observable-api'; import { UmbEntityExpansionManager, type UmbEntityExpansionModel } from '@umbraco-cms/backoffice/utils'; /** @@ -17,6 +21,7 @@ export class UmbMenuItemExpansionManager extends UmbControllerBase { #menuItemAlias?: string; #menuContext?: typeof UMB_MENU_CONTEXT.TYPE; + #observerController?: UmbObserverController; constructor(host: UmbControllerHost) { super(host); @@ -28,11 +33,21 @@ export class UmbMenuItemExpansionManager extends UmbControllerBase { } #observeMenuExpansion() { - if (!this.#menuItemAlias) return; - this.observe(this.#menuContext?.expansion.expansion, (items) => { - const itemsForMenuItem = items?.filter((item) => item.menuItemAlias === this.#menuItemAlias) || []; - this.#manager.setExpansion(itemsForMenuItem); - }); + if (!this.#menuContext || !this.#menuItemAlias) { + this.#observerController?.destroy(); + return; + } + + this.#observerController = this.observe( + createObservablePart( + this.#menuContext.expansion.expansion, + (items: Array) => + items?.filter((item) => item.menuItemAlias === this.#menuItemAlias) || [], + ), + (itemsForMenuItem) => { + this.#manager.setExpansion(itemsForMenuItem); + }, + ); } setMenuItemAlias(alias: string | undefined): void { From e5d76eefc05b633e14e3528ebc30bf2420c378f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 28 Aug 2025 12:25:32 +0200 Subject: [PATCH 118/118] add controller alias to observer --- .../menu-item/expansion/menu-item-expansion.manager.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/expansion/menu-item-expansion.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/expansion/menu-item-expansion.manager.ts index f18fcd9bade0..b02938e46f70 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/expansion/menu-item-expansion.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/expansion/menu-item-expansion.manager.ts @@ -47,6 +47,7 @@ export class UmbMenuItemExpansionManager extends UmbControllerBase { (itemsForMenuItem) => { this.#manager.setExpansion(itemsForMenuItem); }, + 'observeMenuExpension' ); }