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

2 files changed, 154 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 10e5466fc85..f3731698a18 100644
--- a/spec/features/projects/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -152,65 +152,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) }