Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

3 files changed, 15 insertions, 5 deletions

diff --git a/app/assets/javascripts/batch_comments/components/drafts_count.vue b/app/assets/javascripts/batch_comments/components/drafts_count.vue
index 5e110b101eb..61718b766d8 100644
--- a/app/assets/javascripts/batch_comments/components/drafts_count.vue
+++ b/app/assets/javascripts/batch_comments/components/drafts_count.vue
@@ -12,7 +12,7 @@ export default {
 };
 </script>
 <template>
-  <gl-badge size="sm" variant="success">
+  <gl-badge size="sm" variant="info" class="gl-ml-2">
     {{ draftsCount }}
     <span class="sr-only"> {{ n__('draft', 'drafts', draftsCount) }} </span>
   </gl-badge>
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>
diff --git a/app/assets/javascripts/batch_comments/components/publish_button.vue b/app/assets/javascripts/batch_comments/components/publish_button.vue
index 2a7be605003..d4fc4ad744a 100644
--- a/app/assets/javascripts/batch_comments/components/publish_button.vue
+++ b/app/assets/javascripts/batch_comments/components/publish_button.vue
@@ -22,7 +22,7 @@ export default {
     variant: {
       type: String,
       required: false,
-      default: 'success',
+      default: 'confirm',
     },
   },
   computed: {