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}
>
{
- 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,
}
}