Merge branch '346370-tooltips-paused-runner' into 'master'

Update runner Pause/Resume button labels

See merge request gitlab-org/gitlab!82702

app/assets/javascripts/runner/components/runner_pause_button.vue

@@ -3,7 +3,7 @@ import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import runnerToggleActiveMutation from '~/runner/graphql/shared/runner_toggle_active.mutation.graphql';
 import { createAlert } from '~/flash';
 import { captureException } from '~/runner/sentry_utils';
-import { I18N_PAUSE, I18N_RESUME } from '../constants';
+import { I18N_PAUSE, I18N_PAUSE_TOOLTIP, I18N_RESUME, I18N_RESUME_TOOLTIP } from '../constants';
 
 export default {
   name: 'RunnerPauseButton',
@@ -52,11 +52,10 @@ export default {
       return null;
     },
     tooltip() {
-      // Only show tooltip when compact.
-      // Also prevent a "sticky" tooltip: If this button is
-      // disabled, mouseout listeners don't run leaving the tooltip stuck
-      if (this.compact && !this.updating) {
-        return this.label;
+      // Prevent a "sticky" tooltip: If this button is disabled,
+      // mouseout listeners don't run leaving the tooltip stuck
+      if (!this.updating) {
+        return this.isActive ? I18N_PAUSE_TOOLTIP : I18N_RESUME_TOOLTIP;
       }
       return '';
     },
@@ -102,7 +101,7 @@ export default {
 
 <template>
   <gl-button
-    v-gl-tooltip.hover.viewport="tooltip"
+    v-gl-tooltip="tooltip"
     v-bind="$attrs"
     :aria-label="ariaLabel"
     :icon="icon"

app/assets/javascripts/runner/components/runner_paused_badge.vue

 <script>
 import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
-import { I18N_PAUSED_RUNNER_DESCRIPTION } from '../constants';
+import { I18N_PAUSED_DESCRIPTION } from '../constants';
 
 export default {
   components: {
@@ -9,17 +9,11 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  i18n: {
-    I18N_PAUSED_RUNNER_DESCRIPTION,
-  },
+  I18N_PAUSED_DESCRIPTION,
 };
 </script>
 <template>
-  <gl-badge
-    v-gl-tooltip="$options.i18n.I18N_PAUSED_RUNNER_DESCRIPTION"
-    variant="danger"
-    v-bind="$attrs"
-  >
+  <gl-badge v-gl-tooltip="$options.I18N_PAUSED_DESCRIPTION" variant="danger" v-bind="$attrs">
     {{ s__('Runners|paused') }}
   </gl-badge>
 </template>

app/assets/javascripts/runner/constants.js

@@ -37,13 +37,18 @@ export const I18N_STALE_RUNNER_DESCRIPTION = s__(
 
 // Actions
 export const I18N_EDIT = __('Edit');
+
 export const I18N_PAUSE = __('Pause');
+export const I18N_PAUSE_TOOLTIP = s__('Runners|Pause from accepting jobs');
+export const I18N_PAUSED_DESCRIPTION = s__('Runners|Not accepting jobs');
+
 export const I18N_RESUME = __('Resume');
+export const I18N_RESUME_TOOLTIP = s__('Runners|Resume accepting jobs');
+
 export const I18N_DELETE_RUNNER = s__('Runners|Delete runner');
 export const I18N_DELETED_TOAST = s__('Runners|Runner %{name} was deleted');
 
 export const I18N_LOCKED_RUNNER_DESCRIPTION = s__('Runners|You cannot assign to other projects');
-export const I18N_PAUSED_RUNNER_DESCRIPTION = s__('Runners|Not available to run jobs');
 
 // Runner details
 

app/views/groups/runners/_runner.html.haml

@@ -9,7 +9,7 @@
       - if runner.locked?
         = gl_badge_tag s_('Runners|locked'), variant: :warning, size: :sm
       - unless runner.active?
-        = gl_badge_tag s_('Runners|paused'), variant: :danger, size: :sm
+        = gl_badge_tag s_('Runners|paused'), { variant: :danger, size: :sm }, { title: s_('Runners|Not accepting jobs'), data: { toggle: 'tooltip', container: 'body' } }
 
   .table-section.section-30
     .table-mobile-header{ role: 'rowheader' }= s_('Runners|Runner')
@@ -64,10 +64,10 @@
           = sprite_icon('pencil', css_class: 'gl-icon')
       .btn-group
         - if runner.active?
-          = link_to pause_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Pause'), ref: 'tooltip', aria: { label: _('Pause') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
+          = link_to pause_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon', title: s_('Runners|Pause from accepting jobs'), ref: 'tooltip', aria: { label: _('Pause') }, data: { toggle: 'tooltip', container: 'body', confirm: _('Are you sure?') } do
             = sprite_icon('pause', css_class: 'gl-icon')
         - else
-          = link_to resume_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Resume'), ref: 'tooltip', aria: { label: _('Resume') }, data: { placement: 'top', container: 'body'} do
+          = link_to resume_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon', title: s_('Runners|Resume accepting jobs'), ref: 'tooltip', aria: { label: _('Resume') }, data: { toggle: 'tooltip', container: 'body'} do
             = sprite_icon('play', css_class: 'gl-icon')
       - if runner.belongs_to_more_than_one_project?
         - delete_runner_tooltip = _('Multi-project Runners cannot be removed')

app/views/projects/runners/_runner.html.haml

@@ -16,10 +16,10 @@
           = link_to edit_project_runner_path(@project, runner), class: 'btn gl-button btn-icon', title: _('Edit'), aria: { label: _('Edit') }, data: { testid: 'edit-runner-link', toggle: 'tooltip', placement: 'top', container: 'body' } do
             = sprite_icon('pencil')
           - if runner.active?
-            = link_to pause_project_runner_path(@project, runner), method: :post, class: 'btn gl-button btn-icon', title: _('Pause'), aria: { label: _('Pause') }, data: { toggle: 'tooltip', placement: 'top', container: 'body', confirm: _("Are you sure?") } do
+            = link_to pause_project_runner_path(@project, runner), method: :post, class: 'btn gl-button btn-icon', title: s_('Runners|Pause from accepting jobs'), aria: { label: _('Pause') }, data: { toggle: 'tooltip', container: 'body', confirm: _("Are you sure?") } do
               = sprite_icon('pause')
           - else
-            = link_to resume_project_runner_path(@project, runner), method: :post, class: 'btn gl-button btn-icon', title: _('Resume'), aria: { label: _('Resume') }, data: { toggle: 'tooltip', placement: 'top', container: 'body' } do
+            = link_to resume_project_runner_path(@project, runner), method: :post, class: 'btn gl-button btn-icon', title: s_('Runners|Resume accepting jobs'), aria: { label: _('Resume') }, data: { toggle: 'tooltip', container: 'body' } do
               = sprite_icon('play')
           - if runner.belongs_to_one_project?
             = link_to _('Remove runner'), project_runner_path(@project, runner), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn gl-button btn-danger'

locale/gitlab.pot

@@ -31912,7 +31912,7 @@ msgstr ""
 msgid "Runners|No recent contact from this runner; last contact was %{timeAgo}"
 msgstr ""
 
-msgid "Runners|Not available to run jobs"
+msgid "Runners|Not accepting jobs"
 msgstr ""
 
 msgid "Runners|Offline"
@@ -31927,6 +31927,9 @@ msgstr ""
 msgid "Runners|Online runners"
 msgstr ""
 
+msgid "Runners|Pause from accepting jobs"
+msgstr ""
+
 msgid "Runners|Paused"
 msgstr ""
 
@@ -31963,6 +31966,9 @@ msgstr ""
 msgid "Runners|Reset token"
 msgstr ""
 
+msgid "Runners|Resume accepting jobs"
+msgstr ""
+
 msgid "Runners|Revision"
 msgstr ""
 

spec/frontend/runner/components/runner_pause_button_spec.js

@@ -8,6 +8,12 @@ import runnerToggleActiveMutation from '~/runner/graphql/shared/runner_toggle_ac
 import waitForPromises from 'helpers/wait_for_promises';
 import { captureException } from '~/runner/sentry_utils';
 import { createAlert } from '~/flash';
+import {
+  I18N_PAUSE,
+  I18N_PAUSE_TOOLTIP,
+  I18N_RESUME,
+  I18N_RESUME_TOOLTIP,
+} from '~/runner/constants';
 
 import RunnerPauseButton from '~/runner/components/runner_pause_button.vue';
 import { runnersData } from '../mock_data';
@@ -74,10 +80,10 @@ describe('RunnerPauseButton', () => {
 
   describe('Pause/Resume action', () => {
     describe.each`
-      runnerState | icon       | content     | isActive | newActiveValue
-      ${'paused'} | ${'play'}  | ${'Resume'} | ${false} | ${true}
-      ${'active'} | ${'pause'} | ${'Pause'}  | ${true}  | ${false}
-    `('When the runner is $runnerState', ({ icon, content, isActive, newActiveValue }) => {
+      runnerState | icon       | content        | tooltip                | isActive | newActiveValue
+      ${'paused'} | ${'play'}  | ${I18N_RESUME} | ${I18N_RESUME_TOOLTIP} | ${false} | ${true}
+      ${'active'} | ${'pause'} | ${I18N_PAUSE}  | ${I18N_PAUSE_TOOLTIP}  | ${true}  | ${false}
+    `('When the runner is $runnerState', ({ icon, content, tooltip, isActive, newActiveValue }) => {
       beforeEach(() => {
         createComponent({
           props: {
@@ -91,7 +97,11 @@ describe('RunnerPauseButton', () => {
       it(`Displays a ${icon} button`, () => {
         expect(findBtn().props('loading')).toBe(false);
         expect(findBtn().props('icon')).toBe(icon);
+      });
+
+      it('Displays button content', () => {
         expect(findBtn().text()).toBe(content);
+        expect(getTooltip()).toBe(tooltip);
       });
 
       it('Does not display redundant text for screen readers', () => {
@@ -218,8 +228,8 @@ describe('RunnerPauseButton', () => {
     });
 
     it('Display correctly for screen readers', () => {
-      expect(findBtn().attributes('aria-label')).toBe('Pause');
-      expect(getTooltip()).toBe('Pause');
+      expect(findBtn().attributes('aria-label')).toBe(I18N_PAUSE);
+      expect(getTooltip()).toBe(I18N_PAUSE_TOOLTIP);
     });
 
     describe('Immediately after the button is clicked', () => {