Convert quick_submit.js to GlTooltip

* Used on snippets note submit button, for example.
* Also adds support for 'add' to tooltips API.

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);
   },
 );

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>

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'),

changelogs/unreleased/gl-tooltip-for-quick-submit.yml

+---
+title: Replace quick_submit BSTooltip with GlTooltip
+merge_request: 45638
+author: Kristin Brooks @kristinbrooks
+type: other

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."

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',

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'}

spec/frontend/tooltips/index_spec.js

 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);
     });