Add latest changes from gitlab-org/gitlab@14-3-stable-eev14.3.0-rc42

4 files changed, 21 insertions, 7 deletions

diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue
index 96c3b8276ee..f5e3bab6ff0 100644
--- a/app/assets/javascripts/batch_comments/components/draft_note.vue
+++ b/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import NoteableNote from '~/notes/components/noteable_note.vue';
@@ -106,7 +105,7 @@ export default {
       <div
         v-if="draftCommands"
         class="referenced-commands draft-note-commands"
-        v-html="draftCommands"
+        v-html="draftCommands /* eslint-disable-line vue/no-v-html */"
       ></div>
 
       <p class="draft-note-actions d-flex">
diff --git a/app/assets/javascripts/batch_comments/components/review_bar.vue b/app/assets/javascripts/batch_comments/components/review_bar.vue
index 080a5543e53..bce13751448 100644
--- a/app/assets/javascripts/batch_comments/components/review_bar.vue
+++ b/app/assets/javascripts/batch_comments/components/review_bar.vue
@@ -1,5 +1,6 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import { REVIEW_BAR_VISIBLE_CLASS_NAME } from '../constants';
 import PreviewDropdown from './preview_dropdown.vue';
 import PublishButton from './publish_button.vue';
 
@@ -10,7 +11,6 @@ export default {
   },
   computed: {
     ...mapGetters(['isNotesFetched']),
-    ...mapGetters('batchComments', ['draftsCount']),
   },
   watch: {
     isNotesFetched() {
@@ -19,13 +19,19 @@ export default {
       }
     },
   },
+  mounted() {
+    document.body.classList.add(REVIEW_BAR_VISIBLE_CLASS_NAME);
+  },
+  beforeDestroy() {
+    document.body.classList.remove(REVIEW_BAR_VISIBLE_CLASS_NAME);
+  },
   methods: {
     ...mapActions('batchComments', ['expandAllDiscussions']),
   },
 };
 </script>
 <template>
-  <div v-show="draftsCount > 0">
+  <div>
     <nav class="review-bar-component" data-testid="review_bar_component">
       <div
         class="review-bar-content d-flex gl-justify-content-end"
diff --git a/app/assets/javascripts/batch_comments/constants.js b/app/assets/javascripts/batch_comments/constants.js
index b309c339fc8..5e026251e0b 100644
--- a/app/assets/javascripts/batch_comments/constants.js
+++ b/app/assets/javascripts/batch_comments/constants.js
@@ -1,3 +1,5 @@
 export const CHANGES_TAB = 'diffs';
 export const DISCUSSION_TAB = 'notes';
 export const SHOW_TAB = 'show';
+
+export const REVIEW_BAR_VISIBLE_CLASS_NAME = 'review-bar-visible';
diff --git a/app/assets/javascripts/batch_comments/index.js b/app/assets/javascripts/batch_comments/index.js
index 9c763e70d63..65fd34dcb00 100644
--- a/app/assets/javascripts/batch_comments/index.js
+++ b/app/assets/javascripts/batch_comments/index.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import store from '~/mr_notes/stores';
-import ReviewBar from './components/review_bar.vue';
 
 export const initReviewBar = () => {
   const el = document.getElementById('js-review-bar');
@@ -10,6 +9,12 @@ export const initReviewBar = () => {
   new Vue({
     el,
     store,
+    components: {
+      ReviewBar: () => import('./components/review_bar.vue'),
+    },
+    computed: {
+      ...mapGetters('batchComments', ['draftsCount']),
+    },
     mounted() {
       this.fetchDrafts();
     },
@@ -17,7 +22,9 @@ export const initReviewBar = () => {
       ...mapActions('batchComments', ['fetchDrafts']),
     },
     render(createElement) {
-      return createElement(ReviewBar);
+      if (this.draftsCount === 0) return null;
+
+      return createElement('review-bar');
     },
   });
 };