Commit 6382d3dc authored by Jacques Erasmus's avatar Jacques Erasmus

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

Use GlTooltips in awards_handler

See merge request gitlab-org/gitlab!46049
parents c0f090fc 4bd541da
...@@ -5,11 +5,11 @@ import { uniq } from 'lodash'; ...@@ -5,11 +5,11 @@ import { uniq } from 'lodash';
import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import { __ } from './locale'; import { __ } from './locale';
import { updateTooltipTitle } from './lib/utils/common_utils';
import { isInVueNoteablePage } from './lib/utils/dom_utils'; import { isInVueNoteablePage } from './lib/utils/dom_utils';
import { deprecatedCreateFlash as flash } from './flash'; import { deprecatedCreateFlash as flash } from './flash';
import axios from './lib/utils/axios_utils'; import axios from './lib/utils/axios_utils';
import * as Emoji from '~/emoji'; import * as Emoji from '~/emoji';
import { dispose, fixTitle } from '~/tooltips';
const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd'; const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd'; const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';
...@@ -374,7 +374,7 @@ export class AwardsHandler { ...@@ -374,7 +374,7 @@ export class AwardsHandler {
counter.text(counterNumber - 1); counter.text(counterNumber - 1);
this.removeYouFromUserList($emojiButton); this.removeYouFromUserList($emojiButton);
} else if (emoji === 'thumbsup' || emoji === 'thumbsdown') { } else if (emoji === 'thumbsup' || emoji === 'thumbsdown') {
$emojiButton.tooltip('dispose'); dispose($emojiButton);
counter.text('0'); counter.text('0');
this.removeYouFromUserList($emojiButton); this.removeYouFromUserList($emojiButton);
if ($emojiButton.parents('.note').length) { if ($emojiButton.parents('.note').length) {
...@@ -387,7 +387,8 @@ export class AwardsHandler { ...@@ -387,7 +387,8 @@ export class AwardsHandler {
} }
removeEmoji($emojiButton) { removeEmoji($emojiButton) {
$emojiButton.tooltip('dispose'); dispose($emojiButton);
$emojiButton.remove(); $emojiButton.remove();
const $votesBlock = this.getVotesBlock(); const $votesBlock = this.getVotesBlock();
if ($votesBlock.find('.js-emoji-btn').length === 0) { if ($votesBlock.find('.js-emoji-btn').length === 0) {
...@@ -415,13 +416,17 @@ export class AwardsHandler { ...@@ -415,13 +416,17 @@ export class AwardsHandler {
const originalTitle = this.getAwardTooltip(awardBlock); const originalTitle = this.getAwardTooltip(awardBlock);
const authors = originalTitle.split(FROM_SENTENCE_REGEX); const authors = originalTitle.split(FROM_SENTENCE_REGEX);
authors.splice(authors.indexOf('You'), 1); authors.splice(authors.indexOf('You'), 1);
return awardBlock
awardBlock
.closest('.js-emoji-btn') .closest('.js-emoji-btn')
.removeData('title') .removeData('title')
.removeAttr('data-title') .removeAttr('data-title')
.removeAttr('data-original-title') .removeAttr('data-original-title')
.attr('title', this.toSentence(authors)) .attr('title', this.toSentence(authors));
.tooltip('_fixTitle');
fixTitle(awardBlock);
return awardBlock;
} }
addYouToUserList(votesBlock, emoji) { addYouToUserList(votesBlock, emoji) {
...@@ -432,7 +437,12 @@ export class AwardsHandler { ...@@ -432,7 +437,12 @@ export class AwardsHandler {
users = origTitle.trim().split(FROM_SENTENCE_REGEX); users = origTitle.trim().split(FROM_SENTENCE_REGEX);
} }
users.unshift('You'); 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) { createAwardButtonForVotesBlock(votesBlock, emojiName) {
...@@ -448,7 +458,7 @@ export class AwardsHandler { ...@@ -448,7 +458,7 @@ export class AwardsHandler {
.find('.emoji-icon') .find('.emoji-icon')
.data('name', emojiName); .data('name', emojiName);
this.animateEmoji($emojiButton); this.animateEmoji($emojiButton);
$('.award-control').tooltip();
votesBlock.removeClass('current'); votesBlock.removeClass('current');
} }
...@@ -487,17 +497,6 @@ export class AwardsHandler { ...@@ -487,17 +497,6 @@ export class AwardsHandler {
return votesBlock.find(`.js-emoji-btn [data-name="${emoji}"]`); 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() { scrollToAwards() {
const options = { const options = {
scrollTop: $('.awards').offset().top - 110, scrollTop: $('.awards').offset().top - 110,
......
...@@ -61,9 +61,6 @@ export const rstrip = val => { ...@@ -61,9 +61,6 @@ export const rstrip = val => {
return val; return val;
}; };
export const updateTooltipTitle = ($tooltipEl, newTitle) =>
$tooltipEl.attr('title', newTitle).tooltip('_fixTitle');
export const disableButtonIfEmptyField = (fieldSelector, buttonSelector, eventName = 'input') => { export const disableButtonIfEmptyField = (fieldSelector, buttonSelector, eventName = 'input') => {
const field = $(fieldSelector); const field = $(fieldSelector);
const closestSubmit = field.closest('form').find(buttonSelector); const closestSubmit = field.closest('form').find(buttonSelector);
......
...@@ -68,7 +68,7 @@ RSpec.describe 'User interacts with awards' do ...@@ -68,7 +68,7 @@ RSpec.describe 'User interacts with awards' do
page.within('.awards') do page.within('.awards') do
expect(page).to have_selector('.js-emoji-btn') expect(page).to have_selector('.js-emoji-btn')
expect(page.find('.js-emoji-btn.active .js-counter')).to have_content('1') 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 expect do
page.find('.js-emoji-btn.active').click page.find('.js-emoji-btn.active').click
......
...@@ -169,29 +169,6 @@ describe('AwardsHandler', () => { ...@@ -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', () => { describe('::getAwardUrl', () => {
it('returns the url for request', () => { it('returns the url for request', () => {
expect(awardsHandler.getAwardUrl()).toBe('http://test.host/-/snippets/1/toggle_award_emoji'); expect(awardsHandler.getAwardUrl()).toBe('http://test.host/-/snippets/1/toggle_award_emoji');
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment