Merge branch '22604-manual-actions' into 'master'

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:
@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](https://drive.google.com/file/d/0B2xW80W4hUf0cnJoS1RGQ2hWZlU/view)

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](https://drive.google.com/file/d/0B2xW80W4hUf0OFhZaXlKTW5mS3c/view?usp=sharing)

![Screen_Shot_2016-12-12_at_12.38.25](/uploads/8f015b0d476c832912e1530208f3d70d/Screen_Shot_2016-12-12_at_12.38.25.png)
![Screen_Shot_2016-12-12_at_12.38.31](/uploads/51de435f1120142d9683f06854d66507/Screen_Shot_2016-12-12_at_12.38.31.png)
![Screen_Shot_2016-12-12_at_12.38.39](/uploads/642e7348bcf46a03d13d8eac1cb7ce6b/Screen_Shot_2016-12-12_at_12.38.39.png)
![Screen_Shot_2016-12-12_at_12.40.00](/uploads/781743893bc14cf05f4b8f258e2b58ba/Screen_Shot_2016-12-12_at_12.40.00.png)


Tooltip before
![Screen_Shot_2016-12-06_at_11.29.54](/uploads/b16c0434981a89fb68c4c053c2f1d6e6/Screen_Shot_2016-12-06_at_11.29.54.png)
Tooltip after
![Screen_Shot_2016-12-06_at_11.56.03](/uploads/e5e0ede0f3f8a5434e98373ab8a72500/Screen_Shot_2016-12-06_at_11.56.03.png)


## Does this MR meet the acceptance criteria?
- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [x] Added for this feature/bug
  - [ ] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #22604


See merge request !7931

1 files changed, 6 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 9a4685504ff..267fcd77b38 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -524,3 +524,9 @@ $body-text-shadow: rgba(255,255,255,0.01);
 */
 $ui-dev-kit-example-color: #bbb;
 $ui-dev-kit-example-border: #ddd;
+
+/*
+Pipeline Graph
+*/
+$stage-hover-bg: #eaf3fc;
+$stage-hover-border: #d1e7fc;