Skip to content
Snippets Groups Projects
Unverified Commit 2de5591e authored by Enrique Alcántara's avatar Enrique Alcántara
Browse files

Cleanup obsolete feature highlight code 

Removes old version of feature highlight implementation
parent 2b00a4b3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 2 additions and 259 deletions
app/assets/javascripts/feature_highlight/feature_highlight.js deleted 100644 → 0
+ 0
− 59
View file @ 2b00a4b3
import $ from 'jquery';
import { togglePopover, mouseenter, debouncedMouseleave } from '../shared/popover';
import { getSelector, inserted } from './feature_highlight_helper';
export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
const $selector = $(getSelector(id));
const $parent = $selector.parent();
const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
const hideOnScroll = togglePopover.bind($selector, false);
$selector
// Set up popover
.data('content', $popoverContent.prop('outerHTML'))
.popover({
html: true,
// Override the existing template to add custom CSS classes
template: `
<div class="popover feature-highlight-popover" role="tooltip">
<div class="arrow"></div>
<div class="popover-body"></div>
</div>
`,
})
.on('mouseenter', mouseenter)
.on('mouseleave', debouncedMouseleave(debounceTimeout))
.on('inserted.bs.popover', inserted)
.on('show.bs.popover', () => {
window.addEventListener('scroll', hideOnScroll, { once: true });
})
// Display feature highlight
.removeAttr('disabled');
}
const getPriority = (e) => parseInt(e.dataset.highlightPriority, 10) || 0;
export function findHighestPriorityFeature() {
let priorityFeature;
const sortedFeatureEls = [].slice
.call(document.querySelectorAll('.js-feature-highlight'))
.sort((a, b) => getPriority(b) - getPriority(a));
const [priorityFeatureEl] = sortedFeatureEls;
if (priorityFeatureEl) {
priorityFeature = priorityFeatureEl.dataset.highlight;
}
return priorityFeature;
}
export function highlightFeatures() {
const priorityFeature = findHighestPriorityFeature();
if (priorityFeature) {
setupFeatureHighlightPopover(priorityFeature);
}
return priorityFeature;
}
app/assets/javascripts/feature_highlight/feature_highlight_helper.js
+ 1
− 17
View file @ 2de5591e
import $ from 'jquery';
import { deprecatedCreateFlash as Flash } from '~/flash';
import axios from '../lib/utils/axios_utils';
import { __ } from '../locale';
import { deprecatedCreateFlash as Flash } from '~/flash';
import LazyLoader from '../lazy_loader';
 
export const getSelector = (highlightId) => `.js-feature-highlight[data-highlight=${highlightId}]`;
 
@@ -19,17 +17,3 @@ export function dismiss(endpoint, highlightId) {
),
);
}
export function inserted() {
const popoverId = this.getAttribute('aria-describedby');
const highlightId = this.dataset.highlight;
const $popover = $(this);
const dismissWrapper = dismiss.bind($popover, highlightId);
$(`#${popoverId} .dismiss-feature-highlight`).on('click', dismissWrapper);
const lazyImg = $(`#${popoverId} .feature-highlight-illustration`)[0];
if (lazyImg) {
LazyLoader.loadImage(lazyImg);
}
}
app/assets/javascripts/feature_highlight/feature_highlight_options.js deleted 100644 → 0
+ 0
− 12
View file @ 2b00a4b3
import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
import { highlightFeatures } from './feature_highlight';
export default function domContentLoaded() {
if (bp.getBreakpointSize() === 'xl') {
highlightFeatures();
return true;
}
return false;
}
document.addEventListener('DOMContentLoaded', domContentLoaded);
spec/frontend/feature_highlight/feature_highlight_helper_spec.js
+ 1
− 29
View file @ 2de5591e
import $ from 'jquery';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import { getSelector, dismiss, inserted } from '~/feature_highlight/feature_highlight_helper';
import { dismiss } from '~/feature_highlight/feature_highlight_helper';
import { deprecatedCreateFlash as Flash } from '~/flash';
 
jest.mock('~/flash');
 
