Merge pull request #4127 from overleaf/ae-file-tree-menu-multiple-selection

Only show the file tree item menu when a single item is selected

GitOrigin-RevId: fe98ffb4627beba376b20432a1d489eeeadc520b

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

@@ -8,11 +8,15 @@ import { useDraggable } from '../../contexts/file-tree-draggable'
 
 import FileTreeItemName from './file-tree-item-name'
 import FileTreeItemMenu from './file-tree-item-menu'
+import { useFileTreeSelectable } from '../../contexts/file-tree-selectable'
 
 function FileTreeItemInner({ id, name, isSelected, icons }) {
   const { hasWritePermissions, setContextMenuCoords } = useFileTreeMainContext()
 
-  const hasMenu = hasWritePermissions && isSelected
+  const { selectedEntityIds } = useFileTreeSelectable()
+
+  const hasMenu =
+    hasWritePermissions && isSelected && selectedEntityIds.size === 1
 
   const { isDragging, dragRef, isDraggable, setIsDraggable } = useDraggable(id)
 

services/web/test/frontend/features/file-tree/components/file-tree-root.test.js

@@ -227,4 +227,64 @@ describe('<FileTreeRoot/>', function () {
     screen.getByRole('treeitem', { name: 'main.tex', selected: false })
     screen.getByRole('treeitem', { name: 'other.tex', selected: true })
   })
+
+  it('only shows a menu button when a single item is selected', function () {
+    const rootFolder = [
+      {
+        _id: 'root-folder-id',
+        docs: [
+          { _id: '456def', name: 'main.tex' },
+          { _id: '789ghi', name: 'other.tex' },
+        ],
+        folders: [],
+        fileRefs: [],
+      },
+    ]
+    renderWithEditorContext(
+      <FileTreeRoot
+        rootFolder={rootFolder}
+        projectId="123abc"
+        rootDocId="456def"
+        hasWritePermissions
+        userHasFeature={() => true}
+        refProviders={{}}
+        reindexReferences={() => null}
+        setRefProviderEnabled={() => null}
+        setStartedFreeTrial={() => null}
+        onSelect={onSelect}
+        onInit={onInit}
+        isConnected
+      />
+    )
+
+    const main = screen.getByRole('treeitem', {
+      name: 'main.tex',
+      selected: true,
+    })
+    const other = screen.getByRole('treeitem', {
+      name: 'other.tex',
+      selected: false,
+    })
+
+    // single item selected: menu button is visible
+    expect(screen.queryAllByRole('button', { name: 'Menu' })).to.have.length(1)
+
+    // select the other item
+    fireEvent.click(other)
+
+    screen.getByRole('treeitem', { name: 'main.tex', selected: false })
+    screen.getByRole('treeitem', { name: 'other.tex', selected: true })
+
+    // single item selected: menu button is visible
+    expect(screen.queryAllByRole('button', { name: 'Menu' })).to.have.length(1)
+
+    // multi-select the main item
+    fireEvent.click(main, { ctrlKey: true })
+
+    screen.getByRole('treeitem', { name: 'main.tex', selected: true })
+    screen.getByRole('treeitem', { name: 'other.tex', selected: true })
+
+    // multiple items selected: no menu button is visible
+    expect(screen.queryAllByRole('button', { name: 'Menu' })).to.have.length(0)
+  })
 })