Add latest changes from gitlab-org/gitlab@master

2 files changed, 11 insertions, 5 deletions

diff --git a/app/assets/javascripts/batch_comments/components/review_bar.vue b/app/assets/javascripts/batch_comments/components/review_bar.vue
index 080a5543e53..158b5f45d1c 100644
--- a/app/assets/javascripts/batch_comments/components/review_bar.vue
+++ b/app/assets/javascripts/batch_comments/components/review_bar.vue
@@ -10,7 +10,6 @@ export default {
   },
   computed: {
     ...mapGetters(['isNotesFetched']),
-    ...mapGetters('batchComments', ['draftsCount']),
   },
   watch: {
     isNotesFetched() {
@@ -25,7 +24,7 @@ export default {
 };
 </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/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');
     },
   });
 };