Merge branch 'diff-tree-resizable' into 'master'

Make the file tree in merge requests resizable

Closes #51857

See merge request gitlab-org/gitlab-ce!25097

5 files changed, 60 insertions, 5 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index f0ce2579ee7..8f47931d14a 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -4,6 +4,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import { __ } from '~/locale';
 import createFlash from '~/flash';
 import { GlLoadingIcon } from '@gitlab/ui';
+import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
 import eventHub from '../../notes/event_hub';
 import CompareVersions from './compare_versions.vue';
 import DiffFile from './diff_file.vue';
@@ -11,6 +12,13 @@ import NoChanges from './no_changes.vue';
 import HiddenFilesWarning from './hidden_files_warning.vue';
 import CommitWidget from './commit_widget.vue';
 import TreeList from './tree_list.vue';
+import {
+  TREE_LIST_WIDTH_STORAGE_KEY,
+  INITIAL_TREE_WIDTH,
+  MIN_TREE_WIDTH,
+  MAX_TREE_WIDTH,
+  TREE_HIDE_STATS_WIDTH,
+} from '../constants';
 
 export default {
   name: 'DiffsApp',
@@ -23,6 +31,7 @@ export default {
     CommitWidget,
     TreeList,
     GlLoadingIcon,
+    PanelResizer,
   },
   props: {
     endpoint: {
@@ -54,8 +63,12 @@ export default {
     },
   },
   data() {
+    const treeWidth =
+      parseInt(localStorage.getItem(TREE_LIST_WIDTH_STORAGE_KEY), 10) || INITIAL_TREE_WIDTH;
+
     return {
       assignedDiscussions: false,
+      treeWidth,
     };
   },
   computed: {
@@ -96,6 +109,9 @@ export default {
           this.startVersion.version_index === this.mergeRequestDiff.version_index)
       );
     },
+    hideFileStats() {
+      return this.treeWidth <= TREE_HIDE_STATS_WIDTH;
+    },
   },
   watch: {
     diffViewType() {
@@ -142,6 +158,7 @@ export default {
       'startRenderDiffsQueue',
       'assignDiscussionsToDiff',
       'setHighlightedRow',
+      'cacheTreeListWidth',
     ]),
     fetchData() {
       this.fetchDiffFiles()
@@ -184,6 +201,8 @@ export default {
       }
     },
   },
+  minTreeWidth: MIN_TREE_WIDTH,
+  maxTreeWidth: MAX_TREE_WIDTH,
 };
 </script>
 
@@ -209,7 +228,21 @@ export default {
         :data-can-create-note="getNoteableData.current_user.can_create_note"
         class="files d-flex prepend-top-default"
       >
-        <div v-show="showTreeList" class="diff-tree-list"><tree-list /></div>
+        <div
+          v-show="showTreeList"
+          :style="{ width: `${treeWidth}px` }"
+          class="diff-tree-list js-diff-tree-list"
+        >
+          <panel-resizer
+            :size.sync="treeWidth"
+            :start-size="treeWidth"
+            :min-size="$options.minTreeWidth"
+            :max-size="$options.maxTreeWidth"
+            side="right"
+            @resize-end="cacheTreeListWidth"
+          />
+          <tree-list :hide-file-stats="hideFileStats" />
+        </div>
         <div class="diff-files-holder">
           <commit-widget v-if="commit" :commit="commit" />
           <template v-if="renderDiffFiles">
diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index 7e00b994541..8fc3af15bea 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -13,6 +13,12 @@ export default {
     Icon,
     FileRow,
   },
+  props: {
+    hideFileStats: {
+      type: Boolean,
+      required: true,
+    },
+  },
   data() {
     return {
       search: '',
@@ -40,6 +46,9 @@ export default {
         return acc;
       }, []);
     },
+    fileRowExtraComponent() {
+      return this.hideFileStats ? null : FileRowStats;
+    },
   },
   methods: {
     ...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile', 'toggleFileFinder']),
@@ -48,7 +57,6 @@ export default {
     },
   },
   shortcutKeyCharacter: `${/Mac/i.test(navigator.userAgent) ? '&#8984;' : 'Ctrl'}+P`,
-  FileRowStats,
   diffTreeFiltering: gon.features && gon.features.diffTreeFiltering,
 };
 </script>
@@ -98,7 +106,7 @@ export default {
           :file="file"
           :level="0"
           :hide-extra-on-tree="true"
-          :extra-component="$options.FileRowStats"
+          :extra-component="fileRowExtraComponent"
           :show-changed-icon="true"
           @toggleTreeOpen="toggleTreeOpen"
           @clickFile="scrollToFile"
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
index bd188d9de9e..7002655ea49 100644
--- a/app/assets/javascripts/diffs/constants.js
+++ b/app/assets/javascripts/diffs/constants.js
@@ -36,3 +36,9 @@ export const MR_TREE_SHOW_KEY = 'mr_tree_show';
 export const TREE_TYPE = 'tree';
 export const TREE_LIST_STORAGE_KEY = 'mr_diff_tree_list';
 export const WHITESPACE_STORAGE_KEY = 'mr_show_whitespace';
+export const TREE_LIST_WIDTH_STORAGE_KEY = 'mr_tree_list_width';
+
+export const INITIAL_TREE_WIDTH = 320;
+export const MIN_TREE_WIDTH = 240;
+export const MAX_TREE_WIDTH = 400;
+export const TREE_HIDE_STATS_WIDTH = 260;
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index feda882e826..c37a5c3a45f 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -16,6 +16,7 @@ import {
   MR_TREE_SHOW_KEY,
   TREE_LIST_STORAGE_KEY,
   WHITESPACE_STORAGE_KEY,
+  TREE_LIST_WIDTH_STORAGE_KEY,
 } from '../constants';
 import { diffViewerModes } from '~/ide/constants';
 
@@ -302,5 +303,9 @@ export const toggleFileFinder = ({ commit }, visible) => {
   commit(types.TOGGLE_FILE_FINDER_VISIBLE, visible);
 };
 
+export const cacheTreeListWidth = (_, size) => {
+  localStorage.setItem(TREE_LIST_WIDTH_STORAGE_KEY, size);
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/vue_shared/components/panel_resizer.vue b/app/assets/javascripts/vue_shared/components/panel_resizer.vue
index bf736a378dd..8d81940eb91 100644
--- a/app/assets/javascripts/vue_shared/components/panel_resizer.vue
+++ b/app/assets/javascripts/vue_shared/components/panel_resizer.vue
@@ -28,11 +28,12 @@ export default {
   data() {
     return {
       size: this.startSize,
+      isDragging: false,
     };
   },
   computed: {
     className() {
-      return `drag-${this.side}`;
+      return [`position-${this.side}-0`, { 'is-dragging': this.isDragging }];
     },
     cursorStyle() {
       if (this.enabled) {
@@ -57,6 +58,7 @@ export default {
     startDrag(e) {
       if (this.enabled) {
         e.preventDefault();
+        this.isDragging = true;
         this.startPos = e.clientX;
         this.currentStartSize = this.size;
         document.addEventListener('mousemove', this.drag);
@@ -80,6 +82,7 @@ export default {
     },
     endDrag(e) {
       e.preventDefault();
+      this.isDragging = false;
       document.removeEventListener('mousemove', this.drag);
       this.$emit('resize-end', this.size);
     },
@@ -91,7 +94,7 @@ export default {
   <div
     :class="className"
     :style="cursorStyle"
-    class="drag-handle"
+    class="position-absolute position-top-0 position-bottom-0 drag-handle"
     @mousedown="startDrag"
     @dblclick="resetSize"
   ></div>