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

3 files changed, 22 insertions, 13 deletions

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