Merge pull request #3444 from overleaf/ta-file-tree-sort

[ReactFileTree] Sort Files Docs and Folders

GitOrigin-RevId: 720c66ad2018d8e1fa18ffb16b24f985eddc566b

services/web/frontend/js/features/file-tree/components/file-tree-folder-list.js

@@ -12,9 +12,7 @@ function FileTreeFolderList({
   classes = {},
   dropRef = null
 }) {
-  const docsAndFiles = [...docs, ...files].sort(
-    (one, two) => one.name.toLowerCase() > two.name.toLowerCase()
-  )
+  const docsAndFiles = [...docs, ...files]
 
   return (
     <ul
@@ -22,7 +20,7 @@ function FileTreeFolderList({
       role="tree"
       ref={dropRef}
     >
-      {folders.map(folder => {
+      {folders.sort(compareFunction).map(folder => {
         return (
           <FileTreeFolder
             key={folder._id}
@@ -34,7 +32,7 @@ function FileTreeFolderList({
           />
         )
       })}
-      {docsAndFiles.map(doc => {
+      {docsAndFiles.sort(compareFunction).map(doc => {
         return (
           <FileTreeDoc
             key={doc._id}
@@ -58,4 +56,19 @@ FileTreeFolderList.propTypes = {
   dropRef: PropTypes.func
 }
 
+// the collator used to sort files docs and folders in the tree. Use english as
+// base language for consistency. Options used:
+// numeric: true so 10 comes after 2
+// sensitivity: 'variant' so case and accent are not equal
+// caseFirst: 'upper' so upper-case letters come first
+const collator = new Intl.Collator('en', {
+  numeric: true,
+  sensitivity: 'variant',
+  caseFirst: 'upper'
+})
+
+function compareFunction(one, two) {
+  return collator.compare(one.name, two.name)
+}
+
 export default FileTreeFolderList