Merge branch '222511-missing-tooltip-for-redeploy' into 'master'

Add tooltip for pipeline actions

See merge request gitlab-org/gitlab!44317

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue

 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import eventHub from '../../event_hub';
+import { __ } from '~/locale';
 import PipelinesActionsComponent from './pipelines_actions.vue';
 import PipelinesArtifactsComponent from './pipelines_artifacts.vue';
 import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
@@ -17,6 +18,13 @@ import { PIPELINES_TABLE } from '../../constants';
  * Given the received object renders a table row in the pipelines' table.
  */
 export default {
+  i18n: {
+    cancelTitle: __('Cancel'),
+    redeployTitle: __('Pipelines|Retry'),
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   components: {
     PipelinesActionsComponent,
     PipelinesArtifactsComponent,
@@ -342,8 +350,11 @@ export default {
 
         <gl-button
           v-if="pipeline.flags.retryable"
-          :loading="isRetrying"
+          v-gl-tooltip.hover
+          :aria-label="$options.i18n.redeployTitle"
+          :title="$options.i18n.redeployTitle"
           :disabled="isRetrying"
+          :loading="isRetrying"
           class="js-pipelines-retry-button btn-retry"
           data-qa-selector="pipeline_retry_button"
           icon="repeat"
@@ -354,6 +365,9 @@ export default {
 
         <gl-button
           v-if="pipeline.flags.cancelable"
+          v-gl-tooltip.hover
+          :aria-label="$options.i18n.cancelTitle"
+          :title="$options.i18n.cancelTitle"
           :loading="isCancelling"
           :disabled="isCancelling"
           data-toggle="modal"

changelogs/unreleased/222511-missing-tooltip-for-redeploy.yml

+---
+title: Add tooltip for pipeline actions
+merge_request: 44317
+author:
+type: fixed

locale/gitlab.pot

@@ -8,6 +8,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: gitlab 1.0.0\n"
 "Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2020-10-12 08:34+0200\n"
+"PO-Revision-Date: 2020-10-12 08:34+0200\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "Language: \n"
@@ -18995,6 +18997,9 @@ msgstr ""
 msgid "Pipelines|Project cache successfully reset."
 msgstr ""
 
+msgid "Pipelines|Retry"
+msgstr ""
+
 msgid "Pipelines|Revoke"
 msgstr ""
 

spec/frontend/pipelines/pipelines_table_spec.js

+import { GlButton } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import PipelinesTable from '~/pipelines/components/pipelines_list/pipelines_table.vue';
 
@@ -19,6 +20,7 @@ describe('Pipelines Table', () => {
     });
   };
   const findRows = () => wrapper.findAll('.commit.gl-responsive-table-row');
+  const findGlButtons = () => wrapper.findAll(GlButton);
 
   preloadFixtures(jsonFixtureName);
 
@@ -63,4 +65,28 @@ describe('Pipelines Table', () => {
       expect(findRows()).toHaveLength(1);
     });
   });
+
+  describe('pipline actions', () => {
+    it('should set the "Re-deploy" title', () => {
+      const pipelines = [{ ...pipeline, flags: { cancelable: false, retryable: true } }];
+      createComponent({ ...defaultProps, pipelines });
+      expect(findGlButtons().length).toBe(1);
+      expect(
+        findGlButtons()
+          .at(0)
+          .attributes('title'),
+      ).toMatch('Retry');
+    });
+
+    it('should set the "Cancel" title', () => {
+      const pipelines = [{ ...pipeline, flags: { cancelable: true, retryable: false } }];
+      createComponent({ ...defaultProps, pipelines });
+      expect(findGlButtons().length).toBe(1);
+      expect(
+        findGlButtons()
+          .at(0)
+          .attributes('title'),
+      ).toMatch('Cancel');
+    });
+  });
 });