Merge branch '24814-pipeline-tabs' into 'master'

Pipelines tabs

## What does this MR do?
Changes the URL when the builds tab is clicked making it possible to be shared.

1. Adds a standard way to handle linked tabs:
    *   This behaviour is already present in the merge requests, commit and user `show` page. 
    *    This MR introduces a reusable way to accomplish this behaviour for pages with static content.

2. Adds test:
    *   For the linked tabs reusable class
    *  For the pipelines tabs

## Why was this MR needed?
To allow having a sharable URL that represented the opened tab

![tabs](/uploads/91e663c12c6e9ac46a17aa3a9489dc72/tabs.gif)

## 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
  - [x] 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 #24814

See merge request !7709

4 files changed, 222 insertions, 59 deletions

diff --git a/spec/features/projects/pipelines/pipeline_spec.rb b/spec/features/projects/pipelines/pipeline_spec.rb
new file mode 100644
index 00000000000..3350a3aeefc
--- /dev/null
+++ b/spec/features/projects/pipelines/pipeline_spec.rb
@@ -0,0 +1,154 @@
+require 'spec_helper'
+
+describe "Pipelines", feature: true, js: true do
+  include GitlabRoutingHelper
+
+  let(:project) { create(:empty_project) }
+  let(:user) { create(:user) }
+
+  before do
+    login_as(user)
+    project.team << [user, :developer]
+  end
+
+  describe 'GET /:project/pipelines/:id' do
+    let(:project) { create(:project) }
+    let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master', sha: project.commit.id) }
+
+    before do
+      @success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')
+      @failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
+      @running = create(:ci_build, :running, pipeline: pipeline, stage: 'deploy', name: 'deploy')
+      @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual build')
+      @external = create(:generic_commit_status, status: 'success', pipeline: pipeline, name: 'jenkins', stage: 'external')
+    end
+
+    before { visit namespace_project_pipeline_path(project.namespace, project, pipeline) }
+
+    it 'shows the pipeline graph' do
+      expect(page).to have_selector('.pipeline-visualization')
+      expect(page).to have_content('Build')
+      expect(page).to have_content('Test')
+      expect(page).to have_content('Deploy')
+      expect(page).to have_content('Retry failed')
+      expect(page).to have_content('Cancel running')
+    end
+
+    it 'shows Pipeline tab pane as active' do
+      expect(page).to have_css('#js-tab-pipeline.active')
+    end
+
+    context 'page tabs' do
+      it 'shows Pipeline and Builds tabs with link' do
+        expect(page).to have_link('Pipeline')
+        expect(page).to have_link('Builds')
+      end
+
+      it 'shows counter in Builds tab' do
+        expect(page.find('.js-builds-counter').text).to eq(pipeline.statuses.count.to_s)
+      end
+
+      it 'shows Pipeline tab as active' do
+        expect(page).to have_css('.js-pipeline-tab-link.active')
+      end
+    end
+
+    context 'retrying builds' do
+      it { expect(page).not_to have_content('retried') }
+
+      context 'when retrying' do
+        before { click_on 'Retry failed' }
+
+        it { expect(page).not_to have_content('Retry failed') }
+      end
+    end
+
+    context 'canceling builds' do
+      it { expect(page).not_to have_selector('.ci-canceled') }
+
+      context 'when canceling' do
+        before { click_on 'Cancel running' }
+
+        it { expect(page).not_to have_content('Cancel running') }
+      end
+    end
+  end
+
+  describe 'GET /:project/pipelines/:id/builds' do
+    let(:project) { create(:project) }
+    let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master', sha: project.commit.id) }
+
+    before do
+      @success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')
+      @failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
+      @running = create(:ci_build, :running, pipeline: pipeline, stage: 'deploy', name: 'deploy')
+      @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual build')
+      @external = create(:generic_commit_status, status: 'success', pipeline: pipeline, name: 'jenkins', stage: 'external')
+    end
+
+    before { visit builds_namespace_project_pipeline_path(project.namespace, project, pipeline)}
+
+    it 'shows a list of builds' do
+      expect(page).to have_content('Test')
+      expect(page).to have_content(@success.id)
+      expect(page).to have_content('Deploy')
+      expect(page).to have_content(@failed.id)
+      expect(page).to have_content(@running.id)
+      expect(page).to have_content(@external.id)
+      expect(page).to have_content('Retry failed')
+      expect(page).to have_content('Cancel running')
+      expect(page).to have_link('Play')
+    end
+
+    it 'shows Builds tab pane as active' do
+      expect(page).to have_css('#js-tab-builds.active')
+    end
+
+    context 'page tabs' do
+      it 'shows Pipeline and Builds tabs with link' do
+        expect(page).to have_link('Pipeline')
+        expect(page).to have_link('Builds')
+      end
+
+      it 'shows counter in Builds tab' do
+        expect(page.find('.js-builds-counter').text).to eq(pipeline.statuses.count.to_s)
+      end
+
+      it 'shows Builds tab as active' do
+        expect(page).to have_css('li.js-builds-tab-link.active')
+      end
+    end
+
+    context 'retrying builds' do
+      it { expect(page).not_to have_content('retried') }
+
+      context 'when retrying' do
+        before { click_on 'Retry failed' }
+
+        it { expect(page).not_to have_content('Retry failed') }
+        it { expect(page).to have_selector('.retried') }
+      end
+    end
+
+    context 'canceling builds' do
+      it { expect(page).not_to have_selector('.ci-canceled') }
+
+      context 'when canceling' do
+        before { click_on 'Cancel running' }
+
+        it { expect(page).not_to have_content('Cancel running') }
+        it { expect(page).to have_selector('.ci-canceled') }
+      end
+    end
+
+    context 'playing manual build' do
+      before do
+        within '.pipeline-holder' do
+          click_link('Play')
+        end
+      end
+
+      it { expect(@manual.reload).to be_pending }
+    end
+  end
+end
diff --git a/spec/features/projects/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb
index 002c6f6b359..23a63db0411 100644
--- a/spec/features/projects/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -145,65 +145,6 @@ describe "Pipelines" do
     end
   end
 
