Commit 128ba518 authored by Paul Gascou-Vaillancourt's avatar Paul Gascou-Vaillancourt Committed by Miguel Rincon

Show the first hint popover after selecting a template type

parent 52c4b9a7
...@@ -38,6 +38,19 @@ export default class FileTemplateSelector { ...@@ -38,6 +38,19 @@ export default class FileTemplateSelector {
} }
this.$wrapper.removeClass('hidden'); this.$wrapper.removeClass('hidden');
/**
* We set the focus on the dropdown that was just shown. This is done so that, after selecting
* a template type, the template selector immediately receives the focus.
* This improves the UX of the tour as the suggest_gitlab_ci_yml popover requires its target to
* be have the focus to appear. This way, users don't have to interact with the template
* selector to actually see the first hint: it is shown as soon as the selector becomes visible.
* We also need a timeout here, otherwise the template type selector gets stuck and can not be
* closed anymore.
*/
setTimeout(() => {
this.$dropdown.focus();
}, 0);
} }
hide() { hide() {
......
...@@ -108,7 +108,6 @@ export default { ...@@ -108,7 +108,6 @@ export default {
show show
:target="target" :target="target"
placement="right" placement="right"
trigger="manual"
container="viewport" container="viewport"
:css-classes="['suggest-gitlab-ci-yml', 'ml-4']" :css-classes="['suggest-gitlab-ci-yml', 'ml-4']"
> >
......
---
title: Ensures that the "Suggest GitLab CI" popover is shown after selecting a template type
merge_request: 58120
author:
type: fixed
import $ from 'jquery';
import FileTemplateSelector from '~/blob/file_template_selector';
describe('FileTemplateSelector', () => {
let subject;
let dropdown;
let wrapper;
const createSubject = () => {
subject = new FileTemplateSelector({});
subject.config = {
dropdown,
wrapper,
};
subject.initDropdown = jest.fn();
};
afterEach(() => {
subject = null;
});
describe('show method', () => {
beforeEach(() => {
dropdown = document.createElement('div');
wrapper = document.createElement('div');
wrapper.classList.add('hidden');
createSubject();
});
it('calls init on first call', () => {
jest.spyOn(subject, 'init');
subject.show();
expect(subject.init).toHaveBeenCalledTimes(1);
});
it('does not call init on subsequent calls', () => {
jest.spyOn(subject, 'init');
subject.show();
subject.show();
expect(subject.init).toHaveBeenCalledTimes(1);
});
it('removes hidden class from $wrapper', () => {
expect($(wrapper).hasClass('hidden')).toBe(true);
subject.show();
expect($(wrapper).hasClass('hidden')).toBe(false);
});
it('sets the focus on the dropdown', async () => {
subject.show();
jest.spyOn(subject.$dropdown, 'focus');
jest.runAllTimers();
expect(subject.$dropdown.focus).toHaveBeenCalled();
});
});
});
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