Migrate preview_dropdown to gl-disclosure

Refactor the preview_dropdown to use GlDisclosure UI component.

app/assets/javascripts/batch_comments/components/preview_dropdown.vue

 <script>
-import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlIcon, GlDisclosureDropdown, GlButton } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { setUrlParams, visitUrl } from '~/lib/utils/url_utility';
 import PreviewItem from './preview_item.vue';
@@ -7,23 +7,30 @@ import DraftsCount from './drafts_count.vue';
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
     GlIcon,
     PreviewItem,
     DraftsCount,
+    GlDisclosureDropdown,
+    GlButton,
   },
   computed: {
     ...mapState('diffs', ['viewDiffsFileByFile']),
     ...mapGetters('batchComments', ['draftsCount', 'sortedDrafts']),
     ...mapGetters(['getNoteableData']),
+    listItems() {
+      return this.sortedDrafts.map((item, index) => ({
+        text: item.id.toString(),
+        action: () => {
+          this.onClickDraft(item);
+        },
+        last: index === this.sortedDrafts.length - 1,
+        ...item,
+      }));
+    },
   },
   methods: {
     ...mapActions('diffs', ['setCurrentFileHash']),
     ...mapActions('batchComments', ['scrollToDraft']),
-    isLast(index) {
-      return index === this.sortedDrafts.length - 1;
-    },
     isOnLatestDiff(draft) {
       return draft.position?.head_sha === this.getNoteableData.diff_head_sha;
     },
@@ -45,23 +52,23 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown
-    :header-text="n__('%d pending comment', '%d pending comments', draftsCount)"
-    dropup
-    data-qa-selector="review_preview_dropdown"
-  >
-    <template #button-content>
-      {{ __('Pending comments') }}
-      <drafts-count variant="neutral" />
-      <gl-icon class="dropdown-chevron" name="chevron-up" />
+  <gl-disclosure-dropdown :items="listItems" dropup data-qa-selector="review_preview_dropdown">
+    <template #toggle>
+      <gl-button
+        >{{ __('Pending comments') }} <drafts-count variant="neutral" /><gl-icon
+          class="dropdown-chevron"
+          name="chevron-up"
+      /></gl-button>
+    </template>
+
+    <template #header>
+      <p class="gl-dropdown-header-top">
+        {{ n__('%d pending comment', '%d pending comments', draftsCount) }}
+      </p>
+    </template>
+
+    <template #list-item="{ item }">
+      <preview-item :draft="item" :is-last="item.last" @click="onClickDraft(item)" />
     </template>
-    <gl-dropdown-item
-      v-for="(draft, index) in sortedDrafts"
-      :key="draft.id"
-      data-testid="preview-item"
-      @click="onClickDraft(draft)"
-    >
-      <preview-item :draft="draft" :is-last="isLast(index)" />
-    </gl-dropdown-item>
-  </gl-dropdown>
+  </gl-disclosure-dropdown>
 </template>

spec/frontend/batch_comments/components/preview_dropdown_spec.js

 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { GlDisclosureDropdown } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
 import { visitUrl } from '~/lib/utils/url_utility';
 import PreviewDropdown from '~/batch_comments/components/preview_dropdown.vue';
+import PreviewItem from '~/batch_comments/components/preview_item.vue';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   visitUrl: jest.fn(),
@@ -17,6 +19,8 @@ let wrapper;
 const setCurrentFileHash = jest.fn();
 const scrollToDraft = jest.fn();
 
+const findPreviewItem = () => wrapper.findComponent(PreviewItem);
+
 function factory({ viewDiffsFileByFile = false, draftsCount = 1, sortedDrafts = [] } = {}) {
   const store = new Vuex.Store({
     modules: {
@@ -42,16 +46,13 @@ function factory({ viewDiffsFileByFile = false, draftsCount = 1, sortedDrafts =
     },
   });
 
-  wrapper = shallowMountExtended(PreviewDropdown, {
+  wrapper = shallowMount(PreviewDropdown, {
     store,
+    stubs: { GlDisclosureDropdown },
   });
 }
 
 describe('Batch comments preview dropdown', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('clicking draft', () => {
     it('toggles active file when viewDiffsFileByFile is true', async () => {
       factory({
@@ -59,12 +60,15 @@ describe('Batch comments preview dropdown', () => {
         sortedDrafts: [{ id: 1, file_hash: 'hash' }],
       });
 
-      wrapper.findByTestId('preview-item').vm.$emit('click');
+      findPreviewItem().vm.$emit('click');
 
       await nextTick();
 
       expect(setCurrentFileHash).toHaveBeenCalledWith(expect.anything(), 'hash');
-      expect(scrollToDraft).toHaveBeenCalledWith(expect.anything(), { id: 1, file_hash: 'hash' });
+      expect(scrollToDraft).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ id: 1, file_hash: 'hash' }),
+      );
     });
 
     it('calls scrollToDraft', async () => {
@@ -73,11 +77,14 @@ describe('Batch comments preview dropdown', () => {
         sortedDrafts: [{ id: 1 }],
       });
 
-      wrapper.findByTestId('preview-item').vm.$emit('click');
+      findPreviewItem().vm.$emit('click');
 
       await nextTick();
 
-      expect(scrollToDraft).toHaveBeenCalledWith(expect.anything(), { id: 1 });
+      expect(scrollToDraft).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ id: 1 }),
+      );
     });
 
     it('changes window location to navigate to commit', async () => {
@@ -86,7 +93,7 @@ describe('Batch comments preview dropdown', () => {
         sortedDrafts: [{ id: 1, position: { head_sha: '1234' } }],
       });
 
-      wrapper.findByTestId('preview-item').vm.$emit('click');
+      findPreviewItem().vm.$emit('click');
 
       await nextTick();
 

spec/frontend/batch_comments/components/publish_dropdown_spec.js

-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDisclosureDropdown } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
@@ -12,29 +12,30 @@ Vue.use(Vuex);
 
 describe('Batch comments publish dropdown component', () => {
   let wrapper;
+  const draft = createDraft();
 
   function createComponent() {
     const store = createStore();
-    store.state.batchComments.drafts.push(createDraft(), { ...createDraft(), id: 2 });
+    store.state.batchComments.drafts.push(draft, { ...draft, id: 2 });
 
     wrapper = shallowMount(PreviewDropdown, {
       store,
+      stubs: { GlDisclosureDropdown },
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders list of drafts', () => {
     createComponent();
 
-    expect(wrapper.findAllComponents(GlDropdownItem).length).toBe(2);
+    expect(wrapper.findComponent(GlDisclosureDropdown).props('items')).toMatchObject([
+      draft,
+      { ...draft, id: 2 },
+    ]);
   });
 
   it('renders draft count in dropdown title', () => {
     createComponent();
 
-    expect(wrapper.findComponent(GlDropdown).props('headerText')).toEqual('2 pending comments');
+    expect(wrapper.findComponent(GlDisclosureDropdown).text()).toEqual('2 pending comments');
   });
 });