Merge branch 'fix-suggest-gitlab-ci-popover' into 'master'

Show the first hint popover after selecting a template type

See merge request gitlab-org/gitlab!58120

app/assets/javascripts/blob/file_template_selector.js

@@ -38,6 +38,19 @@ export default class FileTemplateSelector {
     }
 
     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() {

app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue

@@ -108,7 +108,6 @@ export default {
     show
     :target="target"
     placement="right"
-    trigger="manual"
     container="viewport"
     :css-classes="['suggest-gitlab-ci-yml', 'ml-4']"
   >

changelogs/unreleased/fix-suggest-gitlab-ci-popover.yml

+---
+title: Ensures that the "Suggest GitLab CI" popover is shown after selecting a template type
+merge_request: 58120
+author:
+type: fixed

spec/frontend/blob/file_template_selector_spec.js

+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();
+    });
+  });
+});