Merge branch '288343-show-full-treeview' into 'master'

Fix MR diff file tree being hidden behind review bar

See merge request gitlab-org/gitlab!59150

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

@@ -185,6 +185,7 @@ export default {
       'mrReviews',
     ]),
     ...mapGetters('diffs', ['whichCollapsedTypes', 'isParallelView', 'currentDiffIndex']),
+    ...mapGetters('batchComments', ['draftsCount']),
     ...mapGetters(['isNotesFetched', 'getNoteableData']),
     diffs() {
       if (!this.viewDiffsFileByFile) {
@@ -500,6 +501,7 @@ 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/framework/variables.scss

@@ -929,6 +929,7 @@ Merge requests
 $mr-tabs-height: 48px;
 $mr-version-controls-height: 56px;
 $mr-widget-margin-left: 40px;
+$mr-review-bar-height: calc(2rem + 13px);
 
 /*
 Compare Branches

app/assets/stylesheets/page_bundles/merge_requests.scss

@@ -9,6 +9,18 @@
   min-width: 0;
 }
 
+.with-system-header {
+  --system-header-height: #{$system-header-height};
+}
+
+.with-performance-bar {
+  --performance-bar-height: #{$performance-bar-height};
+}
+
+.review-bar-visible {
+  --review-bar-height: #{$mr-review-bar-height};
+}
+
 .diff-tree-list {
   // This 11px value should match the additional value found in
   //      /assets/stylesheets/framework/diffs.scss
@@ -23,24 +35,13 @@
 
   position: -webkit-sticky;
   position: sticky;
-  top: $top-pos;
-  max-height: calc(100vh - #{$top-pos});
+  // Unitless zero values are not allowed in calculations https://stackoverflow.com/a/55391061
+  // stylelint-disable-next-line length-zero-no-unit
+  top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px));
+  // stylelint-disable-next-line length-zero-no-unit
+  max-height: calc(100vh - #{$top-pos} - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px));
   z-index: 202;
 
-  .with-system-header & {
-    top: $top-pos + $system-header-height;
-  }
-
-  .with-system-header.with-performance-bar & {
-    top: $top-pos + $system-header-height + $performance-bar-height;
-  }
-
-  .with-performance-bar & {
-    $performance-bar-top-pos: $performance-bar-height + $top-pos;
-    top: $performance-bar-top-pos;
-    max-height: calc(100vh - #{$performance-bar-top-pos});
-  }
-
   .drag-handle {
     bottom: 16px;
     transform: translateX(10px);

changelogs/unreleased/288343-show-full-treeview.yml

+---
+title: Fix MR diff file tree being hidden behind review bar
+merge_request: 59150
+type: fixed

spec/frontend/diffs/components/app_spec.js

@@ -705,4 +705,24 @@ 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);
+    });
+  });
 });

spec/frontend/diffs/create_diffs_store.js

 import Vue from 'vue';
 import Vuex from 'vuex';
+import batchCommentsModule from '~/batch_comments/stores/modules/batch_comments';
 import diffsModule from '~/diffs/store/modules';
 import notesModule from '~/notes/stores/modules';
 
@@ -10,6 +11,7 @@ export default function createDiffsStore() {
     modules: {
       diffs: diffsModule(),
       notes: notesModule(),
+      batchComments: batchCommentsModule(),
     },
   });
 }