What does this MR do?
Improves the pipeline graph:
- add actions to each node
- always show the status icon
- improves style
- adds new icons to use only on the pipeline graph
- fixes tooltip body
- adds partial to render the graph node
This MR does not implements 100% of the mockups - https://gitlab-org.gitlab.io/gitlab-design/progress/dimitrie/pipelines-graphic/22604-spec-previews/#artboard0
As you can see in the mockups, each node has 2 separate hover states, one for the all content and one for the action icon. In order to not hover the all content when we hover the action icon we would need to refactor the all HTML & CSS of all the pipeline graph, lines included. The hover problem can be seen in the following video. video
As you can see in the video, the build node is hovered even when the mouse seems to be far from the element.
It does not seem wise to me to change the HTML & CSS now for two reasons:
- we would need to rewrite almost everything;
- we will probably rewrite everything when we move this to vue.
Given the latter point, and considering it will be a bug effort to make the hover states equal to the mockups, I suggest we do that when we rewrite the all view. This is fixable, though, but requires some effort & time.
I can, although, be missing something. @annabeldunstone do you see any quick/easy fix here?
Screenshots (if relevant)
Does this MR meet the acceptance criteria?
Changelog entry added
API support added
Added for this feature/bug
All builds are passing
Conform by the merge request performance guides
Conform by the style guides
Branch has no merge conflicts with
master(if it does - rebase it please)
Squashed related commits together
What are the relevant issue numbers?
Closes #22604 (closed)