Merge pull request #12914 from overleaf/mf-sort-file-tree-history-react

Sort react history file tree items with the same rule as the angular history file tree

GitOrigin-RevId: da3d3195fff1f5b05b232b329fc3cf38a65743f6

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

@@ -2,7 +2,6 @@ import classNames from 'classnames'
 
 import HistoryFileTreeDoc from './history-file-tree-doc'
 import HistoryFileTreeFolder from './history-file-tree-folder'
-import { fileCollator } from '../../../file-tree/util/file-collator'
 import type { ReactNode } from 'react'
 import type { HistoryFileTree, HistoryDoc } from '../../utils/file-tree'
 
@@ -21,29 +20,18 @@ export default function HistoryFileTreeFolderList({
 }: HistoryFileTreeFolderListProps) {
   return (
     <ul className={classNames('list-unstyled', rootClassName)} role="tree">
-      {folders.sort(compareFunction).map(folder => {
-        return (
-          <HistoryFileTreeFolder
-            key={folder.name}
-            name={folder.name}
-            folders={folder.folders}
-            docs={folder.docs ?? []}
-          />
-        )
-      })}
-      {docs.sort(compareFunction).map(doc => {
-        return (
-          <HistoryFileTreeDoc key={doc.pathname} name={doc.name} file={doc} />
-        )
-      })}
+      {folders.map(folder => (
+        <HistoryFileTreeFolder
+          key={folder.name}
+          name={folder.name}
+          folders={folder.folders}
+          docs={folder.docs ?? []}
+        />
+      ))}
+      {docs.map(doc => (
+        <HistoryFileTreeDoc key={doc.pathname} name={doc.name} file={doc} />
+      ))}
       {children}
     </ul>
   )
 }
-
-function compareFunction(
-  one: HistoryFileTree | HistoryDoc,
-  two: HistoryFileTree | HistoryDoc
-) {
-  return fileCollator.compare(one.name, two.name)
-}

services/web/frontend/js/features/history/components/history-file-tree.tsx

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import { orderBy, reduce } from 'lodash'
 import { useHistoryContext } from '../context/history-context'
 import {
   fileTreeDiffToFileTreeData,
@@ -9,9 +9,11 @@ import HistoryFileTreeFolderList from './file-tree/history-file-tree-folder-list
 export default function HistoryFileTree() {
   const { selection, error } = useHistoryContext()
 
-  const fileTree = _.reduce(selection.files, reducePathsToTree, [])
+  const fileTree = reduce(selection.files, reducePathsToTree, [])
 
-  const mappedFileTree = fileTreeDiffToFileTreeData(fileTree)
+  const sortedFileTree = orderBy(fileTree, ['-type', 'operation', 'name'])
+
+  const mappedFileTree = fileTreeDiffToFileTreeData(sortedFileTree)
 
   return error ? null : (
     <HistoryFileTreeFolderList