Highlight root folder as drop target for external files (#15027)

GitOrigin-RevId: 2ef13ec9f167c39c7144ca90059a17e2a7c6e0b9

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>
   )
 }

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"
       />
     </>