Resolve "Manual actions on pipeline graph" (!7931) · Merge Requests · GitLab.org / GitLab FOSS

Resolve "Manual actions on pipeline graph"

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

Hover state:

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?