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, 11 insertions, 4 deletions

diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index b2e365e5cde..f3a71ee434c 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -83,6 +83,8 @@ export default {
       v-if="shouldRenderContent"
       :status="status"
       :item-id="pipeline.id"
+      :item-iid="pipeline.iid"
+      :item-id-tooltip="__('Pipeline ID (IID)')"
       :time="pipeline.created_at"
       :user="pipeline.user"
       :actions="actions"
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index c41ecab1294..00c02e15562 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -2,6 +2,7 @@
 import { GlLink, GlTooltipDirective } from '@gitlab/ui';
 import _ from 'underscore';
 import { __, sprintf } from '~/locale';
+import PipelineLink from '~/vue_shared/components/ci_pipeline_link.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import popover from '~/vue_shared/directives/popover';
 
@@ -19,6 +20,7 @@ export default {
   components: {
     UserAvatarLink,
     GlLink,
+    PipelineLink,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -59,10 +61,13 @@ export default {
 };
 </script>
 <template>
-  <div class="table-section section-10 d-none d-sm-none d-md-block pipeline-tags">
-    <gl-link :href="pipeline.path" class="js-pipeline-url-link">
-      <span class="pipeline-id">#{{ pipeline.id }}</span>
-    </gl-link>
+  <div class="table-section section-10 d-none d-sm-none d-md-block pipeline-tags section-wrap">
+    <pipeline-link
+      :href="pipeline.path"
+      :pipeline-id="pipeline.id"
+      :pipeline-iid="pipeline.iid"
+      class="js-pipeline-url-link"
+    />
     <div class="label-container">
       <span
         v-if="pipeline.flags.latest"