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

9 files changed, 81 insertions, 16 deletions

diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index 6e92b599b0a..cb073a9b04d 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -2,6 +2,7 @@
 import _ from 'underscore';
 import { GlLink } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import PipelineLink from '~/vue_shared/components/ci_pipeline_link.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
@@ -9,6 +10,7 @@ export default {
     CiIcon,
     Icon,
     GlLink,
+    PipelineLink,
   },
   props: {
     pipeline: {
@@ -48,9 +50,12 @@ export default {
       <ci-icon :status="pipeline.details.status" class="vertical-align-middle" />
 
       <span class="font-weight-bold">{{ s__('Job|Pipeline') }}</span>
-      <gl-link :href="pipeline.path" class="js-pipeline-path link-commit qa-pipeline-path"
-        >#{{ pipeline.id }}</gl-link
-      >
+      <pipeline-link
+        :href="pipeline.path"
+        :pipeline-id="pipeline.id"
+        :pipeline-iid="pipeline.iid"
+        class="js-pipeline-path link-commit qa-pipeline-path"
+      />
       <template v-if="hasRef">
         {{ s__('Job|for') }}
 
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"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index f5fa68308bc..c377c16fb13 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -5,6 +5,7 @@ import { sprintf, __ } from '~/locale';
 import PipelineStage from '~/pipelines/components/stage.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Icon from '~/vue_shared/components/icon.vue';
+import PipelineLink from '~/vue_shared/components/ci_pipeline_link.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import mrWidgetPipelineMixin from 'ee_else_ce/vue_merge_request_widget/mixins/mr_widget_pipeline';
 
@@ -16,6 +17,7 @@ export default {
     Icon,
     TooltipOnTruncate,
     GlLink,
+    PipelineLink,
     LinkedPipelinesMiniList: () =>
       import('ee_component/vue_shared/components/linked_pipelines_mini_list.vue'),
   },
@@ -112,9 +114,12 @@ export default {
           <div class="media-body">
             <div class="font-weight-bold js-pipeline-info-container">
               {{ s__('Pipeline|Pipeline') }}
-              <gl-link :href="pipeline.path" class="pipeline-id font-weight-normal pipeline-number"
-                >#{{ pipeline.id }}</gl-link
-              >
+              <pipeline-link
+                :href="pipeline.path"
+                :pipeline-id="pipeline.id"
+                :pipeline-iid="pipeline.iid"
+                class="pipeline-id pipeline-iid font-weight-normal"
+              />
               {{ pipeline.details.status.label }}
               <template v-if="hasCommitInfo">
                 {{ s__('Pipeline|for') }}
diff --git a/app/assets/javascripts/vue_shared/components/ci_pipeline_link.vue b/app/assets/javascripts/vue_shared/components/ci_pipeline_link.vue
new file mode 100644
index 00000000000..eae4c06467c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/ci_pipeline_link.vue
@@ -0,0 +1,32 @@
+<script>
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlLink,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    href: {
+      type: String,
+      required: true,
+    },
+    pipelineId: {
+      type: Number,
+      required: true,
+    },
+    pipelineIid: {
+      type: Number,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <gl-link v-gl-tooltip :href="href" :title="__('Pipeline ID (IID)')">
+    <span class="pipeline-id">#{{ pipelineId }}</span>
+    <span class="pipeline-iid">(#{{ pipelineIid }})</span>
+  </gl-link>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index 3f45dc7853b..0bac63b1062 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -37,6 +37,16 @@ export default {
       type: Number,
       required: true,
     },
+    itemIid: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    itemIdTooltip: {
+      type: String,
+      required: false,
+      default: '',
+    },
     time: {
       type: String,
       required: true,
@@ -85,7 +95,12 @@ export default {
     <section class="header-main-content">
       <ci-icon-badge :status="status" />
 
-      <strong> {{ itemName }} #{{ itemId }} </strong>
+      <strong v-gl-tooltip :title="itemIdTooltip">
+        {{ itemName }} #{{ itemId }}
+        <template v-if="itemIid"
+          >(#{{ itemIid }})</template
+        >
+      </strong>
 
       <template v-if="shouldRenderTriggeredLabel">
         triggered
@@ -96,9 +111,8 @@ export default {
 
       <timeago-tooltip :time="time" />
 
-      by
-
       <template v-if="user">
+        by
         <gl-link
           v-gl-tooltip
           :href="user.path"
diff --git a/app/serializers/pipeline_entity.rb b/app/serializers/pipeline_entity.rb
index 9ef93b2387f..ec2698ecbe3 100644
--- a/app/serializers/pipeline_entity.rb
+++ b/app/serializers/pipeline_entity.rb
@@ -4,6 +4,7 @@ class PipelineEntity < Grape::Entity
   include RequestAwareEntity
 
   expose :id
+  expose :iid
   expose :user, using: UserEntity
   expose :active?, as: :active
 
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index f4560404c03..bdf7b933ab8 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -53,9 +53,10 @@
         %span.badge.badge-info= _('manual')
 
   - if pipeline_link
-    %td
-      = link_to pipeline_path(pipeline) do
+    %td.pipeline-link
+      = link_to pipeline_path(pipeline), class: 'has-tooltip', title: _('Pipeline ID (IID)') do
         %span.pipeline-id ##{pipeline.id}
+        %span.pipeline-iid (##{pipeline.iid})
       %span by
       - if pipeline.user
         = user_avatar(user: pipeline.user, size: 20)
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index a0db48bf8ff..ef2777e6601 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -81,7 +81,7 @@
         = link_to project_pipeline_path(@project, last_pipeline.id), class: "ci-status-icon-#{last_pipeline.status}" do
           = ci_icon_for_status(last_pipeline.status)
       #{ _('Pipeline') }
-      = link_to "##{last_pipeline.id}", project_pipeline_path(@project, last_pipeline.id)
+      = link_to "##{last_pipeline.id} (##{last_pipeline.iid})", project_pipeline_path(@project, last_pipeline.id), class: "has-tooltip", title: _('Pipeline ID (IID)')
       = ci_label_for_status(last_pipeline.status)
       - if last_pipeline.stages_count.nonzero?
         #{ n_(s_('Pipeline|with stage'), s_('Pipeline|with stages'), last_pipeline.stages_count) }