Merge branch '342316-pb-improve-tooltip-text-retry' into 'master'

Improve retry tooltip for failed pipeline

See merge request gitlab-org/gitlab!79888

app/assets/javascripts/pipelines/components/header_component.vue

 <script>
-import { GlAlert, GlButton, GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlButton,
+  GlLoadingIcon,
+  GlModal,
+  GlModalDirective,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import { setUrlFragment, redirectTo } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import ciHeader from '~/vue_shared/components/header_ci_component.vue';
-import { LOAD_FAILURE, POST_FAILURE, DELETE_FAILURE, DEFAULT } from '../constants';
+import {
+  LOAD_FAILURE,
+  POST_FAILURE,
+  DELETE_FAILURE,
+  DEFAULT,
+  BUTTON_TOOLTIP_RETRY,
+} from '../constants';
 import cancelPipelineMutation from '../graphql/mutations/cancel_pipeline.mutation.graphql';
 import deletePipelineMutation from '../graphql/mutations/delete_pipeline.mutation.graphql';
 import retryPipelineMutation from '../graphql/mutations/retry_pipeline.mutation.graphql';
@@ -15,6 +28,7 @@ const POLL_INTERVAL = 10000;
 
 export default {
   name: 'PipelineHeaderSection',
+  BUTTON_TOOLTIP_RETRY,
   pipelineCancel: 'pipelineCancel',
   pipelineRetry: 'pipelineRetry',
   finishedStatuses: ['FAILED', 'SUCCESS', 'CANCELED'],
@@ -27,6 +41,7 @@ export default {
   },
   directives: {
     GlModal: GlModalDirective,
+    GlTooltip: GlTooltipDirective,
   },
   errorTexts: {
     [LOAD_FAILURE]: __('We are currently unable to fetch data for the pipeline header.'),
@@ -225,6 +240,9 @@ export default {
     >
       <gl-button
         v-if="canRetryPipeline"
+        v-gl-tooltip
+        :aria-label="$options.BUTTON_TOOLTIP_RETRY"
+        :title="$options.BUTTON_TOOLTIP_RETRY"
         :loading="isRetrying"
         :disabled="isRetrying"
         category="secondary"

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

 <script>
 import { GlButton, GlTooltipDirective, GlModalDirective } from '@gitlab/ui';
-import { __ } from '~/locale';
 import eventHub from '../../event_hub';
+import { BUTTON_TOOLTIP_RETRY, BUTTON_TOOLTIP_CANCEL } from '../../constants';
 import PipelineMultiActions from './pipeline_multi_actions.vue';
 import PipelinesManualActions from './pipelines_manual_actions.vue';
 
 export default {
-  i18n: {
-    cancelTitle: __('Cancel'),
-    redeployTitle: __('Retry'),
-  },
+  BUTTON_TOOLTIP_RETRY,
+  BUTTON_TOOLTIP_CANCEL,
   directives: {
     GlTooltip: GlTooltipDirective,
     GlModalDirective,
@@ -75,12 +73,13 @@ export default {
       <gl-button
         v-if="pipeline.flags.retryable"
         v-gl-tooltip.hover
-        :aria-label="$options.i18n.redeployTitle"
-        :title="$options.i18n.redeployTitle"
+        :aria-label="$options.BUTTON_TOOLTIP_RETRY"
+        :title="$options.BUTTON_TOOLTIP_RETRY"
         :disabled="isRetrying"
         :loading="isRetrying"
         class="js-pipelines-retry-button"
         data-qa-selector="pipeline_retry_button"
+        data-testid="pipelines-retry-button"
         icon="repeat"
         variant="default"
         category="secondary"
@@ -91,14 +90,15 @@ export default {
         v-if="pipeline.flags.cancelable"
         v-gl-tooltip.hover
         v-gl-modal-directive="'confirmation-modal'"
-        :aria-label="$options.i18n.cancelTitle"
-        :title="$options.i18n.cancelTitle"
+        :aria-label="$options.BUTTON_TOOLTIP_CANCEL"
+        :title="$options.BUTTON_TOOLTIP_CANCEL"
         :loading="isCancelling"
         :disabled="isCancelling"
         icon="cancel"
         variant="danger"
         category="primary"
         class="js-pipelines-cancel-button gl-ml-1"
+        data-testid="pipelines-cancel-button"
         @click="handleCancelClick"
       />
 

app/assets/javascripts/pipelines/constants.js

@@ -59,3 +59,6 @@ export const PipelineKeyOptions = [
 ];
 
 export const TOAST_MESSAGE = s__('Pipeline|Creating pipeline.');
+
+export const BUTTON_TOOLTIP_RETRY = __('Retry failed jobs');
+export const BUTTON_TOOLTIP_CANCEL = __('Cancel');

locale/gitlab.pot

@@ -30864,6 +30864,9 @@ msgstr ""
 msgid "Retry"
 msgstr ""
 
+msgid "Retry failed jobs"
+msgstr ""
+
 msgid "Retry job"
 msgstr ""
 

spec/frontend/pipelines/header_component_spec.js

@@ -4,6 +4,7 @@ import HeaderComponent from '~/pipelines/components/header_component.vue';
 import cancelPipelineMutation from '~/pipelines/graphql/mutations/cancel_pipeline.mutation.graphql';
 import deletePipelineMutation from '~/pipelines/graphql/mutations/delete_pipeline.mutation.graphql';
 import retryPipelineMutation from '~/pipelines/graphql/mutations/retry_pipeline.mutation.graphql';
+import { BUTTON_TOOLTIP_RETRY } from '~/pipelines/constants';
 import {
   mockCancelledPipelineHeader,
   mockFailedPipelineHeader,
@@ -113,6 +114,10 @@ describe('Pipeline details header', () => {
           variables: { id: mockCancelledPipelineHeader.id },
         });
       });
+
+      it('should render retry action tooltip', () => {
+        expect(findRetryButton().attributes('title')).toBe(BUTTON_TOOLTIP_RETRY);
+      });
     });
 
     describe('Cancel action', () => {

spec/frontend/pipelines/pipelines_table_spec.js

@@ -9,7 +9,11 @@ import PipelineTriggerer from '~/pipelines/components/pipelines_list/pipeline_tr
 import PipelineUrl from '~/pipelines/components/pipelines_list/pipeline_url.vue';
 import PipelinesTable from '~/pipelines/components/pipelines_list/pipelines_table.vue';
 import PipelinesTimeago from '~/pipelines/components/pipelines_list/time_ago.vue';
-import { PipelineKeyOptions } from '~/pipelines/constants';
+import {
+  PipelineKeyOptions,
+  BUTTON_TOOLTIP_RETRY,
+  BUTTON_TOOLTIP_CANCEL,
+} from '~/pipelines/constants';
 
 import eventHub from '~/pipelines/event_hub';
 import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
@@ -66,6 +70,8 @@ describe('Pipelines Table', () => {
   const findStagesTh = () => wrapper.findByTestId('stages-th');
   const findTimeAgoTh = () => wrapper.findByTestId('timeago-th');
   const findActionsTh = () => wrapper.findByTestId('actions-th');
+  const findRetryBtn = () => wrapper.findByTestId('pipelines-retry-button');
+  const findCancelBtn = () => wrapper.findByTestId('pipelines-cancel-button');
 
   beforeEach(() => {
     pipeline = createMockPipeline();
@@ -192,6 +198,14 @@ describe('Pipelines Table', () => {
       it('should render pipeline operations', () => {
         expect(findActions().exists()).toBe(true);
       });
+
+      it('should render retry action tooltip', () => {
+        expect(findRetryBtn().attributes('title')).toBe(BUTTON_TOOLTIP_RETRY);
+      });
+
+      it('should render cancel action tooltip', () => {
+        expect(findCancelBtn().attributes('title')).toBe(BUTTON_TOOLTIP_CANCEL);
+      });
     });
   });