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 3253e6ade4..d63241a440 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 @@ -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) diff --git a/services/web/test/frontend/features/file-tree/components/file-tree-root.test.js b/services/web/test/frontend/features/file-tree/components/file-tree-root.test.js index c95b496ee9..e332357db2 100644 --- a/services/web/test/frontend/features/file-tree/components/file-tree-root.test.js +++ b/services/web/test/frontend/features/file-tree/components/file-tree-root.test.js @@ -227,4 +227,64 @@ describe('', 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( + 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) + }) })