Merge pull request #8258 from overleaf/jk-clean-up-too-many-files-errors

[web] Count folders toward entity limit on frontend

GitOrigin-RevId: ef07a61639f0dc516c83e4ed0f2fdc35e8b6d3fa

services/web/frontend/js/features/file-tree/util/count-in-tree.js

@@ -3,10 +3,7 @@ export function countFiles(fileTreeData) {
     return 0
   }
 
-  const files = filesInFolder(fileTreeData)
+  const value = _countElements(fileTreeData)
-
-  // count all the non-deleted entities
-  const value = files.filter(item => !item.deleted).length
 
   const limit = window.ExposedSettings.maxEntitiesPerProject
   const status = fileCountStatus(value, limit, Math.ceil(limit / 20))
@@ -14,16 +11,6 @@ export function countFiles(fileTreeData) {
   return { value, status, limit }
 }
 
-function filesInFolder({ docs, folders, fileRefs }) {
-  const files = [...docs, ...fileRefs]
-
-  for (const folder of folders) {
-    files.push(...filesInFolder(folder))
-  }
-
-  return files
-}
-
 function fileCountStatus(value, limit, range) {
   if (value >= limit) {
     return 'error'
@@ -35,3 +22,29 @@ function fileCountStatus(value, limit, range) {
 
   return 'success'
 }
+
+// Copied and adapted from ProjectEntityMongoUpdateHandler
+function _countElements(rootFolder) {
+  function countFolder(folder) {
+    if (folder == null) {
+      return 0
+    }
+
+    let total = 0
+    if (folder.folders) {
+      total += folder.folders.length
+      for (const subfolder of folder.folders) {
+        total += countFolder(subfolder)
+      }
+    }
+    if (folder.docs) {
+      total += folder.docs.length
+    }
+    if (folder.fileRefs) {
+      total += folder.fileRefs.length
+    }
+    return total
+  }
+
+  return countFolder(rootFolder)
+}

services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-modal-create-file.test.js

@@ -100,22 +100,20 @@ describe('<FileTreeModalCreateFile/>', function () {
       {
         _id: 'root-folder-id',
         name: 'rootFolder',
-        docs: [{ _id: 'entity-1' }],
+        docs: [{ _id: 'doc-1' }],
         fileRefs: [],
         folders: [
           {
-            docs: [{ _id: 'entity-1-2' }],
+            docs: [{ _id: 'doc-2' }],
             fileRefs: [],
             folders: [
               {
                 docs: [
-                  { _id: 'entity-3' },
+                  { _id: 'doc-3' },
-                  { _id: 'entity-4' },
+                  { _id: 'doc-4' },
-                  { _id: 'entity-5' },
+                  { _id: 'doc-5' },
-                  { _id: 'entity-6' },
+                  { _id: 'doc-6' },
-                  { _id: 'entity-7' },
+                  { _id: 'doc-7' },
-                  { _id: 'entity-8' },
-                  { _id: 'entity-9' },
                 ],
                 fileRefs: [],
                 folders: [],
@@ -133,6 +131,33 @@ describe('<FileTreeModalCreateFile/>', function () {
     screen.getByText(/This project is approaching the file limit \(\d+\/\d+\)/)
   })
 
+  it('counts folders toward the limit', async function () {
+    const rootFolder = [
+      {
+        _id: 'root-folder-id',
+        name: 'rootFolder',
+        docs: [{ _id: 'doc-1' }],
+        fileRefs: [],
+        folders: [
+          { docs: [], fileRefs: [], folders: [] },
+          { docs: [], fileRefs: [], folders: [] },
+          { docs: [], fileRefs: [], folders: [] },
+          { docs: [], fileRefs: [], folders: [] },
+          { docs: [], fileRefs: [], folders: [] },
+          { docs: [], fileRefs: [], folders: [] },
+          { docs: [], fileRefs: [], folders: [] },
+          { docs: [], fileRefs: [], folders: [] },
+        ],
+      },
+    ]
+
+    renderWithContext(<OpenWithMode mode="doc" />, {
+      contextProps: { rootFolder },
+    })
+
+    screen.getByText(/This project is approaching the file limit \(\d+\/\d+\)/)
+  })
+
   it('creates a new file when the form is submitted', async function () {
     fetchMock.post('express:/project/:projectId/doc', () => 204)