Merge branch '22509-pipeline-tables' into 'master'

Fixes Pipeline list commit column width should be adjusted

## What does this MR do?
- Fixes some HTML problems
  - Pipeline and Build tables were inside an `ul` tag
  - Pipeline table had 2 `tbody` tags and no `thead`
- Adds grid classes in Pipeline table in order to be responsive: The content of the last column was being hidden but the column it self was not which results in a lot of blank space
- Adds a percentage width to the commit column in the Pipeline table.
- Removes one level of nesting in the commit column in the Pipeline table and to the Build column in the Build table.

## Are there points in the code the reviewer needs to double check?
No

## Why was this MR needed?
The commit column had to much white space.

## Screenshots (if relevant)
![pipelines](/uploads/d198f07dceb498cc7ec537842cd34fff/pipelines.png)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] 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 you do - 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 #22509

See merge request !6595

CHANGELOG

@@ -50,6 +50,7 @@ v 8.13.0 (unreleased)
   - Notify the Merger about merge after successful build (Dimitris Karakasilis)
   - Reduce queries needed to find users using their SSH keys when pushing commits
   - Fix broken repository 500 errors in project list
+  - Fix Pipeline list commit column width should be adjusted
   - Close todos when accepting merge requests via the API !6486 (tonygambone)
   - Changed Slack service user referencing from full name to username (Sebastian Poxhofer)
   - Add Container Registry on/off status to Admin Area !6638 (the-undefined)

app/assets/stylesheets/pages/pipelines.scss

@@ -22,6 +22,11 @@
 
   .table.builds {
     min-width: 1200px;
+
+    .branch-commit {
+      width: 33%;
+    }
+
   }
 }
 
@@ -77,7 +82,7 @@
   }
 
   .branch-commit {
-
+    
     .branch-name {
       font-weight: bold;
       max-width: 150px;

app/views/projects/builds/_table.html.haml

 - admin = local_assigns.fetch(:admin, false)
 
 - if builds.blank?
-  %li
+  %div
     .nothing-here-block No builds to show
 - else
   .table-holder

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

@@ -19,5 +19,5 @@
         = link_to ci_lint_path, class: 'btn btn-default' do
           %span CI Lint
 
-  %ul.content-list.builds-content-list
+  %div.content-list.builds-content-list
     = render "table", builds: @builds, project: @project

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

@@ -13,45 +13,44 @@
     - else
       = ci_status_with_icon(build.status)
 
-  %td
-    .branch-commit
-      - if can?(current_user, :read_build, build)
-        = link_to namespace_project_build_url(build.project.namespace, build.project, build) do
-          %span.build-link ##{build.id}
-      - else
+  %td.branch-commit
+    - if can?(current_user, :read_build, build)
+      = link_to namespace_project_build_url(build.project.namespace, build.project, build) do
         %span.build-link ##{build.id}
+    - else
+      %span.build-link ##{build.id}
 
-      - if ref
-        - if build.ref
-          .icon-container
-            = build.tag? ? icon('tag') : icon('code-fork')
-          = link_to build.ref, namespace_project_commits_path(build.project.namespace, build.project, build.ref), class: "monospace branch-name"
-        - else
-          .light none
+    - if ref
+      - if build.ref
         .icon-container
-          = custom_icon("icon_commit")
+          = build.tag? ? icon('tag') : icon('code-fork')
+        = link_to build.ref, namespace_project_commits_path(build.project.namespace, build.project, build.ref), class: "monospace branch-name"
+      - else
+        .light none
+      .icon-container
+        = custom_icon("icon_commit")
 
-      - if commit_sha
-        = link_to build.short_sha, namespace_project_commit_path(build.project.namespace, build.project, build.sha), class: "commit-id monospace"
+    - if commit_sha
+      = link_to build.short_sha, namespace_project_commit_path(build.project.namespace, build.project, build.sha), class: "commit-id monospace"
 
-      - if build.stuck?
-        = icon('warning', class: 'text-warning has-tooltip', title: 'Build is stuck. Check runners.')
-      - if retried
-        = icon('warning', class: 'text-warning has-tooltip', title: 'Build was retried.')
+    - if build.stuck?
+      = icon('warning', class: 'text-warning has-tooltip', title: 'Build is stuck. Check runners.')
+    - if retried
+      = icon('warning', class: 'text-warning has-tooltip', title: 'Build was retried.')
 
-      .label-container
-        - if build.tags.any?
-          - build.tags.each do |tag|
-            %span.label.label-primary
-              = tag
-        - if build.try(:trigger_request)
-          %span.label.label-info triggered
-        - if build.try(:allow_failure)
-          %span.label.label-danger allowed to fail
-        - if retried
-          %span.label.label-warning retried
-        - if build.manual?
-          %span.label.label-info manual
+    .label-container
+      - if build.tags.any?
+        - build.tags.each do |tag|
+          %span.label.label-primary
+            = tag
+      - if build.try(:trigger_request)
+        %span.label.label-info triggered
+      - if build.try(:allow_failure)
+        %span.label.label-danger allowed to fail
+      - if retried
+        %span.label.label-warning retried
+      - if build.manual?
+        %span.label.label-info manual
 
   - if admin
     %td

app/views/projects/ci/pipelines/_pipeline.html.haml

@@ -9,33 +9,32 @@
         = ci_icon_for_status(status)
       - else
         = ci_status_with_icon(status)
-  %td
-    .branch-commit
-      = link_to namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id) do
-        %span ##{pipeline.id}
-      - if pipeline.ref && show_branch
-        .icon-container
-          = pipeline.tag? ? icon('tag') : icon('code-fork')
-        = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace branch-name"
-      - if show_commit
-        .icon-container
-          = custom_icon("icon_commit")
-        = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "commit-id monospace"
-      - if pipeline.latest?
-        %span.label.label-success.has-tooltip{ title: 'Latest build for this branch' } latest
-      - if pipeline.triggered?
-        %span.label.label-primary triggered
-      - if pipeline.yaml_errors.present?
-        %span.label.label-danger.has-tooltip{ title: "#{pipeline.yaml_errors}" } yaml invalid
-      - if pipeline.builds.any?(&:stuck?)
-        %span.label.label-warning stuck
+  %td.branch-commit
+    = link_to namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id) do
+      %span ##{pipeline.id}
+    - if pipeline.ref && show_branch
+      .icon-container
+        = pipeline.tag? ? icon('tag') : icon('code-fork')
+      = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace branch-name"
+    - if show_commit
+      .icon-container
+        = custom_icon("icon_commit")
+      = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "commit-id monospace"
+    - if pipeline.latest?
+      %span.label.label-success.has-tooltip{ title: 'Latest build for this branch' } latest
+    - if pipeline.triggered?
+      %span.label.label-primary triggered
+    - if pipeline.yaml_errors.present?
+      %span.label.label-danger.has-tooltip{ title: "#{pipeline.yaml_errors}" } yaml invalid
+    - if pipeline.builds.any?(&:stuck?)
+      %span.label.label-warning stuck
 
