Merge pull request #4126 from overleaf/ae-read-only-file-tree

Only allow dragging in file tree with write permission

GitOrigin-RevId: fcd316cda044a7c5e001fa4b874982f470978b15

services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js

@@ -18,7 +18,7 @@ function FileTreeItemInner({ id, name, isSelected, icons }) {
   const hasMenu =
     hasWritePermissions && isSelected && selectedEntityIds.size === 1
 
-  const { isDragging, dragRef, isDraggable, setIsDraggable } = useDraggable(id)
+  const { isDragging, dragRef, setIsDraggable } = useDraggable(id)
 
   const itemRef = createRef()
 
@@ -56,7 +56,6 @@ function FileTreeItemInner({ id, name, isSelected, icons }) {
       role="presentation"
       ref={dragRef}
       onContextMenu={handleContextMenu}
-      draggable={isDraggable}
     >
       <div
         className="entity-name entity-name-react"

services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-name.js

@@ -4,8 +4,11 @@ import PropTypes from 'prop-types'
 import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
 
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
+import { useFileTreeMainContext } from '../../contexts/file-tree-main'
 
 function FileTreeItemName({ name, isSelected, setIsDraggable }) {
+  const { hasWritePermissions } = useFileTreeMainContext()
+
   const {
     isRenaming,
     startRenaming,
@@ -17,8 +20,8 @@ function FileTreeItemName({ name, isSelected, setIsDraggable }) {
   const isRenamingEntity = isRenaming && isSelected && !error
 
   useEffect(() => {
-    setIsDraggable(!isRenamingEntity)
-  }, [setIsDraggable, isRenamingEntity])
+    setIsDraggable(hasWritePermissions && !isRenamingEntity)
+  }, [setIsDraggable, hasWritePermissions, isRenamingEntity])
 
   if (isRenamingEntity) {
     return (

services/web/frontend/js/features/file-tree/contexts/file-tree-draggable.js

@@ -13,6 +13,7 @@ import {
 import { useFileTreeActionable } from './file-tree-actionable'
 import { useFileTreeMutable } from './file-tree-mutable'
 import { useFileTreeSelectable } from '../contexts/file-tree-selectable'
+import { useFileTreeMainContext } from './file-tree-main'
 
 // HACK ALERT
 // DnD binds drag and drop events on window and stop propagation if the dragged
@@ -75,10 +76,11 @@ FileTreeDraggableProvider.propTypes = {
 export function useDraggable(draggedEntityId) {
   const { t } = useTranslation()
 
+  const { hasWritePermissions } = useFileTreeMainContext()
   const { fileTreeData } = useFileTreeMutable()
   const { selectedEntityIds } = useFileTreeSelectable()
 
-  const [isDraggable, setIsDraggable] = useState(true)
+  const [isDraggable, setIsDraggable] = useState(hasWritePermissions)
 
   const item = { type: DRAGGABLE_TYPE }
   const [{ isDragging }, dragRef, preview] = useDrag({
@@ -96,6 +98,7 @@ export function useDraggable(draggedEntityId) {
     collect: monitor => ({
       isDragging: !!monitor.isDragging(),
     }),
+    canDrag: () => isDraggable,
   })
 
   // remove the automatic preview as we're using a custom preview via
@@ -107,7 +110,6 @@ export function useDraggable(draggedEntityId) {
   return {
     dragRef,
     isDragging,
-    isDraggable,
     setIsDraggable,
   }
 }