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

• [x] Feature

Screen shots / Gifs for design review

Horizontal

Vertical

/cc @andrewballantyne

Surge

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

[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.

[github-actions[bot]]

:tada: This PR is included in version 5.3.0-prerelease.4 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket: