feat: integrate create/append anything

[nikku]

Integrates the create/append anything UI with the modeler:

---

Known issues:

• Typing in search box does not work (modeler does recognize global shortcuts)
• Keybindings for r (replace with anything) and a (append anything) not connected
• Multiple toggle of ad-hoc marker in sub-process fails
• App footer is z-index=1000, making it impossible to overlap it (cf. screen capture)

---

Depends on bpmn-io/bpmn-js-connectors-extension#20
Closes #2820

---

Build artifacts:

• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/2820-integrate-create-append-anything/camunda-modeler-2820-integrate-create-append-anything-linux-x64.tar.gz
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/2820-integrate-create-append-anything/camunda-modeler-2820-integrate-create-append-anything-mac.dmg
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/2820-integrate-create-append-anything/camunda-modeler-2820-integrate-create-append-anything-mac.zip
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/2820-integrate-create-append-anything/camunda-modeler-2820-integrate-create-append-anything-win-ia32.zip
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/2820-integrate-create-append-anything/camunda-modeler-2820-integrate-create-append-anything-win-x64.zip

[pinussilvestrus]

Although I'm pretty hyped about this feature (behind a feature toggle or not), shouldn't we have a base test coverage for the extension before merging it?

[nikku]

Shouldn't we have a bpmn-io/bpmn-js-connectors-extension#12 for the extension before merging it?

Absolutely. More importantly though we need to validate that this goes into the right direction (also feature wise) and decide if this should or should not be 5.0.0 scope. This PR is the foundation for that discussion 🙂.

[nikku]

@MaxTru @christian-konrad I've promised a little update what/if we can deliver the new modeling UX with the Camunda Modeler 5.0.

My assessment is, yes, with a little work remaining to properly integrate it with Camunda Modeler, potentially even with 5.0.0 (cf. list of know issues). We should however not ship the limited "append connector" variant, but a scalable create/append anything experience showcased in this PR.

Please take a few minutes to review what is inside this Pr and let us follow up on it (later today!).

---

See also bpmn-io/bpmn-js-connectors-extension#20

See also connectors solution architecture.

[MaxTru]

I tested the PR. Please notice that I looked at this without the connectors glasses on. So we should IMO ensure, that this adds value in all use cases.

• I really really like this feature and think it improves our existing create/append experience. Hence I personally would like to have it asap :-) <3
• For me must-dos prior to integration (on top of the existing ones are):
  • Keyboard shortcuts are active when typing the menu (e.g., s starts snipping tool)
• What I would revisit optionally is:
  • The * icon is "okay", but maybe Design could have a look (my personal impression)
  • Why do the Templates elements not have a symbol preview?
  • I think we need to test, how create/append templates for element templates for non-activities (e.g., events, even SubProcess is possible) behaves
  • For C7 no templates can be created / appended (for C8 it works)

[nikku]

The * icon is "okay", but maybe Design could have a look (my personal impression)

Also feedbacked by @CatalinaMoisuc earlier today.

[nikku]

Feedbacked by @SebastianStamm today:

What about making the append / replace options entirely dynamic?

Tracked this via bpmn-io/bpmn-js-create-append-anything#3. I think it requires a bunch of additional thoughts.

[nikku]

For C7 no templates can be created / appended (for C8 it works)

@MaxTru This is intentional, as we decided to not implement ElementTemplates#createElement for C7. I don't believe this to be a blocker, too. But happy to discuss.

See also bpmn-io/bpmn-js-connectors-extension#17 (comment).

[nikku]

The * icon is "okay", but maybe Design could have a look (my personal impression)

I second this. My initial proposal was a simple +. Alternatively, a ... "append/create something else" would do, too.

[christian-konrad]

If we decide on and add it like this, we should measure it's adoption/usage right from the beginning:

• How many model elements were created the new way vs. the "old" way?

We can therefore decide in the future, if

• We need to course-correct user behaviour
• We have to tweak the UX a little bit more
• We may drop the "legacy" way of appending (if "append only" : "legacy append" ratio is suitable)

[ingorichtsmeier]

Hi @nikku,

This is intentional, as we decided to not implement ElementTemplates#createElement for C7.

What would be the effort, in case a customer would ask for this feature? S, M, XL or XXXXL?

[MaxTru]

For C7 no templates can be created / appended (for C8 it works)

@MaxTru This is intentional, as we decided to not implement ElementTemplates#createElement for C7. I don't believe this to be a blocker, too. But happy to discuss.

See also bpmn-io/bpmn-js-connectors-extension#17 (comment).

Agreed. Updated my comment.

[nikku]

@ingorichtsmeier How can the customer ask? She does not know it yet, right? 😉

The effort would be M. As discusse with @pinussilvestrus there is quick hacks / workarounds that we can do to not fully rebuild it from scratch for C7 (which has a large element template supported feature set).

[nikku]

#2848 (comment)

@christian-konrad Agreed, not sure though if we have the numbers for now ("old state"). What I'd suggest is that we track adoption of the bits added.

How many model elements were created the new way vs. the "old" way?

This would be "how many nodes did we model new way vs. old way", where new way is:

• Search used in create/replace/append menu
• Create anything / append anything used in the first place

[nikku]

Quick summary of a session with @MaxTru and @christian-konrad:

• Decision (@christian-konrad): We'll not ship this with 5.0 for different reasons; one is that we want to closely track feature adoption.

• In the future we'll likely need to consider merging connectors focused UI and create/append anything. One option is to have both on the canvas:

I'm leaving this PR open; to be potentially picked up in Q2 or closed if priorities change.

[nikku]

Regarding #2848 (comment), this is a version that uses ... instead of *, a feedback that I've received a few times:

[christian-konrad]

Found some issues:

• While typing in the search bar, pressing keys like "e" moves the focus out of the bar and triggers the corresponding shortcut.
• "Script Task" is missing in tasks and only appears when typing "script"
• After appending a new dedicated task/element/connector, the text input overlay hides the icon, thus confuses the user (was this the right selection?), see Direct editing box hides underlying element bpmn-io/diagram-js-direct-editing#23

Additional feedback:

• We may elaborate if we could make the palette "smart", like suggesting nodes that are used most often (tasks after gateways, for example), similar to Make create/append actions context aware bpmn-io/bpmn-js-create-append-anything#3, but I am totally unsure about this

[nikku]

"Script Task" is missing in tasks and only appears when typing "script"

While experimental, this is a feature, not a bug. We encourage users to model what is reasonable and hide everything else behind search (for discovery). Same applies for example for manual tasks (discouraged; no-op) and inclusive gateway (wanky implementation semantics).

But generally speaking: Make things that we encourage to user easy to discover; make everything else discoverable via "second read". That is the direction should go.

For example we could unfeature blank tasks and intermediate events in the same spirit to encourage "modeling for execution".

[nikku]

Dots ... are now the icon for "appending / creating anything":

[MaxTru]

Dots ... are now the icon for "appending / creating anything":

👍 for ...
👎 for *

[nikku]

Integrated.