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

2 files changed, 12 insertions, 10 deletions

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',