Add latest changes from gitlab-org/gitlab@master

3 files changed, 217 insertions, 199 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_labels.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_labels.vue
new file mode 100644
index 00000000000..40b2454b8c1
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_labels.vue
@@ -0,0 +1,170 @@
+<script>
+import { GlLink, GlPopover, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { SCHEDULE_ORIGIN } from '../../constants';
+
+export default {
+  components: {
+    GlBadge,
+    GlLink,
+    GlPopover,
+    GlSprintf,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: {
+    targetProjectFullPath: {
+      default: '',
+    },
+  },
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
+    },
+    pipelineScheduleUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    isScheduled() {
+      return this.pipeline.source === SCHEDULE_ORIGIN;
+    },
+    isInFork() {
+      return Boolean(
+        this.targetProjectFullPath &&
+          this.pipeline?.project?.full_path !== `/${this.targetProjectFullPath}`,
+      );
+    },
+    autoDevopsTagId() {
+      return `pipeline-url-autodevops-${this.pipeline.id}`;
+    },
+    autoDevopsHelpPath() {
+      return helpPagePath('topics/autodevops/index.md');
+    },
+  },
+};
+</script>
+<template>
+  <div class="label-container gl-mt-1">
+    <gl-badge
+      v-if="isScheduled"
+      v-gl-tooltip
+      :href="pipelineScheduleUrl"
+      target="__blank"
+      :title="__('This pipeline was triggered by a schedule.')"
+      variant="info"
+      size="sm"
+      data-testid="pipeline-url-scheduled"
+      >{{ __('Scheduled') }}</gl-badge
+    >
+    <gl-badge
+      v-if="pipeline.flags.latest"
+      v-gl-tooltip
+      :title="__('Latest pipeline for the most recent commit on this branch')"
+      variant="success"
+      size="sm"
+      data-testid="pipeline-url-latest"
+      >{{ __('latest') }}</gl-badge
+    >
+    <gl-badge
+      v-if="pipeline.flags.merge_train_pipeline"
+      v-gl-tooltip
+      :title="
+        s__(
+          'Pipeline|This pipeline ran on the contents of this merge request combined with the contents of all other merge requests queued for merging into the target branch.',
+        )
+      "
+      variant="info"
+      size="sm"
+      data-testid="pipeline-url-train"
+      >{{ s__('Pipeline|merge train') }}</gl-badge
+    >
+    <gl-badge
+      v-if="pipeline.flags.yaml_errors"
+      v-gl-tooltip
+      :title="pipeline.yaml_errors"
+      variant="danger"
+      size="sm"
+      data-testid="pipeline-url-yaml"
+      >{{ __('yaml invalid') }}</gl-badge
+    >
+    <gl-badge
+      v-if="pipeline.flags.failure_reason"
+      v-gl-tooltip
+      :title="pipeline.failure_reason"
+      variant="danger"
+      size="sm"
+      data-testid="pipeline-url-failure"
+      >{{ __('error') }}</gl-badge
+    >
+    <template v-if="pipeline.flags.auto_devops">
+      <gl-link
+        :id="autoDevopsTagId"
+        tabindex="0"
+        data-testid="pipeline-url-autodevops"
+        role="button"
+      >
+        <gl-badge variant="info" size="sm">
+          {{ __('Auto DevOps') }}
+        </gl-badge>
+      </gl-link>
+      <gl-popover :target="autoDevopsTagId" triggers="focus" placement="top">
+        <template #title>
+          <div class="gl-font-weight-normal gl-line-height-normal">
+            <gl-sprintf
+              :message="
+                __(
+                  'This pipeline makes use of a predefined CI/CD configuration enabled by %{strongStart}Auto DevOps.%{strongEnd}',
+                )
+              "
+            >
+              <template #strong="{ content }">
+                <b>{{ content }}</b>
+              </template>
+            </gl-sprintf>
+          </div>
+        </template>
+        <gl-link
+          :href="autoDevopsHelpPath"
+          data-testid="pipeline-url-autodevops-link"
+          target="_blank"
+        >
+          {{ __('Learn more about Auto DevOps') }}
+        </gl-link>
+      </gl-popover>
+    </template>
+
+    <gl-badge
+      v-if="pipeline.flags.stuck"
+      variant="warning"
+      size="sm"
+      data-testid="pipeline-url-stuck"
+      >{{ __('stuck') }}</gl-badge
+    >
+    <gl-badge
+      v-if="pipeline.flags.detached_merge_request_pipeline"
+      v-gl-tooltip
+      :title="
+        s__(
+          `Pipeline|This pipeline ran on the contents of this merge request's source branch, not the target branch.`,
+        )
+      "
+      variant="info"
+      size="sm"
+      data-testid="pipeline-url-detached"
+      >{{ s__('Pipeline|merge request') }}</gl-badge
+    >
+    <gl-badge
+      v-if="isInFork"
+      v-gl-tooltip
+      :title="__('Pipeline ran in fork of project')"
+      variant="info"
+      size="sm"
+      data-testid="pipeline-url-fork"
+      >{{ __('fork') }}</gl-badge
+    >
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
index 54bd42cbf22..1dcbd77a92d 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
@@ -1,27 +1,20 @@
 <script>
