Fixes view pending comment not working with single file diff mode

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/296082

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

 <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>
@@ -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>

changelogs/unreleased/ph-296082-singleFileDraftPreviewClick.yml

+---
+title: Fixed preview review comment not working with single file diff mode
+merge_request:
+author:
+type: fixed

spec/frontend/batch_comments/components/preview_dropdown_spec.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import PreviewDropdown from '~/batch_comments/components/preview_dropdown.vue';
+
+Vue.use(Vuex);
+
+let wrapper;
+
+const toggleActiveFileByHash = jest.fn();
+const scrollToDraft = jest.fn();
+
+function factory({ viewDiffsFileByFile = false, draftsCount = 1, sortedDrafts = [] } = {}) {
+  const store = new Vuex.Store({
+    modules: {
+      diffs: {
+        namespaced: true,
+        actions: {
+          toggleActiveFileByHash,
+        },
+        state: {
+          viewDiffsFileByFile,
+        },
+      },
+      batchComments: {
+        namespaced: true,
+        actions: { scrollToDraft },
+        getters: { draftsCount: () => draftsCount, sortedDrafts: () => sortedDrafts },
+      },
+    },
+  });
+
+  wrapper = shallowMountExtended(PreviewDropdown, {
+    store,
+  });
+}
+
+describe('Batch comments preview dropdown', () => {
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('clicking draft', () => {
+    it('it toggles active file when viewDiffsFileByFile is true', async () => {
+      factory({
+        viewDiffsFileByFile: true,
+        sortedDrafts: [{ id: 1, file_hash: 'hash' }],
+      });
+
+      wrapper.findByTestId('preview-item').vm.$emit('click');
+
+      await Vue.nextTick();
+
+      expect(toggleActiveFileByHash).toHaveBeenCalledWith(expect.anything(), 'hash');
+      expect(scrollToDraft).toHaveBeenCalledWith(expect.anything(), { id: 1, file_hash: 'hash' });
+    });
+
+    it('calls scrollToDraft', async () => {
+      factory({
+        viewDiffsFileByFile: false,
+        sortedDrafts: [{ id: 1 }],
+      });
+
+      wrapper.findByTestId('preview-item').vm.$emit('click');
+
+      await Vue.nextTick();
+
+      expect(scrollToDraft).toHaveBeenCalledWith(expect.anything(), { id: 1 });
+    });
+  });
+});