Add latest changes from gitlab-org/gitlab@master

4 files changed, 51 insertions, 31 deletions

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index fe4158a1bd1..605172155dc 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -288,7 +288,6 @@ export default {
               'sidebar-collapsed': !isSidebarOpen,
               'has-archived-block': job.archived,
             }"
-            :erase-path="job.erase_path"
             :size="jobLogSize"
             :raw-path="job.raw_path"
             :is-scroll-bottom-disabled="isScrollBottomDisabled"
@@ -325,6 +324,7 @@ export default {
         'right-sidebar-expanded': isSidebarOpen,
         'right-sidebar-collapsed': !isSidebarOpen,
       }"
+      :erase-path="job.erase_path"
       :artifact-help-url="artifactHelpUrl"
       data-testid="job-sidebar"
     />
diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index 8e35fd91481..eb6a284dfaf 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -5,7 +5,6 @@ import { __, s__, sprintf } from '~/locale';
 
 export default {
   i18n: {
-    eraseLogButtonLabel: s__('Job|Erase job log and artifacts'),
     scrollToBottomButtonLabel: s__('Job|Scroll to bottom'),
     scrollToTopButtonLabel: s__('Job|Scroll to top'),
     showRawButtonLabel: s__('Job|Show complete raw'),
@@ -18,11 +17,6 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
-    erasePath: {
-      type: String,
-      required: false,
-      default: null,
-    },
     size: {
       type: Number,
       required: true,
@@ -97,20 +91,6 @@ export default {
         data-testid="job-raw-link-controller"
         icon="doc-text"
       />
-
-      <gl-button
-        v-if="erasePath"
-        v-gl-tooltip.body
-        :title="$options.i18n.eraseLogButtonLabel"
-        :aria-label="$options.i18n.eraseLogButtonLabel"
-        :href="erasePath"
-        :data-confirm="__('Are you sure you want to erase this build?')"
-        class="gl-ml-3"
-        data-testid="job-log-erase-link"
-        data-confirm-btn-variant="danger"
-        data-method="post"
-        icon="remove"
-      />
       <!-- eo links -->
 
       <!-- scroll buttons -->
diff --git a/app/assets/javascripts/jobs/components/job_sidebar_retry_button.vue b/app/assets/javascripts/jobs/components/job_sidebar_retry_button.vue
index a43b3297d75..a7bf365d35c 100644
--- a/app/assets/javascripts/jobs/components/job_sidebar_retry_button.vue
+++ b/app/assets/javascripts/jobs/components/job_sidebar_retry_button.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlLink, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlModalDirective } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import { JOB_SIDEBAR } from '../constants';
 
@@ -10,7 +10,6 @@ export default {
   },
   components: {
     GlButton,
-    GlLink,
   },
   directives: {
     GlModal: GlModalDirective,
@@ -37,9 +36,18 @@ export default {
     :aria-label="$options.i18n.retryLabel"
     category="primary"
     variant="confirm"
-    >{{ $options.i18n.retryLabel }}</gl-button
-  >
-  <gl-link v-else :href="href" class="btn gl-button btn-confirm" data-method="post" rel="nofollow"
-    >{{ $options.i18n.retryLabel }}
-  </gl-link>
+    icon="retry"
+    data-testid="retry-job-button"
+  />
+
+  <gl-button
+    v-else
+    :href="href"
+    :aria-label="$options.i18n.retryLabel"
+    category="primary"
+    variant="confirm"
+    icon="retry"
+    data-method="post"
+    data-testid="retry-job-link"
+  />
 </template>
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