Merge branch 'mfluharty-close-code-dropdown-only-on-link-like-actions' into 'master'

Keep code dropdown open when focusing clone inputs

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/145304



Merged-by: Scott Hampton <shampton@gitlab.com>
Approved-by: Mike Nichols <mnichols@gitlab.com>
Approved-by: Doug Stull <dstull@gitlab.com>
Approved-by: Scott Hampton <shampton@gitlab.com>
Co-authored-by: Miranda Fluharty <mfluharty@gitlab.com>

app/assets/javascripts/vue_shared/components/code_dropdown/code_dropdown.vue

@@ -116,6 +116,11 @@ export default {
       };
     },
   },
+  methods: {
+    closeDropdown() {
+      this.$refs.dropdown.close();
+    },
+  },
   vsCodeBaseUrl: 'vscode://vscode.git/clone?url=',
   jetBrainsBaseUrl:
     'jetbrains://idea/checkout/git?idea.required.plugins.id=Git4Idea&checkout.repo=',
@@ -131,6 +136,7 @@ export default {
 </script>
 <template>
   <gl-disclosure-dropdown
+    ref="dropdown"
     :toggle-text="$options.i18n.defaultLabel"
     category="primary"
     variant="confirm"
@@ -138,6 +144,7 @@ export default {
     class="code-dropdown gl-text-left"
     fluid-width
     data-testid="code-dropdown"
+    :auto-close="false"
   >
     <gl-disclosure-dropdown-group v-if="sshUrl">
       <clone-dropdown-item
@@ -169,12 +176,18 @@ export default {
         test-id="copy-http-url-button"
       />
     </gl-disclosure-dropdown-group>
-    <gl-disclosure-dropdown-group :group="ideGroup" bordered />
-    <gl-disclosure-dropdown-group v-if="directoryDownloadLinks" :group="sourceCodeGroup" bordered />
+    <gl-disclosure-dropdown-group :group="ideGroup" bordered @action="closeDropdown" />
+    <gl-disclosure-dropdown-group
+      v-if="directoryDownloadLinks"
+      :group="sourceCodeGroup"
+      bordered
+      @action="closeDropdown"
+    />
     <gl-disclosure-dropdown-group
       v-if="currentPath && directoryDownloadLinks"
       :group="directoryDownloadLinksGroup"
       bordered
+      @action="closeDropdown"
     />
   </gl-disclosure-dropdown>
 </template>

spec/frontend/vue_shared/components/code_dropdown/code_dropdown_spec.js

-import { GlFormInputGroup, GlDisclosureDropdownGroup, GlDisclosureDropdownItem } from '@gitlab/ui';
+import {
+  GlFormInputGroup,
+  GlDisclosureDropdown,
+  GlDisclosureDropdownGroup,
+  GlDisclosureDropdownItem,
+} from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { stubComponent } from 'helpers/stub_component';
 import CodeDropdown from '~/vue_shared/components/code_dropdown/code_dropdown.vue';
 import CloneDropdownItem from '~/vue_shared/components/clone_dropdown/clone_dropdown_item.vue';
 
@@ -31,12 +37,19 @@ describe('Clone Dropdown Button', () => {
   const findDropdownItems = () => wrapper.findAllComponents(GlDisclosureDropdownItem);
   const findDropdownItemAtIndex = (index) => findDropdownItems().at(index);
 
+  const closeDropdown = jest.fn();
+
   const createComponent = (propsData = defaultPropsData) => {
     wrapper = shallowMount(CodeDropdown, {
       propsData,
       stubs: {
         GlFormInputGroup,
         GlDisclosureDropdownGroup,
+        GlDisclosureDropdown: stubComponent(GlDisclosureDropdown, {
+          methods: {
+            close: closeDropdown,
+          },
+        }),
       },
     });
   };
@@ -81,35 +94,73 @@ describe('Clone Dropdown Button', () => {
 
         expect(findCloneDropdownItemAtIndex(0).attributes('label')).toContain('HTTPS');
       });
+
+      it.each`
+        name      | index | link
+        ${'SSH'}  | ${0}  | ${sshUrl}
+        ${'HTTP'} | ${1}  | ${httpUrl}
+      `('does not close dropdown on $name item click', ({ index }) => {
+        createComponent();
+
+        findCloneDropdownItemAtIndex(index).vm.$emit('action');
+
+        expect(closeDropdown).not.toHaveBeenCalled();
+      });
     });
   });
 
   describe('ideGroup', () => {
-    it.each`
+    describe.each`
       name                            | index | href
       ${'Visual Studio Code (SSH)'}   | ${0}  | ${encodedSshUrl}
       ${'Visual Studio Code (HTTPS)'} | ${1}  | ${encodedHttpUrl}
       ${'IntelliJ IDEA (SSH)'}        | ${2}  | ${encodedSshUrl}
       ${'IntelliJ IDEA (HTTPS)'}      | ${3}  | ${encodedHttpUrl}
       ${'Xcode'}                      | ${4}  | ${xcodeUrl}
-    `('renders correct values for $name', ({ name, index, href }) => {
-      createComponent();
+    `('$name', ({ name, index, href }) => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('renders correct values', () => {
+        const item = findDropdownItemAtIndex(index);
+
+        expect(item.props('item').text).toBe(name);
+        expect(item.props('item').href).toContain(href);
+      });
+
+      it('closes the dropdown on click', () => {
+        findDropdownItemAtIndex(index).vm.$emit('action');
 
-      const item = findDropdownItemAtIndex(index);
-      expect(item.props('item').text).toBe(name);
-      expect(item.props('item').href).toContain(href);
+        expect(closeDropdown).toHaveBeenCalled();
+      });
     });
   });
 
   describe('sourceCodeGroup', () => {
-    it.each(
-      directoryDownloadLinks.map((directoryDownloadLink, i) => [i + 5, directoryDownloadLink]),
-    )('renders correct values for $name', (index, directoryDownloadLink) => {
-      createComponent();
-
-      const item = findDropdownItemAtIndex(index);
-      expect(item.props('item').text).toBe(directoryDownloadLink.text);
-      expect(item.props('item').href).toBe(directoryDownloadLink.path);
+    describe.each(
+      directoryDownloadLinks.map(({ text, path }, i) => ({
+        index: i + 5,
+        text,
+        path,
+      })),
+    )('$text', ({ index, text, path }) => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('renders correct values', () => {
+        const item = findDropdownItemAtIndex(index);
+
+        expect(item.props('item').text).toBe(text);
+        expect(item.props('item').href).toBe(path);
+      });
+
+      it('closes the dropdown on click', () => {
+        findDropdownItemAtIndex(index).vm.$emit('action');
+
+        expect(closeDropdown).toHaveBeenCalled();
+      });
     });
   });
 
@@ -120,16 +171,31 @@ describe('Clone Dropdown Button', () => {
       expect(findDropdownItems().length).toEqual(13);
     });
 
-    it.each(
-      directoryDownloadLinks.map((directoryDownloadLink, i) => [i + 9, directoryDownloadLink]),
-    )('renders correct values for $name directory link', (index, directoryDownloadLink) => {
+    describe.each(
+      directoryDownloadLinks.map(({ text, path }, i) => ({
+        index: i + 9,
+        text,
+        path,
+      })),
+    )('$text', ({ index, text, path }) => {
       const subPath = '/subdir';
 
-      createComponent({ ...defaultPropsData, currentPath: subPath });
+      beforeEach(() => {
+        createComponent({ ...defaultPropsData, currentPath: subPath });
+      });
+
+      it('renders correct values for directory link', () => {
+        const item = findDropdownItemAtIndex(index);
 
-      const item = findDropdownItemAtIndex(index);
-      expect(item.props('item').text).toBe(directoryDownloadLink.text);
-      expect(item.props('item').href).toBe(`${directoryDownloadLink.path}?path=${subPath}`);
+        expect(item.props('item').text).toBe(text);
+        expect(item.props('item').href).toBe(`${path}?path=${subPath}`);
+      });
+
+      it('closes the dropdown on click', () => {
+        findDropdownItemAtIndex(index).vm.$emit('action');
+
+        expect(closeDropdown).toHaveBeenCalled();
+      });
     });
   });
 });