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

 <script>
 /* eslint-disable vue/require-default-prop */
 import { GlTooltipDirective, GlLink } from '@gitlab/ui';
-import { sprintf, __ } from '~/locale';
+import { sprintf, s__ } 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 TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import mrWidgetPipelineMixin from 'ee_else_ce/vue_merge_request_widget/mixins/mr_widget_pipeline';
+import { BRANCH_PIPELINE } from '../constants';
 
 export default {
   name: 'MRWidgetPipeline',
@@ -73,8 +74,8 @@ export default {
     },
     errorText() {
       return sprintf(
-        __(
-          'Could not retrieve the pipeline status. For troubleshooting steps, read the %{linkStart}documentation.%{linkEnd}',
+        s__(
+          'Pipeline|Could not retrieve the pipeline status. For troubleshooting steps, read the %{linkStart}documentation.%{linkEnd}',
         ),
         {
           linkStart: `<a href="${this.troubleshootingDocsPath}">`,
@@ -89,6 +90,9 @@ export default {
     isMergeRequestPipeline() {
       return Boolean(this.pipeline.flags && this.pipeline.flags.merge_request_pipeline);
     },
+    showSourceBranch() {
+      return this.pipelineType === BRANCH_PIPELINE;
+    },
   },
 };
 </script>
@@ -108,7 +112,7 @@ 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
               >
@@ -120,48 +124,13 @@ export default {
                   class="commit-sha js-commit-link font-weight-normal"
                   >{{ pipeline.commit.short_id }}</gl-link
                 >
+              </template>
+              <template v-if="showSourceBranch">
                 {{ s__('Pipeline|on') }}
-                <template v-if="isTriggeredByMergeRequest">
-                  <gl-link
-                    v-gl-tooltip
-                    :href="pipeline.merge_request.path"
-                    :title="pipeline.merge_request.title"
-                    class="font-weight-normal"
-                    >!{{ pipeline.merge_request.iid }}</gl-link
-                  >
-                  {{ s__('Pipeline|with') }}
-                  <tooltip-on-truncate
-                    :title="pipeline.merge_request.source_branch"
-                    truncate-target="child"
-                    class="label-branch label-truncate"
-                  >
-                    <gl-link
-                      :href="pipeline.merge_request.source_branch_path"
-                      class="font-weight-normal"
-                      >{{ pipeline.merge_request.source_branch }}</gl-link
-                    >
-                  </tooltip-on-truncate>
-
-                  <template v-if="isMergeRequestPipeline">
-                    {{ s__('Pipeline|into') }}
-                    <tooltip-on-truncate
-                      :title="pipeline.merge_request.target_branch"
-                      truncate-target="child"
-                      class="label-branch label-truncate"
-                    >
-                      <gl-link
-                        :href="pipeline.merge_request.target_branch_path"
-                        class="font-weight-normal"
-                        >{{ pipeline.merge_request.target_branch }}</gl-link
-                      >
-                    </tooltip-on-truncate>
-                  </template>
-                </template>
                 <tooltip-on-truncate
-                  v-else
                   :title="sourceBranch"
                   truncate-target="child"
-                  class="label-branch label-truncate"
+                  class="label-branch label-truncate font-weight-normal"
                   v-html="sourceBranchLink"
                 />
               </template>