-import { GlIcon, GlLink, GlPopover, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui';
+import { GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
-import { helpPagePath } from '~/helpers/help_page_helper';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
-import { SCHEDULE_ORIGIN, ICONS } from '../../constants';
+import { ICONS } from '../../constants';
+import PipelineLabels from './pipeline_labels.vue';
 
 export default {
   components: {
     GlIcon,
     GlLink,
-    GlPopover,
-    GlSprintf,
-    GlBadge,
+    PipelineLabels,
     TooltipOnTruncate,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  inject: {
-    targetProjectFullPath: {
-      default: '',
-    },
-  },
   props: {
     pipeline: {
       type: Object,
@@ -35,27 +28,8 @@ export default {
       type: String,
       required: true,
     },
-    viewType: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
-    isScheduled() {
-      return this.pipeline.source === SCHEDULE_ORIGIN;
-    },
-    isInFork() {
-      return Boolean(
-        this.targetProjectFullPath &&
-          this.pipeline?.project?.full_path !== `/${this.targetProjectFullPath}`,
-      );
-    },
-    autoDevopsTagId() {
-      return `pipeline-url-autodevops-${this.pipeline.id}`;
-    },
-    autoDevopsHelpPath() {
-      return helpPagePath('topics/autodevops/index.md');
-    },
     mergeRequestRef() {
       return this.pipeline?.merge_request;
     },
@@ -192,130 +166,11 @@ export default {
         :title="__('Commit')"
         data-testid="commit-icon"
       />
-
       <gl-link :href="commitUrl" class="commit-sha mr-0" data-testid="commit-short-sha">{{
         commitShortSha
       }}</gl-link>
       <!--End of commit row-->
     </div>
-    <div class="label-container gl-mt-1">
-      <gl-badge
-        v-if="isScheduled"
-        v-gl-tooltip
-        :href="pipelineScheduleUrl"
-        target="__blank"
-        :title="__('This pipeline was triggered by a schedule.')"
-        variant="info"
-        size="sm"
-        data-testid="pipeline-url-scheduled"
-        >{{ __('Scheduled') }}</gl-badge
-      >
-      <gl-badge
-        v-if="pipeline.flags.latest"
-        v-gl-tooltip
-        :title="__('Latest pipeline for the most recent commit on this branch')"
-        variant="success"
-        size="sm"
-        data-testid="pipeline-url-latest"
-        >{{ __('latest') }}</gl-badge
-      >
-      <gl-badge
-        v-if="pipeline.flags.merge_train_pipeline"
-        v-gl-tooltip
-        :title="
-          s__(
-            'Pipeline|This pipeline ran on the contents of this merge request combined with the contents of all other merge requests queued for merging into the target branch.',
-          )
-        "
-        variant="info"
-        size="sm"
-        data-testid="pipeline-url-train"
-        >{{ s__('Pipeline|merge train') }}</gl-badge
-      >
-      <gl-badge
-        v-if="pipeline.flags.yaml_errors"
-        v-gl-tooltip
-        :title="pipeline.yaml_errors"
-        variant="danger"
-        size="sm"
-        data-testid="pipeline-url-yaml"
-        >{{ __('yaml invalid') }}</gl-badge
-      >
-      <gl-badge
-        v-if="pipeline.flags.failure_reason"
-        v-gl-tooltip
-        :title="pipeline.failure_reason"
-        variant="danger"
-        size="sm"
-        data-testid="pipeline-url-failure"
-        >{{ __('error') }}</gl-badge
-      >
-      <template v-if="pipeline.flags.auto_devops">
-        <gl-link
-          :id="autoDevopsTagId"
-          tabindex="0"
-          data-testid="pipeline-url-autodevops"
-          role="button"
-        >
-          <gl-badge variant="info" size="sm">
-            {{ __('Auto DevOps') }}
-          </gl-badge>
-        </gl-link>
-        <gl-popover :target="autoDevopsTagId" triggers="focus" placement="top">
-          <template #title>
-            <div class="gl-font-weight-normal gl-line-height-normal">
-              <gl-sprintf
-                :message="
-                  __(
-                    'This pipeline makes use of a predefined CI/CD configuration enabled by %{strongStart}Auto DevOps.%{strongEnd}',
-                  )
-                "
-              >
-                <template #strong="{ content }">
-                  <b>{{ content }}</b>
-                </template>
-              </gl-sprintf>
-            </div>
-          </template>
-          <gl-link
-            :href="autoDevopsHelpPath"
-            data-testid="pipeline-url-autodevops-link"
-            target="_blank"
-          >
-            {{ __('Learn more about Auto DevOps') }}
-          </gl-link>
-        </gl-popover>
-      </template>
-
-      <gl-badge
-        v-if="pipeline.flags.stuck"
-        variant="warning"
-        size="sm"
-        data-testid="pipeline-url-stuck"
-        >{{ __('stuck') }}</gl-badge
-      >
-      <gl-badge
-        v-if="pipeline.flags.detached_merge_request_pipeline"
-        v-gl-tooltip
-        :title="
-          s__(
-            `Pipeline|This pipeline ran on the contents of this merge request's source branch, not the target branch.`,
-          )
-        "
-        variant="info"
-        size="sm"
-        data-testid="pipeline-url-detached"
-        >{{ s__('Pipeline|merge request') }}</gl-badge
-      >
-      <gl-badge
-        v-if="isInFork"
-        v-gl-tooltip
-        :title="__('Pipeline ran in fork of project')"
-        variant="info"
-        size="sm"
-        data-testid="pipeline-url-fork"
-        >{{ __('fork') }}</gl-badge
-      >
-    </div>
+    <pipeline-labels :pipeline-schedule-url="pipelineScheduleUrl" :pipeline="pipeline" />
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
index 14b4813b10f..6f0e67e1ae0 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
@@ -26,6 +26,47 @@ export default {
     PipelineTriggerer,
     PipelineUrl,
   },
+  tableFields: [
+    {
+      key: 'status',
+      label: s__('Pipeline|Status'),
+      thClass: DEFAULT_TH_CLASSES,
+      columnClass: 'gl-w-15p',
+      tdClass: DEFAULT_TD_CLASS,
+      thAttr: { 'data-testid': 'status-th' },
+    },
+    {
+      key: 'pipeline',
+      label: __('Pipeline'),
+      thClass: DEFAULT_TH_CLASSES,
+      tdClass: `${DEFAULT_TD_CLASS}`,
+      columnClass: 'gl-w-30p',
+      thAttr: { 'data-testid': 'pipeline-th' },
+    },
+    {
+      key: 'triggerer',
+      label: s__('Pipeline|Triggerer'),
+      thClass: DEFAULT_TH_CLASSES,
+      tdClass: `${DEFAULT_TD_CLASS} ${HIDE_TD_ON_MOBILE}`,
+      columnClass: 'gl-w-10p',
+      thAttr: { 'data-testid': 'triggerer-th' },
+    },
+    {
+      key: 'stages',
+      label: s__('Pipeline|Stages'),
+      thClass: DEFAULT_TH_CLASSES,
+      tdClass: DEFAULT_TD_CLASS,
+      columnClass: 'gl-w-quarter',
+      thAttr: { 'data-testid': 'stages-th' },
+    },
+    {
+      key: 'actions',
+      thClass: DEFAULT_TH_CLASSES,
+      tdClass: DEFAULT_TD_CLASS,
+      columnClass: 'gl-w-15p',
+      thAttr: { 'data-testid': 'actions-th' },
+    },
+  ],
   directives: {
     GlTooltip: GlTooltipDirective,
   },
@@ -61,53 +102,6 @@ export default {
       cancelingPipeline: null,
     };
   },
-  computed: {
-    tableFields() {
-      const fields = [
-        {
-          key: 'status',
-          label: s__('Pipeline|Status'),
-          thClass: DEFAULT_TH_CLASSES,
-          columnClass: 'gl-w-15p',
-          tdClass: DEFAULT_TD_CLASS,
-          thAttr: { 'data-testid': 'status-th' },
-        },
-        {
-          key: 'pipeline',
-          label: __('Pipeline'),
-          thClass: DEFAULT_TH_CLASSES,
-          tdClass: `${DEFAULT_TD_CLASS}`,
-          columnClass: 'gl-w-30p',
-          thAttr: { 'data-testid': 'pipeline-th' },
-        },
-        {
-          key: 'triggerer',
-          label: s__('Pipeline|Triggerer'),
-          thClass: DEFAULT_TH_CLASSES,
-          tdClass: `${DEFAULT_TD_CLASS} ${HIDE_TD_ON_MOBILE}`,
-          columnClass: 'gl-w-10p',
-          thAttr: { 'data-testid': 'triggerer-th' },
-        },
-        {
-          key: 'stages',
-          label: s__('Pipeline|Stages'),
-          thClass: DEFAULT_TH_CLASSES,
-          tdClass: DEFAULT_TD_CLASS,
-          columnClass: 'gl-w-quarter',
-          thAttr: { 'data-testid': 'stages-th' },
-        },
-        {
-          key: 'actions',
-          thClass: DEFAULT_TH_CLASSES,
-          tdClass: DEFAULT_TD_CLASS,
-          columnClass: 'gl-w-15p',
-          thAttr: { 'data-testid': 'actions-th' },
-        },
-      ];
-
-      return fields;
-    },
-  },
   watch: {
     pipelines() {
       this.cancelingPipeline = null;
@@ -138,7 +132,7 @@ export default {
 <template>
   <div class="ci-table">
     <gl-table-lite
-      :fields="tableFields"
+      :fields="$options.tableFields"
       :items="pipelines"
       tbody-tr-class="commit"
       :tbody-tr-attr="{ 'data-testid': 'pipeline-table-row' }"
@@ -163,7 +157,6 @@ export default {
           :pipeline="item"
           :pipeline-schedule-url="pipelineScheduleUrl"
           :pipeline-key="pipelineKeyOption.key"
-          :view-type="viewType"
         />
       </template>