1 files changed, 13 insertions, 3 deletions
diff --git a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
index fb643d441ec..91b3b6a685c 100644
--- a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
-import { mapActions, mapGetters } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import PreviewItem from './preview_item.vue';
 
 export default {
@@ -11,13 +11,22 @@ export default {
     PreviewItem,
   },
   computed: {
+    ...mapState('diffs', ['viewDiffsFileByFile']),
     ...mapGetters('batchComments', ['draftsCount', 'sortedDrafts']),
   },
   methods: {
+    ...mapActions('diffs', ['toggleActiveFileByHash']),
     ...mapActions('batchComments', ['scrollToDraft']),
     isLast(index) {
       return index === this.sortedDrafts.length - 1;
     },
+    async onClickDraft(draft) {
+      if (this.viewDiffsFileByFile && draft.file_hash) {
+        await this.toggleActiveFileByHash(draft.file_hash);
+      }
+
+      await this.scrollToDraft(draft);
+    },
   },
 };
 </script>
@@ -26,7 +35,7 @@ export default {
   <gl-dropdown
     :header-text="n__('%d pending comment', '%d pending comments', draftsCount)"
     dropup
-    toggle-class="qa-review-preview-toggle"
+    data-qa-selector="review_preview_dropdown"
   >
     <template #button-content>
       {{ __('Pending comments') }}
@@ -35,7 +44,8 @@ export default {
     <gl-dropdown-item
       v-for="(draft, index) in sortedDrafts"
       :key="draft.id"
-      @click="scrollToDraft(draft)"
+      data-testid="preview-item"
+      @click="onClickDraft(draft)"
     >
       <preview-item :draft="draft" :is-last="isLast(index)" />
     </gl-dropdown-item>