Merge pull request #3640 from overleaf/ta-file-tree-input-draggable

[ReactFileTree] Disable Draggable when Renaming Entity

GitOrigin-RevId: 7241815d43791685453431aa95b8258ec17d3f81

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

@@ -16,7 +16,7 @@ function FileTreeItemInner({ id, name, isSelected, icons }) {
 
   const hasMenu = hasWritePermissions && isSelected
 
-  const { isDragging, dragRef } = useDraggable(id)
+  const { isDragging, dragRef, isDraggable, setIsDraggable } = useDraggable(id)
 
   const itemRef = createRef()
 
@@ -54,6 +54,7 @@ function FileTreeItemInner({ id, name, isSelected, icons }) {
       role="presentation"
       ref={dragRef}
       onContextMenu={handleContextMenu}
+      draggable={isDraggable}
     >
       <div
         className="entity-name entity-name-react"
@@ -61,7 +62,11 @@ function FileTreeItemInner({ id, name, isSelected, icons }) {
         ref={itemRef}
       >
         {icons}
-        <FileTreeItemName name={name} isSelected={isSelected} />
+        <FileTreeItemName
+          name={name}
+          isSelected={isSelected}
+          setIsDraggable={setIsDraggable}
+        />
         {hasMenu ? <FileTreeItemMenu id={id} /> : null}
       </div>
     </div>

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

@@ -1,11 +1,11 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
 import { useRefWithAutoFocus } from '../../../../infrastructure/auto-focus'
 
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
 
-function FileTreeItemName({ name, isSelected }) {
+function FileTreeItemName({ name, isSelected, setIsDraggable }) {
   const {
     isRenaming,
     startRenaming,
@@ -16,6 +16,10 @@ function FileTreeItemName({ name, isSelected }) {
 
   const isRenamingEntity = isRenaming && isSelected && !error
 
+  useEffect(() => {
+    setIsDraggable(!isRenamingEntity)
+  }, [setIsDraggable, isRenamingEntity])
+
   if (isRenamingEntity) {
     return (
       <InputName
@@ -36,7 +40,8 @@ function FileTreeItemName({ name, isSelected }) {
 
 FileTreeItemName.propTypes = {
   name: PropTypes.string.isRequired,
-  isSelected: PropTypes.bool.isRequired
+  isSelected: PropTypes.bool.isRequired,
+  setIsDraggable: PropTypes.func.isRequired
 }
 
 function DisplayName({ name, isSelected, startRenaming }) {

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 
@@ -78,6 +78,8 @@ export function useDraggable(draggedEntityId) {
   const { fileTreeData } = useFileTreeMutable()
   const { selectedEntityIds } = useFileTreeSelectable()
 
+  const [isDraggable, setIsDraggable] = useState(true)
+
   const item = { type: DRAGGABLE_TYPE }
   const [{ isDragging }, dragRef, preview] = useDrag({
     item, // required, but overwritten by the return value of `begin`
@@ -104,7 +106,9 @@ export function useDraggable(draggedEntityId) {
 
   return {
     dragRef,
-    isDragging
+    isDragging,
+    isDraggable,
+    setIsDraggable
   }
 }