Commit 15d8f767 authored by Enrique Alcántara's avatar Enrique Alcántara Committed by Phil Hughes

Remove glTooltips feature flag

Remove facade that switches between Bootstrap
tooltips and GitLab UI tooltips. As a result
the only living implementation in the app for
tooltips components will be GitLab UI
parent 82cd8d68
......@@ -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') {
......
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;
......
---
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
......@@ -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.
......
......@@ -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();
});
......
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);
});
});
});
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