Merge branch '292972-remove-gl-tooltips-flag' into 'master'

Clean up glTooltips feature flag [RUN ALL RSPEC] [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!51345

app/assets/javascripts/right_sidebar.js

@@ -123,7 +123,7 @@ Sidebar.prototype.todoUpdateDone = function (data) {
       .data('deletePath', deletePath);
 
     if ($el.hasClass('has-tooltip')) {
-      fixTitle($el);
+      fixTitle(el);
     }
 
     if (typeof $el.data('isCollapsed') !== 'undefined') {

app/assets/javascripts/tooltips/index.js

 import Vue from 'vue';
-import jQuery from 'jquery';
-import { toArray, isFunction, isElement } from 'lodash';
+import { toArray, isElement } from 'lodash';
 import Tooltips from './components/tooltips.vue';
 
 let app;
@@ -60,72 +59,39 @@ const applyToElements = (elements, handler) => {
   toArray(iterable).forEach(handler);
 };
 
-const invokeBootstrapApi = (elements, method) => {
-  if (isFunction(elements.tooltip)) {
-    elements.tooltip(method);
-  } else {
-    jQuery(elements).tooltip(method);
-  }
-};
-
-const isGlTooltipsEnabled = () => Boolean(window.gon.features?.glTooltips);
-
-const tooltipApiInvoker = ({ glHandler, bsHandler }) => (elements, ...params) => {
-  if (isGlTooltipsEnabled()) {
-    applyToElements(elements, glHandler);
-  } else {
-    bsHandler(elements, ...params);
-  }
+const createTooltipApiInvoker = (glHandler) => (elements) => {
+  applyToElements(elements, glHandler);
 };
 
 export const initTooltips = (config = {}) => {
-  if (isGlTooltipsEnabled()) {
-    const triggers = config?.triggers || DEFAULT_TRIGGER;
-    const events = triggers.split(' ').map((trigger) => EVENTS_MAP[trigger]);
-
-    events.forEach((event) => {
-      document.addEventListener(
-        event,
-        (e) => handleTooltipEvent(document, e, config.selector, config),
-        true,
-      );
-    });
-
-    return tooltipsApp();
-  }
-
-  return invokeBootstrapApi(document.body, config);
-};
-export const add = (elements, config = {}) => {
-  if (isGlTooltipsEnabled()) {
-    return addTooltips(elements, config);
-  }
-  return invokeBootstrapApi(elements, config);
+  const triggers = config?.triggers || DEFAULT_TRIGGER;
+  const events = triggers.split(' ').map((trigger) => EVENTS_MAP[trigger]);
+
+  events.forEach((event) => {
+    document.addEventListener(
+      event,
+      (e) => handleTooltipEvent(document, e, config.selector, config),
+      true,
+    );
+  });
+
+  return tooltipsApp();
 };
-export const dispose = tooltipApiInvoker({
-  glHandler: (element) => tooltipsApp().dispose(element),
-  bsHandler: (elements) => invokeBootstrapApi(elements, 'dispose'),
-});
-export const fixTitle = tooltipApiInvoker({
-  glHandler: (element) => tooltipsApp().fixTitle(element),
-  bsHandler: (elements) => invokeBootstrapApi(elements, '_fixTitle'),
-});
-export const enable = tooltipApiInvoker({
-  glHandler: (element) => tooltipsApp().triggerEvent(element, 'enable'),
-  bsHandler: (elements) => invokeBootstrapApi(elements, 'enable'),
-});
-export const disable = tooltipApiInvoker({
-  glHandler: (element) => tooltipsApp().triggerEvent(element, 'disable'),
-  bsHandler: (elements) => invokeBootstrapApi(elements, 'disable'),
-});
-export const hide = tooltipApiInvoker({
-  glHandler: (element) => tooltipsApp().triggerEvent(element, 'close'),
-  bsHandler: (elements) => invokeBootstrapApi(elements, 'hide'),
-});
-export const show = tooltipApiInvoker({
-  glHandler: (element) => tooltipsApp().triggerEvent(element, 'open'),
-  bsHandler: (elements) => invokeBootstrapApi(elements, 'show'),
-});
+export const add = (elements, config = {}) => addTooltips(elements, config);
+export const dispose = createTooltipApiInvoker((element) => tooltipsApp().dispose(element));
+export const fixTitle = createTooltipApiInvoker((element) => tooltipsApp().fixTitle(element));
+export const enable = createTooltipApiInvoker((element) =>
+  tooltipsApp().triggerEvent(element, 'enable'),
+);
+export const disable = createTooltipApiInvoker((element) =>
+  tooltipsApp().triggerEvent(element, 'disable'),
+);
+export const hide = createTooltipApiInvoker((element) =>
+  tooltipsApp().triggerEvent(element, 'close'),
+);
+export const show = createTooltipApiInvoker((element) =>
+  tooltipsApp().triggerEvent(element, 'open'),
+);
 export const destroy = () => {
   tooltipsApp().$destroy();
   app = null;

config/feature_flags/development/gl_tooltips.yml

----
-name: gl_tooltips
-introduced_by_url: 
-rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/292972
-milestone: '13.8'
-type: development
-group: group::editor
-default_enabled: false

lib/gitlab/gon_helper.rb

@@ -46,7 +46,6 @@ module Gitlab
       push_frontend_feature_flag(:snippets_binary_blob, default_enabled: false)
       push_frontend_feature_flag(:usage_data_api, default_enabled: true)
       push_frontend_feature_flag(:security_auto_fix, default_enabled: false)
-      push_frontend_feature_flag(:gl_tooltips, default_enabled: :yaml)
     end
 
     # Exposes the state of a feature flag to the frontend code.

spec/frontend/collapsed_sidebar_todo_spec.js

@@ -5,6 +5,9 @@ import { TEST_HOST } from 'spec/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import Sidebar from '~/right_sidebar';
+import { fixTitle } from '~/tooltips';
+
+jest.mock('~/tooltips');
 
 describe('Issuable right sidebar collapsed todo toggle', () => {
   const fixtureName = 'issues/open-issue.html';
@@ -96,11 +99,10 @@ describe('Issuable right sidebar collapsed todo toggle', () => {
     document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();
 
     setImmediate(() => {
-      expect(
-        document
-          .querySelector('.js-issuable-todo.sidebar-collapsed-icon')
-          .getAttribute('data-original-title'),
-      ).toBe('Mark as done');
+      const el = document.querySelector('.js-issuable-todo.sidebar-collapsed-icon');
+
+      expect(el.getAttribute('title')).toBe('Mark as done');
+      expect(fixTitle).toHaveBeenCalledWith(el);
 
       done();
     });

spec/frontend/tooltips/index_spec.js

-import jQuery from 'jquery';
 import {
   add,
   initTooltips,
@@ -146,29 +145,4 @@ describe('tooltips/index.js', () => {
 
     expect(tooltipsApp.fixTitle).toHaveBeenCalledWith(target);
   });
-
-  describe('when glTooltipsEnabled feature flag is disabled', () => {
-    beforeEach(() => {
-      window.gon.features.glTooltips = false;
-    });
-
-    it.each`
-      method      | methodName    | bootstrapParams
-      ${dispose}  | ${'dispose'}  | ${'dispose'}
-      ${fixTitle} | ${'fixTitle'} | ${'_fixTitle'}
-      ${enable}   | ${'enable'}   | ${'enable'}
-      ${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, bootstrapParams);
-
-      expect(elements.tooltip).toHaveBeenCalledWith(bootstrapParams);
-    });
-  });
 });