Implement popupMenu with improved UI

[smbea]

What should we do?
We want to replace the old popup UI menu with a new and improved UI, which includes searching.

To do:

• Integrate diagram-js-ui
• Implement new UI and replace old popupMenu
  • Have backwards compatibility
  • Improve popup menu foundations
    • Allow grouping, descriptions, documentation url
• Prioritize and fix most pressing known issues
  • Keyboard accessible
  • Popup menu container within canvas

Initial implementation concluded by #687

Identified bugs/improvements:

• Popup menu trigger action doesn't work for header entries #695

Why should we do it?
Preparation to support append anything - see bpmn-io/bpmn-js#1627

---

Child of bpmn-io/bpmn-js#1627

[smbea]

My working branch for this is: https://github.com/bpmn-io/diagram-js/tree/replace-popup-menu

Some properties are customizable (to be passed on by bpmn-js) so they won’t appear at the moment but they are tested:

• menu title
• if searchable (default yes if more than 5 entries)
• custom min-width (width is defined by width of entries, so it varies with searching)

[marstamm]

I tested out the current branch of bpmn-js (commit (bpmn-io/bpmn-js@d6a7c0d)),

Overall, it works great. I'll add all my observations here, they might double what is already planned (e.g. min width, according to https://camunda.slack.com/archives/GP70M0J6M/p1667212511108699).

min-width

• The search box is getting while filtering, which can be confusing. We should consider adding min-width
  

• Should we add an empty state, when filtering does not match anything? This might just be because of the missing min-width as well
  

Highlights

When I have header items and hover over them, multiple elements are highlighted (Multi-Instance and Replace Item). I think this can be confusing and we should only highlight the focused item

Search

When the search bar is not visible (< 5 Items), I can still type to search. We should disable this, as there is no visual feedback of what's happening. Here, an empty state ("no Items found") might also help.

Alternative here: always have a visible search bar

[smbea]

RE @marstamm

Regarding the min-width:
This is a tricky one because we need to think of this as as not just the context pad replace menu but also any popup menu. And the min width that makes sense for replace might not be the same for other menus. For example, if we added a min-width that makes sense for replace, it would look like this in align and distribute:

This is why I added a small min-width of 120px that works for all and the possibility to pass on a minWidth as a prop. If present, then it will be applied. This would be added when popup menu is opened (in bpmn-js or wtv): popupMenu.open(..., menuOptions: {title, search, minWidth})

Regarding the empty state and highlighted items:
Makes sense to me! Will look these over

Regarding the search:
The reason for removing is that it may look unnecessary in some cases (like align):

It is always a possibility but I will look into blocking the search feature when the search bar is not displayed.

[marstamm]

Good point regarding the min-width. I like the option to make it configurable, so it works for both cases

[smbea]

I fixed the remaining points (keeping the min width config to be added through ‘popup.open’ args), and opened #687

[smbea]

I decided to replace the configurable option minWidth for width because not having a set width was causing some issues, for example:

Screen.Recording.2022-11-08.at.21.49.03.mov

This way the width can be configured when/how it is needed by each menu.