From 521c1bf013d7267e5b9c47c5e35de83b688b6d5c Mon Sep 17 00:00:00 2001
From: Payton Burdette <pburdette@gitlab.com>
Date: Fri, 5 May 2023 11:04:51 -0400
Subject: [PATCH 1/2] Add tooltips to jobs table actions

Adds tooltips on hover to the job
table action buttons.

Changelog: changed
---
 .../components/table/cells/actions_cell.vue    | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue b/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
index 17766b4d162f68..78af46ed895b31 100644
--- a/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
+++ b/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
@@ -1,5 +1,12 @@
 <script>
-import { GlButton, GlButtonGroup, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
+import {
+  GlButton,
+  GlButtonGroup,
+  GlModal,
+  GlModalDirective,
+  GlSprintf,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
 import { redirectTo } from '~/lib/utils/url_utility';
 import {
@@ -49,6 +56,7 @@ export default {
   },
   directives: {
     GlModalDirective,
+    GlTooltip: GlTooltipDirective,
   },
   inject: {
     admin: {
@@ -178,11 +186,12 @@ export default {
     <template v-if="canReadJob && canUpdateJob">
       <gl-button
         v-if="isActive"
-        data-testid="cancel-button"
+        v-gl-tooltip.hover
         icon="cancel"
         :title="$options.CANCEL"
         :aria-label="$options.CANCEL"
         :disabled="cancelBtnDisabled"
+        data-testid="cancel-button"
         @click="cancelJob()"
       />
       <template v-else-if="isScheduled">
@@ -191,6 +200,7 @@ export default {
         </gl-button>
         <gl-button
           v-gl-modal-directive="$options.playJobModalId"
+          v-gl-tooltip.hover
           icon="play"
           :title="$options.ACTIONS_START_NOW"
           :aria-label="$options.ACTIONS_START_NOW"
@@ -206,6 +216,7 @@ export default {
           </gl-sprintf>
         </gl-modal>
         <gl-button
+          v-gl-tooltip.hover
           icon="time-out"
           :title="$options.ACTIONS_UNSCHEDULE"
           :aria-label="$options.ACTIONS_UNSCHEDULE"
@@ -218,6 +229,7 @@ export default {
         <!--Note: This is the manual job play button -->
         <gl-button
           v-if="manualJobPlayable"
+          v-gl-tooltip.hover
           icon="play"
           :title="$options.ACTIONS_PLAY"
           :aria-label="$options.ACTIONS_PLAY"
@@ -227,6 +239,7 @@ export default {
         />
         <gl-button
           v-else-if="isRetryable"
+          v-gl-tooltip.hover
           icon="retry"
           :title="retryButtonTitle"
           :aria-label="retryButtonTitle"
@@ -239,6 +252,7 @@ export default {
     </template>
     <gl-button
       v-if="shouldDisplayArtifacts"
+      v-gl-tooltip.hover
       icon="download"
       :title="$options.ACTIONS_DOWNLOAD_ARTIFACTS"
       :aria-label="$options.ACTIONS_DOWNLOAD_ARTIFACTS"
-- 
GitLab


From ff0ab419a72387cf21b1a6f64396b093133c5839 Mon Sep 17 00:00:00 2001
From: Payton Burdette <pburdette@gitlab.com>
Date: Tue, 9 May 2023 14:37:18 -0400
Subject: [PATCH 2/2] Remove tooltip modifier

---
 .../jobs/components/table/cells/actions_cell.vue     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue b/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
index 78af46ed895b31..f4061f3d3759a9 100644
--- a/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
+++ b/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
@@ -186,7 +186,7 @@ export default {
     <template v-if="canReadJob && canUpdateJob">
       <gl-button
         v-if="isActive"
-        v-gl-tooltip.hover
+        v-gl-tooltip
         icon="cancel"
         :title="$options.CANCEL"
         :aria-label="$options.CANCEL"
@@ -200,7 +200,7 @@ export default {
         </gl-button>
         <gl-button
           v-gl-modal-directive="$options.playJobModalId"
-          v-gl-tooltip.hover
+          v-gl-tooltip
           icon="play"
           :title="$options.ACTIONS_START_NOW"
           :aria-label="$options.ACTIONS_START_NOW"
@@ -216,7 +216,7 @@ export default {
           </gl-sprintf>
         </gl-modal>
         <gl-button
-          v-gl-tooltip.hover
+          v-gl-tooltip
           icon="time-out"
           :title="$options.ACTIONS_UNSCHEDULE"
           :aria-label="$options.ACTIONS_UNSCHEDULE"
@@ -229,7 +229,7 @@ export default {
         <!--Note: This is the manual job play button -->
         <gl-button
           v-if="manualJobPlayable"
-          v-gl-tooltip.hover
+          v-gl-tooltip
           icon="play"
           :title="$options.ACTIONS_PLAY"
           :aria-label="$options.ACTIONS_PLAY"
@@ -239,7 +239,7 @@ export default {
         />
         <gl-button
           v-else-if="isRetryable"
-          v-gl-tooltip.hover
+          v-gl-tooltip
           icon="retry"
           :title="retryButtonTitle"
           :aria-label="retryButtonTitle"
@@ -252,7 +252,7 @@ export default {
     </template>
     <gl-button
       v-if="shouldDisplayArtifacts"
-      v-gl-tooltip.hover
+      v-gl-tooltip
       icon="download"
       :title="$options.ACTIONS_DOWNLOAD_ARTIFACTS"
       :aria-label="$options.ACTIONS_DOWNLOAD_ARTIFACTS"
-- 
GitLab