diff --git a/app/assets/javascripts/tooltips/components/tooltips.vue b/app/assets/javascripts/tooltips/components/tooltips.vue index 05927006ea61d98061b11dba973052ea2522bb11..15fc84368b2cd8bdb05ea7db61946fb20565c6f6 100644 --- a/app/assets/javascripts/tooltips/components/tooltips.vue +++ b/app/assets/javascripts/tooltips/components/tooltips.vue @@ -50,7 +50,8 @@ export default { addTooltips(elements, config) { const newTooltips = elements .filter(element => !this.tooltipExists(element)) - .map(element => newTooltip(element, config)); + .map(element => newTooltip(element, config)) + .filter(tooltip => tooltip.title); newTooltips.forEach(tooltip => this.observe(tooltip)); @@ -93,6 +94,9 @@ export default { return this.tooltips.find(tooltip => tooltip.target === element); }, }, + safeHtmlConfig: { + ADD_TAGS: ['gl-emoji'], + }, }; </script> <template> @@ -110,7 +114,7 @@ export default { :disabled="tooltip.disabled" :show="tooltip.show" > - <span v-if="tooltip.html" v-safe-html="tooltip.title"></span> + <span v-if="tooltip.html" v-safe-html:[$options.safeHtmlConfig]="tooltip.title"></span> <span v-else>{{ tooltip.title }}</span> </gl-tooltip> </div> diff --git a/app/assets/javascripts/tooltips/index.js b/app/assets/javascripts/tooltips/index.js index f7cad6639ae65007b8d888a73392c735c25df0c3..335925aec5fd58ec4ad5ec4c1ea47c954232d3aa 100644 --- a/app/assets/javascripts/tooltips/index.js +++ b/app/assets/javascripts/tooltips/index.js @@ -68,7 +68,7 @@ const invokeBootstrapApi = (elements, method) => { } }; -const isGlTooltipsEnabled = () => Boolean(window.gon.glTooltipsEnabled); +const isGlTooltipsEnabled = () => Boolean(window.gon.features?.glTooltips); const tooltipApiInvoker = ({ glHandler, bsHandler }) => (elements, ...params) => { if (isGlTooltipsEnabled()) { diff --git a/config/feature_flags/development/gl_tooltips.yml b/config/feature_flags/development/gl_tooltips.yml new file mode 100644 index 0000000000000000000000000000000000000000..22c67019c338ce34dec79d3eef7da3b8e94c4aa9 --- /dev/null +++ b/config/feature_flags/development/gl_tooltips.yml @@ -0,0 +1,8 @@ +--- +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 diff --git a/lib/gitlab/gon_helper.rb b/lib/gitlab/gon_helper.rb index 362da8ea53e48f7184f9a061e3890d65bbefca41..10e8f00874d50a3b72295bade703e7e5e6cd88a4 100644 --- a/lib/gitlab/gon_helper.rb +++ b/lib/gitlab/gon_helper.rb @@ -48,6 +48,7 @@ def add_gon_variables 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) # Startup CSS feature is a special one as it can be enabled by means of cookies and params gon.push({ features: { 'startupCss' => use_startup_css? } }, true) diff --git a/spec/frontend/tooltips/components/tooltips_spec.js b/spec/frontend/tooltips/components/tooltips_spec.js index 50848ca2978ff00788f6a9a44f31606aa0f4217c..0b8c76db11d9c8ca01a557f383776dc0d1d9b4cf 100644 --- a/spec/frontend/tooltips/components/tooltips_spec.js +++ b/spec/frontend/tooltips/components/tooltips_spec.js @@ -51,6 +51,16 @@ describe('tooltips/components/tooltips.vue', () => { expect(wrapper.find(GlTooltip).props('target')).toBe(target); }); + it('does not attach a tooltip to a target with empty title', async () => { + target.setAttribute('title', ''); + + wrapper.vm.addTooltips([target]); + + await wrapper.vm.$nextTick(); + + expect(wrapper.find(GlTooltip).exists()).toBe(false); + }); + it('does not attach a tooltip twice to the same element', async () => { wrapper.vm.addTooltips([target]); wrapper.vm.addTooltips([target]); diff --git a/spec/frontend/tooltips/index_spec.js b/spec/frontend/tooltips/index_spec.js index 511003fdb8f4c9e3838630d18329830ad1cc2275..86da1caab3ee3038eb8f2ce40f5796204b5d3577 100644 --- a/spec/frontend/tooltips/index_spec.js +++ b/spec/frontend/tooltips/index_spec.js @@ -42,7 +42,7 @@ describe('tooltips/index.js', () => { }; beforeEach(() => { - window.gon.glTooltipsEnabled = true; + window.gon.features = { glTooltips: true }; }); afterEach(() => { @@ -149,7 +149,7 @@ describe('tooltips/index.js', () => { describe('when glTooltipsEnabled feature flag is disabled', () => { beforeEach(() => { - window.gon.glTooltipsEnabled = false; + window.gon.features.glTooltips = false; }); it.each`