Section Sidebar Menu Expansion #19810
Open
+1,506
−233
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
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.
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.
…co/Umbraco-CMS into v16/feature/menu-expansion
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a comprehensive Section Sidebar Menu expansion state management system across sections in the Umbraco backoffice. The implementation adds the ability to remember menu expansion states across different sections and provides synchronized state management through global, section, and menu item contexts.
- Implements three-tiered context architecture (Global, Section, Menu Item) for expansion state management
- Adds automatic menu expansion for workspace breadcrumb navigation
- Updates test automation helpers to use consistently named methods for tree expansion
Reviewed Changes
Copilot reviewed 137 out of 141 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| tests/Umbraco.Tests.AcceptanceTest/package.json | Updates test helper package version to support new expansion method names |
| tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig//.spec.ts | Updates test methods from clickCaretButton* to openCaretButton* for consistency |
| src/Umbraco.Web.UI.Client/src/packages/core/utils/expansion/ | Adds new entity expansion utilities and manager for state management |
| src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu/ | Implements section-specific menu expansion contexts and managers |
| src/Umbraco.Web.UI.Client/src/packages/core/menu/components/ | Adds menu and menu item expansion management components |
| src/Umbraco.Web.UI.Client/src/packages/*/menu/manifests.ts | Updates menu item manifests to include menu structure workspace context configuration |
| src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/ | Adds example playground dashboard and entity action demonstrating the new functionality |
Files not reviewed (1)
- tests/Umbraco.Tests.AcceptanceTest/package-lock.json: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
| 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', |
There was a problem hiding this comment.
This hardcoded alias should use a constant like other manifests. Consider importing UMB_DOCUMENT_TYPE_MENU_ITEM_ALIAS from the constants file to maintain consistency.
Suggested change
| menuItemAlias: 'Umb.MenuItem.DocumentTypes', | |
| menuItemAlias: UMB_DOCUMENT_TYPE_MENU_ITEM_ALIAS, |
Copilot uses AI. Check for mistakes.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds functionality to remember the Section Sidebar Menu state across sections. It also introduces different contexts to interact with the menu from the backoffice. The state remains synchronized across all contexts. No matter where the state is updated, it will be reflected in the related contexts.
The PR includes a sample playground that demonstrates the current state for the section and across sections via dashboards. It is possible to close any open menu item from the dashboard. The example also registers a "Collapse Menu Item"-entity action to show interaction with a local menu item state.
Demo video of the example:
https://github.com/user-attachments/assets/d1267a87-f76e-42aa-a8d5-aa76e6a53741
Global State
UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXTWraps the entire application and tracks states for all sections.
Section State
UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXTWraps a section and tracks the state for all menu items inside a section
Menu Item State
UMB_MENU_ITEM_CONTEXTWraps the menu item and tracks the state for this menu item.
Partly fix of #17074
Partly fix of #17076
Additional PRs coming to support deep link into paginated tree structure menus and remembering the last visited item when navigating between sections.