Merge pull request #3082 from overleaf/pr-limit-file-tree-depth

Limit file tree depth

GitOrigin-RevId: 48dd3cec0f7540e99f07aadfcf2c8b06d126410a

services/web/app/views/project/editor/file-tree.pug

@@ -323,7 +323,7 @@ script(type='text/ng-template', id='entityListItemTemplate')
 								) #{translate("upload_file")}
 
 			ul.list-unstyled(
-				ng-if="entity.type == 'folder'"
+				ng-if="entity.type == 'folder' && (depth == null || depth < MAX_DEPTH)"
 				ng-show="expanded"
 				droppable="permissions.write"
 				accept=".entity-name"
@@ -333,8 +333,25 @@ script(type='text/ng-template', id='entityListItemTemplate')
 					entity="child",
 					permissions="permissions",
 					ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']"
+					depth="(depth || 0) + 1"
 				)
 
+			.entity-limit-hit(
+				ng-if="depth === MAX_DEPTH"
+				ng-show="expanded"
+			)
+				i.fa.fa-fw
+				span.entity-limit-hit-message 
+					| Some files might be missing
+					|
+					i.fa.fa-question-circle.entity-limit-hit-tooltip-trigger(
+						tooltip="Your project has hit Overleaf's maximum file depth limit. Files within this folder won't be visible."
+						tooltip-append-to-body="true"
+						aria-hidden="true"
+					)
+					span.sr-only 
+						| Your project has hit Overleaf's maximum file depth limit. Files within this folder won't be visible. 
+					
 script(type='text/ng-template', id='newFolderModalTemplate')
 	.modal-header
 		h3 #{translate("new_folder")}

services/web/frontend/js/ide/file-tree/controllers/FileTreeEntityController.js

@@ -20,6 +20,8 @@ App.controller('FileTreeEntityController', function(
   $modal,
   $element
 ) {
+  $scope.MAX_DEPTH = 8
+
   $scope.select = function(e) {
     if (e.ctrlKey || e.metaKey) {
       e.stopPropagation()

services/web/frontend/js/ide/file-tree/directives/fileEntity.js

@@ -16,7 +16,8 @@ export default App.directive('fileEntity', RecursionHelper => ({
   restrict: 'E',
   scope: {
     entity: '=',
-    permissions: '='
+    permissions: '=',
+    depth: '=?'
   },
   templateUrl: 'entityListItemTemplate',
   compile(element) {

services/web/frontend/stylesheets/app/editor/file-tree.less

@@ -194,6 +194,24 @@
           display: none;
         }
       }
+
+      .entity-limit-hit {
+        color: @file-tree-item-color;
+        line-height: 2.05;
+        margin-left: (@line-height-computed / 2);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .entity-limit-hit-message {
+        font-style: italic;
+      }
+
+      i.fa.entity-limit-hit-tooltip-trigger {
+        margin-left: (@line-height-computed / 4);
+        cursor: pointer;
+      }
     }
   }