-  describe 'GET /:project/pipelines/:id' do
-    let(:project) { create(:project) }
-    let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master', sha: project.commit.id) }
-
-    before do
-      @success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')
-      @failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
-      @running = create(:ci_build, :running, pipeline: pipeline, stage: 'deploy', name: 'deploy')
-      @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual build')
-      @external = create(:generic_commit_status, status: 'success', pipeline: pipeline, name: 'jenkins', stage: 'external')
-    end
-
-    before { visit namespace_project_pipeline_path(project.namespace, project, pipeline) }
-
-    it 'shows a list of builds' do
-      expect(page).to have_content('Test')
-      expect(page).to have_content(@success.id)
-      expect(page).to have_content('Deploy')
-      expect(page).to have_content(@failed.id)
-      expect(page).to have_content(@running.id)
-      expect(page).to have_content(@external.id)
-      expect(page).to have_content('Retry failed')
-      expect(page).to have_content('Cancel running')
-      expect(page).to have_link('Play')
-    end
-
-    context 'retrying builds' do
-      it { expect(page).not_to have_content('retried') }
-
-      context 'when retrying' do
-        before { click_on 'Retry failed' }
-
-        it { expect(page).not_to have_content('Retry failed') }
-        it { expect(page).to have_selector('.retried') }
-      end
-    end
-
-    context 'canceling builds' do
-      it { expect(page).not_to have_selector('.ci-canceled') }
-
-      context 'when canceling' do
-        before { click_on 'Cancel running' }
-
-        it { expect(page).not_to have_content('Cancel running') }
-        it { expect(page).to have_selector('.ci-canceled') }
-      end
-    end
-
-    context 'playing manual build' do
-      before do
-        within '.pipeline-holder' do
-          click_link('Play')
-        end
-      end
-
-      it { expect(@manual.reload).to be_pending }
-    end
-  end
-
   describe 'POST /:project/pipelines' do
     let(:project) { create(:project) }
 
diff --git a/spec/javascripts/bootstrap_linked_tabs_spec.js.es6 b/spec/javascripts/bootstrap_linked_tabs_spec.js.es6
new file mode 100644
index 00000000000..9aa3c50611d
--- /dev/null
+++ b/spec/javascripts/bootstrap_linked_tabs_spec.js.es6
@@ -0,0 +1,55 @@
+//= require lib/utils/bootstrap_linked_tabs
+
+(() => {
+  describe('Linked Tabs', () => {
+    fixture.preload('linked_tabs');
+
+    beforeEach(() => {
+      fixture.load('linked_tabs');
+    });
+
+    describe('when is initialized', () => {
+      it('should activate the tab correspondent to the given action', () => {
+        const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
+          action: 'tab1',
+          defaultAction: 'tab1',
+          parentEl: '.linked-tabs',
+        });
+
+        expect(document.querySelector('#tab1').classList).toContain('active');
+      });
+
+      it('should active the default tab action when the action is show', () => {
+        const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
+          action: 'show',
+          defaultAction: 'tab1',
+          parentEl: '.linked-tabs',
+        });
+
+        expect(document.querySelector('#tab1').classList).toContain('active');
+      });
+    });
+
+    describe('on click', () => {
+      it('should change the url according to the clicked tab', () => {
+        const historySpy = spyOn(history, 'replaceState').and.callFake(() => {});
+
+        const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
+          action: 'show',
+          defaultAction: 'tab1',
+          parentEl: '.linked-tabs',
+        });
+
+        const secondTab = document.querySelector('.linked-tabs li:nth-child(2) a');
+        const newState = secondTab.getAttribute('href') + linkedTabs.currentLocation.search + linkedTabs.currentLocation.hash;
+
+        secondTab.click();
+
+        expect(historySpy).toHaveBeenCalledWith({
+          turbolinks: true,
+          url: newState,
+        }, document.title, newState);
+      });
+    });
+  });
+})();
diff --git a/spec/javascripts/fixtures/linked_tabs.html.haml b/spec/javascripts/fixtures/linked_tabs.html.haml
new file mode 100644
index 00000000000..93c0cf97ff0
--- /dev/null
+++ b/spec/javascripts/fixtures/linked_tabs.html.haml
@@ -0,0 +1,13 @@
+%ul.nav.nav-tabs.linked-tabs
+  %li
+    %a{ href: 'foo/bar/1', data: { target: 'div#tab1', action: 'tab1', toggle: 'tab' } }
+      Tab 1
+  %li
+    %a{ href: 'foo/bar/1/context', data: { target: 'div#tab2', action: 'tab2', toggle: 'tab' } }
+      Tab 2
+
+.tab-content
+  #tab1.tab-pane
+    Tab 1 Content
+  #tab2.tab-pane
+    Tab 2 Content