Collapse diff tree is only one file is present

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

6 files changed, 88 insertions, 8 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 1fc2b7fe859..e8f8c09152a 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -19,6 +19,7 @@ import {
   MIN_TREE_WIDTH,
   MAX_TREE_WIDTH,
   TREE_HIDE_STATS_WIDTH,
+  MR_TREE_SHOW_KEY,
 } from '../constants';
 
 export default {
@@ -162,10 +163,13 @@ export default {
       'setHighlightedRow',
       'cacheTreeListWidth',
       'scrollToFile',
+      'toggleShowTreeList',
     ]),
     fetchData() {
       this.fetchDiffFiles()
         .then(() => {
+          this.hideTreeListIfJustOneFile();
+
           requestIdleCallback(
             () => {
               this.setDiscussions();
@@ -231,6 +235,13 @@ export default {
         this.scrollToFile(this.diffFiles[targetIndex].file_path);
       }
     },
+    hideTreeListIfJustOneFile() {
+      const storedTreeShow = localStorage.getItem(MR_TREE_SHOW_KEY);
+
+      if ((storedTreeShow === null && this.diffFiles.length <= 1) || storedTreeShow === 'false') {
+        this.toggleShowTreeList(false);
+      }
+    },
   },
   minTreeWidth: MIN_TREE_WIDTH,
   maxTreeWidth: MAX_TREE_WIDTH,
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 4a04216d893..b58ae0d248c 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -266,9 +266,12 @@ export const scrollToFile = ({ state, commit }, path) => {
   commit(types.UPDATE_CURRENT_DIFF_FILE_ID, fileHash);
 };
 
-export const toggleShowTreeList = ({ commit, state }) => {
+export const toggleShowTreeList = ({ commit, state }, saving = true) => {
   commit(types.TOGGLE_SHOW_TREE_LIST);
-  localStorage.setItem(MR_TREE_SHOW_KEY, state.showTreeList);
+
+  if (saving) {
+    localStorage.setItem(MR_TREE_SHOW_KEY, state.showTreeList);
+  }
 };
 
 export const openDiffFileCommentForm = ({ commit, getters }, formData) => {
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index 47f78a5db54..cf4dd93dbfb 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -1,13 +1,10 @@
 import Cookies from 'js-cookie';
 import { getParameterValues } from '~/lib/utils/url_utility';
-import bp from '~/breakpoints';
-import { parseBoolean } from '~/lib/utils/common_utils';
-import { INLINE_DIFF_VIEW_TYPE, DIFF_VIEW_COOKIE_NAME, MR_TREE_SHOW_KEY } from '../../constants';
+import { INLINE_DIFF_VIEW_TYPE, DIFF_VIEW_COOKIE_NAME } from '../../constants';
 
 const viewTypeFromQueryString = getParameterValues('view')[0];
 const viewTypeFromCookie = Cookies.get(DIFF_VIEW_COOKIE_NAME);
 const defaultViewType = INLINE_DIFF_VIEW_TYPE;
-const storedTreeShow = localStorage.getItem(MR_TREE_SHOW_KEY);
 
 export default () => ({
   isLoading: true,
@@ -23,8 +20,7 @@ export default () => ({
   diffViewType: viewTypeFromQueryString || viewTypeFromCookie || defaultViewType,
   tree: [],
   treeEntries: {},
-  showTreeList:
-    storedTreeShow === null ? bp.getBreakpointSize() !== 'xs' : parseBoolean(storedTreeShow),
+  showTreeList: true,
   currentDiffFileId: '',
   projectPath: '',
   commentForms: [],
diff --git a/changelogs/unreleased/53139-hide-tree-single-file.yml b/changelogs/unreleased/53139-hide-tree-single-file.yml
new file mode 100644
index 00000000000..17fe957e42e
--- /dev/null
+++ b/changelogs/unreleased/53139-hide-tree-single-file.yml
@@ -0,0 +1,5 @@
+---
+title: collapse file tree by default if the merge request changes only one file
+merge_request:
+author: Riccardo Padovani <riccardo@rpadovani.com>
+type: changed
diff --git a/spec/javascripts/diffs/components/app_spec.js b/spec/javascripts/diffs/components/app_spec.js
index d81c433cca6..8d7c52a2876 100644
--- a/spec/javascripts/diffs/components/app_spec.js
+++ b/spec/javascripts/diffs/components/app_spec.js
@@ -397,4 +397,61 @@ describe('diffs/components/app', () => {
       expect(wrapper.find(TreeList).exists()).toBe(true);
     });
   });
+
+  describe('hideTreeListIfJustOneFile', () => {
+    let toggleShowTreeList;
+
+    beforeEach(() => {
+      toggleShowTreeList = jasmine.createSpy('toggleShowTreeList');
+    });
+
+    afterEach(() => {
+      localStorage.removeItem('mr_tree_show');
+    });
+
+    it('calls toggleShowTreeList when only 1 file', () => {
+      createComponent({}, ({ state }) => {
+        state.diffs.diffFiles.push({ sha: '123' });
+      });
+
+      wrapper.setMethods({
+        toggleShowTreeList,
+      });
+
+      wrapper.vm.hideTreeListIfJustOneFile();
+
+      expect(toggleShowTreeList).toHaveBeenCalledWith(false);
+    });
+
+    it('does not call toggleShowTreeList when more than 1 file', () => {
+      createComponent({}, ({ state }) => {
+        state.diffs.diffFiles.push({ sha: '123' });
+        state.diffs.diffFiles.push({ sha: '124' });
+      });
+
+      wrapper.setMethods({
+        toggleShowTreeList,
+      });
+
+      wrapper.vm.hideTreeListIfJustOneFile();
+
+      expect(toggleShowTreeList).not.toHaveBeenCalled();
+    });
+
+    it('does not call toggleShowTreeList when localStorage is set', () => {
+      localStorage.setItem('mr_tree_show', 'true');
+
+      createComponent({}, ({ state }) => {
+        state.diffs.diffFiles.push({ sha: '123' });
+      });
+
+      wrapper.setMethods({
+        toggleShowTreeList,
+      });
+
+      wrapper.vm.hideTreeListIfJustOneFile();
+
+      expect(toggleShowTreeList).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/actions_spec.js b/spec/javascripts/diffs/store/actions_spec.js
index 6c637097893..bca99caa920 100644
--- a/spec/javascripts/diffs/store/actions_spec.js
+++ b/spec/javascripts/diffs/store/actions_spec.js
@@ -734,6 +734,14 @@ describe('DiffsStoreActions', () => {
 
       expect(localStorage.setItem).toHaveBeenCalledWith('mr_tree_show', true);
     });
+
+    it('does not update localStorage', () => {
+      spyOn(localStorage, 'setItem');
+
+      toggleShowTreeList({ commit() {}, state: { showTreeList: true } }, false);
+
+      expect(localStorage.setItem).not.toHaveBeenCalled();
+    });
   });
 
   describe('renderFileForDiscussionId', () => {