1 files changed, 20 insertions, 91 deletions

diff --git a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
index 2b37ed19176..e18dc344cd7 100644
--- a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
@@ -1,114 +1,43 @@
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
-import { sprintf, n__ } from '~/locale';
-import DraftsCount from './drafts_count.vue';
-import PublishButton from './publish_button.vue';
+import { mapActions, mapGetters } from 'vuex';
+import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
 import PreviewItem from './preview_item.vue';
 
 export default {
   components: {
-    GlButton,
-    GlLoadingIcon,
+    GlDropdown,
+    GlDropdownItem,
     GlIcon,
-    DraftsCount,
-    PublishButton,
     PreviewItem,
   },
   computed: {
-    ...mapGetters(['isNotesFetched']),
     ...mapGetters('batchComments', ['draftsCount', 'sortedDrafts']),
-    ...mapState('batchComments', ['showPreviewDropdown']),
-    dropdownTitle() {
-      return sprintf(
-        n__('%{count} pending comment', '%{count} pending comments', this.draftsCount),
-        { count: this.draftsCount },
-      );
-    },
-  },
-  watch: {
-    showPreviewDropdown() {
-      if (this.showPreviewDropdown && this.$refs.dropdown) {
-        this.$nextTick(() => this.$refs.dropdown.$el.focus());
-      }
-    },
-  },
-  mounted() {
-    document.addEventListener('click', this.onClickDocument);
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.onClickDocument);
   },
   methods: {
-    ...mapActions('batchComments', ['toggleReviewDropdown']),
+    ...mapActions('batchComments', ['scrollToDraft']),
     isLast(index) {
       return index === this.sortedDrafts.length - 1;
     },
-    onClickDocument({ target }) {
-      if (
-        this.showPreviewDropdown &&
-        !target.closest('.review-preview-dropdown, .js-publish-draft-button')
-      ) {
-        this.toggleReviewDropdown();
-      }
-    },
   },
 };
 </script>
 
 <template>
-  <div
-    class="dropdown float-right review-preview-dropdown"
-    :class="{
-      show: showPreviewDropdown,
-    }"
+  <gl-dropdown
+    :header-text="n__('%d pending comment', '%d pending comments', draftsCount)"
+    dropup
+    toggle-class="qa-review-preview-toggle"
   >
-    <gl-button
-      ref="dropdown"
-      type="button"
-      category="primary"
-      variant="success"
-      class="review-preview-dropdown-toggle qa-review-preview-toggle"
-      @click="toggleReviewDropdown"
-    >
-      {{ __('Finish review') }}
-      <drafts-count />
-      <gl-icon name="angle-up" />
-    </gl-button>
-    <div
-      class="dropdown-menu dropdown-menu-large dropdown-menu-right dropdown-open-top"
-      :class="{
-        show: showPreviewDropdown,
-      }"
+    <template #button-content>
+      {{ __('Pending comments') }}
+      <gl-icon class="dropdown-chevron" name="chevron-up" />
+    </template>
+    <gl-dropdown-item
+      v-for="(draft, index) in sortedDrafts"
+      :key="draft.id"
+      @click="scrollToDraft(draft)"
     >
-      <div class="dropdown-title gl-display-flex gl-align-items-center">
-        <span class="gl-ml-auto">{{ dropdownTitle }}</span>
-        <gl-button
-          :aria-label="__('Close')"
-          type="button"
-          category="tertiary"
-          size="small"
-          class="dropdown-title-button gl-ml-auto gl-p-0!"
-          icon="close"
-          @click="toggleReviewDropdown"
-        />
-      </div>
-      <div class="dropdown-content">
-        <ul v-if="isNotesFetched">
-          <li v-for="(draft, index) in sortedDrafts" :key="draft.id">
-            <preview-item :draft="draft" :is-last="isLast(index)" />
-          </li>
-        </ul>
-        <gl-loading-icon v-else size="lg" class="gl-mt-3 gl-mb-3" />
-      </div>
-      <div class="dropdown-footer">
-        <publish-button
-          :show-count="false"
-          :should-publish="true"
-          :label="__('Submit review')"
-          class="float-right gl-mr-3"
-        />
-      </div>
-    </div>
-  </div>
+      <preview-item :draft="draft" :is-last="isLast(index)" />
+    </gl-dropdown-item>
+  </gl-dropdown>
 </template>