Commit 11dd84df authored by Enrique Alcántara's avatar Enrique Alcántara

Merge branch 'gl-tooltip-for-quick-submit' into 'master'

Replace BSTooltip with GlTooltip in app/assets/javascripts/behaviors/quick_submit.js

See merge request gitlab-org/gitlab!45638
parents 1eabb447 f1de60f2
......@@ -2,6 +2,7 @@ import $ from 'jquery';
import '../commons/bootstrap';
import { isInIssuePage } from '../lib/utils/common_utils';
import { __ } from '~/locale';
import { add, show, hide } from '~/tooltips';
// Quick Submit behavior
//
......@@ -65,18 +66,17 @@ $(document).on(
return;
}
const $this = $(this);
const $el = $(this);
const title = isMac()
? __('You can also press ⌘-Enter')
? __('You can also press \u{2318}-Enter')
: __('You can also press Ctrl-Enter');
$this.tooltip({
container: 'body',
html: true,
placement: 'top',
add($el, {
triggers: 'manual',
show: true,
title,
trigger: 'manual',
});
$this.tooltip('show').one('blur click', () => $this.tooltip('hide'));
$el.one('blur click', () => hide($el));
show($el);
},
);
......@@ -108,6 +108,7 @@ export default {
:container="tooltip.container"
:boundary="tooltip.boundary"
:disabled="tooltip.disabled"
:show="tooltip.show"
>
<span v-if="tooltip.html" v-safe-html="tooltip.title"></span>
<span v-else>{{ tooltip.title }}</span>
......
......@@ -96,6 +96,12 @@ export const initTooltips = (config = {}) => {
return invokeBootstrapApi(document.body, config);
};
export const add = (elements, config = {}) => {
if (isGlTooltipsEnabled()) {
return addTooltips(elements, config);
}
return invokeBootstrapApi(elements, config);
};
export const dispose = tooltipApiInvoker({
glHandler: element => tooltipsApp().dispose(element),
bsHandler: elements => invokeBootstrapApi(elements, 'dispose'),
......
---
title: Replace quick_submit BSTooltip with GlTooltip
merge_request: 45638
author: Kristin Brooks @kristinbrooks
type: other
......@@ -30084,10 +30084,10 @@ msgstr ""
msgid "You can also create a project from the command line."
msgstr ""
msgid "You can also press &#8984;-Enter"
msgid "You can also press Ctrl-Enter"
msgstr ""
msgid "You can also press Ctrl-Enter"
msgid "You can also press -Enter"
msgstr ""
msgid "You can also star a label to make it a priority label."
......
......@@ -18,7 +18,7 @@ jest.mock('@gitlab/ui/dist/directives/tooltip.js', () => ({
}));
jest.mock('@gitlab/ui/dist/components/base/tooltip/tooltip.js', () => ({
props: ['target', 'id', 'triggers', 'placement', 'container', 'boundary', 'disabled'],
props: ['target', 'id', 'triggers', 'placement', 'container', 'boundary', 'disabled', 'show'],
render(h) {
return h(
'div',
......
......@@ -80,6 +80,14 @@ describe('tooltips/components/tooltips.vue', () => {
expect(wrapper.find(GlTooltip).html()).toContain(target.getAttribute('title'));
});
it('sets the configuration values passed in the config object', async () => {
const config = { show: true };
target = createTooltipTarget();
wrapper.vm.addTooltips([target], config);
await wrapper.vm.$nextTick();
expect(wrapper.find(GlTooltip).props()).toMatchObject(config);
});
it.each`
attribute | value | prop
${'data-placement'} | ${'bottom'} | ${'placement'}
......
import jQuery from 'jquery';
import { initTooltips, dispose, destroy, hide, show, enable, disable, fixTitle } from '~/tooltips';
import {
add,
initTooltips,
dispose,
destroy,
hide,
show,
enable,
disable,
fixTitle,
} from '~/tooltips';
describe('tooltips/index.js', () => {
let tooltipsApp;
......@@ -67,6 +77,20 @@ describe('tooltips/index.js', () => {
});
});
describe('add', () => {
it('adds a GlTooltip for the specified elements', async () => {
const target = createTooltipTarget();
buildTooltipsApp();
add([target], { title: 'custom title' });
await tooltipsApp.$nextTick();
expect(document.querySelector('.gl-tooltip')).not.toBe(null);
expect(document.querySelector('.gl-tooltip').innerHTML).toContain('custom title');
});
});
describe('dispose', () => {
it('removes tooltips that target the elements specified', async () => {
const target = createTooltipTarget();
......@@ -136,12 +160,13 @@ describe('tooltips/index.js', () => {
${disable} | ${'disable'} | ${'disable'}
${hide} | ${'hide'} | ${'hide'}
${show} | ${'show'} | ${'show'}
${add} | ${'init'} | ${{ title: 'the title' }}
`('delegates $methodName to bootstrap tooltip API', ({ method, bootstrapParams }) => {
const elements = jQuery(createTooltipTarget());
jest.spyOn(jQuery.fn, 'tooltip');
method(elements);
method(elements, bootstrapParams);
expect(elements.tooltip).toHaveBeenCalledWith(bootstrapParams);
});
......
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