Make the file tree in merge requests resizable

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/51857

2 files changed, 37 insertions, 1 deletions

diff --git a/spec/javascripts/diffs/components/app_spec.js b/spec/javascripts/diffs/components/app_spec.js
index a2cbc0f3c72..5abdfe695d0 100644
--- a/spec/javascripts/diffs/components/app_spec.js
+++ b/spec/javascripts/diffs/components/app_spec.js
@@ -68,6 +68,32 @@ describe('diffs/components/app', () => {
     });
   });
 
+  describe('resizable', () => {
+    afterEach(() => {
+      localStorage.removeItem('mr_tree_list_width');
+    });
+
+    it('sets initial width when no localStorage has been set', () => {
+      createComponent();
+
+      expect(vm.vm.treeWidth).toEqual(320);
+    });
+
+    it('sets initial width to localStorage size', () => {
+      localStorage.setItem('mr_tree_list_width', '200');
+
+      createComponent();
+
+      expect(vm.vm.treeWidth).toEqual(200);
+    });
+
+    it('sets width of tree list', () => {
+      createComponent();
+
+      expect(vm.find('.js-diff-tree-list').element.style.width).toEqual('320px');
+    });
+  });
+
   describe('empty state', () => {
     it('renders empty state when no diff files exist', () => {
       createComponent();
diff --git a/spec/javascripts/diffs/components/tree_list_spec.js b/spec/javascripts/diffs/components/tree_list_spec.js
index 9e556698f34..cd7bf6405e5 100644
--- a/spec/javascripts/diffs/components/tree_list_spec.js
+++ b/spec/javascripts/diffs/components/tree_list_spec.js
@@ -28,7 +28,7 @@ describe('Diffs tree list component', () => {
 
     localStorage.removeItem('mr_diff_tree_list');
 
-    vm = mountComponentWithStore(Component, { store });
+    vm = mountComponentWithStore(Component, { store, props: { hideFileStats: false } });
   });
 
   afterEach(() => {
@@ -77,6 +77,16 @@ describe('Diffs tree list component', () => {
       expect(vm.$el.querySelectorAll('.file-row')[1].textContent).toContain('app');
     });
 
+    it('hides file stats', done => {
+      vm.hideFileStats = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.file-row-stats')).toBe(null);
+
+        done();
+      });
+    });
+
     it('calls toggleTreeOpen when clicking folder', () => {
       spyOn(vm.$store, 'dispatch').and.stub();