Skip to content

Resolve "Manual actions on pipeline graph"

Filipa Lacerda requested to merge 22604-manual-actions into master

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:

@dimitrieh

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)

video

Screen_Shot_2016-12-12_at_12.38.25 Screen_Shot_2016-12-12_at_12.38.31 Screen_Shot_2016-12-12_at_12.38.39 Screen_Shot_2016-12-12_at_12.40.00

Tooltip before Screen_Shot_2016-12-06_at_11.29.54 Tooltip after Screen_Shot_2016-12-06_at_11.56.03

Does this MR meet the acceptance criteria?

What are the relevant issue numbers?

Closes #22604 (closed)

Merge request reports