diff --git a/app/assets/javascripts/behaviors/quick_submit.js b/app/assets/javascripts/behaviors/quick_submit.js index 49eab3e4f093788be31fc8c58d170d6c7e60df52..907cfc06e2876c21b84bbb7e64121f82034803e0 100644 --- a/app/assets/javascripts/behaviors/quick_submit.js +++ b/app/assets/javascripts/behaviors/quick_submit.js @@ -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); }, ); diff --git a/app/assets/javascripts/tooltips/components/tooltips.vue b/app/assets/javascripts/tooltips/components/tooltips.vue index 8307f878defa7aab78b4f997589de578a08d8e1e..05927006ea61d98061b11dba973052ea2522bb11 100644 --- a/app/assets/javascripts/tooltips/components/tooltips.vue +++ b/app/assets/javascripts/tooltips/components/tooltips.vue @@ -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> diff --git a/app/assets/javascripts/tooltips/index.js b/app/assets/javascripts/tooltips/index.js index 9f5dce4183cac47bfc4739bc288f26be0c0d473a..f7cad6639ae65007b8d888a73392c735c25df0c3 100644 --- a/app/assets/javascripts/tooltips/index.js +++ b/app/assets/javascripts/tooltips/index.js @@ -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'), diff --git a/changelogs/unreleased/gl-tooltip-for-quick-submit.yml b/changelogs/unreleased/gl-tooltip-for-quick-submit.yml new file mode 100644 index 0000000000000000000000000000000000000000..550035f26c736e10814f1b058cdea2881acabac5 --- /dev/null +++ b/changelogs/unreleased/gl-tooltip-for-quick-submit.yml @@ -0,0 +1,5 @@ +--- +title: Replace quick_submit BSTooltip with GlTooltip +merge_request: 45638 +author: Kristin Brooks @kristinbrooks +type: other diff --git a/locale/gitlab.pot b/locale/gitlab.pot index defe542097353eace4dcf724208186954af54e55..c40c4db2e9922ba45497c12cdcfa4ed6c1bc1acb 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -30024,10 +30024,10 @@ msgstr "" msgid "You can also create a project from the command line." msgstr "" -msgid "You can also press ⌘-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." diff --git a/spec/frontend/__mocks__/@gitlab/ui.js b/spec/frontend/__mocks__/@gitlab/ui.js index 237f8b408f509a4d5a1744fdd17e5d54c573cc42..799beb38cbce9d7456299e4a9f2e00db21ce49d2 100644 --- a/spec/frontend/__mocks__/@gitlab/ui.js +++ b/spec/frontend/__mocks__/@gitlab/ui.js @@ -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', diff --git a/spec/frontend/tooltips/components/tooltips_spec.js b/spec/frontend/tooltips/components/tooltips_spec.js index 0edc5248629962c77c0fe1ea4cbfcb94b49c75ef..50848ca2978ff00788f6a9a44f31606aa0f4217c 100644 --- a/spec/frontend/tooltips/components/tooltips_spec.js +++ b/spec/frontend/tooltips/components/tooltips_spec.js @@ -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'} diff --git a/spec/frontend/tooltips/index_spec.js b/spec/frontend/tooltips/index_spec.js index cc72adee57d203d934e8b0f33c61c8713f9fd857..511003fdb8f4c9e3838630d18329830ad1cc2275 100644 --- a/spec/frontend/tooltips/index_spec.js +++ b/spec/frontend/tooltips/index_spec.js @@ -1,5 +1,15 @@ 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); });