1 files changed, 35 insertions, 3 deletions

diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 9aa1503c7c3..1b4c9ebdf7d 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -1,7 +1,8 @@
 <script>
-import { GlButton, GlIcon } from '@gitlab/ui';
+import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
+import { s__ } from '~/locale';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import { JOB_SIDEBAR } from '../constants';
 import ArtifactsBlock from './artifacts_block.vue';
@@ -18,10 +19,17 @@ export const forwardDeploymentFailureModalId = 'forward-deployment-failure';
 export default {
   name: 'JobSidebar',
   i18n: {
+    eraseLogButtonLabel: s__('Job|Erase job log and artifacts'),
+    eraseLogConfirmText: s__('Job|Are you sure you want to erase this job log and artifacts?'),
+    cancelJobButtonLabel: s__('Job|Cancel'),
+    retryJobButtonLabel: s__('Job|Retry'),
     ...JOB_SIDEBAR,
   },
   borderTopClass: ['gl-border-t-solid', 'gl-border-t-1', 'gl-border-t-gray-100'],
   forwardDeploymentFailureModalId,
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   components: {
     ArtifactsBlock,
     CommitBlock,
@@ -41,6 +49,11 @@ export default {
       required: false,
       default: '',
     },
+    erasePath: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     ...mapGetters(['hasForwardDeploymentFailure']),
@@ -81,8 +94,24 @@ export default {
             </h4>
           </tooltip-on-truncate>
           <div class="gl-flex-grow-1 gl-flex-shrink-0 gl-text-right">
+            <gl-button
+              v-if="erasePath"
+              v-gl-tooltip.left
+              :title="$options.i18n.eraseLogButtonLabel"
+              :aria-label="$options.i18n.eraseLogButtonLabel"
+              :href="erasePath"
+              :data-confirm="$options.i18n.eraseLogConfirmText"
+              class="gl-mr-2"
+              data-testid="job-log-erase-link"
+              data-confirm-btn-variant="danger"
+              data-method="post"
+              icon="remove"
+            />
             <job-sidebar-retry-button
               v-if="job.retry_path"
+              v-gl-tooltip.left
+              :title="$options.i18n.retryJobButtonLabel"
+              :aria-label="$options.i18n.retryJobButtonLabel"
               :category="retryButtonCategory"
               :href="job.retry_path"
               :modal-id="$options.forwardDeploymentFailureModalId"
@@ -92,12 +121,15 @@ export default {
             />
             <gl-button
               v-if="job.cancel_path"
+              v-gl-tooltip.left
+              :title="$options.i18n.cancelJobButtonLabel"
+              :aria-label="$options.i18n.cancelJobButtonLabel"
               :href="job.cancel_path"
+              icon="cancel"
               data-method="post"
               data-testid="cancel-button"
               rel="nofollow"
-              >{{ $options.i18n.cancel }}
-            </gl-button>
+            />
           </div>
 
           <gl-button