Add latest changes from gitlab-org/gitlab@master

1 files changed, 13 insertions, 1 deletions

diff --git a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
index f839056daf8..770a5b58276 100644
--- a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
@@ -2,6 +2,7 @@
 import { GlDropdown, GlDropdownItem, GlIcon } 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';
 
@@ -17,6 +18,7 @@ export default {
   computed: {
     ...mapState('diffs', ['viewDiffsFileByFile']),
     ...mapGetters('batchComments', ['draftsCount', 'sortedDrafts']),
+    ...mapGetters(['getNoteableData']),
   },
   methods: {
     ...mapActions('diffs', ['setCurrentFileHash']),
@@ -24,12 +26,21 @@ export default {
     isLast(index) {
       return index === this.sortedDrafts.length - 1;
     },
+    isOnLatestDiff(draft) {
+      return draft.position?.head_sha === this.getNoteableData.diff_head_sha;
+    },
     async onClickDraft(draft) {
       if (this.viewDiffsFileByFile && draft.file_hash) {
         await this.setCurrentFileHash(draft.file_hash);
       }
 
-      await this.scrollToDraft(draft);
+      if (draft.position && !this.isOnLatestDiff(draft)) {
+        const url = new URL(setUrlParams({ commit_id: draft.position.head_sha }));
+        url.hash = `note_${draft.id}`;
+        visitUrl(url.toString());
+      } else {
+        await this.scrollToDraft(draft);
+      }
     },
   },
 };
@@ -52,6 +63,7 @@ export default {
       data-testid="preview-item"
       @click="onClickDraft(draft)"
     >
+      {{ isOnLatestDiff(draft) }}
       <preview-item :draft="draft" :is-last="isLast(index)" />
     </gl-dropdown-item>
   </gl-dropdown>