Merge branch '33697-pipelines-json-endpoint' into 'master'

Resolve "CI retry/cancel job or pipeline redirect the user and can't be open in a new tab"

Closes #33697

See merge request gitlab-org/gitlab-ce!18451

2 files changed, 90 insertions, 108 deletions

diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 66db4917178..3581dd36a10 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -156,10 +156,6 @@
     .dropdown-menu {
       z-index: 300;
     }
-
-    .ci-action-icon-wrapper {
-      line-height: 16px;
-    }
   }
 
   .mini-pipeline-graph-dropdown-toggle {
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 3a8ec779c14..02803e7b040 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -22,7 +22,6 @@
   }
 
   .ci-table {
-
     .label {
       margin-bottom: 3px;
     }
@@ -123,7 +122,6 @@
   }
 
   .branch-commit {
-
     .ref-name {
       font-weight: $gl-font-weight-bold;
       max-width: 100px;
@@ -481,43 +479,6 @@
       @extend .build-content:hover;
     }
 
-    .ci-action-icon-container {
-      position: absolute;
-      right: 5px;
-      top: 5px;
-
-      // Action Icons in big pipeline-graph nodes
-      &.ci-action-icon-wrapper {
-        height: 30px;
-        width: 30px;
-        background: $white-light;
-        border: 1px solid $border-color;
-        border-radius: 100%;
-        display: block;
-
-        &:hover {
-          background-color: $stage-hover-bg;
-          border: 1px solid $dropdown-toggle-active-border-color;
-
-          svg {
-            fill: $gl-text-color;
-          }
-        }
-
-        svg {
-          fill: $gl-text-color-secondary;
-          position: relative;
-          top: -1px;
-        }
-
-        &.play {
-          svg {
-            left: 2px;
-          }
-        }
-      }
-    }
-
     .ci-status-icon svg {
       height: 20px;
       width: 20px;
@@ -548,7 +509,6 @@
       border: 1px solid $dropdown-toggle-active-border-color;
     }
 
-
     // Connect first build in each stage with right horizontal line
     &:first-child {
       &::after {
@@ -602,6 +562,43 @@
       }
     }
   }
+
+  .ci-action-icon-container {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+
+    // Action Icons in big pipeline-graph nodes
+    &.ci-action-icon-wrapper {
+      height: 30px;
+      width: 30px;
+      background: $white-light;
+      border: 1px solid $border-color;
+      border-radius: 100%;
+      display: block;
+
+      &:hover {
+        background-color: $stage-hover-bg;
+        border: 1px solid $dropdown-toggle-active-border-color;
+
+        svg {
+          fill: $gl-text-color;
+        }
+      }
+
+      svg {
+        fill: $gl-text-color-secondary;
+        position: relative;
+        top: -1px;
+      }
+
+      &.play {
+        svg {
+          left: 2px;
+        }
+      }
+    }
+  }
 }
 
 // Triggers the dropdown in the big pipeline graph
@@ -710,93 +707,77 @@ button.mini-pipeline-graph-dropdown-toggle {
   }
 }
 
-// dropdown content for big and mini pipeline
+/**
+ Action icons inside dropdowns:
+ - mini graph in pipelines table
+ - dropdown in big graph
+ - mini graph in MR widget pipeline
+ - mini graph in Commit widget pipeline
+*/
 .big-pipeline-graph-dropdown-menu,
 .mini-pipeline-graph-dropdown-menu {
   width: 240px;
   max-width: 240px;
 
-  .scrollable-menu {
+  // override dropdown.scss
+  &.dropdown-menu li button,
+  &.dropdown-menu li a.ci-action-icon-container {
     padding: 0;
-    max-height: 245px;
-    overflow: auto;
+    text-align: center;
   }
 
-  li {
-    position: relative;
+  .ci-action-icon-container {
+    position: absolute;
+    right: 8px;
+    top: 8px;
 
-    // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered
-    &:hover > .mini-pipeline-graph-dropdown-item,
-    &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item {
-      @extend .mini-pipeline-graph-dropdown-item:hover;
-    }
+    &.ci-action-icon-wrapper {
+      height: $ci-action-dropdown-button-size;
+      width: $ci-action-dropdown-button-size;
 
-    // Action icon on the right
-    a.ci-action-icon-wrapper {
-      border-radius: 50%;
+      background: $white-light;
       border: 1px solid $border-color;
-      width: $ci-action-icon-size;
-      height: $ci-action-icon-size;
-      padding: 2px 0 0 5px;
-      font-size: 12px;
-      background-color: $white-light;
-      position: absolute;
-      top: 50%;
-      right: $gl-padding;
-      margin-top: -#{$ci-action-icon-size / 2};
+      border-radius: 50%;
+      display: block;
 
-      &:hover,
-      &:focus {
+      &:hover {
         background-color: $stage-hover-bg;
         border: 1px solid $dropdown-toggle-active-border-color;
+
+        svg {
+          fill: $gl-text-color;
+        }
       }
 
       svg {
+        width: $ci-action-dropdown-svg-size;
+        height: $ci-action-dropdown-svg-size;
         fill: $gl-text-color-secondary;
-        width: #{$ci-action-icon-size - 6};
-        height: #{$ci-action-icon-size - 6};
-        left: -3px;
         position: relative;
-        top: -1px;
-
-        &.icon-action-stop,
-        &.icon-action-cancel {
-          width: 12px;
-          height: 12px;
-          top: 1px;
-          left: -1px;
-        }
-
-        &.icon-action-play {
-          width: 11px;
-          height: 11px;
-          top: 1px;
-          left: 1px;
-        }
-
-        &.icon-action-retry {
-          width: 16px;
-          height: 16px;
-          top: 0;
-          left: -3px;
-        }
+        top: 0;
+        vertical-align: initial;
       }
+    }
+  }
 
-      &:hover svg,
-      &:focus svg {
-        fill: $gl-text-color;
-      }
+   // SVGs in the commit widget and mr widget
+  a.ci-action-icon-container.ci-action-icon-wrapper svg {
+    top: 2px;
+  }
 
-      &.icon-action-retry,
-      &.icon-action-play {
-        svg {
-          width: #{$ci-action-icon-size - 6};
-          height: #{$ci-action-icon-size - 6};
-          left: 8px;
-        }
-      }
+  .scrollable-menu {
+    padding: 0;
+    max-height: 245px;
+    overflow: auto;
+  }
 
+  li {
+    position: relative;
 
+    // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered
+    &:hover > .mini-pipeline-graph-dropdown-item,
+    &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item {
+      @extend .mini-pipeline-graph-dropdown-item:hover;
     }
 
     // link to the build
@@ -808,6 +789,11 @@ button.mini-pipeline-graph-dropdown-toggle {
       line-height: $line-height-base;
       white-space: nowrap;
 
+      // Match dropdown.scss for all `a` tags
+      &.non-details-job-component {
+        padding: 8px 16px;
+      }
+
       .ci-job-name-component {
         align-items: center;
         display: flex;
@@ -939,7 +925,7 @@ button.mini-pipeline-graph-dropdown-toggle {
   &.dropdown-menu {
     transform: translate(-80%, 0);
 
-    @media(min-width: $screen-md-min) {
+    @media (min-width: $screen-md-min) {
       transform: translate(-50%, 0);
       right: auto;
       left: 50%;