Add emoji name to tooltip

Changelog: added

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

@@ -93,12 +93,12 @@ export default {
       return {
         name,
         list,
-        title: this.getAwardListTitle(list),
+        title: this.getAwardListTitle(list, name),
         classes: this.getAwardClassBindings(list),
         html: glEmojiTag(name),
       };
     },
-    getAwardListTitle(awardsList) {
+    getAwardListTitle(awardsList, name) {
       if (!awardsList.length) {
         return '';
       }
@@ -128,7 +128,7 @@ export default {
       // We have 10+ awarded user, join them with comma and add `and x more`.
       if (remainingAwardList.length) {
         title = sprintf(
-          __(`%{listToShow}, and %{awardsListLength} more.`),
+          __(`%{listToShow}, and %{awardsListLength} more`),
           {
             listToShow: namesToShow.join(', '),
             awardsListLength: remainingAwardList.length,
@@ -146,7 +146,7 @@ export default {
         title = namesToShow.join(__(' and '));
       }
 
-      return title;
+      return title + sprintf(__(' reacted with :%{name}:'), { name });
     },
     handleAward(awardName) {
       if (!this.canAwardEmoji) {

locale/gitlab.pot

@@ -77,6 +77,9 @@ msgstr ""
 msgid " or references (e.g. path/to/project!merge_request_id)"
 msgstr ""
 
+msgid " reacted with :%{name}:"
+msgstr ""
+
 msgid "\"%{path}\" did not exist on \"%{ref}\""
 msgstr ""
 
@@ -684,7 +687,7 @@ msgstr ""
 msgid "%{link_start}Start the title with %{draft_snippet}%{link_end} to prevent a merge request that is a work in progress from being merged before it's ready."
 msgstr ""
 
-msgid "%{listToShow}, and %{awardsListLength} more."
+msgid "%{listToShow}, and %{awardsListLength} more"
 msgstr ""
 
 msgid "%{location} is missing required keys: %{keys}"

spec/features/issues/user_interacts_with_awards_spec.rb

@@ -63,7 +63,7 @@ RSpec.describe 'User interacts with awards' do
       page.within('.awards') do
         expect(page).to have_selector('[data-testid="award-button"]')
         expect(page.find('[data-testid="award-button"].selected .js-counter')).to have_content('1')
-        expect(page).to have_css('[data-testid="award-button"].selected[title="You"]')
+        expect(page).to have_css('[data-testid="award-button"].selected[title="You reacted with :8ball:"]')
 
         expect do
           page.find('[data-testid="award-button"].selected').click

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

@@ -7,7 +7,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
   <button
     class="btn gl-mr-3 gl-my-2 btn-default btn-md gl-button"
     data-testid="award-button"
-    title="Ada, Leonardo, and Marie"
+    title="Ada, Leonardo, and Marie reacted with :thumbsup:"
     type="button"
   >
     <!---->
@@ -37,7 +37,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
   <button
     class="btn gl-mr-3 gl-my-2 btn-default btn-md gl-button selected"
     data-testid="award-button"
-    title="You, Ada, and Marie"
+    title="You, Ada, and Marie reacted with :thumbsdown:"
     type="button"
   >
     <!---->
@@ -67,7 +67,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
   <button
     class="btn gl-mr-3 gl-my-2 btn-default btn-md gl-button"
     data-testid="award-button"
-    title="Ada and Jane"
+    title="Ada and Jane reacted with :smile:"
     type="button"
   >
     <!---->
@@ -97,7 +97,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
   <button
     class="btn gl-mr-3 gl-my-2 btn-default btn-md gl-button selected"
     data-testid="award-button"
-    title="You, Ada, Jane, and Leonardo"
+    title="You, Ada, Jane, and Leonardo reacted with :ok_hand:"
     type="button"
   >
     <!---->
@@ -127,7 +127,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
   <button
     class="btn gl-mr-3 gl-my-2 btn-default btn-md gl-button selected"
     data-testid="award-button"
-    title="You"
+    title="You reacted with :cactus:"
     type="button"
   >
     <!---->
@@ -157,7 +157,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
   <button
     class="btn gl-mr-3 gl-my-2 btn-default btn-md gl-button"
     data-testid="award-button"
-    title="Marie"
+    title="Marie reacted with :a:"
     type="button"
   >
     <!---->
@@ -187,7 +187,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
   <button
     class="btn gl-mr-3 gl-my-2 btn-default btn-md gl-button selected"
     data-testid="award-button"
-    title="You"
+    title="You reacted with :b:"
     type="button"
   >
     <!---->

spec/frontend/vue_shared/components/awards_list_spec.js

@@ -98,43 +98,43 @@ describe('vue_shared/components/awards_list', () => {
           classes: REACTION_CONTROL_CLASSES,
           count: 3,
           html: matchingEmojiTag(EMOJI_THUMBSUP),
-          title: 'Ada, Leonardo, and Marie',
+          title: `Ada, Leonardo, and Marie reacted with :${EMOJI_THUMBSUP}:`,
         },
         {
           classes: [...REACTION_CONTROL_CLASSES, 'selected'],
           count: 3,
           html: matchingEmojiTag(EMOJI_THUMBSDOWN),
-          title: 'You, Ada, and Marie',
+          title: `You, Ada, and Marie reacted with :${EMOJI_THUMBSDOWN}:`,
         },
         {
           classes: REACTION_CONTROL_CLASSES,
           count: 2,
           html: matchingEmojiTag(EMOJI_SMILE),
-          title: 'Ada and Jane',
+          title: `Ada and Jane reacted with :${EMOJI_SMILE}:`,
         },
         {
           classes: [...REACTION_CONTROL_CLASSES, 'selected'],
           count: 4,
           html: matchingEmojiTag(EMOJI_OK),
-          title: 'You, Ada, Jane, and Leonardo',
+          title: `You, Ada, Jane, and Leonardo reacted with :${EMOJI_OK}:`,
         },
         {
           classes: [...REACTION_CONTROL_CLASSES, 'selected'],
           count: 1,
           html: matchingEmojiTag(EMOJI_CACTUS),
-          title: 'You',
+          title: `You reacted with :${EMOJI_CACTUS}:`,
         },
         {
           classes: REACTION_CONTROL_CLASSES,
           count: 1,
           html: matchingEmojiTag(EMOJI_A),
-          title: 'Marie',
+          title: `Marie reacted with :${EMOJI_A}:`,
         },
         {
           classes: [...REACTION_CONTROL_CLASSES, 'selected'],
           count: 1,
           html: matchingEmojiTag(EMOJI_B),
-          title: 'You',
+          title: `You reacted with :${EMOJI_B}:`,
         },
       ]);
     });
@@ -246,13 +246,13 @@ describe('vue_shared/components/awards_list', () => {
           classes: REACTION_CONTROL_CLASSES,
           count: 1,
           html: matchingEmojiTag(EMOJI_100),
-          title: 'Marie',
+          title: `Marie reacted with :${EMOJI_100}:`,
         },
         {
           classes: REACTION_CONTROL_CLASSES,
           count: 1,
           html: matchingEmojiTag(EMOJI_SMILE),
-          title: 'Marie',
+          title: `Marie reacted with :${EMOJI_SMILE}:`,
         },
       ]);
     });