feat(pipelines): Add pipeline groups layout

[jeff-phillips-18]

What

Closes #155
Closes RHOAIENG-4186

Description

Adds a DagreGroupsLayout and PipelineDagreGroupsLayout which treats each group as its own layout. Groups are connected to tasks or other groups.

Type of change

• Feature

Screen shots / Gifs for design review

Horizontal

Vertical

/cc @andrewballantyne

Surge

https://pipeline-groups.surge.sh/

[jenny-s51]

Group layouts look awesome @jeff-phillips-18 🎉

Wondering it if would make sense to update the default label positioning to "top" in order to align with the designs and visually distinguish where the groups begin... In the vertical example, the labels for Executions 1 and 2 are positioned over forks of edges so it's a bit tricky to figure out which series of nodes the execution label refers to. WDYT @jeff-phillips-18 ?

[andrewballantyne]

Question: You have a colour shift for the internal groups -- does this mean there are only allowed one layer of groups inside groups? If not, what does it look like if another group is inside the inner group?

[jeff-phillips-18]

Question: You have a colour shift for the internal groups -- does this mean there are only allowed one layer of groups inside groups? If not, what does it look like if another group is inside the inner group?

@andrewballantyne the group background alternates:

[jeff-phillips-18]

Wondering it if would make sense to update the default label positioning to "top"

@jenny-s51 Moved them to the top for vertical layout (this is in the app code not the toolkit)

[andrewballantyne]

Design wise this lgtm -- I didn't dive into the code.

[dlabaj]

Looks good ran it locally with out any issues. Code looks good.

[github-actions]

🎉 This PR is included in version 5.3.0-prerelease.4 🎉

The release is available on:

• GitHub release
• npm package (@prerelease dist-tag)

Your semantic-release bot 📦🚀