Updating pipeline graph looks including mobile support + support for automatic positioning to reduce context switching
Problem to solve
Currently, the pipeline graph is overloaded with unnecessary styling. This styling also prevents us from adding useful data and useful styling to the graph nodes (With this we can think of removing the job list and try to depend purely on the graph, this though can be done in a separate iteration as it would need some additional data to be represented). Additionally, this new design is able to support mobile viewports.
Scoped off from https://gitlab.com/gitlab-org/gitlab-ee/issues/2122 we need to solve the jarring experience when expanding upstream/downstream pipelines (EE) by making it possible to dictate the graphs horizontal position. This refactor is needed in order to be able to do that.
Further details
This was scoped off from https://gitlab.com/gitlab-org/gitlab-ee/issues/2122#note_117374817
Solution
Prototype
Prototype: https://framer.cloud/gAgce/index.html
Mockups
expand to see mockups
Graph + downstream expansion
Skeleton loading
Mouse interactions
Mobile designs
| Upstream collapsed | Upstream expanded | Dropdown active and mobile accessible (this has not yet been defined officially and is being handled in https://gitlab.com/gitlab-org/design.gitlab.com/issues/158) |
|---|---|---|
 |
 |
 |
notes
This iteration will include:
- Visual improvements
- Getting rid of individual node lines
- Stages and their jobs are rendered as lists with just 1 connecting line connecting them
- Upstream/downstream pipelines are rendered differently from jobs
- Pipeline graph space will now be full screen width
- Dropdown inner action button styling adjusted (now similar to web ide)
- Skeleton loading is implemented and follows color and animation definitions as detailed in https://design.gitlab.com/components/skeleton-loader
- Function improvements as per https://gitlab.com/gitlab-org/gitlab-ee/issues/2122#note_121841770 and https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/8607#note_121835732
-
Recursive expanding of upstream and downstream pipelines(Scoped off to https://gitlab.com/gitlab-org/gitlab-ee/issues/8688) - Positioning of expanded/collapsed pipelines into view to create a less jarring/context switching experience
-
This will now include the functionality for https://gitlab.com/gitlab-org/gitlab-ce/issues/28741 as well:
| Mockup of #28741 (closed) functionality |
|---|
 |
What does success look like, and how can we measure that?
- Pipeline graph is accessible from mobile
- Pipeline graph doesn't feature unnecessary styling and css anymore
- We are able to extend the pipeline graph with information to completely replace the jobs list in the pipeline detail view.