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) { ...@@ -123,7 +123,7 @@ Sidebar.prototype.todoUpdateDone = function (data) {
.data('deletePath', deletePath); .data('deletePath', deletePath);
if ($el.hasClass('has-tooltip')) { if ($el.hasClass('has-tooltip')) {
fixTitle($el); fixTitle(el);
} }
if (typeof $el.data('isCollapsed') !== 'undefined') { if (typeof $el.data('isCollapsed') !== 'undefined') {
......
import Vue from 'vue'; import Vue from 'vue';
import jQuery from 'jquery'; import { toArray, isElement } from 'lodash';
import { toArray, isFunction, isElement } from 'lodash';
import Tooltips from './components/tooltips.vue'; import Tooltips from './components/tooltips.vue';
let app; let app;
...@@ -60,26 +59,11 @@ const applyToElements = (elements, handler) => { ...@@ -60,26 +59,11 @@ const applyToElements = (elements, handler) => {
toArray(iterable).forEach(handler); toArray(iterable).forEach(handler);
}; };
const invokeBootstrapApi = (elements, method) => { const createTooltipApiInvoker = (glHandler) => (elements) => {
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); applyToElements(elements, glHandler);
} else {
bsHandler(elements, ...params);
}
}; };
export const initTooltips = (config = {}) => { export const initTooltips = (config = {}) => {
if (isGlTooltipsEnabled()) {
const triggers = config?.triggers || DEFAULT_TRIGGER; const triggers = config?.triggers || DEFAULT_TRIGGER;
const events = triggers.split(' ').map((trigger) => EVENTS_MAP[trigger]); const events = triggers.split(' ').map((trigger) => EVENTS_MAP[trigger]);
...@@ -92,40 +76,22 @@ export const initTooltips = (config = {}) => { ...@@ -92,40 +76,22 @@ export const initTooltips = (config = {}) => {
}); });
return tooltipsApp(); return tooltipsApp();
}
return invokeBootstrapApi(document.body, config);
};
export const add = (elements, config = {}) => {
if (isGlTooltipsEnabled()) {
return addTooltips(elements, config);
}
return invokeBootstrapApi(elements, config);
}; };
export const dispose = tooltipApiInvoker({ export const add = (elements, config = {}) => addTooltips(elements, config);
glHandler: (element) => tooltipsApp().dispose(element), export const dispose = createTooltipApiInvoker((element) => tooltipsApp().dispose(element));
bsHandler: (elements) => invokeBootstrapApi(elements, 'dispose'), export const fixTitle = createTooltipApiInvoker((element) => tooltipsApp().fixTitle(element));
}); export const enable = createTooltipApiInvoker((element) =>
export const fixTitle = tooltipApiInvoker({ tooltipsApp().triggerEvent(element, 'enable'),
glHandler: (element) => tooltipsApp().fixTitle(element), );
bsHandler: (elements) => invokeBootstrapApi(elements, '_fixTitle'), export const disable = createTooltipApiInvoker((element) =>
}); tooltipsApp().triggerEvent(element, 'disable'),
export const enable = tooltipApiInvoker({ );
glHandler: (element) => tooltipsApp().triggerEvent(element, 'enable'), export const hide = createTooltipApiInvoker((element) =>
bsHandler: (elements) => invokeBootstrapApi(elements, 'enable'), tooltipsApp().triggerEvent(element, 'close'),
}); );
export const disable = tooltipApiInvoker({ export const show = createTooltipApiInvoker((element) =>
glHandler: (element) => tooltipsApp().triggerEvent(element, 'disable'), tooltipsApp().triggerEvent(element, 'open'),
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 destroy = () => { export const destroy = () => {
tooltipsApp().$destroy(); tooltipsApp().$destroy();
app = null; 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 ...@@ -46,7 +46,6 @@ module Gitlab
push_frontend_feature_flag(:snippets_binary_blob, default_enabled: false) push_frontend_feature_flag(:snippets_binary_blob, default_enabled: false)
push_frontend_feature_flag(:usage_data_api, default_enabled: true) push_frontend_feature_flag(:usage_data_api, default_enabled: true)
push_frontend_feature_flag(:security_auto_fix, default_enabled: false) push_frontend_feature_flag(:security_auto_fix, default_enabled: false)
push_frontend_feature_flag(:gl_tooltips, default_enabled: :yaml)
end end
# Exposes the state of a feature flag to the frontend code. # Exposes the state of a feature flag to the frontend code.
......
...@@ -5,6 +5,9 @@ import { TEST_HOST } from 'spec/test_constants'; ...@@ -5,6 +5,9 @@ import { TEST_HOST } from 'spec/test_constants';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
import Sidebar from '~/right_sidebar'; import Sidebar from '~/right_sidebar';
import { fixTitle } from '~/tooltips';
jest.mock('~/tooltips');
describe('Issuable right sidebar collapsed todo toggle', () => { describe('Issuable right sidebar collapsed todo toggle', () => {
const fixtureName = 'issues/open-issue.html'; const fixtureName = 'issues/open-issue.html';
...@@ -96,11 +99,10 @@ describe('Issuable right sidebar collapsed todo toggle', () => { ...@@ -96,11 +99,10 @@ describe('Issuable right sidebar collapsed todo toggle', () => {
document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click(); document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();
setImmediate(() => { setImmediate(() => {
expect( const el = document.querySelector('.js-issuable-todo.sidebar-collapsed-icon');
document
.querySelector('.js-issuable-todo.sidebar-collapsed-icon') expect(el.getAttribute('title')).toBe('Mark as done');
.getAttribute('data-original-title'), expect(fixTitle).toHaveBeenCalledWith(el);
).toBe('Mark as done');
done(); done();
}); });
......
import jQuery from 'jquery';
import { import {
add, add,
initTooltips, initTooltips,
...@@ -146,29 +145,4 @@ describe('tooltips/index.js', () => { ...@@ -146,29 +145,4 @@ describe('tooltips/index.js', () => {
expect(tooltipsApp.fixTitle).toHaveBeenCalledWith(target); 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