Add Pipeline IID to views

* Add Pipeline IID to MR's
* Add Pipeline IID to commit box
* Add Pipeline IID to builds page
* Add Pipeline IID to job sidebar
* Add Pipeline IID to header on view pipeline pages
* Add changelog entry
* Update tests

14 files changed, 61 insertions, 38 deletions

diff --git a/spec/features/merge_request/user_merges_when_pipeline_succeeds_spec.rb b/spec/features/merge_request/user_merges_when_pipeline_succeeds_spec.rb
index 6e54aa6006b..d4ad11b3585 100644
--- a/spec/features/merge_request/user_merges_when_pipeline_succeeds_spec.rb
+++ b/spec/features/merge_request/user_merges_when_pipeline_succeeds_spec.rb
@@ -52,7 +52,7 @@ describe 'Merge request > User merges when pipeline succeeds', :js do
           # so we have to wait for asynchronous call to reload it
           # and have_content expectation handles that.
           #
-          expect(page).to have_content "Pipeline ##{pipeline.id} running"
+          expect(page).to have_content "Pipeline ##{pipeline.id} (##{pipeline.iid}) running"
         end
 
         it_behaves_like 'Merge when pipeline succeeds activator'
diff --git a/spec/features/merge_request/user_sees_merge_widget_spec.rb b/spec/features/merge_request/user_sees_merge_widget_spec.rb
index a32c6bdcf8f..93ddde623fe 100644
--- a/spec/features/merge_request/user_sees_merge_widget_spec.rb
+++ b/spec/features/merge_request/user_sees_merge_widget_spec.rb
@@ -160,7 +160,7 @@ describe 'Merge request > User sees merge widget', :js do
 
     it 'shows head pipeline information' do
       within '.ci-widget-content' do
