Merge branch...

Merge branch '229005-replace-vue_shared-tooltip-with-gitlab-ui-s-tooltip-in-app-assets-javascripts' into 'master'

Migrate MR widget squash tooltips to GitLab UI

See merge request gitlab-org/gitlab!43536

app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
-import tooltip from '~/vue_shared/directives/tooltip';
-import { __ } from '~/locale';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { SQUASH_BEFORE_MERGE } from '../../i18n';
 
 export default {
   components: {
     GlIcon,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
+  },
+  i18n: {
+    ...SQUASH_BEFORE_MERGE,
   },
   props: {
     value: {
@@ -28,7 +30,10 @@ export default {
   },
   computed: {
     tooltipTitle() {
-      return this.isDisabled ? __('Required in this project.') : false;
+      return this.isDisabled ? this.$options.i18n.tooltipTitle : null;
+    },
+    tooltipFocusable() {
+      return this.isDisabled ? '0' : null;
     },
   },
 };
@@ -37,10 +42,11 @@ export default {
 <template>
   <div class="inline">
     <label
-      v-tooltip
+      v-gl-tooltip
       :class="{ 'gl-text-gray-400': isDisabled }"
+      :tabindex="tooltipFocusable"
       data-testid="squashLabel"
-      :data-title="tooltipTitle"
+      :title="tooltipTitle"
     >
       <input
         :checked="value"
@@ -50,19 +56,20 @@ export default {
         class="qa-squash-checkbox js-squash-checkbox"
         @change="$emit('input', $event.target.checked)"
       />
-      {{ __('Squash commits') }}
+      {{ $options.i18n.checkboxLabel }}
     </label>
     <a
       v-if="helpPath"
-      v-tooltip
+      v-gl-tooltip
       :href="helpPath"
-      data-title="About this feature"
-      data-placement="bottom"
+      :title="$options.i18n.helpLabel"
       target="_blank"
       rel="noopener noreferrer nofollow"
-      data-container="body"
     >
       <gl-icon name="question" />
+      <span class="sr-only">
+        {{ $options.i18n.helpLabel }}
+      </span>
     </a>
   </div>
 </template>

app/assets/javascripts/vue_merge_request_widget/i18n.js

+import { __ } from '~/locale';
+
+export const SQUASH_BEFORE_MERGE = {
+  tooltipTitle: __('Required in this project.'),
+  checkboxLabel: __('Squash commits'),
+  helpLabel: __('What is squashing?'),
+};

locale/gitlab.pot

@@ -29096,6 +29096,9 @@ msgstr ""
 msgid "What describes you best?"
 msgstr ""
 
+msgid "What is squashing?"
+msgstr ""
+
 msgid "What's new at GitLab"
 msgstr ""
 

spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import SquashBeforeMerge from '~/vue_merge_request_widget/components/states/squash_before_merge.vue';
+import { SQUASH_BEFORE_MERGE } from '~/vue_merge_request_widget/i18n';
 
 const localVue = createLocalVue();
 
@@ -85,7 +86,7 @@ describe('Squash before merge component', () => {
   });
 
   describe('tooltip', () => {
-    const tooltipTitle = () => findLabel().element.dataset.title;
+    const tooltipTitle = () => findLabel().attributes('title');
 
     it('does not render when isDisabled is false', () => {
       createComponent({
@@ -101,7 +102,7 @@ describe('Squash before merge component', () => {
         isDisabled: true,
       });
 
-      expect(tooltipTitle()).toBe('Required in this project.');
+      expect(tooltipTitle()).toBe(SQUASH_BEFORE_MERGE.tooltipTitle);
     });
   });