Update job detail sidebar for post-merge pipelines

This commit updates the job detail view sidebar to accommodate new
states introduced as part of the post-merge pipeline feature.

1 files changed, 42 insertions, 9 deletions

diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index c5076d65ff9..6e92b599b0a 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -1,5 +1,6 @@
 <script>
 import _ from 'underscore';
+import { GlLink } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 
@@ -7,6 +8,7 @@ export default {
   components: {
     CiIcon,
     Icon,
+    GlLink,
   },
   props: {
     pipeline: {
@@ -26,6 +28,12 @@ export default {
     hasRef() {
       return !_.isEmpty(this.pipeline.ref);
     },
+    isTriggeredByMergeRequest() {
+      return Boolean(this.pipeline.merge_request);
+    },
+    isMergeRequestPipeline() {
+      return Boolean(this.pipeline.flags && this.pipeline.flags.merge_request_pipeline);
+    },
   },
   methods: {
     onStageClick(stage) {
@@ -36,16 +44,41 @@ export default {
 </script>
 <template>
   <div class="block-last dropdown">
-    <ci-icon :status="pipeline.details.status" class="vertical-align-middle" />
+    <div class="js-pipeline-info">
+      <ci-icon :status="pipeline.details.status" class="vertical-align-middle" />
 
-    <span class="font-weight-bold">{{ __('Pipeline') }}</span>
-    <a :href="pipeline.path" class="js-pipeline-path link-commit qa-pipeline-path"
-      >#{{ pipeline.id }}</a
-    >
-    <template v-if="hasRef">
-      {{ __('from') }}
-      <a :href="pipeline.ref.path" class="link-commit ref-name">{{ pipeline.ref.name }}</a>
-    </template>
+      <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
+      >
+      <template v-if="hasRef">
+        {{ s__('Job|for') }}
+
+        <template v-if="isTriggeredByMergeRequest">
+          <gl-link :href="pipeline.merge_request.path" class="link-commit ref-name js-mr-link"
+            >!{{ pipeline.merge_request.iid }}</gl-link
+          >
+          {{ s__('Job|with') }}
+          <gl-link
+            :href="pipeline.merge_request.source_branch_path"
+            class="link-commit ref-name js-source-branch-link"
+            >{{ pipeline.merge_request.source_branch }}</gl-link
+          >
+
+          <template v-if="isMergeRequestPipeline">
+            {{ s__('Job|into') }}
+            <gl-link
+              :href="pipeline.merge_request.target_branch_path"
+              class="link-commit ref-name js-target-branch-link"
+              >{{ pipeline.merge_request.target_branch }}</gl-link
+            >
+          </template>
+        </template>
+        <gl-link v-else :href="pipeline.ref.path" class="link-commit ref-name">{{
+          pipeline.ref.name
+        }}</gl-link>
+      </template>
+    </div>
 
     <button
       type="button"