Merge branch 'ci-tables-ui-improvements' into 'master'

Pipelines tables UI improvements

Closes #28383, #26611, #21788, #27048, and #27828

See merge request !9442

3 files changed, 114 insertions, 175 deletions

diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
index c953a589456..e20085d1fd2 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
@@ -33,18 +33,16 @@
     },
     template: `
       <td class="pipeline-actions hidden-xs">
-        <div class="controls pull-right">
-          <div class="btn-group inline">
-            <div class="btn-group">
+        <div class="pull-right">
+          <div class="btn-group">
+            <div class="btn-group" v-if="actions">
               <button
-                v-if='actions'
                 class="dropdown-toggle btn btn-default has-tooltip js-pipeline-dropdown-manual-actions"
                 data-toggle="dropdown"
                 title="Manual job"
                 data-placement="top"
-                aria-label="Manual job"
-              >
-                <span v-html='svgs.iconPlay' aria-hidden="true"></span>
+                aria-label="Manual job">
+                <span v-html="svgs.iconPlay" aria-hidden="true"></span>
                 <i class="fa fa-caret-down" aria-hidden="true"></i>
               </button>
               <ul class="dropdown-menu dropdown-menu-align-right">
@@ -52,23 +50,21 @@
                   <a
                     rel="nofollow"
                     data-method="post"
-                    :href='action.path'
-                  >
-                    <span v-html='svgs.iconPlay' aria-hidden="true"></span>
+                    :href="action.path">
+                    <span v-html="svgs.iconPlay" aria-hidden="true"></span>
                     <span>{{action.name}}</span>
                   </a>
                 </li>
               </ul>
             </div>
-            <div class="btn-group">
+
+            <div class="btn-group" v-if="artifacts">
               <button
-                v-if='artifacts'
                 class="dropdown-toggle btn btn-default build-artifacts has-tooltip js-pipeline-dropdown-download"
                 title="Artifacts"
                 data-placement="top"
                 data-toggle="dropdown"
-                aria-label="Artifacts"
-              >
+                aria-label="Artifacts">
                 <i class="fa fa-download" aria-hidden="true"></i>
                 <i class="fa fa-caret-down" aria-hidden="true"></i>
               </button>
@@ -76,42 +72,39 @@
                 <li v-for='artifact in pipeline.details.artifacts'>
                   <a
                     rel="nofollow"
-                    download
-                    :href='artifact.path'
-                  >
+                    :href="artifact.path">
                     <i class="fa fa-download" aria-hidden="true"></i>
                     <span>{{download(artifact.name)}}</span>
                   </a>
                 </li>
               </ul>
             </div>
-          </div>
-          <div class="cancel-retry-btns inline">
-            <a
-              v-if='pipeline.flags.retryable'
-              class="btn has-tooltip"
-              title="Retry"
-              rel="nofollow"
-              data-method="post"
-              data-placement="top"
-              data-toggle="dropdown"
-              :href='pipeline.retry_path'
-              aria-label="Retry">
-              <i class="fa fa-repeat" aria-hidden="true"></i>
-            </a>
-            <a
-              v-if='pipeline.flags.cancelable'
-              @click="confirmAction"
-              class="btn btn-remove has-tooltip"
-              title="Cancel"
-              rel="nofollow"
-              data-method="post"
-              data-placement="top"
-              data-toggle="dropdown"
-              :href='pipeline.cancel_path'
-              aria-label="Cancel">
-              <i class="fa fa-remove" aria-hidden="true"></i>
-            </a>
+            <div class="btn-group" v-if="pipeline.flags.retryable">
+              <a
+                class="btn btn-default btn-retry has-tooltip"
+                title="Retry"
+                rel="nofollow"
+                data-method="post"
+                data-placement="top"
+                data-toggle="dropdown"
+                :href='pipeline.retry_path'
+                aria-label="Retry">
+                <i class="fa fa-repeat" aria-hidden="true"></i>
+              </a>
+            </div>
+            <div class="btn-group" v-if="pipeline.flags.cancelable">
+              <a
+                class="btn btn-remove has-tooltip"
+                title="Cancel"
+                rel="nofollow"
+                data-method="post"
+                data-placement="top"
+                data-toggle="dropdown"
+                :href='pipeline.cancel_path'
+                aria-label="Cancel">
+                <i class="fa fa-remove" aria-hidden="true"></i>
+              </a>
+            </div>
           </div>
         </div>
       </td>
diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
index 3598da11573..6048fa691dc 100644
--- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
@@ -54,7 +54,7 @@ require('../lib/utils/datetime_utility');
       },
     },
     template: `
-      <td>
+      <td class="pipelines-time-ago">
         <p class="duration" v-if='duration'>
           <span v-html='svgs.iconTimer'></span>
           {{duration}}
@@ -65,8 +65,7 @@ require('../lib/utils/datetime_utility');
             data-toggle="tooltip"
             data-placement="top"
             data-container="body"
