1 files changed, 32 insertions, 26 deletions
diff --git a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
index ba5cc0d1a76..4ac0c8c4894 100644
--- a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
@@ -1,31 +1,37 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlIcon, GlDisclosureDropdown, GlButton } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { setUrlParams, visitUrl } from '~/lib/utils/url_utility';
 import PreviewItem from './preview_item.vue';
 import DraftsCount from './drafts_count.vue';
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
     GlIcon,
     PreviewItem,
     DraftsCount,
+    GlDisclosureDropdown,
+    GlButton,
   },
-  mixins: [glFeatureFlagMixin()],
   computed: {
     ...mapState('diffs', ['viewDiffsFileByFile']),
     ...mapGetters('batchComments', ['draftsCount', 'sortedDrafts']),
     ...mapGetters(['getNoteableData']),
+    listItems() {
+      const sortedDraftCount = this.sortedDrafts.length - 1;
+      return this.sortedDrafts.map((item, index) => ({
+        text: item.id.toString(),
+        action: () => {
+          this.onClickDraft(item);
+        },
+        last: index === sortedDraftCount,
+        ...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;
     },
@@ -47,23 +53,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 v-if="glFeatures.mrReviewSubmitComment" 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>