From 7964067827f5c78007f1cc260d72b3a98ddf3dab Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Thu, 3 Jun 2021 14:45:24 +0100
Subject: [PATCH] Merge pull request #4126 from overleaf/ae-read-only-file-tree

Only allow dragging in file tree with write permission

GitOrigin-RevId: fcd316cda044a7c5e001fa4b874982f470978b15
---
 .../components/file-tree-item/file-tree-item-inner.js      | 3 +--
 .../components/file-tree-item/file-tree-item-name.js       | 7 +++++--
 .../js/features/file-tree/contexts/file-tree-draggable.js  | 6 ++++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js
index d63241a440..0ea2017747 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js
+++ b/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"
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-name.js b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-name.js
index 9c8e372f2e..4ca30bde27 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-name.js
+++ b/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 (
diff --git a/services/web/frontend/js/features/file-tree/contexts/file-tree-draggable.js b/services/web/frontend/js/features/file-tree/contexts/file-tree-draggable.js
index 8a6573a776..0706039575 100644
--- a/services/web/frontend/js/features/file-tree/contexts/file-tree-draggable.js
+++ b/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,
   }
 }