Show indicator to Pipelines for merge train

What does this MR do?

Updates the text of the pipeline widget on a merge request's page.

This new text simplifies the current implementation (which has an unwieldy number of v-if in the Vue template) and also better indicates the pipeline's purpose.

Current implementation

(The current implementation has many possible permutations; only one scenario is shown in the screenshot above.)

UX proposal:

Note: the conditions will be evaluated in the order specified below.

Pipeline type	Pipeline texts in MR	Evaluation in FE
Pipelines for merge train	Merge train pipeline # 123 pending for adcd1234	pipeline.flags.merge_train_pipeline === true
Pipelines for merged results	Merged result pipeline # 123 pending for adcd1234	pipeline.flags.merge_request_pipeline === true
Pipelines for merge requests (detached)	Detached merge request pipeline # 123 pending for adcd1234	pipeline.flags.detached_merge_request_pipeline === true
Branch pipelines	Pipeline # 123 pending for adcd1234 on feature-branch	pipeline.ref.branch === true
Tag pipelines	Pipeline # 123 pending for adcd12341	pipeline.ref.tag === true

¹It is not currently possible to create a merge request for a tag, so this scenario is N/A at the moment. However, this feature has been proposed, so this merge request attempts to handle this possibility gracefully.

Screenshots

Merge train pipeline:

Merged result pipeline:

Detached merge request pipeline:

Branch pipeline:

Tag pipeline: N/A (tag pipelines are not yet implemented by GitLab)

Related issues

• https://gitlab.com/gitlab-org/gitlab-ee/issues/11222

This MR has a CE backport

https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/32025

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

@@ -6,6 +6,16 @@ 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 TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import { s__ } from '~/locale';
+import {
+  BRANCH_PIPELINE,
+  TAG_PIPELINE,
+  DETACHED_MERGE_REQUEST_PIPELINE,
+  MERGED_RESULT_PIPELINE,
+  MERGE_TRAIN_PIPELINE,
+  OTHER_PIPELINE,
+} from '../constants';
+
 import mrWidgetPipelineMixin from 'ee_else_ce/vue_merge_request_widget/mixins/mr_widget_pipeline';
 
 export default {
@@ -89,6 +99,35 @@ export default {
     isMergeRequestPipeline() {
       return Boolean(this.pipeline.flags && this.pipeline.flags.merge_request_pipeline);
     },
+    pipelineType() {
+      if (this.pipeline.flags.merge_train_pipeline) {
+        return MERGE_TRAIN_PIPELINE;
+      } else if (this.pipeline.flags.merge_request_pipeline) {
+        return MERGED_RESULT_PIPELINE;
+      } else if (this.pipeline.flags.detached_merge_request_pipeline) {
+        return DETACHED_MERGE_REQUEST_PIPELINE;
+      } else if (this.pipeline.ref.branch) {
+        return BRANCH_PIPELINE;
+      } else if (this.pipeline.ref.tag) {
+        return TAG_PIPELINE;
+      }
+
+      return OTHER_PIPELINE;
+    },
+    pipelineTypeLabel() {
+      if (this.pipelineType === DETACHED_MERGE_REQUEST_PIPELINE) {
+        return s__('Pipeline|Detached merge request pipeline');
+      } else if (this.pipelineType === MERGED_RESULT_PIPELINE) {
+        return s__('Pipeline|Merged result pipeline');
+      } else if (this.pipelineType === MERGE_TRAIN_PIPELINE) {
+        return s__('Pipeline|Merge train pipeline');
+      }
+
+      return s__('Pipeline|Pipeline');
+    },
+    showSourceBranch() {
+      return this.pipelineType === BRANCH_PIPELINE;
+    },
   },
 };
 </script>
@@ -108,7 +147,33 @@ export default {
         <div class="ci-widget-content">
           <div class="media-body">
             <div class="font-weight-bold js-pipeline-info-container">
-              {{ s__('Pipeline|Pipeline') }}
+              {{ pipelineTypeLabel }}
+              <gl-link :href="pipeline.path" class="pipeline-id font-weight-normal pipeline-number"
+                >#{{ pipeline.id }}</gl-link
+              >
+              {{ pipeline.details.status.label }}
+              <template v-if="hasCommitInfo">
+                {{ s__('Pipeline|for') }}
+                <gl-link
+                  :href="pipeline.commit.commit_path"
+                  class="commit-sha js-commit-link font-weight-normal"
+                  >{{ pipeline.commit.short_id }}</gl-link
+                >
+              </template>
+              <template v-if="showSourceBranch">
+                {{ s__('Pipeline|on') }}
+                <tooltip-on-truncate
+                  :title="sourceBranch"
+                  truncate-target="child"
+                  class="label-branch label-truncate"
+                >
+                  <gl-link :href="sourceBranchLink" class="font-weight-normal">{{
+                    sourceBranch
+                  }}</gl-link>
+                </tooltip-on-truncate>
+              </template>
+
+              <!-- {{ s__('Pipeline|Pipeline') }}
               <gl-link :href="pipeline.path" class="pipeline-id font-weight-normal pipeline-number"
                 >#{{ pipeline.id }}</gl-link
               >
@@ -164,7 +229,7 @@ export default {
                   class="label-branch label-truncate"
                   v-html="sourceBranchLink"
                 />
-              </template>
+              </template> -->
             </div>
             <div v-if="pipeline.coverage" class="coverage">
               {{ s__('Pipeline|Coverage') }} {{ pipeline.coverage }}%