Merge branch '249787-migrate-awards-handler-tooltips' into 'master'

Use GlTooltips in awards_handler

See merge request gitlab-org/gitlab!46049

app/assets/javascripts/awards_handler.js

@@ -5,11 +5,11 @@ import { uniq } from 'lodash';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import Cookies from 'js-cookie';
 import { __ } from './locale';
-import { updateTooltipTitle } from './lib/utils/common_utils';
 import { isInVueNoteablePage } from './lib/utils/dom_utils';
 import { deprecatedCreateFlash as flash } from './flash';
 import axios from './lib/utils/axios_utils';
 import * as Emoji from '~/emoji';
+import { dispose, fixTitle } from '~/tooltips';
 
 const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
 const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';
@@ -374,7 +374,7 @@ export class AwardsHandler {
       counter.text(counterNumber - 1);
       this.removeYouFromUserList($emojiButton);
     } else if (emoji === 'thumbsup' || emoji === 'thumbsdown') {
-      $emojiButton.tooltip('dispose');
+      dispose($emojiButton);
       counter.text('0');
       this.removeYouFromUserList($emojiButton);
       if ($emojiButton.parents('.note').length) {
@@ -387,7 +387,8 @@ export class AwardsHandler {
   }
 
   removeEmoji($emojiButton) {
-    $emojiButton.tooltip('dispose');
+    dispose($emojiButton);
+
     $emojiButton.remove();
     const $votesBlock = this.getVotesBlock();
     if ($votesBlock.find('.js-emoji-btn').length === 0) {
@@ -415,13 +416,17 @@ export class AwardsHandler {
     const originalTitle = this.getAwardTooltip(awardBlock);
     const authors = originalTitle.split(FROM_SENTENCE_REGEX);
     authors.splice(authors.indexOf('You'), 1);
-    return awardBlock
+
+    awardBlock
       .closest('.js-emoji-btn')
       .removeData('title')
       .removeAttr('data-title')
       .removeAttr('data-original-title')
-      .attr('title', this.toSentence(authors))
-      .tooltip('_fixTitle');
+      .attr('title', this.toSentence(authors));
+
+    fixTitle(awardBlock);
+
+    return awardBlock;
   }
 
   addYouToUserList(votesBlock, emoji) {
@@ -432,7 +437,12 @@ export class AwardsHandler {
       users = origTitle.trim().split(FROM_SENTENCE_REGEX);
     }
     users.unshift('You');
-    return awardBlock.attr('title', this.toSentence(users)).tooltip('_fixTitle');
+
+    awardBlock.attr('title', this.toSentence(users));
+
+    fixTitle(awardBlock);
+
+    return awardBlock;
   }
 
   createAwardButtonForVotesBlock(votesBlock, emojiName) {
@@ -448,7 +458,7 @@ export class AwardsHandler {
       .find('.emoji-icon')
       .data('name', emojiName);
     this.animateEmoji($emojiButton);
-    $('.award-control').tooltip();
+
     votesBlock.removeClass('current');
   }
 
@@ -487,17 +497,6 @@ export class AwardsHandler {
     return votesBlock.find(`.js-emoji-btn [data-name="${emoji}"]`);
   }
 
-  userAuthored($emojiButton) {
-    const oldTitle = this.getAwardTooltip($emojiButton);
-    const newTitle = 'You cannot vote on your own issue, MR and note';
-    updateTooltipTitle($emojiButton, newTitle).tooltip('show');
-    // Restore tooltip back to award list
-    return setTimeout(() => {
-      $emojiButton.tooltip('hide');
-      updateTooltipTitle($emojiButton, oldTitle);
-    }, 2800);
-  }
-
   scrollToAwards() {
     const options = {
       scrollTop: $('.awards').offset().top - 110,

app/assets/javascripts/lib/utils/common_utils.js

@@ -61,9 +61,6 @@ export const rstrip = val => {
   return val;
 };
 
-export const updateTooltipTitle = ($tooltipEl, newTitle) =>
-  $tooltipEl.attr('title', newTitle).tooltip('_fixTitle');
-
 export const disableButtonIfEmptyField = (fieldSelector, buttonSelector, eventName = 'input') => {
   const field = $(fieldSelector);
   const closestSubmit = field.closest('form').find(buttonSelector);

spec/features/issues/user_interacts_with_awards_spec.rb

@@ -68,7 +68,7 @@ RSpec.describe 'User interacts with awards' do
       page.within('.awards') do
         expect(page).to have_selector('.js-emoji-btn')
         expect(page.find('.js-emoji-btn.active .js-counter')).to have_content('1')
-        expect(page).to have_css(".js-emoji-btn.active[data-original-title='You']")
+        expect(page).to have_css(".js-emoji-btn.active[title='You']")
 
         expect do
           page.find('.js-emoji-btn.active').click

spec/frontend/awards_handler_spec.js

@@ -169,29 +169,6 @@ describe('AwardsHandler', () => {
     });
   });
 
-  describe('::userAuthored', () => {
-    it('should update tooltip to user authored title', () => {
-      const $votesBlock = $('.js-awards-block').eq(0);
-      const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent();
-      $thumbsUpEmoji.attr('data-title', 'sam');
-      awardsHandler.userAuthored($thumbsUpEmoji);
-
-      expect($thumbsUpEmoji.data('originalTitle')).toBe(
-        'You cannot vote on your own issue, MR and note',
-      );
-    });
-
-    it('should restore tooltip back to initial vote list', () => {
-      const $votesBlock = $('.js-awards-block').eq(0);
-      const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent();
-      $thumbsUpEmoji.attr('data-title', 'sam');
-      awardsHandler.userAuthored($thumbsUpEmoji);
-      jest.advanceTimersByTime(2801);
-
-      expect($thumbsUpEmoji.data('originalTitle')).toBe('sam');
-    });
-  });
-
   describe('::getAwardUrl', () => {
     it('returns the url for request', () => {
       expect(awardsHandler.getAwardUrl()).toBe('http://test.host/-/snippets/1/toggle_award_emoji');