Skip to content

feat: group create and append menu elements into categories#88

Draft
AlekseyManetov wants to merge 1 commit into
mainfrom
create-append-menu-groups
Draft

feat: group create and append menu elements into categories#88
AlekseyManetov wants to merge 1 commit into
mainfrom
create-append-menu-groups

Conversation

@AlekseyManetov

@AlekseyManetov AlekseyManetov commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Proposed Changes

Related to camunda/camunda-modeler#6037

The create and append popup menus previously showed every element in one long, flat list. This reorganizes them into clear, browsable categories so users can find the right element faster and understand what each one does.

  • Browsable categories instead of one long list. Elements are grouped into Tasks, Gateways, Sub-processes, Events, Data, Participants, and Templates. You drill into a category to see its elements, rather than scrolling a single flat list.
  • Plain-language descriptions. Every category and element now has a short description explaining what it is and when to use it — helpful for newcomers and anyone unsure which element they need.
  • Category icons for quick scanning. Each category shows an icon so the list is easy to scan at a glance.
  • Events split by kind. The large set of events is broken into Start, Intermediate catch, Intermediate throw, Boundary, and End, so the event list is no longer overwhelming.
  • Templates in their own group. Element templates (including connectors) live under a dedicated Templates category, clearly separated from the built-in BPMN elements.
  • Search still spans everything. Typing in the search box filters across all categories at once, so power users can jump straight to an element without drilling in.
  • Wider menu. The menu is wider so descriptions read comfortably.
Screen.Recording.2026-07-10.at.16.44.35.mov

Try it:

npx @bpmn-io/sr bpmn-io/bpmn-js-create-append-anything#create-append-menu-groups

Checklist

Ensure you provide everything we need to review your contribution:

  • Contribution meets our definition of done
  • Pull request establishes context
    • Link to related issue(s), i.e. Closes {LINK_TO_ISSUE} or Related to {LINK_TO_ISSUE}
    • Brief textual description of the changes
    • Screenshots or short videos showing UI/UX changes
    • Steps to try out, i.e. using the @bpmn-io/sr tool

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR reorganizes the create/append popup menu entries into a nested, drill-in category structure (with descriptions and icons), and adjusts element-template integration and tests to work with the new nested entries format.

Changes:

  • Introduces a shared buildMenuEntries utility to generate nested (drill-in) popup menu entries from a category/options tree.
  • Replaces the previous flat CREATE_OPTIONS list with a categorized CREATE_OPTIONS_TREE (including per-entry descriptions and event sub-categories).
  • Wraps element template entries under a dedicated “Templates” drill-in group and updates tests/helpers to locate nested entries.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
test/TestHelper.js Adds findMenuEntry helper to locate nested (drill-in) menu entries by id.
test/spec/element-templates/create-menu/ElementTemplatesCreateProvider.spec.js Updates create-menu template tests to work with nested menu entries and Templates drill-in group.
test/spec/element-templates/append-menu/ElementTemplatesAppendProvider.spec.js Updates append-menu template tests to trigger actions via nested entry lookup.
test/spec/create-append-anything/create-menu/CreateMenuProvider.spec.js Adds assertions for grouped create-menu structure and updates triggering to use nested entries.
test/spec/create-append-anything/append-menu/AppendMenuProvider.spec.js Updates append-menu action triggering to use nested entry lookup.
lib/util/PopupMenuEntriesUtil.js New shared utility to build nested popup menu entries from a category/options tree.
lib/util/CreateOptionsUtil.js Adds descriptions and introduces CREATE_OPTIONS_TREE with event sub-categories; removes old flat grouping approach.
lib/element-templates/util/entryBuilder.js Adds a Templates drill-in wrapper (templatesGroup) with an SVG icon.
lib/element-templates/create-menu/ElementTemplatesCreateProvider.js Wraps template entries under a Templates drill-in group.
lib/element-templates/append-menu/ElementTemplatesAppendProvider.js Wraps template entries under a Templates drill-in group.
lib/create-append-anything/create-menu/CreatePaletteProvider.js Widens the create menu UI (300 → 360).
lib/create-append-anything/create-menu/CreateMenuProvider.js Switches create menu entries to be generated from CREATE_OPTIONS_TREE via buildMenuEntries.
lib/create-append-anything/append-menu/AppendMenuProvider.js Switches append menu entries to be generated from CREATE_OPTIONS_TREE via buildMenuEntries with filtering.
lib/create-append-anything/append-menu/AppendContextPadProvider.js Widens the append menu UI (300 → 360).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines 40 to 42
* @param {djs.model.Base} element
*
* @return {Array<Object>} a list of menu entry items
Comment on lines 49 to 52
* @param {djs.model.Base} element
*
* @return {Array<Object>} a list of menu entry items
*/
Comment thread test/TestHelper.js
Comment on lines +74 to +88
export function findMenuEntry(entries, id) {
for (const key in entries) {
if (key === id) {
return entries[key];
}

const found = entries[key].entries && findMenuEntry(entries[key].entries, id);

if (found) {
return found;
}
}

return null;
}
Comment on lines +58 to +62
return buildMenuEntries(CREATE_OPTIONS_TREE, {
idPrefix: 'append',
translate: this._translate,
filter: (option) => this._includeOption(option),
createAction: (option) => this._createEntryAction(element, option.target)
@AlekseyManetov

Copy link
Copy Markdown
Contributor Author
image

Since we also want descriptions in the replace menu (which lives in bpmn-js), the shared element definitions (label, icon, description) need to move into bpmn-js so they can be reused across the create, append, and replace menus.

I've moved this PR to Draft to land that prerequisite change in bpmn-js first.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

in progress Currently worked on

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants