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

app/assets/stylesheets/framework/dropdowns.scss

@@ -98,7 +98,7 @@
   @extend .dropdown-toggle;
   padding-right: 20px;
   position: relative;
-  width: 160px;
+  width: 163px;
   text-overflow: ellipsis;
   overflow: hidden;
 

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;

app/assets/stylesheets/pages/pipelines.scss

@@ -288,15 +288,40 @@
 }
 
 // Pipeline visualization
+.pipeline-actions {
+  border-bottom: none;
+}
 
-.toggle-pipeline-btn {
-  background-color: $white-normal;
+.tab-pane {
+  &.pipelines {
+    .ci-table {
+      min-width: 900px;
+    }
 
-  &.graph-collapsed {
-    background-color: $white-light;
+    .content-list.pipelines {
+      overflow: auto;
+    }
+
+    .stage {
+      max-width: 100px;
+      width: 100px;
+    }
+
+    .pipeline-actions {
+      min-width: initial;
+    }
+  }
+
+  &.builds {
+    .ci-table {
+      tr {
+        height: 71px;
+      }
+    }
   }
 }
 
+// Pipeline graph
 .pipeline-graph {
   width: 100%;
   background-color: $gray-light;
@@ -305,21 +330,21 @@
   white-space: nowrap;
   transition: max-height 0.3s, padding 0.3s;
 
-  &.graph-collapsed {
-    max-height: 0;
-    padding: 0 16px;
+  ul {
+    padding: 0;
   }
-}
 
-.pipeline-visualization {
-  position: relative;
+  a {
+    text-decoration: none;
+    color: $gl-text-color-light;
+  }
 
-  ul {
-    padding: 0;
+  svg {
+    vertical-align: middle;
+    margin-right: 3px;
   }
-}
 
-.stage-column {
+  .stage-column {
     display: inline-block;
     vertical-align: top;
 
@@ -353,135 +378,120 @@
       list-style: none;
     }
 
-  .stage-name {
-    margin: 0 0 15px 10px;
-    font-weight: bold;
-    width: 176px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    &:last-child {
+      .build {
+        // Remove right connecting horizontal line from first build in last stage
+        &:first-child {
+          &::after {
+            border: none;
+          }
+        }
+        // Remove right curved connectors from all builds in last stage
+        &:not(:first-child) {
+          &::after {
+            border: none;
+          }
+        }
+        // Remove opposite curve
+        .curve {
+          &::before {
+            display: none;
+          }
+        }
+      }
     }
 
+    &:first-child {
       .build {
-    border: 1px solid $border-color;
-    background-color: $white-light;
-    position: relative;
-    padding: 7px 10px 8px;
-    border-radius: 30px;
-    width: 186px;
-    margin-bottom: 10px;
-
-    &:hover {
-      background-color: $gray-lighter;
+        // Remove left curved connectors from all builds in first stage
+        &:not(:first-child) {
+          &::before {
+            border: none;
+          }
+        }
+        // Remove opposite curve
+        .curve {
+          &::after {
+            display: none;
           }
-
-    &.playable {
-
-      svg {
-        height: 13px;
-        width: 20px;
-        position: relative;
-        top: 1px;
-
-        path {
-          fill: $layout-link-gray;
         }
       }
     }
 
-    .build-content {
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-      width: 164px;
+    // Curve first child connecting lines in opposite direction
+    .curve {
+      display: none;
 
-      .ci-status-icon {
-        svg {
-          height: 20px;
-          width: 20px;
-        }
+      &::before,
+      &::after {
+        content: '';
+        width: 21px;
+        height: 25px;
+        position: absolute;
+        top: -32px;
+        border-top: 2px solid $border-color;
       }
 
-      .tooltip {
-        white-space: nowrap;
+      &::after {
+        left: -44px;
+        border-right: 2px solid $border-color;
+        border-radius: 0 20px;
+      }
 
-        .tooltip-inner {
-          overflow: hidden;
-          text-overflow: ellipsis;
+      &::before {
+        right: -44px;
+        border-left: 2px solid $border-color;
+        border-radius: 20px 0 0;
+      }
     }
   }
 
-      .ci-status-text {
-        width: 135px;
+  .stage-name {
+    margin: 0 0 15px 10px;
+    font-weight: bold;
+    width: 176px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-        vertical-align: middle;
-        display: inline-block;
-        position: relative;
-        top: -1px;
-      }
-
-      a {
-        color: $gl-text-color-light;
-        text-decoration: none;
   }
 
-      .dropdown-menu-toggle {
-        background-color: transparent;
-        border: none;
-        width: auto;
-        padding: 0;
-        color: $gl-text-color-light;
-        flex-grow: 1;
-
-        .ci-status-text {
-          max-width: 112px;
-          width: auto;
-        }
-      }
-
-      .grouped-pipeline-dropdown {
-        padding: 0;
+  .build {
+    border: 1px solid $border-color;
+    border-radius: 30px;
+    background-color: $white-light;
+    position: relative;
+    padding: 8px 4px 9px 10px;
     width: 186px;
-        left: auto;
-        right: -197px;
-        top: -9px;
-
-        ul {
-          max-height: 245px;
-          overflow: auto;
+    margin-bottom: 10px;
+    white-space: normal;
 
-          li:first-child {
-            padding-top: 8px;
-          }
+    &:hover {
+      background-color: $stage-hover-bg;
+      border: 1px solid $stage-hover-border;
 
-          li:last-child {
-            padding-bottom: 8px;
-          }
+      a,
+      .dropdown-counter-badge,
+      .dropdown-menu-toggle {
+        color: $gl-text-color;
       }
 
-        a {
-          color: $gl-text-color;
-          padding: 7px 8px 8px;
+      .grouped-pipeline-dropdown a {
+        color: $gl-text-color-light;
 
         &:hover {
-            background-color: $blue-light-transparent;
-            border-radius: 3px;
-
-            .ci-status-text {
-              text-decoration: none;
+          color: $gl-text-color;
         }
       }
     }
 
-        svg {
-          width: 14px;
-          height: 14px;
+    .ci-status-icon {
+      position: relative;
+      top: 1px;
     }
 
-        .ci-status-text {
-          width: 112px;
+    .ci-status-icon svg {
+      height: 20px;
+      width: 20px;
     }
 
     .arrow {
@@ -511,20 +521,6 @@
         border-right-color: $white-light;
       }
     }
-      }
-
-      .badge {
-        background-color: $gray-darker;
-        color: $gl-text-color-light;
-        font-weight: normal;
-        margin-left: $btn-xs-side-margin;
-      }
-    }
-
-    svg {
-      vertical-align: middle;
-      margin-right: 5px;
-    }
 
     // Connect first build in each stage with right horizontal line
     &:first-child {
@@ -532,7 +528,7 @@
         content: '';
         position: absolute;
         top: 48%;
-        right: -48px;
+        right: -49px;
         border-top: 2px solid $border-color;
         width: 48px;
         height: 1px;
@@ -580,91 +576,110 @@
     }
   }
 
-  &:last-child {
-    .build {
-      // Remove right connecting horizontal line from first build in last stage
-      &:first-child {
-        &::after {
-          border: none;
-        }
-      }
-      // Remove right curved connectors from all builds in last stage
-      &:not(:first-child) {
-        &::after {
-          border: none;
-        }
-      }
-      // Remove opposite curve
-      .curve {
-        &::before {
-          display: none;
-        }
-      }
-    }
+  .ci-status-text {
+    max-width: 110px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+    display: inline-block;
+    position: relative;
+    font-weight: 100;
   }
 
-  &:first-child {
-    .build {
-      // Remove left curved connectors from all builds in first stage
-      &:not(:first-child) {
-        &::before {
+  .dropdown-menu-toggle {
+    background-color: transparent;
     border: none;
+    padding: 0;
+    color: $gl-text-color-light;
+    white-space: normal;
+    overflow: visible;
+
+    &:focus {
+      outline: none;
     }
-      }
-      // Remove opposite curve
-      .curve {
-        &::after {
-          display: none;
+
+    &:hover {
+      color: $gl-text-color;
+
+      .dropdown-counter-badge {
+        color: $gl-text-color;
       }
     }
   }
+
+  .dropdown-counter-badge {
+    float: right;
+    clear: right;
+    color: $border-color;
+    font-weight: 100;
+    font-size: 15px;
+    margin-right: 2px;
   }
 
-  // Curve first child connecting lines in opposite direction
-  .curve {
-    display: none;
+  .grouped-pipeline-dropdown {
+    padding: 0;
+    width: 191px;
+    left: auto;
+    right: -206px;
+    top: -11px;
+    box-shadow: 0 1px 5px $black-transparent;
 
-    &::before,
-    &::after {
-      content: '';
-      width: 21px;
-      height: 25px;
-      position: absolute;
-      top: -32px;
-      border-top: 2px solid $border-color;
-    }
+    a {
+      display: inline-block;
 
-    &::after {
-      left: -44px;
-      border-right: 2px solid $border-color;
-      border-radius: 0 20px;
+      &:hover {
+        background-color: $stage-hover-bg;
+      }
     }
 
-    &::before {
-      right: -44px;
-      border-left: 2px solid $border-color;
-      border-radius: 20px 0 0;
+    ul {
+      max-height: 245px;
+      overflow: auto;
+      margin: 5px 0;
+
+      li {
+        margin: 0 5px;
+        padding-left: 0;
+        padding-bottom: 0;
+        margin-bottom: 0;
+        line-height: 1.2;
       }
     }
-}
 
-.pipeline-actions {
-  border-bottom: none;
-}
+    .dropdown-build {
+      color: $gl-text-color-light;
 
-.toggle-pipeline-btn {
+      a.ci-action-icon-container {
+        padding: 0;
+        font-size: 11px;
+        float: right;
+        margin-top: 4px;
+        display: inline-block;
+        position: relative;
 
-  .fa {
-    color: $gl-gray-light;
+        i {
+          font-size: 11px;
+          margin-top: 0;
+        }
       }
-}
 
-.tab-pane {
+      &:hover {
+        background-color: $stage-hover-bg;
+        border-radius: 3px;
+        color: $gl-text-color;
+      }
 
-  &.pipelines {
+      .ci-action-icon-container {
+        i {
+          width: 25px;
+          height: 25px;
 
-    .ci-table {
-      min-width: 900px;
+          &::before {
+            top: 1px;
+            left: 1px;
+          }
+        }
       }
 
       .stage {
@@ -672,17 +687,50 @@
         width: 100px;
       }
 
-    .pipeline-actions {
-      min-width: initial;
+      .ci-status-icon svg {
+        height: 18px;
+        width: 18px;
+      }
+
+      .ci-status-text {
+        max-width: 95px;
+        padding-bottom: 3px;
+        position: relative;
+        top: 3px;
       }
     }
+  }
+}
 
-  &.builds {
+// Action Icons
+.ci-action-icon-container .ci-action-icon-wrapper {
+  float: right;
+  margin-top: -4px;
 
-    .ci-table {
-      tr {
-        height: 71px;
+  i {
+    color: $border-color;
+    border-radius: 100%;
+    border: 1px solid $border-color;
+    padding: 5px 6px;
+    font-size: 13px;
+    background: $white-light;
+    height: 30px;
+    width: 30px;
+
+    &::before {
+      position: relative;
+      top: 3px;
+      left: 3px;
     }
+
+    &:hover {
+      color: $gl-text-color;
+      background-color: $stage-hover-bg;
+      border: 1px solid $stage-hover-bg;
     }
   }
+
+  .ci-play-icon {
+    padding: 5px 5px 5px 7px;
+  }
 }

app/views/ci/status/_graph_badge.html.haml

+-# Renders the graph node with both the status icon, status name and action icon
+
+- subject = local_assigns.fetch(:subject)
+- status = subject.detailed_status(current_user)
+- klass = "ci-status-icon ci-status-icon-#{status}"
+
+- if status.has_details?
+  = link_to status.details_path, data: { toggle: 'tooltip', title: "#{subject.name} - #{status.label}" } do
+    %span{ class: klass }= custom_icon(status.icon)
+    .ci-status-text= subject.name
+- else
+  %span{ class: klass }= custom_icon(status.icon)
+  .ci-status-text= subject.name
+
+- if status.has_action?
+  = link_to status.action_path, method: status.action_method,
+    title: status.action_title, class: 'ci-action-icon-container' do
+    %i.ci-action-icon-wrapper
+      = icon(status.action_icon, class: status.action_class)

app/views/projects/ci/builds/_build_pipeline.html.haml

-- is_playable = subject.playable? && can?(current_user, :update_build, @project)
-- if is_playable
-  = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, data: { toggle: 'tooltip', title: "#{subject.name} - play", container: '.js-pipeline-graph', placement: 'bottom' } do
-    = ci_icon_for_status('play')
-    .ci-status-text= subject.name
-- elsif can?(current_user, :read_build, @project)
-  = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject), data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.js-pipeline-graph', placement: 'bottom' } do
-    %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
-      = ci_icon_for_status(subject.status)
-    .ci-status-text= subject.name
-- else
-  %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
-    = ci_icon_for_status(subject.status)

app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml

-%a{ data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.js-pipeline-graph', placement: 'bottom' } }
-  - if subject.target_url
-    = link_to subject.target_url do
-      %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
-        = ci_icon_for_status(subject.status)
-      %span.ci-status-text= subject.name
-  - else
-    %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
-      = ci_icon_for_status(subject.status)
-    %span.ci-status-text= subject.name

app/views/projects/stage/_graph.html.haml

@@ -10,11 +10,10 @@
       - status_groups.each do |group_name, grouped_statuses|
         - if grouped_statuses.one?
           - status = grouped_statuses.first
-          - is_playable = status.playable? && can?(current_user, :update_build, @project)
-          %li.build{ class: ("playable" if is_playable) }
+          %li.build
             .curve
             .build-content
-              = render "projects/#{status.to_partial_path}_pipeline", subject: status
+              = render 'ci/status/graph_badge', subject: status
         - else
           %li.build
             .curve

app/views/projects/stage/_in_stage_group.html.haml

@@ -4,10 +4,10 @@
     = ci_icon_for_status(group_status)
   %span.ci-status-text
     = name
-  %span.badge= subject.size
+  %span.dropdown-counter-badge= subject.size
 .dropdown-menu.grouped-pipeline-dropdown
   .arrow
   %ul
     - subject.each do |status|
-      %li
-        = render "projects/#{status.to_partial_path}_pipeline", subject: status
+      %li.dropdown-build
+        = render 'ci/status/graph_badge', subject: status

app/views/shared/icons/_icon_status_canceled.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><rect width="8" height="2" x="3" y="6" transform="rotate(45 7 7)" rx=".5"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M5.2 3.8l4.9 4.9c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0L3.8 5.2c-.2-.2-.2-.5 0-.7l.7-.7c.2-.2.5-.2.7 0"/></g></svg>

app/views/shared/icons/_icon_status_created.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" enable-background="new 0 0 14 14"><path d="M12.5,7 C12.5,4 10,1.5 7,1.5 C4,1.5 1.5,4 1.5,7 C1.5,10 4,12.5 7,12.5 C10,12.5 12.5,10 12.5,7 L12.5,7 Z M0,7 C0,3.1 3.1,0 7,0 C10.9,0 14,3.1 14,7 C14,10.9 10.9,14 7,14 C3.1,14 0,10.9 0,7 L0,7 Z" /><circle cx="7" cy="7" r="3.25"/></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><circle cx="7" cy="7" r="3.25"/></g></svg>

app/views/shared/icons/_icon_status_failed.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M7.72916667,6.27083333 L7.72916667,4.28939247 C7.72916667,4.12531853 7.59703895,4 7.43405116,4 L6.56594884,4 C6.40541585,4 6.27083333,4.12956542 6.27083333,4.28939247 L6.27083333,6.27083333 L4.28939247,6.27083333 C4.12531853,6.27083333 4,6.40296105 4,6.56594884 L4,7.43405116 C4,7.59458415 4.12956542,7.72916667 4.28939247,7.72916667 L6.27083333,7.72916667 L6.27083333,9.71060753 C6.27083333,9.87468147 6.40296105,10 6.56594884,10 L7.43405116,10 C7.59458415,10 7.72916667,9.87043458 7.72916667,9.71060753 L7.72916667,7.72916667 L9.71060753,7.72916667 C9.87468147,7.72916667 10,7.59703895 10,7.43405116 L10,6.56594884 C10,6.40541585 9.87043458,6.27083333 9.71060753,6.27083333 L7.72916667,6.27083333 Z" transform="rotate(-45 7 7)"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M7 5.969L5.599 4.568a.29.29 0 0 0-.413.004l-.614.614a.294.294 0 0 0-.004.413L5.968 7l-1.4 1.401a.29.29 0 0 0 .004.413l.614.614c.113.114.3.117.413.004L7 8.032l1.401 1.4a.29.29 0 0 0 .413-.004l.614-.614a.294.294 0 0 0 .004-.413L8.032 7l1.4-1.401a.29.29 0 0 0-.004-.413l-.614-.614a.294.294 0 0 0-.413-.004L7 5.968z"/></g></svg>

app/views/shared/icons/_icon_status_pending.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M4.69999981,5.30065012 C4.69999981,5.13460564 4.83842754,5 5.00354719,5 L5.89645243,5 C6.06409702,5 6.19999981,5.13308716 6.19999981,5.30065012 L6.19999981,8.69934988 C6.19999981,8.86539436 6.06157207,9 5.89645243,9 L5.00354719,9 C4.8359026,9 4.69999981,8.86691284 4.69999981,8.69934988 L4.69999981,5.30065012 Z M7.69999981,5.30065012 C7.69999981,5.13460564 7.83842754,5 8.00354719,5 L8.89645243,5 C9.06409702,5 9.19999981,5.13308716 9.19999981,5.30065012 L9.19999981,8.69934988 C9.19999981,8.86539436 9.06157207,9 8.89645243,9 L8.00354719,9 C7.8359026,9 7.69999981,8.86691284 7.69999981,8.69934988 L7.69999981,5.30065012 Z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M4.7 5.3c0-.2.1-.3.3-.3h.9c.2 0 .3.1.3.3v3.4c0 .2-.1.3-.3.3H5c-.2 0-.3-.1-.3-.3V5.3m3 0c0-.2.1-.3.3-.3h.9c.2 0 .3.1.3.3v3.4c0 .2-.1.3-.3.3H8c-.2 0-.3-.1-.3-.3V5.3"/></g></svg>

app/views/shared/icons/_icon_status_running.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M7,3 C9.209139,3 11,4.790861 11,7 C11,9.209139 9.209139,11 7,11 C5.65802855,11 4.47040669,10.3391508 3.74481446,9.32513253 L7,7 L7,3 L7,3 Z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M7 3c2.2 0 4 1.8 4 4s-1.8 4-4 4c-1.3 0-2.5-.7-3.3-1.7L7 7V3"/></g></svg>

app/views/shared/icons/_icon_status_skipped.svg

-<svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M10 17.857c4.286 0 7.857-3.571 7.857-7.857S14.286 2.143 10 2.143 2.143 5.714 2.143 10 5.714 17.857 10 17.857M10 0c5.571 0 10 4.429 10 10s-4.429 10-10 10S0 15.571 0 10 4.429 0 10 0"/><path d="M10.986 11l-1.293 1.293a1 1 0 0 0 1.414 1.414l2.644-2.644a1.505 1.505 0 0 0 0-2.126l-2.644-2.644a1 1 0 0 0-1.414 1.414L10.986 9H6.4a1 1 0 0 0 0 2h4.586z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M7.69 7.7l-.905.905a.7.7 0 0 0 .99.99l1.85-1.85c.411-.412.411-1.078 0-1.49l-1.85-1.85a.7.7 0 0 0-.99.99l.905.905H4.48a.7.7 0 0 0 0 1.4h3.21z"/></g></svg>

app/views/shared/icons/_icon_status_success.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M7.29166667,7.875 L5.54840803,7.875 C5.38293028,7.875 5.25,8.00712771 5.25,8.17011551 L5.25,9.03821782 C5.25,9.19875081 5.38360183,9.33333333 5.54840803,9.33333333 L8.24853534,9.33333333 C8.52035522,9.33333333 8.75,9.11228506 8.75,8.83960819 L8.75,8.46475969 L8.75,4.07392947 C8.75,3.92144267 8.61787229,3.79166667 8.45488449,3.79166667 L7.58678218,3.79166667 C7.42624919,3.79166667 7.29166667,3.91804003 7.29166667,4.07392947 L7.29166667,7.875 Z" transform="rotate(45 7 6.563)"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z"/></g></svg>

app/views/shared/icons/_icon_status_warning.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M6,3.49769878 C6,3.22282734 6.21403503,3 6.50468445,3 L7.49531555,3 C7.77404508,3 8,3.21484375 8,3.49769878 L8,7.50230122 C8,7.77717266 7.78596497,8 7.49531555,8 L6.50468445,8 C6.22595492,8 6,7.78515625 6,7.50230122 L6,3.49769878 Z M6,9.50468445 C6,9.22595492 6.21403503,9 6.50468445,9 L7.49531555,9 C7.77404508,9 8,9.21403503 8,9.50468445 L8,10.4953156 C8,10.7740451 7.78596497,11 7.49531555,11 L6.50468445,11 C6.22595492,11 6,10.785965 6,10.4953156 L6,9.50468445 Z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M6 3.5c0-.3.2-.5.5-.5h1c.3 0 .5.2.5.5v4c0 .3-.2.5-.5.5h-1c-.3 0-.5-.2-.5-.5v-4m0 6c0-.3.2-.5.5-.5h1c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5h-1c-.3 0-.5-.2-.5-.5v-1"/></g></svg>

changelogs/unreleased/22604-manual-actions.yml

+---
+title: Resolve "Manual actions on pipeline graph"
+merge_request: 7931
+author:

spec/features/commits_spec.rb

@@ -107,7 +107,7 @@ describe 'Commits' do
         describe 'Cancel build' do
           it 'cancels build' do
             visit ci_status_path(pipeline)
-            click_on 'Cancel'
+            find('a.btn[title="Cancel"]').click
             expect(page).to have_content 'canceled'
           end
         end

spec/features/projects/pipelines/pipeline_spec.rb

@@ -38,6 +38,91 @@ describe "Pipelines", feature: true, js: true do
       expect(page).to have_css('#js-tab-pipeline.active')
     end
 
+    describe 'pipeline graph' do
+      context 'when pipeline has running builds' do
+        it 'shows a running icon and a cancel action for the running build' do
+          page.within('a[data-title="deploy - running"]') do
+            expect(page).to have_selector('.ci-status-icon-running')
+            expect(page).to have_content('deploy')
+          end
+
+          page.within('a[data-title="deploy - running"] + .ci-action-icon-container') do
+            expect(page).to have_selector('.ci-action-icon-container .fa-ban')
+          end
+        end
+
+        it 'should be possible to cancel the running build' do
+          find('a[data-title="deploy - running"] + .ci-action-icon-container').trigger('click')
+
+          expect(page).not_to have_content('Cancel running')
+        end
+      end
+
+      context 'when pipeline has successful builds' do
+        it 'shows the success icon and a retry action for the successfull build' do
+          page.within('a[data-title="build - passed"]') do
+            expect(page).to have_selector('.ci-status-icon-success')
+            expect(page).to have_content('build')
+          end
+
+          page.within('a[data-title="build - passed"] + .ci-action-icon-container') do
+            expect(page).to have_selector('.ci-action-icon-container .fa-refresh')
+          end
+        end
+
+        it 'should be possible to retry the success build' do
+          find('a[data-title="build - passed"] + .ci-action-icon-container').trigger('click')
+
+          expect(page).not_to have_content('Retry build')
+        end
+      end
+
+      context 'when pipeline has failed builds' do
+        it 'shows the failed icon and a retry action for the failed build' do
+          page.within('a[data-title="test - failed"]') do
+            expect(page).to have_selector('.ci-status-icon-failed')
+            expect(page).to have_content('test')
+          end
+
+          page.within('a[data-title="test - failed"] + .ci-action-icon-container') do
+            expect(page).to have_selector('.ci-action-icon-container .fa-refresh')
+          end
+        end
+
+        it 'should be possible to retry the failed build' do
+          find('a[data-title="test - failed"] + .ci-action-icon-container').trigger('click')
+
+          expect(page).not_to have_content('Retry build')
+        end
+      end
+
+      context 'when pipeline has manual builds' do
+        it 'shows the skipped icon and a play action for the manual build' do
+          page.within('a[data-title="manual build - manual play action"]') do
+            expect(page).to have_selector('.ci-status-icon-skipped')
+            expect(page).to have_content('manual')
+          end
+
+          page.within('a[data-title="manual build - manual play action"] + .ci-action-icon-container') do
+            expect(page).to have_selector('.ci-action-icon-container .fa-play')
+          end
+        end
+
+        it 'should be possible to play the manual build' do
+          find('a[data-title="manual build - manual play action"] + .ci-action-icon-container').trigger('click')
+
+          expect(page).not_to have_content('Play build')
+        end
+      end
+
+      context 'when pipeline has external build' do
+        it 'shows the success icon and the generic comit status build' do
+          expect(page).to have_selector('.ci-status-icon-success')
+          expect(page).to have_content('jenkins')
+        end
+      end
+    end
+
     context 'page tabs' do
       it 'shows Pipeline and Builds tabs with link' do
         expect(page).to have_link('Pipeline')