From 09146e8f0b0e9f76a879960c96052cd344de05f0 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <jessica.lawshe@overleaf.com>
Date: Thu, 13 Aug 2020 08:42:41 -0500
Subject: [PATCH] Merge pull request #3082 from
 overleaf/pr-limit-file-tree-depth

Limit file tree depth

GitOrigin-RevId: 48dd3cec0f7540e99f07aadfcf2c8b06d126410a
---
 .../app/views/project/editor/file-tree.pug    | 19 ++++++++++++++++++-
 .../controllers/FileTreeEntityController.js   |  2 ++
 .../js/ide/file-tree/directives/fileEntity.js |  3 ++-
 .../stylesheets/app/editor/file-tree.less     | 18 ++++++++++++++++++
 4 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/services/web/app/views/project/editor/file-tree.pug b/services/web/app/views/project/editor/file-tree.pug
index ba024b6d25..4cad01c092 100644
--- a/services/web/app/views/project/editor/file-tree.pug
+++ b/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")}
diff --git a/services/web/frontend/js/ide/file-tree/controllers/FileTreeEntityController.js b/services/web/frontend/js/ide/file-tree/controllers/FileTreeEntityController.js
index a8a3329dfa..8403326eaf 100644
--- a/services/web/frontend/js/ide/file-tree/controllers/FileTreeEntityController.js
+++ b/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()
diff --git a/services/web/frontend/js/ide/file-tree/directives/fileEntity.js b/services/web/frontend/js/ide/file-tree/directives/fileEntity.js
index b4c22c7555..f6d88195c8 100644
--- a/services/web/frontend/js/ide/file-tree/directives/fileEntity.js
+++ b/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) {
diff --git a/services/web/frontend/stylesheets/app/editor/file-tree.less b/services/web/frontend/stylesheets/app/editor/file-tree.less
index b0908662a2..4242e4fd4c 100644
--- a/services/web/frontend/stylesheets/app/editor/file-tree.less
+++ b/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;
+      }
     }
   }