1 files changed, 65 insertions, 22 deletions

diff --git a/app/assets/javascripts/jobs/components/job/sidebar/sidebar_header.vue b/app/assets/javascripts/jobs/components/job/sidebar/sidebar_header.vue
index 523710598bf..40aec0b0536 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/sidebar_header.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/sidebar_header.vue
@@ -1,13 +1,19 @@
 <script>
 import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { mapActions } from 'vuex';
+import { createAlert } from '~/flash';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
-import { JOB_SIDEBAR_COPY, forwardDeploymentFailureModalId } from '~/jobs/constants';
+import {
+  JOB_GRAPHQL_ERRORS,
+  GRAPHQL_ID_TYPES,
+  JOB_SIDEBAR_COPY,
+  forwardDeploymentFailureModalId,
+  PASSED_STATUS,
+} from '~/jobs/constants';
+import GetJob from '../graphql/queries/get_job.query.graphql';
 import JobSidebarRetryButton from './job_sidebar_retry_button.vue';
 
-// This component is a port of ~/jobs/components/job/sidebar/legacy_sidebar_header.vue
-// It is meant to fetch the job information via GraphQL instead of REST API.
-
 export default {
   name: 'SidebarHeader',
   i18n: {
@@ -22,21 +28,58 @@ export default {
     JobSidebarRetryButton,
     TooltipOnTruncate,
   },
-  props: {
+  inject: ['projectPath'],
+  apollo: {
     job: {
+      query: GetJob,
+      variables() {
+        return {
+          fullPath: this.projectPath,
+          id: convertToGraphQLId(GRAPHQL_ID_TYPES.commitStatus, this.jobId),
+        };
+      },
+      update(data) {
+        const { name, manualJob } = data?.project?.job || {};
+        return {
+          name,
+          manualJob,
+        };
+      },
+      error() {
+        createAlert({ message: JOB_GRAPHQL_ERRORS.jobQueryErrorText });
+      },
+    },
+  },
+  props: {
+    jobId: {
+      type: Number,
+      required: true,
+    },
+    restJob: {
       type: Object,
       required: true,
       default: () => ({}),
     },
-    erasePath: {
-      type: String,
-      required: false,
-      default: null,
-    },
+  },
+  data() {
+    return {
+      job: {},
+    };
   },
   computed: {
+    buttonTitle() {
+      return this.restJob.status?.text === PASSED_STATUS
+        ? this.$options.i18n.runAgainJobButtonLabel
+        : this.$options.i18n.retryJobLabel;
+    },
+    canShowJobRetryButton() {
+      return this.restJob.retry_path && !this.$apollo.queries.job.loading;
+    },
+    isManualJob() {
+      return this.job?.manualJob;
+    },
     retryButtonCategory() {
-      return this.job.status && this.job.recoverable ? 'primary' : 'secondary';
+      return this.restJob.status && this.restJob.recoverable ? 'primary' : 'secondary';
     },
   },
   methods: {
@@ -48,17 +91,15 @@ export default {
 <template>
   <div class="gl-py-5 gl-display-flex gl-align-items-center">
     <tooltip-on-truncate :title="job.name" truncate-target="child"
-      ><h4 class="gl-my-0 gl-mr-3 gl-text-truncate">
-        {{ job.name }}
-      </h4>
+      ><h4 class="gl-my-0 gl-mr-3 gl-text-truncate" data-testid="job-name">{{ job.name }}</h4>
     </tooltip-on-truncate>
     <div class="gl-flex-grow-1 gl-flex-shrink-0 gl-text-right">
       <gl-button
-        v-if="erasePath"
+        v-if="restJob.erase_path"
         v-gl-tooltip.left
         :title="$options.i18n.eraseLogButtonLabel"
         :aria-label="$options.i18n.eraseLogButtonLabel"
-        :href="erasePath"
+        :href="restJob.erase_path"
         :data-confirm="$options.i18n.eraseLogConfirmText"
         class="gl-mr-2"
         data-testid="job-log-erase-link"
@@ -67,23 +108,25 @@ export default {
         icon="remove"
       />
       <job-sidebar-retry-button
-        v-if="job.retry_path"
+        v-if="canShowJobRetryButton"
         v-gl-tooltip.left
-        :title="$options.i18n.retryJobButtonLabel"
-        :aria-label="$options.i18n.retryJobButtonLabel"
+        :title="buttonTitle"
+        :aria-label="buttonTitle"
+        :is-manual-job="isManualJob"
         :category="retryButtonCategory"
-        :href="job.retry_path"
+        :href="restJob.retry_path"
         :modal-id="$options.forwardDeploymentFailureModalId"
         variant="confirm"
         data-qa-selector="retry_button"
         data-testid="retry-button"
+        @updateVariablesClicked="$emit('updateVariables')"
       />
       <gl-button
-        v-if="job.cancel_path"
+        v-if="restJob.cancel_path"
         v-gl-tooltip.left
         :title="$options.i18n.cancelJobButtonLabel"
         :aria-label="$options.i18n.cancelJobButtonLabel"
-        :href="job.cancel_path"
+        :href="restJob.cancel_path"
         variant="danger"
         icon="cancel"
         data-method="post"