Refactor pipelines table css to be page specific

In this change we wrap the CSS of the pipeline table that only appears
in 4 pages, inside a `[data-page]` selector to scope where it is used.

Additionally some unused/abandoned styles are removed.

app/assets/javascripts/commit/pipelines/pipelines_bundle.js

@@ -3,9 +3,10 @@ import commitPipelinesTable from './pipelines_table.vue';
 
 /**
  * Used in:
- *  - Commit details View > Pipelines Tab > Pipelines Table.
- *  - Merge Request details View > Pipelines Tab > Pipelines Table.
- *  - New Merge Request View > Pipelines Tab > Pipelines Table.
+ *  - Project Pipelines List (projects:pipelines:index)
+ *  - Commit details View > Pipelines Tab > Pipelines Table (projects:commit:pipelines)
+ *  - Merge Request details View > Pipelines Tab > Pipelines Table (projects:merge_requests:show)
+ *  - New Merge Request View > Pipelines Tab > Pipelines Table (projects:merge_requests:creations:new)
  */
 
 const CommitPipelinesTable = Vue.extend(commitPipelinesTable);

app/assets/javascripts/commit/pipelines/pipelines_table.vue

@@ -193,7 +193,7 @@ export default {
       "
     />
 
-    <div v-else-if="shouldRenderTable" class="table-holder">
+    <div v-else-if="shouldRenderTable">
       <gl-button
         v-if="canRenderPipelineButton"
         block

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue

@@ -321,7 +321,11 @@ export default {
       </div>
     </div>
 
-    <pipelines-timeago :duration="pipelineDuration" :finished-time="pipelineFinishedAt" />
+    <pipelines-timeago
+      class="gl-text-right"
+      :duration="pipelineDuration"
+      :finished-time="pipelineFinishedAt"
+    />
 
     <div
       v-if="displayPipelineActions"

app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue

@@ -50,7 +50,7 @@ export default {
 };
 </script>
 <template>
-  <div class="table-section section-15 pipelines-time-ago">
+  <div class="table-section section-15">
     <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Duration') }}</div>
     <div class="table-mobile-content">
       <p v-if="hasDuration" class="duration">

app/assets/stylesheets/page_bundles/pipelines.scss

+@import 'mixins_and_variables_and_functions';
+
+/**
+ * Pipelines Bundle
+ *
+ * Styles of pipeline lists
+ *
+ * Should affect pipelines table components rendered by:
+ * app/assets/javascripts/commit/pipelines/pipelines_bundle.js
+ */
+
+.pipelines {
+  .badge {
+    margin-bottom: 3px;
+  }
+
+  .pipeline-actions {
+    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: $dropdown-toggle-active-border-color;
+      background-color: $white-normal;
+    }
+
+    svg path {
+      fill: $gl-text-color-secondary;
+    }
+
+    .dropdown-menu {
+      max-height: $dropdown-max-height;
+      overflow-y: auto;
+    }
+
+    .dropdown-toggle,
+    .dropdown-menu {
+      color: $gl-text-color-secondary;
+
+      .fa {
+        color: $gl-text-color-secondary;
+        font-size: 14px;
+      }
+    }
+
+    .btn-group.open .btn-default {
+      background-color: $white-normal;
+      border-color: $border-white-normal;
+    }
+
+    .btn .text-center {
+      display: inline;
+    }
+
+    .tooltip {
+      white-space: nowrap;
+    }
+  }
+
+  .pipeline-tags .label-container {
+    white-space: normal;
+  }
+}

app/assets/stylesheets/pages/pipelines.scss

-.pipelines {
-  .stage {
-    max-width: 90px;
-    width: 90px;
-    text-align: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .table-holder {
-    overflow: unset;
-    width: 100%;
-  }
-
-  .commit-title {
-    margin: 0;
-    white-space: normal;
-
-    @include media-breakpoint-down(sm) {
-      justify-content: flex-end;
-    }
-  }
-
-  .ci-table {
-    .badge {
-      margin-bottom: 3px;
-    }
-
-    .pipeline-id {
-      color: $black;
-    }
-
-    .pipelines-time-ago {
-      text-align: right;
-    }
-
-    .pipeline-actions {
-      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: $dropdown-toggle-active-border-color;
-        background-color: $white-normal;
-      }
-
-      svg path {
-        fill: $gl-text-color-secondary;
-      }
-
-      .dropdown-menu {
-        max-height: $dropdown-max-height;
-        overflow-y: auto;
-      }
-
-      .dropdown-toggle,
-      .dropdown-menu {
-        color: $gl-text-color-secondary;
-
-        .fa {
-          color: $gl-text-color-secondary;
-          font-size: 14px;
-        }
-      }
-
-      .btn-group.open .btn-default {
-        background-color: $white-normal;
-        border-color: $border-white-normal;
-      }
-
-      .btn .text-center {
-        display: inline;
-      }
-
-      .tooltip {
-        white-space: nowrap;
-      }
-    }
-
-    .pipeline-tags .label-container {
-      white-space: normal;
-    }
-  }
-}
-
 @include media-breakpoint-down(md) {
   .content-list {
     &.builds-content-list {
@@ -246,11 +157,6 @@
   }
 }
 
-// Pipeline visualization
-.pipeline-actions {
-  border-bottom: 0;
-}
-
 .ci-build-text,
 .ci-status-text {
   font-weight: 200;

app/views/projects/commit/pipelines.html.haml

 - page_title _('Pipelines'), "#{@commit.title} (#{@commit.short_id})", _('Commits')
+- add_page_specific_style 'page_bundles/pipelines'
 
 = render 'commit_box'
 = render 'ci_menu'

app/views/projects/merge_requests/creations/new.html.haml

 - add_to_breadcrumbs _("Merge Requests"), project_merge_requests_path(@project)
 - breadcrumb_title _("New")
 - page_title _("New Merge Request")
+- add_page_specific_style 'page_bundles/pipelines'
 
 - if @merge_request.can_be_created && !params[:change_branches]
   = render 'new_submit'

app/views/projects/merge_requests/show.html.haml

@@ -8,6 +8,7 @@
 - suggest_changes_help_path = help_page_path('user/discussions/index.md', anchor: 'suggest-changes')
 - number_of_pipelines = @pipelines.size
 - mr_action = j(params[:tab].presence || 'show')
+- add_page_specific_style 'page_bundles/pipelines'
 
 .merge-request{ data: { mr_action: mr_action, url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project), lock_version: @merge_request.lock_version } }
   = render "projects/merge_requests/mr_title"

app/views/projects/pipelines/index.html.haml

 - page_title _('Pipelines')
+- add_page_specific_style 'page_bundles/pipelines'
 
 = render_if_exists "shared/shared_runners_minutes_limit_flash_message"
 

config/application.rb

@@ -182,6 +182,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/merge_conflicts.css"
     config.assets.precompile << "page_bundles/milestone.css"
     config.assets.precompile << "page_bundles/pipeline.css"
+    config.assets.precompile << "page_bundles/pipelines.css"
     config.assets.precompile << "page_bundles/todos.css"
     config.assets.precompile << "page_bundles/xterm.css"
     config.assets.precompile << "lazy_bundles/cropper.css"

spec/features/projects/commit/builds_spec.rb

@@ -19,7 +19,7 @@ RSpec.describe 'project commit pipelines', :js do
 
   context 'when no builds triggered yet' do
     it 'shows the ID of the first pipeline' do
-      page.within('.table-holder') do
+      page.within('.pipelines .ci-table') do
         expect(page).to have_content project.ci_pipelines[0].id # pipeline ids
       end
     end