1 files changed, 21 insertions, 5 deletions

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index 91ab68d5f39..be95001a396 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -3,6 +3,7 @@ import { GlLoadingIcon, GlIcon, GlSafeHtmlDirective as SafeHtml, GlAlert } from
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { throttle, isEmpty } from 'lodash';
 import { mapGetters, mapState, mapActions } from 'vuex';
+import CodeQualityWalkthrough from '~/code_quality_walkthrough/components/step.vue';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
 import { sprintf } from '~/locale';
 import CiHeader from '~/vue_shared/components/header_ci_component.vue';
@@ -32,6 +33,7 @@ export default {
     GlLoadingIcon,
     SharedRunner: () => import('ee_component/jobs/components/shared_runner_limit_block.vue'),
     GlAlert,
+    CodeQualityWalkthrough,
   },
   directives: {
     SafeHtml,
@@ -72,6 +74,11 @@ export default {
       required: false,
       default: null,
     },
+    codeQualityHelpUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     ...mapState([
@@ -120,6 +127,10 @@ export default {
     shouldRenderHeaderCallout() {
       return this.shouldRenderCalloutMessage && !this.hasUnmetPrerequisitesFailure;
     },
+
+    shouldRenderCodeQualityWalkthrough() {
+      return this.job.status.group === 'failed-with-warnings';
+    },
   },
   watch: {
     // Once the job log is loaded,
@@ -190,7 +201,7 @@ export default {
 </script>
 <template>
   <div>
-    <gl-loading-icon v-if="isLoading" size="lg" class="qa-loading-animation prepend-top-20" />
+    <gl-loading-icon v-if="isLoading" size="lg" class="qa-loading-animation gl-mt-6" />
 
     <template v-else-if="shouldRenderContent">
       <div class="build-page" data-testid="job-content">
@@ -216,6 +227,11 @@ export default {
           >
             <div v-safe-html="job.callout_message"></div>
           </gl-alert>
+          <code-quality-walkthrough
+            v-if="shouldRenderCodeQualityWalkthrough"
+            step="troubleshoot_job"
+            :link="codeQualityHelpUrl"
+          />
         </header>
         <!-- EO Header Section -->
 
@@ -256,17 +272,17 @@ export default {
 
         <div
           v-if="job.archived"
-          class="gl-mt-3 archived-job"
-          :class="{ 'sticky-top border-bottom-0': hasTrace }"
+          class="gl-mt-3 gl-py-2 gl-px-3 gl-align-items-center gl-z-index-1 gl-m-auto archived-job"
+          :class="{ 'sticky-top gl-border-bottom-0': hasTrace }"
           data-testid="archived-job"
         >
-          <gl-icon name="lock" class="align-text-bottom" />
+          <gl-icon name="lock" class="gl-vertical-align-bottom" />
           {{ __('This job is archived. Only the complete pipeline can be retried.') }}
         </div>
         <!-- job log -->
         <div
           v-if="hasTrace"
-          class="build-trace-container position-relative"
+          class="build-trace-container gl-relative"
           :class="{ 'gl-mt-3': !job.archived }"
         >
           <log-top-bar