-            :data-original-title='localTimeFinished'
-          >
+            :data-original-title='localTimeFinished'>
             {{timeStopped.words}}
           </time>
         </p>
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 3fe1eef307e..08b3206f31e 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -13,21 +13,16 @@
     white-space: nowrap;
   }
 
-  .commit-title {
-    margin: 0;
-  }
-
-  .controls {
-    white-space: nowrap;
+  .table-holder {
+    width: 100%;
+    overflow: auto;
   }
 
-  .btn {
-    margin: 4px;
+  .commit-title {
+    margin: 0;
   }
 
   .table.ci-table {
-    min-width: 1200px;
-    table-layout: fixed;
 
     .label {
       margin-bottom: 3px;
@@ -37,16 +32,72 @@
       color: $black;
     }
 
-    .pipeline-date,
-    .pipeline-status {
-      width: 10%;
+    .stage-cell {
+      min-width: 130px; // Guarantees we show at least 4 stages in line
+      width: 20%;
+    }
+
+    .pipelines-time-ago {
+      text-align: right;
     }
 
-    .pipeline-info,
-    .pipeline-commit,
-    .pipeline-stages,
     .pipeline-actions {
-      width: 20%;
+      padding-right: 0;
+      min-width: 170px; //Guarantees buttons don't break in several lines.
+
+      .btn-default {
+        color: $gl-text-color-secondary;
+      }
+
+      .btn.btn-retry:hover,
+      .btn.btn-retry:focus {
+        border-color: $gray-darkest;
+        background-color: $white-normal;
+      }
+
+      svg path {
+        fill: $gl-text-color-secondary;
+      }
+
+      .dropdown-menu {
+        max-height: 250px;
+        overflow-y: auto;
+      }
+
+      .dropdown-toggle,
+      .dropdown-menu {
+        color: $gl-text-color-secondary;
+
+        .fa {
+          color: $gl-text-color-secondary;
+          font-size: 14px;
+        }
+
+        svg,
+        .fa {
+          margin-right: 0;
+        }
+      }
+
+      .btn-group {
+        &.open {
+          .btn-default {
+            background-color: $white-normal;
+            border-color: $border-white-normal;
+          }
+        }
+
+        .btn {
+          .icon-play {
+            height: 13px;
+            width: 12px;
+          }
+        }
+      }
+
+      .tooltip {
+        white-space: nowrap;
+      }
     }
   }
 }
@@ -61,27 +112,10 @@
   }
 }
 
-.content-list.pipelines .table-holder {
-  min-height: 300px;
-}
-
-.pipeline-holder {
-  width: 100%;
-  overflow: auto;
-}
-
 .table.ci-table {
-  min-width: 900px;
 
-  &.pipeline {
-    min-width: 650px;
-  }
-
-  &.builds-page {
-
-    tr {
-      height: 71px;
-    }
+  &.builds-page tr {
+    height: 71px;
   }
 
   tr {
@@ -99,7 +133,7 @@
     }
 
     .commit-link {
-      padding: 9px 8px 10px;
+      padding: 9px 8px 10px 2px;
     }
   }
 
@@ -206,72 +240,8 @@
     }
   }
 
-  .pipeline-actions {
-    min-width: 140px;
-
-    .btn {
-      margin: 0;
-      color: $gl-text-color-secondary;
-    }
-
-    .cancel-retry-btns {
-      vertical-align: middle;
-
-      .btn:not(:first-child) {
-        margin-left: 8px;
-      }
-    }
-
-    .dropdown-menu {
-      max-height: 250px;
-      overflow-y: auto;
-    }
-
-    .dropdown-toggle,
-    .dropdown-menu {
-      color: $gl-text-color-secondary;
-
-      .fa {
-        color: $gl-text-color-secondary;
-        font-size: 14px;
-      }
-
-      svg,
-      .fa {
-        margin-right: 0;
-      }
-    }
-
-    .btn-remove {
-      color: $white-light;
-    }
-
-    .btn-group {
-      &.open {
-        .btn-default {
-          background-color: $white-normal;
-          border-color: $border-white-normal;
-        }
-      }
-
-      .btn {
-        .icon-play {
-          height: 13px;
-          width: 12px;
-        }
-      }
-    }
-
-    .tooltip {
-      white-space: nowrap;
-    }
-  }
-
-  .build-link {
-
-    a {
-      color: $gl-text-color;
-    }
+  .build-link a {
+    color: $gl-text-color;
   }
 
   .btn-group.open .dropdown-toggle {
@@ -335,31 +305,8 @@
 }
 
 .tab-pane {
-  &.pipelines {
-    .ci-table {
-      min-width: 900px;
-    }
-
-    .content-list.pipelines {
-      overflow: auto;
-    }
-
-    .stage {
-      max-width: 100px;
-      width: 100px;
-    }
-
-    .pipeline-actions {
-      min-width: initial;
-    }
-  }
-
-  &.builds {
-    .ci-table {
-      tr {
-        height: 71px;
-      }
-    }
+  &.builds .ci-table tr {
+    height: 71px;
   }
 }