describe('feature highlight helper', () => {
describe('getSelector', () => {
it('returns js-feature-highlight selector', () => {
const highlightId = 'highlightId';
expect(getSelector(highlightId)).toEqual(
`.js-feature-highlight[data-highlight=${highlightId}]`,
);
});
});
describe('dismiss', () => {
let mockAxios;
const endpoint = '/-/callouts/dismiss';
@@ -46,21 +35,4 @@ describe('feature highlight helper', () => {
);
});
});
describe('inserted', () => {
it('registers click event callback', (done) => {
const context = {
getAttribute: () => 'popoverId',
dataset: {
highlight: 'some-feature',
},
};
jest.spyOn($.fn, 'on').mockImplementation((event) => {
expect(event).toEqual('click');
done();
});
inserted.call(context);
});
});
});
spec/frontend/feature_highlight/feature_highlight_options_spec.js deleted 100644 → 0
+ 0
− 22
View file @ 2b00a4b3
import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
import domContentLoaded from '~/feature_highlight/feature_highlight_options';
describe('feature highlight options', () => {
describe('domContentLoaded', () => {
it.each`
breakPoint | shouldCall
${'xs'} | ${false}
${'sm'} | ${false}
${'md'} | ${false}
${'lg'} | ${false}
${'xl'} | ${true}
`(
'when breakpoint is $breakPoint should call highlightFeatures is $shouldCall',
({ breakPoint, shouldCall }) => {
jest.spyOn(bp, 'getBreakpointSize').mockReturnValue(breakPoint);
expect(domContentLoaded()).toBe(shouldCall);
},
);
});
});
spec/frontend/feature_highlight/feature_highlight_spec.js deleted 100644 → 0
+ 0
− 120
View file @ 2b00a4b3
import $ from 'jquery';
import MockAdapter from 'axios-mock-adapter';
import * as featureHighlight from '~/feature_highlight/feature_highlight';
import * as popover from '~/shared/popover';
import axios from '~/lib/utils/axios_utils';
jest.mock('~/shared/popover');
describe('feature highlight', () => {
beforeEach(() => {
setFixtures(`
<div>
<div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" data-dismiss-endpoint="/test" disabled>
Trigger
</div>
</div>
<div class="feature-highlight-popover-content">
Content
<div class="dismiss-feature-highlight">
Dismiss
</div>
</div>
`);
});
describe('setupFeatureHighlightPopover', () => {
let mock;
const selector = '.js-feature-highlight[data-highlight=test]';
beforeEach(() => {
mock = new MockAdapter(axios);
mock.onGet('/test').reply(200);
jest.spyOn(window, 'addEventListener').mockImplementation(() => {});
featureHighlight.setupFeatureHighlightPopover('test', 0);
});
afterEach(() => {
mock.restore();
});
it('setup popover content', () => {
const $popoverContent = $('.feature-highlight-popover-content');
const outerHTML = $popoverContent.prop('outerHTML');
expect($(selector).data('content')).toEqual(outerHTML);
});
it('setup mouseenter', () => {
$(selector).trigger('mouseenter');
expect(popover.mouseenter).toHaveBeenCalledWith(expect.any(Object));
});
it('setup debounced mouseleave', () => {
$(selector).trigger('mouseleave');
expect(popover.debouncedMouseleave).toHaveBeenCalled();
});
it('setup show.bs.popover', () => {
$(selector).trigger('show.bs.popover');
expect(window.addEventListener).toHaveBeenCalledWith('scroll', expect.any(Function), {
once: true,
});
});
it('removes disabled attribute', () => {
expect($('.js-feature-highlight').is(':disabled')).toEqual(false);
});
});
describe('findHighestPriorityFeature', () => {
beforeEach(() => {
setFixtures(`
<div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
<div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
<div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
`);
});
it('should pick the highest priority feature highlight', () => {
setFixtures(`
<div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
<div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
<div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
`);
expect($('.js-feature-highlight').length).toBeGreaterThan(1);
expect(featureHighlight.findHighestPriorityFeature()).toEqual('test-high-priority');
});
it('should work when no priority is set', () => {
setFixtures(`
<div class="js-feature-highlight" data-highlight="test" disabled></div>
`);
expect(featureHighlight.findHighestPriorityFeature()).toEqual('test');
});
it('should pick the highest priority feature highlight when some have no priority set', () => {
setFixtures(`
<div class="js-feature-highlight" data-highlight="test-no-priority1" disabled></div>
<div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
<div class="js-feature-highlight" data-highlight="test-no-priority2" disabled></div>
<div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
<div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
`);
expect($('.js-feature-highlight').length).toBeGreaterThan(1);
expect(featureHighlight.findHighestPriorityFeature()).toEqual('test-high-priority');
});
});
describe('highlightFeatures', () => {
it('calls setupFeatureHighlightPopover', () => {
expect(featureHighlight.highlightFeatures()).toEqual('test');
});
});
});
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