diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index bf5aeed1ef0b2e9cdbc54ef99bdef0226bccc09f..dd2249e0b257fe07f42aa8d83f32577d9c30fdc2 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -358,7 +358,7 @@ export const fetchDiffFilesMeta = ({ commit, state }) => {
       eventHub.$emit(EVT_PERF_MARK_FILE_TREE_END);
       commit(types.SET_TREE_DATA, {
         treeEntries,
-        tree: sortTree(tree),
+        tree: sortTree(tree, 'key'),
       });
 
       return data;
diff --git a/app/assets/javascripts/diffs/stores/legacy_diffs/actions.js b/app/assets/javascripts/diffs/stores/legacy_diffs/actions.js
index 7c4f7a63dd2f71ca8b4fc763b21045ea4cdcc1cc..a5f54a2d072c123b1b2298ce7d9479afceb9f851 100644
--- a/app/assets/javascripts/diffs/stores/legacy_diffs/actions.js
+++ b/app/assets/javascripts/diffs/stores/legacy_diffs/actions.js
@@ -360,7 +360,7 @@ export function fetchDiffFilesMeta() {
       eventHub.$emit(EVT_PERF_MARK_FILE_TREE_END);
       this[types.SET_TREE_DATA]({
         treeEntries,
-        tree: sortTree(tree),
+        tree: sortTree(tree, 'key'),
       });
 
       return data;
diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js
index f84104a47ed93e8e917a87c3e666197222a5047e..95ef1ff72c591c7fc2e2aa44f27d713b813cee74 100644
--- a/app/assets/javascripts/ide/stores/utils.js
+++ b/app/assets/javascripts/ide/stores/utils.js
@@ -61,17 +61,19 @@ export const decorateData = (entity) => {
   });
 };
 
-const sortTreesByTypeAndName = (a, b) => {
-  if (a.type === 'tree' && b.type === 'blob') {
-    return -1;
-  }
-  if (a.type === 'blob' && b.type === 'tree') {
-    return 1;
-  }
-  if (a.name < b.name) return -1;
-  if (a.name > b.name) return 1;
-  return 0;
-};
+function sortTreesByTypeAndOther(key) {
+  return (a, b) => {
+    if (a.type === 'tree' && b.type === 'blob') {
+      return -1;
+    }
+    if (a.type === 'blob' && b.type === 'tree') {
+      return 1;
+    }
+    if (a[key] < b[key]) return -1;
+    if (a[key] > b[key]) return 1;
+    return 0;
+  };
+}
 
 export const linkTreeNodes = (tree) => {
   return tree.map((entity) =>
@@ -81,11 +83,11 @@ export const linkTreeNodes = (tree) => {
   );
 };
 
-export const sortTree = (sortedTree) =>
+export const sortTree = (sortedTree, key = 'name') =>
   sortedTree
     .map((entity) =>
       Object.assign(entity, {
-        tree: entity.tree.length ? sortTree(entity.tree) : [],
+        tree: entity.tree.length ? sortTree(entity.tree, key) : [],
       }),
     )
-    .sort(sortTreesByTypeAndName);
+    .sort(sortTreesByTypeAndOther(key));
diff --git a/spec/frontend/ide/stores/utils_spec.js b/spec/frontend/ide/stores/utils_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..09a76c5154f05490fcc30c4773c17425d5fbb129
--- /dev/null
+++ b/spec/frontend/ide/stores/utils_spec.js
@@ -0,0 +1,23 @@
+import { sortTree } from '~/ide/stores/utils';
+
+describe('IDE store utils', () => {
+  describe('sortTree', () => {
+    const treeEntries = [
+      { id: 1, name: 'a', key: 'z', type: 'blob', tree: [] },
+      { id: 2, name: 'z', key: 'a', type: 'blob', tree: [] },
+      { id: 3, name: 't', key: 't', type: 'tree', tree: [] },
+    ];
+
+    it.each`
+      description                                | treeIn                              | key          | sequenceOut
+      ${'sorts by name when no key is provided'} | ${[treeEntries[1], treeEntries[0]]} | ${undefined} | ${[1, 2]}
+      ${'sorts by the provided key'}             | ${[treeEntries[0], treeEntries[1]]} | ${'key'}     | ${[2, 1]}
+      ${'sorts sub-trees above blobs'}           | ${treeEntries}                      | ${undefined} | ${[3, 1, 2]}
+    `('$description', ({ treeIn, key, sequenceOut }) => {
+      const sorted = sortTree(treeIn, key);
+      const ids = sorted.map((entry) => entry.id);
+
+      expect(ids).toEqual(sequenceOut);
+    });
+  });
+});