Section Sidebar Menu Expansion (#19810)

* wip section menu expansion

* make section context local to each section

* split kind manifest from element file

* make generic entity expansion manager

* wip menu context

* add collapsed and expanded events

* Export new expansion entity event modules

* rename events

* dispatch events

* Set tree expansion changes in the menu context

* expand menu from workspace

* do not allow undefined

* make menu item feature folder

* Update menu-variant-tree-structure-workspace-context-base.ts

* menu: pass expansion as prop to prevent dependency on the section sidebar

* use correct event

* 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.

* 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.

* 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.

* only check if we have a local state already

* add bulk expand method

* use bulk expand method

* align naming

* mute updates

* lower threshold

* add expansion model with target

* add function to link entries

* fix self import

* export constants

* update js docs for entity expansion manager

* link entries

* fix import

* do not export from menu here

* fix import

* fix import

* align how we register manifests

* add specific managers for section sidebar menu

* use structure items

* dot not expand current item

* Refactor section sidebar menu to use programmatic extension slot

Replaces the template-based <umb-extension-slot> with a programmatically created UmbExtensionSlotElement for improved performance and UX.

* add section context extension

* register menu as section context instead of hardcoding

* rename folder

* align naming

* export extension slot elements

* fix typings

* destroy extension slot element when host is disconnected

* use entry model

* move and rename

* register global context to hold menu state across sections

* temp observe section specific expansions

* temp observe section specific expansions

* add method to collapse multiple items

* bind expansion to section

* make entity expansion manager generic

* add helper method

* remove temp test data

* include last item in target

* remove unused

* pass full entry to event

* add type for menu item expansion

* export types

* add menuItem alias

* Update types.ts

* support menu item expansion entry

* add const for menu item alias + use for breadcrumb and menu item

* add data type menu item alias const + apply to breadcrumb

* move to correct manifest

* add menu item alias to expand entries

* Update manifests.ts

* add menu structure kind types

* add kind to manifests

* add menu item context

* filter menu items

* handle menu item expansion

* clean up

* fix order

* add example dashboard and entity action

* import types

* align model type names

* align naming

* use ui component

* add guard for menu item entry

* use correct type

* Update section-sidebar-menu.element.ts

* Update entity-expansion.manager.ts

* export constants

* add menuItemAlias to manifest

* add menuItemAlias to manifest

* add menuItemAlias to manifest

* add menuItemAlias to manifest

* add menu item alias

* add menuItemAlias to manifest

* add menuItemAlias to manifest

* add menuItemAlias to manifest

* add alias

* add kind

* fix import path

* do not expand menu from modal

* collect all menu-item files in one folder

* fix lint errors

* Update content-detail-workspace-base.ts

* clean up

* rename to example

* add button to collapse everything within a section

* fix breadcrumb for non-variant structure

* reload entity

* destroy

* remove self

* Updated acceptance tests to check if a caret button is open before clicking

* Bumped version of test helpers

* use const

---------

Co-authored-by: Andreas Zerbst <[email protected]>
Co-authored-by: Niels Lyngsø <[email protected]>

Author: 3 people

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/';

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 ExampleCollapseMenuItemEntityAction extends UmbEntityActionBase<never> {
+	override async execute() {
+		const context = await this.getContext(UMB_MENU_ITEM_CONTEXT);
+		context?.expansion.collapseAll();
+	}
+}
+
+export { ExampleCollapseMenuItemEntityAction as api };

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<UmbExtensionManifest> = [
+	{
+		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',
+		},
+	},
+];

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<UmbExtensionManifest> = [...playgroundDashboardManifests, ...collapseMenuItemManifests];

src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/manifests.ts

@@ -0,0 +1,14 @@
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		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',
+		},
+	},
+];

src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts

@@ -0,0 +1,102 @@
+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,
+	type UmbSectionMenuItemExpansionEntryModel,
+} 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()
+	private _globalExpansion: Array<UmbSectionMenuItemExpansionEntryModel> = [];
+
+	@state()
+	private _sectionExpansion: Array<UmbSectionMenuItemExpansionEntryModel> = [];
+
+	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 || [];
+		});
+	}
+
+	#onCloseItem(event: PointerEvent, item: UmbSectionMenuItemExpansionEntryModel) {
+		event.stopPropagation();
+		this.#sectionContext?.expansion.collapseItem(item);
+	}
+
+	#onCollapseSection() {
+		this.#sectionContext?.expansion.collapseAll();
+	}
+
+	override render() {
+		return html` <umb-stack>
+			<uui-box headline="Open Items for this section">
+				<uui-button slot="header-actions" @click=${this.#onCollapseSection} compact>
+					<uui-icon name="icon-wand"></uui-icon>
+					Collapse All</uui-button
+				>
+				${repeat(
+					this._sectionExpansion,
+					(item) => item.entityType + item.unique,
+					(item) => this.#renderItem(item),
+				)}
+			</uui-box>
+			<uui-box headline="Open Items for all sections">
+				${repeat(
+					this._globalExpansion,
+					(item) => item.entityType + item.unique,
+					(item) => this.#renderItem(item),
+				)}
+			</uui-box>
+		</umb-stack>`;
+	}
+
+	#renderItem(item: UmbSectionMenuItemExpansionEntryModel) {
+		return html` <uui-ref-node
+			name=${item.entityType}
+			detail=${item.unique + ', ' + item.menuItemAlias + ', ' + item.sectionAlias}>
+			<uui-button slot="actions" @click=${(event: PointerEvent) => this.#onCloseItem(event, item)}>Close</uui-button>
+		</uui-ref-node>`;
+	}
+
+	static override styles = [
+		css`
+			:host {
+				display: block;
+				padding: var(--uui-size-layout-1);
+			}
+		`,
+	];
+}
+
+export { ExampleSectionSidebarMenuPlaygroundDashboard as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'example-section-sidebar-menu-playground-dashboard': ExampleSectionSidebarMenuPlaygroundDashboard;
+	}
+}

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);

src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/content-detail-workspace-base.ts

@@ -941,11 +941,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<UmbVariantId>, saveData: DetailModelType) {

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<string, unknown> = {};
 
+	@property({ type: Object, attribute: false })
+	set events(newVal: Record<string, (event: Event) => void> | undefined) {
+		this.#events = newVal;
+		if (this.#extensionsController) {
+			this.#addEventListenersToExtensionElement();
+		}
+	}
+	get events(): Record<string, (event: Event) => void> | undefined {
+		return this.#events;
+	}
+	#events?: Record<string, (event: Event) => void> = {};
+
 	@property({ type: String, attribute: 'default-element' })
 	public defaultElement?: string;
 
@@ -113,6 +125,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;
@@ -130,6 +143,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,
@@ -158,6 +172,36 @@ 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;
+
+			this.#removeEventListenersFromExtensionElement();
+
+			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;

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';