Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

1 files changed, 31 insertions, 6 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_status_badge.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_status_badge.vue
index cc3c8d522b3..f56457a4162 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_status_badge.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_status_badge.vue
@@ -1,9 +1,12 @@
 <script>
+import CodeQualityWalkthrough from '~/code_quality_walkthrough/components/step.vue';
+import { PIPELINE_STATUSES } from '~/code_quality_walkthrough/constants';
 import { CHILD_VIEW } from '~/pipelines/constants';
 import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
 
 export default {
   components: {
+    CodeQualityWalkthrough,
     CiBadge,
   },
   props: {
@@ -23,15 +26,37 @@ export default {
     isChildView() {
       return this.viewType === CHILD_VIEW;
     },
+    shouldRenderCodeQualityWalkthrough() {
+      return Object.values(PIPELINE_STATUSES).includes(this.pipelineStatus.group);
+    },
+    codeQualityStep() {
+      const prefix = [PIPELINE_STATUSES.successWithWarnings, PIPELINE_STATUSES.failed].includes(
+        this.pipelineStatus.group,
+      )
+        ? 'failed'
+        : this.pipelineStatus.group;
+      return `${prefix}_pipeline`;
+    },
+    codeQualityBuildPath() {
+      return this.pipeline?.details?.code_quality_build_path;
+    },
   },
 };
 </script>
 
 <template>
-  <ci-badge
-    :status="pipelineStatus"
-    :show-text="!isChildView"
-    :icon-classes="'gl-vertical-align-middle!'"
-    data-qa-selector="pipeline_commit_status"
-  />
+  <div>
+    <ci-badge
+      id="js-code-quality-walkthrough"
+      :status="pipelineStatus"
+      :show-text="!isChildView"
+      :icon-classes="'gl-vertical-align-middle!'"
+      data-qa-selector="pipeline_commit_status"
+    />
+    <code-quality-walkthrough
+      v-if="shouldRenderCodeQualityWalkthrough"
+      :step="codeQualityStep"
+      :link="codeQualityBuildPath"
+    />
+  </div>
 </template>