-      %p.commit-title
-        - if commit = pipeline.commit
-          = author_avatar(commit, size: 20)
-          = link_to_gfm truncate(commit.title, length: 60), namespace_project_commit_path(pipeline.project.namespace, pipeline.project, commit.id), class: "commit-row-message"
-        - else
-          Cant find HEAD commit for this branch
+    %p.commit-title
+      - if commit = pipeline.commit
+        = author_avatar(commit, size: 20)
+        = link_to_gfm truncate(commit.title, length: 60), namespace_project_commit_path(pipeline.project.namespace, pipeline.project, commit.id), class: "commit-row-message"
+      - else
+        Cant find HEAD commit for this branch
 
 
     - stages_status = pipeline.statuses.relevant.latest.stages_status
@@ -58,8 +57,8 @@
         = icon("calendar")
         #{time_ago_with_tooltip(pipeline.finished_at, short_format: false, skip_js: true)}
 
-  %td.pipeline-actions
-    .controls.hidden-xs.pull-right
+  %td.pipeline-actions.hidden-xs
+    .controls.pull-right
       - artifacts = pipeline.builds.latest.with_artifacts_not_expired
       - actions = pipeline.manual_actions
       - if artifacts.present? || actions.any?

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

@@ -36,20 +36,20 @@
         = link_to ci_lint_path, class: 'btn btn-default' do
           %span CI Lint
 
-  %ul.content-list.pipelines
+  %div.content-list.pipelines
     - stages = @pipelines.stages
     - if @pipelines.blank?
-      %li
+      %div
         .nothing-here-block No pipelines to show
     - else
       .table-holder
         %table.table.builds
-          %tbody
-            %th Status
-            %th Pipeline
-            %th Stages
-            %th
-            %th
+          %thead
+            %th.col-xs-1.col-sm-1 Status
+            %th.col-xs-2.col-sm-4 Pipeline
+            %th.col-xs-2.col-sm-2 Stages
+            %th.col-xs-2.col-sm-2
+            %th.hidden-xs.col-sm-3
           = render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages
 
       = paginate @pipelines, theme: 'gitlab'