Merge branch 'okr-compontent-tooltip-awards-list' into 'master'

Migrate to GlTooltipDirective in components/awards_list.vue

See merge request gitlab-org/gitlab!46171

app/assets/javascripts/vue_shared/components/awards_list.vue

 <script>
 /* eslint-disable vue/no-v-html */
 import { groupBy } from 'lodash';
-import { GlIcon, GlLoadingIcon } from '@gitlab/ui';
-import tooltip from '~/vue_shared/directives/tooltip';
+import { GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import { glEmojiTag } from '../../emoji';
 import { __, sprintf } from '~/locale';
 
@@ -15,7 +14,7 @@ export default {
     GlLoadingIcon,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     awards: {
@@ -154,10 +153,9 @@ export default {
     <button
       v-for="awardList in groupedAwards"
       :key="awardList.name"
-      v-tooltip
+      v-gl-tooltip.viewport
       :class="awardList.classes"
       :title="awardList.title"
-      data-boundary="viewport"
       data-testid="award-button"
       class="btn award-control"
       type="button"
@@ -168,12 +166,11 @@ export default {
     </button>
     <div v-if="canAwardEmoji" class="award-menu-holder">
       <button
-        v-tooltip
+        v-gl-tooltip.viewport
         :class="addButtonClass"
         class="award-control btn js-add-award"
         title="Add reaction"
         :aria-label="__('Add reaction')"
-        data-boundary="viewport"
         type="button"
       >
         <span class="award-control-icon award-control-icon-neutral">

changelogs/unreleased/okr-compontent-tooltip-awards-list.yml

+---
+title: Migrate tooltip in app/assets/javascripts/vue_shared/components/awards_list.vue
+merge_request: 46171
+author:
+type: other

spec/frontend/notes/components/note_awards_list_spec.js

@@ -92,15 +92,14 @@ describe('note_awards_list component', () => {
       }).$mount();
     };
 
-    const findTooltip = () =>
-      vm.$el.querySelector('[data-original-title]').getAttribute('data-original-title');
+    const findTooltip = () => vm.$el.querySelector('[title]').getAttribute('title');
 
     it('should only escape & and " characters', () => {
       awardsMock = [...new Array(1)].map(createAwardEmoji);
       mountComponent();
       const escapedName = awardsMock[0].user.name.replace(/&/g, '&').replace(/"/g, '"');
 
-      expect(vm.$el.querySelector('[data-original-title]').outerHTML).toContain(escapedName);
+      expect(vm.$el.querySelector('[title]').outerHTML).toContain(escapedName);
     });
 
     it('should not escape special HTML characters twice when only 1 person awarded', () => {

spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap

@@ -6,10 +6,8 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
 >
   <button
     class="btn award-control"
-    data-boundary="viewport"
-    data-original-title="Ada, Leonardo, and Marie"
     data-testid="award-button"
-    title=""
+    title="Ada, Leonardo, and Marie"
     type="button"
   >
     <span
@@ -32,10 +30,8 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
   </button>
   <button
     class="btn award-control active"
-    data-boundary="viewport"
-    data-original-title="You, Ada, and Marie"
     data-testid="award-button"
-    title=""
+    title="You, Ada, and Marie"
     type="button"
   >
     <span
@@ -58,10 +54,8 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
   </button>
   <button
     class="btn award-control"
-    data-boundary="viewport"
-    data-original-title="Ada and Jane"
     data-testid="award-button"
-    title=""
+    title="Ada and Jane"
     type="button"
   >
     <span
@@ -84,10 +78,8 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
   </button>
   <button
     class="btn award-control active"
-    data-boundary="viewport"
-    data-original-title="You, Ada, Jane, and Leonardo"
     data-testid="award-button"
-    title=""
+    title="You, Ada, Jane, and Leonardo"
     type="button"
   >
     <span
@@ -110,10 +102,8 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
   </button>
   <button
     class="btn award-control active"
-    data-boundary="viewport"
-    data-original-title="You"
     data-testid="award-button"
-    title=""
+    title="You"
     type="button"
   >
     <span
@@ -136,10 +126,8 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
   </button>
   <button
     class="btn award-control"
-    data-boundary="viewport"
-    data-original-title="Marie"
     data-testid="award-button"
-    title=""
+    title="Marie"
     type="button"
   >
     <span
@@ -162,10 +150,8 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
   </button>
   <button
     class="btn award-control active"
-    data-boundary="viewport"
-    data-original-title="You"
     data-testid="award-button"
-    title=""
+    title="You"
     type="button"
   >
     <span
@@ -193,9 +179,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
     <button
       aria-label="Add reaction"
       class="award-control btn js-add-award js-test-add-button-class"
-      data-boundary="viewport"
-      data-original-title="Add reaction"
-      title=""
+      title="Add reaction"
       type="button"
     >
       <span

spec/frontend/vue_shared/components/awards_list_spec.js

@@ -62,7 +62,7 @@ describe('vue_shared/components/awards_list', () => {
     findAwardButtons().wrappers.map(x => {
       return {
         classes: x.classes(),
-        title: x.attributes('data-original-title'),
+        title: x.attributes('title'),
         html: x.find('[data-testid="award-html"]').element.innerHTML,
         count: Number(x.find('.js-counter').text()),
       };