-        expect(page).to have_content("Pipeline ##{pipeline.id} pending " \
+        expect(page).to have_content("Pipeline ##{pipeline.id} (##{pipeline.iid}) pending " \
                                      "for #{pipeline.short_sha} " \
                                      "on #{pipeline.ref}")
       end
@@ -189,7 +189,7 @@ describe 'Merge request > User sees merge widget', :js do
 
     it 'shows head pipeline information' do
       within '.ci-widget-content' do
-        expect(page).to have_content("Pipeline ##{pipeline.id} pending " \
+        expect(page).to have_content("Pipeline ##{pipeline.id} (##{pipeline.iid}) pending " \
                                      "for #{pipeline.short_sha} " \
                                      "on #{merge_request.to_reference} " \
                                      "with #{merge_request.source_branch}")
@@ -201,7 +201,7 @@ describe 'Merge request > User sees merge widget', :js do
 
       it 'shows head pipeline information' do
         within '.ci-widget-content' do
-          expect(page).to have_content("Pipeline ##{pipeline.id} pending " \
+          expect(page).to have_content("Pipeline ##{pipeline.id} (##{pipeline.iid}) pending " \
                                        "for #{pipeline.short_sha} " \
                                        "on #{merge_request.to_reference} " \
                                        "with #{merge_request.source_branch}")
@@ -234,7 +234,7 @@ describe 'Merge request > User sees merge widget', :js do
 
     it 'shows head pipeline information' do
       within '.ci-widget-content' do
-        expect(page).to have_content("Pipeline ##{pipeline.id} pending " \
+        expect(page).to have_content("Pipeline ##{pipeline.id} (##{pipeline.iid}) pending " \
                                      "for #{pipeline.short_sha} " \
                                      "on #{merge_request.to_reference} " \
                                      "with #{merge_request.source_branch} " \
@@ -248,7 +248,7 @@ describe 'Merge request > User sees merge widget', :js do
 
       it 'shows head pipeline information' do
         within '.ci-widget-content' do
-          expect(page).to have_content("Pipeline ##{pipeline.id} pending " \
+          expect(page).to have_content("Pipeline ##{pipeline.id} (##{pipeline.iid}) pending " \
                                        "for #{pipeline.short_sha} " \
                                        "on #{merge_request.to_reference} " \
                                        "with #{merge_request.source_branch} " \
diff --git a/spec/features/projects/commits/user_browses_commits_spec.rb b/spec/features/projects/commits/user_browses_commits_spec.rb
index 574a8aefd63..953517cdff9 100644
--- a/spec/features/projects/commits/user_browses_commits_spec.rb
+++ b/spec/features/projects/commits/user_browses_commits_spec.rb
@@ -61,7 +61,7 @@ describe 'User browses commits' do
     it 'renders commit ci info' do
       visit project_commit_path(project, sample_commit.id)
 
-      expect(page).to have_content "Pipeline ##{pipeline.id} pending"
+      expect(page).to have_content "Pipeline ##{pipeline.id} (##{pipeline.iid}) pending"
     end
   end
 
diff --git a/spec/features/projects/jobs/user_browses_jobs_spec.rb b/spec/features/projects/jobs/user_browses_jobs_spec.rb
index ebc20d15d67..bd6c73f4b85 100644
--- a/spec/features/projects/jobs/user_browses_jobs_spec.rb
+++ b/spec/features/projects/jobs/user_browses_jobs_spec.rb
@@ -16,6 +16,12 @@ describe 'User browses jobs' do
     visit(project_jobs_path(project))
   end
 
+  it 'shows pipeline id and IID' do
+    page.within('td.pipeline-link') do
+      expect(page).to have_content("##{pipeline.id} (##{pipeline.iid})")
+    end
+  end
+
   it 'shows the coverage' do
     page.within('td.coverage') do
       expect(page).to have_content('99.9%')
diff --git a/spec/features/projects/jobs_spec.rb b/spec/features/projects/jobs_spec.rb
index 9cf04fe13b4..77ea613b282 100644
--- a/spec/features/projects/jobs_spec.rb
+++ b/spec/features/projects/jobs_spec.rb
@@ -129,7 +129,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
         visit project_job_path(project, job)
 
         within '.js-pipeline-info' do
-          expect(page).to have_content("Pipeline ##{pipeline.id} for #{pipeline.ref}")
+          expect(page).to have_content("Pipeline ##{pipeline.id} (##{pipeline.iid}) for #{pipeline.ref}")
         end
       end
 
diff --git a/spec/javascripts/jobs/components/stages_dropdown_spec.js b/spec/javascripts/jobs/components/stages_dropdown_spec.js
index 52bb5161123..e98639bf21e 100644
--- a/spec/javascripts/jobs/components/stages_dropdown_spec.js
+++ b/spec/javascripts/jobs/components/stages_dropdown_spec.js
@@ -9,6 +9,7 @@ describe('Stages Dropdown', () => {
 
   const mockPipelineData = {
     id: 28029444,
+    iid: 123,
     details: {
       status: {
         details_path: '/gitlab-org/gitlab-ce/pipelines/28029444',
@@ -77,8 +78,8 @@ describe('Stages Dropdown', () => {
       expect(vm.$el.querySelector('.dropdown .js-selected-stage').textContent).toContain('deploy');
     });
 
-    it(`renders the pipeline info text like "Pipeline #123 for source_branch"`, () => {
-      const expected = `Pipeline #${pipeline.id} for ${pipeline.ref.name}`;
+    it(`renders the pipeline info text like "Pipeline #123 (#12) for source_branch"`, () => {
+      const expected = `Pipeline #${pipeline.id} (#${pipeline.iid}) for ${pipeline.ref.name}`;
       const actual = trimText(vm.$el.querySelector('.js-pipeline-info').innerText);
 
       expect(actual).toBe(expected);
@@ -100,10 +101,10 @@ describe('Stages Dropdown', () => {
       });
     });
 
-    it(`renders the pipeline info text like "Pipeline #123 for !456 with source_branch into target_branch"`, () => {
-      const expected = `Pipeline #${pipeline.id} for !${pipeline.merge_request.iid} with ${
-        pipeline.merge_request.source_branch
-      } into ${pipeline.merge_request.target_branch}`;
+    it(`renders the pipeline info text like "Pipeline #123 (#12) for !456 with source_branch into target_branch"`, () => {
+      const expected = `Pipeline #${pipeline.id} (#${pipeline.iid}) for !${
+        pipeline.merge_request.iid
+      } with ${pipeline.merge_request.source_branch} into ${pipeline.merge_request.target_branch}`;
       const actual = trimText(vm.$el.querySelector('.js-pipeline-info').innerText);
 
       expect(actual).toBe(expected);
@@ -143,10 +144,10 @@ describe('Stages Dropdown', () => {
       });
     });
 
-    it(`renders the pipeline info like "Pipeline #123 for !456 with source_branch"`, () => {
-      const expected = `Pipeline #${pipeline.id} for !${pipeline.merge_request.iid} with ${
-        pipeline.merge_request.source_branch
-      }`;
+    it(`renders the pipeline info like "Pipeline #123 (#12) for !456 with source_branch"`, () => {
+      const expected = `Pipeline #${pipeline.id} (#${pipeline.iid}) for !${
+        pipeline.merge_request.iid
+      } with ${pipeline.merge_request.source_branch}`;
       const actual = trimText(vm.$el.querySelector('.js-pipeline-info').innerText);
 
       expect(actual).toBe(expected);
diff --git a/spec/javascripts/jobs/mock_data.js b/spec/javascripts/jobs/mock_data.js
index 3d40e94d219..88b0bb206ee 100644
--- a/spec/javascripts/jobs/mock_data.js
+++ b/spec/javascripts/jobs/mock_data.js
@@ -960,6 +960,7 @@ export default {
   },
   pipeline: {
     id: 140,
+    iid: 13,
     user: {
       name: 'Root',
       username: 'root',
diff --git a/spec/javascripts/pipelines/mock_data.js b/spec/javascripts/pipelines/mock_data.js
index 03ead6cd8ba..8eef9166b8d 100644
--- a/spec/javascripts/pipelines/mock_data.js
+++ b/spec/javascripts/pipelines/mock_data.js
@@ -1,5 +1,6 @@
 export const pipelineWithStages = {
   id: 20333396,
+  iid: 304399,
   user: {
     id: 128633,
     name: 'Rémy Coutable',
diff --git a/spec/javascripts/pipelines/pipeline_url_spec.js b/spec/javascripts/pipelines/pipeline_url_spec.js
index aa196af2f33..88c0137dc58 100644
--- a/spec/javascripts/pipelines/pipeline_url_spec.js
+++ b/spec/javascripts/pipelines/pipeline_url_spec.js
@@ -13,6 +13,7 @@ describe('Pipeline Url Component', () => {
       propsData: {
         pipeline: {
           id: 1,
+          iid: 1,
           path: 'foo',
           flags: {},
         },
@@ -28,6 +29,7 @@ describe('Pipeline Url Component', () => {
       propsData: {
         pipeline: {
           id: 1,
+          iid: 1,
           path: 'foo',
           flags: {},
         },
@@ -47,6 +49,7 @@ describe('Pipeline Url Component', () => {
       propsData: {
         pipeline: {
           id: 1,
+          iid: 1,
           path: 'foo',
           flags: {
             latest: true,
@@ -78,6 +81,7 @@ describe('Pipeline Url Component', () => {
       propsData: {
         pipeline: {
           id: 1,
+          iid: 1,
           path: 'foo',
           flags: {
             latest: true,
@@ -100,6 +104,7 @@ describe('Pipeline Url Component', () => {
       propsData: {
         pipeline: {
           id: 1,
+          iid: 1,
           path: 'foo',
           flags: {
             failure_reason: true,
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
index 75017d20473..a2308b0dfdb 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
@@ -103,7 +103,7 @@ describe('MRWidgetPipeline', () => {
 
       it('should render pipeline ID', () => {
         expect(vm.$el.querySelector('.pipeline-id').textContent.trim()).toEqual(
-          `#${mockData.pipeline.id}`,
+          `#${mockData.pipeline.id} (#${mockData.pipeline.iid})`,
         );
       });
 
@@ -150,7 +150,7 @@ describe('MRWidgetPipeline', () => {
 
       it('should render pipeline ID', () => {
         expect(vm.$el.querySelector('.pipeline-id').textContent.trim()).toEqual(
-          `#${mockData.pipeline.id}`,
+          `#${mockData.pipeline.id} (#${mockData.pipeline.iid})`,
         );
       });
 
@@ -222,9 +222,9 @@ describe('MRWidgetPipeline', () => {
           sourceBranchLink: mockCopy.source_branch_link,
         });
 
-        const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${
-          pipeline.commit.short_id
-        } on ${mockCopy.source_branch_link}`;
+        const expected = `Pipeline #${pipeline.id} (#${pipeline.iid}) ${
+          pipeline.details.status.label
+        } for ${pipeline.commit.short_id} on ${mockCopy.source_branch_link}`;
 
         const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
 
@@ -247,11 +247,11 @@ describe('MRWidgetPipeline', () => {
           sourceBranchLink: mockCopy.source_branch_link,
         });
 
-        const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${
-          pipeline.commit.short_id
-        } on !${pipeline.merge_request.iid} with ${pipeline.merge_request.source_branch} into ${
-          pipeline.merge_request.target_branch
-        }`;
+        const expected = `Pipeline #${pipeline.id} (#${pipeline.iid}) ${
+          pipeline.details.status.label
+        } for ${pipeline.commit.short_id} on !${pipeline.merge_request.iid} with ${
+          pipeline.merge_request.source_branch
+        } into ${pipeline.merge_request.target_branch}`;
 
         const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
 
@@ -274,9 +274,11 @@ describe('MRWidgetPipeline', () => {
           sourceBranchLink: mockCopy.source_branch_link,
         });
 
-        const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${
-          pipeline.commit.short_id
-        } on !${pipeline.merge_request.iid} with ${pipeline.merge_request.source_branch}`;
+        const expected = `Pipeline #${pipeline.id} (#${pipeline.iid}) ${
+          pipeline.details.status.label
+        } for ${pipeline.commit.short_id} on !${pipeline.merge_request.iid} with ${
+          pipeline.merge_request.source_branch
+        }`;
 
         const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
 
diff --git a/spec/javascripts/vue_mr_widget/mock_data.js b/spec/javascripts/vue_mr_widget/mock_data.js
index bec16b0aab0..edbd0d54151 100644
--- a/spec/javascripts/vue_mr_widget/mock_data.js
+++ b/spec/javascripts/vue_mr_widget/mock_data.js
@@ -62,6 +62,7 @@ export default {
     "Merge branch 'daaaa' into 'master'\n\nUpdate README.md\n\nSee merge request !22",
   pipeline: {
     id: 172,
+    iid: 32,
     user: {
       name: 'Administrator',
       username: 'root',
@@ -241,6 +242,8 @@ export default {
 export const mockStore = {
   pipeline: {
     id: 0,
+    iid: 0,
+    path: '/root/acets-app/pipelines/0',
     details: {
       status: {
         details_path: '/root/review-app-tester/pipelines/66',
@@ -258,6 +261,8 @@ export const mockStore = {
   },
   mergePipeline: {
     id: 1,
+    iid: 1,
+    path: '/root/acets-app/pipelines/0',
     details: {
       status: {
         details_path: '/root/review-app-tester/pipelines/66',
diff --git a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
index a0628fdcebe..7653c10b94b 100644
--- a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
+++ b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
@@ -600,6 +600,7 @@ describe('mrWidgetOptions', () => {
     ];
     const deploymentMockData = {
       id: 15,
+      iid: 7,
       name: 'review/diplo',
       url: '/root/acets-review-apps/environments/15',
       stop_url: '/root/acets-review-apps/environments/15/stop',
@@ -646,6 +647,7 @@ describe('mrWidgetOptions', () => {
         vm.mr.state = 'merged';
         vm.mr.mergePipeline = {
           id: 127,
+          iid: 35,
           user: {
             id: 1,
             name: 'Administrator',
diff --git a/spec/views/projects/commit/_commit_box.html.haml_spec.rb b/spec/views/projects/commit/_commit_box.html.haml_spec.rb
index 1086546c10d..457dd2e940f 100644
--- a/spec/views/projects/commit/_commit_box.html.haml_spec.rb
+++ b/spec/views/projects/commit/_commit_box.html.haml_spec.rb
@@ -27,7 +27,7 @@ describe 'projects/commit/_commit_box.html.haml' do
 
         render
 
-        expect(rendered).to have_text("Pipeline ##{third_pipeline.id} failed")
+        expect(rendered).to have_text("Pipeline ##{third_pipeline.id} (##{third_pipeline.iid}) failed")
       end
     end
 
@@ -40,7 +40,7 @@ describe 'projects/commit/_commit_box.html.haml' do
       it 'shows correct pipeline description' do
         render
 
-        expect(rendered).to have_text "Pipeline ##{pipeline.id} " \
+        expect(rendered).to have_text "Pipeline ##{pipeline.id} (##{pipeline.iid}) " \
                                       'waiting for manual action'
       end
     end
diff --git a/spec/views/projects/jobs/_build.html.haml_spec.rb b/spec/views/projects/jobs/_build.html.haml_spec.rb
index 1d58891036e..97b25a6976f 100644
--- a/spec/views/projects/jobs/_build.html.haml_spec.rb
+++ b/spec/views/projects/jobs/_build.html.haml_spec.rb
@@ -4,7 +4,7 @@ describe 'projects/ci/jobs/_build' do
   include Devise::Test::ControllerHelpers
 
   let(:project) { create(:project, :repository) }
-  let(:pipeline) { create(:ci_empty_pipeline, id: 1337, project: project, sha: project.commit.id) }
+  let(:pipeline) { create(:ci_empty_pipeline, id: 1337, iid: 57, project: project, sha: project.commit.id) }
   let(:build) { create(:ci_build, pipeline: pipeline, stage: 'test', stage_idx: 1, name: 'rspec 0:2', status: :pending) }
 
   before do
@@ -15,14 +15,14 @@ describe 'projects/ci/jobs/_build' do
   it 'won\'t include a column with a link to its pipeline by default' do
     render partial: 'projects/ci/builds/build', locals: { build: build }
 
-    expect(rendered).not_to have_link('#1337')
-    expect(rendered).not_to have_text('#1337 by API')
+    expect(rendered).not_to have_link('#1337 (#57)')
+    expect(rendered).not_to have_text('#1337 (#57) by API')
   end
 
   it 'can include a column with a link to its pipeline' do
     render partial: 'projects/ci/builds/build', locals: { build: build, pipeline_link: true }
 
-    expect(rendered).to have_link('#1337')
-    expect(rendered).to have_text('#1337 by API')
+    expect(rendered).to have_link('#1337 (#57)')
+    expect(rendered).to have_text('#1337 (#57) by API')
   end
 end