Merge branch 'diff-tree-collapse-directories' into 'master'

Collapses directory structure in merge request tree

Closes #53069

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

app/assets/javascripts/diffs/constants.js

@@ -32,3 +32,5 @@ export const LINES_TO_BE_RENDERED_DIRECTLY = 100;
 export const MAX_LINES_TO_BE_RENDERED = 2000;
 
 export const MR_TREE_SHOW_KEY = 'mr_tree_show';
+
+export const TREE_TYPE = 'tree';

app/assets/javascripts/diffs/store/actions.js

@@ -5,6 +5,7 @@ import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import { handleLocationHash, historyPushState, scrollToElement } from '~/lib/utils/common_utils';
 import { mergeUrlParams, getLocationHash } from '~/lib/utils/url_utility';
+import TreeWorker from '../workers/tree_worker';
 import eventHub from '../../notes/event_hub';
 import { getDiffPositionByLineCode, getNoteFormData } from './utils';
 import * as types from './mutation_types';
@@ -21,17 +22,29 @@ export const setBaseConfig = ({ commit }, options) => {
 };
 
 export const fetchDiffFiles = ({ state, commit }) => {
+  const worker = new TreeWorker();
+
   commit(types.SET_LOADING, true);
 
+  worker.addEventListener('message', ({ data }) => {
+    commit(types.SET_TREE_DATA, data);
+
+    worker.terminate();
+  });
+
   return axios
     .get(state.endpoint)
     .then(res => {
       commit(types.SET_LOADING, false);
       commit(types.SET_MERGE_REQUEST_DIFFS, res.data.merge_request_diffs || []);
       commit(types.SET_DIFF_DATA, res.data);
+
+      worker.postMessage(state.diffFiles);
+
       return Vue.nextTick();
     })
-    .then(handleLocationHash);
+    .then(handleLocationHash)
+    .catch(() => worker.terminate());
 };
 
 export const setHighlightedRow = ({ commit }, lineCode) => {

app/assets/javascripts/diffs/store/mutation_types.js

@@ -18,3 +18,5 @@ export const OPEN_DIFF_FILE_COMMENT_FORM = 'OPEN_DIFF_FILE_COMMENT_FORM';
 export const UPDATE_DIFF_FILE_COMMENT_FORM = 'UPDATE_DIFF_FILE_COMMENT_FORM';
 export const CLOSE_DIFF_FILE_COMMENT_FORM = 'CLOSE_DIFF_FILE_COMMENT_FORM';
 export const SET_HIGHLIGHTED_ROW = 'SET_HIGHLIGHTED_ROW';
+
+export const SET_TREE_DATA = 'SET_TREE_DATA';

app/assets/javascripts/diffs/store/mutations.js

 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { sortTree } from '~/ide/stores/utils';
 import {
   findDiffFile,
   addLineReferences,
@@ -7,7 +6,6 @@ import {
   addContextLines,
   prepareDiffData,
   isDiscussionApplicableToLine,
-  generateTreeList,
 } from './utils';
 import * as types from './mutation_types';
 
@@ -23,12 +21,9 @@ export default {
 
   [types.SET_DIFF_DATA](state, data) {
     prepareDiffData(data);
-    const { tree, treeEntries } = generateTreeList(data.diff_files);
 
     Object.assign(state, {
       ...convertObjectPropsToCamelCase(data),
-      tree: sortTree(tree),
-      treeEntries,
     });
   },
 
@@ -239,4 +234,8 @@ export default {
   [types.SET_HIGHLIGHTED_ROW](state, lineCode) {
     state.highlightedRow = lineCode;
   },
+  [types.SET_TREE_DATA](state, { treeEntries, tree }) {
+    state.treeEntries = treeEntries;
+    state.tree = tree;
+  },
 };

app/assets/javascripts/diffs/store/utils.js

@@ -11,6 +11,7 @@ import {
   MATCH_LINE_TYPE,
   LINES_TO_BE_RENDERED_DIRECTLY,
   MAX_LINES_TO_BE_RENDERED,
+  TREE_TYPE,
 } from '../constants';
 
 export function findDiffFile(files, hash) {
@@ -289,8 +290,63 @@ export function isDiscussionApplicableToLine({ discussion, diffPosition, latestD
   return latestDiff && discussion.active && line_code === discussion.line_code;
 }
 
-export const generateTreeList = files =>
-  files.reduce(
+export const getLowestSingleFolder = folder => {
+  const getFolder = (blob, start = []) =>
+    blob.tree.reduce(
+      (acc, file) => {
+        const shouldGetFolder = file.tree.length === 1 && file.tree[0].type === TREE_TYPE;
+        const currentFileTypeTree = file.type === TREE_TYPE;
+        const path = shouldGetFolder || currentFileTypeTree ? acc.path.concat(file.name) : acc.path;
+        const tree = shouldGetFolder || currentFileTypeTree ? acc.tree.concat(file) : acc.tree;
+
+        if (shouldGetFolder) {
+          const firstFolder = getFolder(file);
+
+          path.push(firstFolder.path);
+          tree.push(...firstFolder.tree);
+        }
+
+        return {
+          ...acc,
+          path,
+          tree,
+        };
+      },
+      { path: start, tree: [] },
+    );
+  const { path, tree } = getFolder(folder, [folder.name]);
+
+  return {
+    path: path.join('/'),
+    treeAcc: tree.length ? tree[tree.length - 1].tree : null,
+  };
+};
+
+export const flattenTree = tree => {
+  const flatten = blobTree =>
+    blobTree.reduce((acc, file) => {
+      const blob = file;
+      let treeToFlatten = blob.tree;
+
+      if (file.type === TREE_TYPE && file.tree.length === 1) {
+        const { treeAcc, path } = getLowestSingleFolder(file);
+
+        if (treeAcc) {
+          blob.name = path;
+          treeToFlatten = flatten(treeAcc);
+        }
+      }
+
+      blob.tree = flatten(treeToFlatten);
+
+      return acc.concat(blob);
+    }, []);
+
+  return flatten(tree);
+};
+
+export const generateTreeList = files => {
+  const { treeEntries, tree } = files.reduce(
     (acc, file) => {
       const split = file.new_path.split('/');
 
@@ -335,6 +391,9 @@ export const generateTreeList = files =>
     { treeEntries: {}, tree: [] },
   );
 
+  return { treeEntries, tree: flattenTree(tree) };
+};
+
 export const getDiffMode = diffFile => {
   const diffModeKey = Object.keys(diffModes).find(key => diffFile[`${key}_file`]);
   return (

app/assets/javascripts/diffs/workers/tree_worker.js

+import { sortTree } from '~/ide/stores/utils';
+import { generateTreeList } from '../store/utils';
+
+// eslint-disable-next-line no-restricted-globals
+self.addEventListener('message', e => {
+  const { data } = e;
+  const { treeEntries, tree } = generateTreeList(data);
+
+  // eslint-disable-next-line no-restricted-globals
+  self.postMessage({
+    treeEntries,
+    tree: sortTree(tree),
+  });
+});

changelogs/unreleased/diff-tree-collapse-directories.yml

+---
+title: Collapse directory structure in merge request file tree
+merge_request:
+author:
+type: changed

spec/javascripts/diffs/store/mutations_spec.js

@@ -628,4 +628,26 @@ describe('DiffsStoreMutations', () => {
       expect(file.parallel_diff_lines[1].right.hasForm).toBe(false);
     });
   });
+
+  describe('SET_TREE_DATA', () => {
+    it('sets treeEntries and tree in state', () => {
+      const state = {
+        treeEntries: {},
+        tree: [],
+      };
+
+      mutations[types.SET_TREE_DATA](state, {
+        treeEntries: { file: { name: 'index.js' } },
+        tree: ['tree'],
+      });
+
+      expect(state.treeEntries).toEqual({
+        file: {
+          name: 'index.js',
+        },
+      });
+
+      expect(state.tree).toEqual(['tree']);
+    });
+  });
 });

spec/javascripts/diffs/store/utils_spec.js

@@ -601,4 +601,123 @@ describe('DiffsStoreUtils', () => {
       expect(utils.getDiffMode({})).toBe('replaced');
     });
   });
+
+  describe('getLowestSingleFolder', () => {
+    it('returns path and tree of lowest single folder tree', () => {
+      const folder = {
+        name: 'app',
+        type: 'tree',
+        tree: [
+          {
+            name: 'javascripts',
+            type: 'tree',
+            tree: [
+              {
+                type: 'blob',
+                name: 'index.js',
+              },
+            ],
+          },
+        ],
+      };
+      const { path, treeAcc } = utils.getLowestSingleFolder(folder);
+
+      expect(path).toEqual('app/javascripts');
+      expect(treeAcc).toEqual([
+        {
+          type: 'blob',
+          name: 'index.js',
+        },
+      ]);
+    });
+
+    it('returns passed in folders path & tree when more than tree exists', () => {
+      const folder = {
+        name: 'app',
+        type: 'tree',
+        tree: [
+          {
+            name: 'spec',
+            type: 'blob',
+            tree: [],
+          },
+        ],
+      };
+      const { path, treeAcc } = utils.getLowestSingleFolder(folder);
+
+      expect(path).toEqual('app');
+      expect(treeAcc).toBeNull();
+    });
+  });
+
+  describe('flattenTree', () => {
+    it('returns flattened directory structure', () => {
+      const tree = [
+        {
+          type: 'tree',
+          name: 'app',
+          tree: [
+            {
+              type: 'tree',
+              name: 'javascripts',
+              tree: [
+                {
+                  type: 'blob',
+                  name: 'index.js',
+                  tree: [],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'tree',
+          name: 'spec',
+          tree: [
+            {
+              type: 'tree',
+              name: 'javascripts',
+              tree: [],
+            },
+            {
+              type: 'blob',
+              name: 'index_spec.js',
+              tree: [],
+            },
+          ],
+        },
+      ];
+      const flattened = utils.flattenTree(tree);
+
+      expect(flattened).toEqual([
+        {
+          type: 'tree',
+          name: 'app/javascripts',
+          tree: [
+            {
+              type: 'blob',
+              name: 'index.js',
+              tree: [],
+            },
+          ],
+        },
+        {
+          type: 'tree',
+          name: 'spec',
+          tree: [
+            {
+              type: 'tree',
+              name: 'javascripts',
+              tree: [],
+            },
+            {
+              type: 'blob',
+              name: 'index_spec.js',
+              tree: [],
+            },
+          ],
+        },
+      ]);
+    });
+  });
 });