From 9098d6fba75643662ed2b78c7360c6641abac6b0 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Mon, 2 Oct 2023 11:26:25 +0100
Subject: [PATCH] Highlight root folder as drop target for external files
 (#15027)

GitOrigin-RevId: 2ef13ec9f167c39c7144ca90059a17e2a7c6e0b9
---
 .../file-tree-draggable-preview-layer.jsx     | 21 +++++++++----------
 .../file-tree/components/file-tree-root.jsx   |  1 -
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-draggable-preview-layer.jsx b/services/web/frontend/js/features/file-tree/components/file-tree-draggable-preview-layer.jsx
index 1eae7619f8..e335004faf 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-draggable-preview-layer.jsx
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-draggable-preview-layer.jsx
@@ -16,14 +16,6 @@ function FileTreeDraggablePreviewLayer({ isOver }) {
   }))
   const ref = useRef()
 
-  const containerOffset = ref.current
-    ? ref.current.getBoundingClientRect()
-    : null
-
-  if (!isDragging || !item.title) {
-    return null
-  }
-
   return (
     <div
       ref={ref}
@@ -31,9 +23,16 @@ function FileTreeDraggablePreviewLayer({ isOver }) {
         'dnd-droppable-hover': isOver,
       })}
     >
-      <div style={getItemStyle(clientOffset, containerOffset)}>
-        <DraggablePreviewItem title={item.title} />
-      </div>
+      {isDragging && item?.title && (
+        <div
+          style={getItemStyle(
+            clientOffset,
+            ref.current?.getBoundingClientRect()
+          )}
+        >
+          <DraggablePreviewItem title={item.title} />
+        </div>
+      )}
     </div>
   )
 }
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-root.jsx b/services/web/frontend/js/features/file-tree/components/file-tree-root.jsx
index 9d18e95df1..f0ea5e8f96 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-root.jsx
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-root.jsx
@@ -75,7 +75,6 @@ function FileTreeRootFolder() {
         files={fileTreeData.fileRefs}
         classes={{ root: 'file-tree-list' }}
         dropRef={dropRef}
-        isOver={isOver}
         dataTestId="file-tree-list-root"
       />
     </>