Merge branch '25483-broken-tabs' into 'master'

Fix TypeError: Cannot read property 'initTabs'

## What does this MR do?
Adds a default value to the `options` argument in order to prevent errors when `Pipelines` is initialised without arguments.
Adds tests to guarantee this does not happen again.

Adds back removed pipeline class to make the pipeline graph visible, `js-pipeline-graph`

## Why was this MR needed?
In the places where `Pipelines` is initialised without arguments it throws an error: `TypeError: Cannot read property 'initTabs'`


## 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 #25483 
Closes #25493 

See merge request !8009

app/assets/javascripts/pipelines.js.es6

@@ -4,7 +4,7 @@
 ((global) => {
 
   class Pipelines {
-    constructor(options) {
+    constructor(options = {}) {
 
       if (options.initTabs && options.tabsOptions) {
         new global.LinkedTabs(options.tabsOptions);
@@ -14,9 +14,11 @@
     }
 
     addMarginToBuildColumns() {
-      this.pipelineGraph = document.querySelector('.pipeline-graph');
-      const secondChildBuildNodes = document.querySelector('.pipeline-graph').querySelectorAll('.build:nth-child(2)');
-      for (buildNodeIndex in secondChildBuildNodes) {
+      this.pipelineGraph = document.querySelector('.js-pipeline-graph');
+
+      const secondChildBuildNodes = this.pipelineGraph.querySelectorAll('.build:nth-child(2)');
+
+      for (const buildNodeIndex in secondChildBuildNodes) {
         const buildNode = secondChildBuildNodes[buildNodeIndex];
         const firstChildBuildNode = buildNode.previousElementSibling;
         if (!firstChildBuildNode || !firstChildBuildNode.matches('.build')) continue;
@@ -28,6 +30,7 @@
         const columnBuilds = previousColumn.querySelectorAll('.build');
         if (columnBuilds.length === 1) previousColumn.classList.add('no-margin');
       }
+
       this.pipelineGraph.classList.remove('hidden');
     }
   }

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: '.pipeline-graph', placement: 'bottom' } do
+  = 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: '.pipeline-graph', placement: 'bottom' } do
+  = 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

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

@@ -24,7 +24,7 @@
           in
           = time_interval_in_words pipeline.duration
 
-  .row-content-block.build-content.middle-block.hidden
+  .row-content-block.build-content.middle-block.js-pipeline-graph.hidden
     = render "projects/pipelines/graph", pipeline: pipeline
 
 - if pipeline.yaml_errors.present?

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

-%a{ data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.pipeline-graph', placement: 'bottom' } }
+%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}"}

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

@@ -12,7 +12,7 @@
 
 .tab-content
   #js-tab-pipeline.tab-pane
-    .build-content.middle-block
+    .build-content.middle-block.js-pipeline-graph
       = render "projects/pipelines/graph", pipeline: pipeline
 
   #js-tab-builds.tab-pane

changelogs/unreleased/25483-broken-tabs.yml

+---
+title: Fix TypeError: Cannot read property 'initTabs' on commit builds tab
+merge_request: 8009
+author:

spec/javascripts/fixtures/pipeline_graph.html.haml

+%div.pipeline-visualization.js-pipeline-graph
+  %ul.stage-column-list
+    %li.stage-column
+      .stage-name
+        %a{:href => "/"}
+          Test
+          .builds-container
+            %ul
+              %li.build
+                .curve
+                .build-content
+                  %a
+                    %svg
+                    .ci-status-text
+                      stop_review

spec/javascripts/pipelines_spec.js.es6

+//= require pipelines
+
+(() => {
+  describe('Pipelines', () => {
+    fixture.preload('pipeline_graph');
+
+    beforeEach(() => {
+      fixture.load('pipeline_graph');
+    });
+
+    it('should be defined', () => {
+      expect(window.gl.Pipelines).toBeDefined();
+    });
+
+    it('should create a `Pipelines` instance without options', () => {
+      expect(() => { new window.gl.Pipelines(); }).not.toThrow(); //eslint-disable-line
+    });
+
+    it('should create a `Pipelines` instance with options', () => {
+      const pipelines = new window.gl.Pipelines({ foo: 'bar' });
+
+      expect(pipelines.pipelineGraph).toBeDefined();
+    });
+  });
+})();

spec/views/projects/pipelines/show.html.haml_spec.rb

@@ -28,7 +28,7 @@ describe 'projects/pipelines/show' do
   it 'shows a graph with grouped stages' do
     render
 
-    expect(rendered).to have_css('.pipeline-graph')
+    expect(rendered).to have_css('.js-pipeline-graph')
     expect(rendered).to have_css('.grouped-pipeline-dropdown')
 
     # stages