Merge branch '327890-review-bar-hides-sidebar' into 'master'

Fix MR review bar hiding part of the right sidebar

See merge request gitlab-org/gitlab!69067

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

 <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';
 
@@ -18,6 +19,12 @@ 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']),
   },

app/assets/javascripts/batch_comments/constants.js

 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';

app/assets/javascripts/diffs/components/app.vue

@@ -229,7 +229,6 @@ export default {
       'isBatchLoading',
       'isBatchLoadingError',
     ]),
-    ...mapGetters('batchComments', ['draftsCount']),
     ...mapGetters(['isNotesFetched', 'getNoteableData']),
     diffs() {
       if (!this.viewDiffsFileByFile) {
@@ -664,7 +663,6 @@ export default {
         <div
           v-if="renderFileTree"
           :style="{ width: `${treeWidth}px` }"
-          :class="{ 'review-bar-visible': draftsCount > 0 }"
           class="diff-tree-list js-diff-tree-list px-3 pr-md-0"
         >
           <panel-resizer

app/assets/stylesheets/pages/issuable.scss

@@ -122,7 +122,9 @@
 .right-sidebar {
   position: fixed;
   top: $header-height;
-  bottom: 0;
+  // Default value for CSS var must contain a unit
+  // stylelint-disable-next-line length-zero-no-unit
+  bottom: var(--review-bar-height, 0px);
   right: 0;
   transition: width $sidebar-transition-duration;
   background: $gray-light;

spec/frontend/batch_comments/components/review_bar_spec.js

+import { shallowMount } from '@vue/test-utils';
+import ReviewBar from '~/batch_comments/components/review_bar.vue';
+import { REVIEW_BAR_VISIBLE_CLASS_NAME } from '~/batch_comments/constants';
+import createStore from '../create_batch_comments_store';
+
+describe('Batch comments review bar component', () => {
+  let store;
+  let wrapper;
+
+  const createComponent = (propsData = {}) => {
+    store = createStore();
+
+    wrapper = shallowMount(ReviewBar, {
+      store,
+      propsData,
+    });
+  };
+
+  beforeEach(() => {
+    document.body.className = '';
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('it adds review-bar-visible class to body when review bar is mounted', async () => {
+    expect(document.body.classList.contains(REVIEW_BAR_VISIBLE_CLASS_NAME)).toBe(false);
+
+    createComponent();
+
+    expect(document.body.classList.contains(REVIEW_BAR_VISIBLE_CLASS_NAME)).toBe(true);
+  });
+
+  it('it removes review-bar-visible class to body when review bar is destroyed', async () => {
+    createComponent();
+
+    wrapper.destroy();
+
+    expect(document.body.classList.contains(REVIEW_BAR_VISIBLE_CLASS_NAME)).toBe(false);
+  });
+});

spec/frontend/batch_comments/create_batch_comments_store.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import batchCommentsModule from '~/batch_comments/stores/modules/batch_comments';
+import notesModule from '~/notes/stores/modules';
+
+Vue.use(Vuex);
+
+export default function createDiffsStore() {
+  return new Vuex.Store({
+    modules: {
+      notes: notesModule(),
+      batchComments: batchCommentsModule(),
+    },
+  });
+}

spec/frontend/diffs/components/app_spec.js

@@ -705,24 +705,4 @@ describe('diffs/components/app', () => {
       );
     });
   });
-
-  describe('diff file tree is aware of review bar', () => {
-    it('it does not have review-bar-visible class when review bar is not visible', () => {
-      createComponent({}, ({ state }) => {
-        state.diffs.diffFiles = [{ file_hash: '111', file_path: '111.js' }];
-      });
-
-      expect(wrapper.find('.js-diff-tree-list').exists()).toBe(true);
-      expect(wrapper.find('.js-diff-tree-list.review-bar-visible').exists()).toBe(false);
-    });
-
-    it('it does have review-bar-visible class when review bar is visible', () => {
-      createComponent({}, ({ state }) => {
-        state.diffs.diffFiles = [{ file_hash: '111', file_path: '111.js' }];
-        state.batchComments.drafts = ['draft message'];
-      });
-
-      expect(wrapper.find('.js-diff-tree-list.review-bar-visible').exists()).toBe(true);
-    });
-  });
 });