1 files changed, 55 insertions, 37 deletions

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 823ada133d2..0de520a2ca7 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
@@ -1,5 +1,7 @@
 <script>
 import { GlLink, GlPopover, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { SCHEDULE_ORIGIN } from '../../constants';
 
 export default {
@@ -12,6 +14,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: {
     targetProjectFullPath: {
       default: '',
@@ -26,10 +29,6 @@ export default {
       type: String,
       required: true,
     },
-    autoDevopsHelpPath: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
     user() {
@@ -44,11 +43,25 @@ export default {
           this.pipeline?.project?.full_path !== `/${this.targetProjectFullPath}`,
       );
     },
+    autoDevopsTagId() {
+      return `pipeline-url-autodevops-${this.pipeline.id}`;
+    },
+    autoDevopsHelpPath() {
+      return helpPagePath('topics/autodevops/index.md');
+    },
+    classes() {
+      const tagsClass = 'pipeline-tags';
+
+      if (this.glFeatures.newPipelinesTable) {
+        return tagsClass;
+      }
+      return `table-section section-10 d-none d-md-block ${tagsClass}`;
+    },
   },
 };
 </script>
 <template>
-  <div class="table-section section-10 d-none d-md-block pipeline-tags">
+  <div :class="classes" data-testid="pipeline-url-table-cell">
     <gl-link
       :href="pipeline.path"
       data-testid="pipeline-url-link"
@@ -103,38 +116,43 @@ export default {
         data-testid="pipeline-url-failure"
         >{{ __('error') }}</gl-badge
       >
-      <gl-link
-        v-if="pipeline.flags.auto_devops"
-        :id="`pipeline-url-autodevops-${pipeline.id}`"
-        tabindex="0"
-        data-testid="pipeline-url-autodevops"
-        role="button"
-        ><gl-badge variant="info" size="sm">{{ __('Auto DevOps') }}</gl-badge></gl-link
-      >
-      <gl-popover
-        :target="`pipeline-url-autodevops-${pipeline.id}`"
-        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" target="_blank" rel="noopener noreferrer nofollow">{{
-          __('Learn more about Auto DevOps')
-        }}</gl-link>
-      </gl-popover>
+      <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"