Rewrite DMN Editor's "Decision Navigator" panel in React

[tiagobento]

This issue was a placeholder for a component that would bring parity between the existing GWT-based DMN Editor with the new React-based one. However, during development, the idea to replace the "Decision Components" panel with a "External Nodes" panel was introduced. This leaves the "Decision Navigator" containing only the "Decision Graphs" panel, which is essential for the multiple DRDs experience.

As we're temporarily not introducing a multiple DRD experience to the new React-based DMN Editor, I think instead of rewriting this panel, we should think of a new solution that would make it easier to understand multiple DRDs on the Editor. It can be that we find out that the current solution is already great, so we can simple come back to this issue and rewrite it.

[tiagobento]

I actually think we should get rid of the "Decision Components" panel that we have on the GWT-based DMN Editor.

The way I see it, it's most useful purpose is to add nodes from included models.. I actually sketched an idea that I like much better than the current approach. I called it "External Nodes panel" (wow!)

The design is still a little rough, but adding some filters to it should do it. I'd love to hear feedback. cc @porcelli @yesamer

NOTE: I'm dragging the "Sum and Diff DS" node from the "External Nodes panel" on the screenshot at the right-hand-side.

[porcelli]

+1 :)

unless has some level of implication for SPEC reasons - which I'd argue the proposal could be called the same thing :)

[tiagobento]

The "Decision Graphs" component I think can be reimagined too... but I think we can leave this discussion for when we re-introduce multiple DRDs to the new DMN Editor.

[yesamer]

@tiagobento I confirm the goal of that panel is to drag and drop the Included Model's nodes. I like your idea, so +1 from me as well. I guess that UI appears in the case of imported models only, right?

[jomarko]

Thank you for the new UI. my only concern is the final implementation where like 10+ models are included in diagram, what I think is possible in enterprise solutions, however I do not know how often case it could be.

For more included models panel seems to me as more appropriate than popup. Just my point of view.

[tiagobento]

@jomarko That's a great point... My goal was to bring the external nodes closer to the actual nodes in the Palette, as users can think "Adding nodes is done from the panels at the right-hand-side of the screen". A downside of the panel is that it could not be used together with the Properties panel.. and to be honest, I don't really like the jumping back & forth between panels on the current DMN Editor..

For the cases where there are A LOT of external nodes available, we can add a filter at the top, and also, limit the Popover to not grow outside the borders of the Editor, much like what we do with the File switcher, at the KIE Sandbox Editor page...

@yesamer Almost. I added a nice Empty State, which guides users to include models if necessary.

Although this screenshot is a little chaotic, it shows that users don't need to hide sections of the screen to access others.

NOTE: There's a weird padding-right at the Empty Nodes panel I need to fix 🙈

[tiagobento]

Oh, and btw, there's still the Included Models tab:

[tiagobento]

This will be done as part of

• Build a first version of the new React-based DMN Editor with ~90% feature parity with the current GWT-based one #577