Skip to content

Commit 60f6780

Browse files
committed
Add connections context menu to ConnectionsNavigation
1 parent ab392de commit 60f6780

File tree

2 files changed

+30
-1
lines changed

2 files changed

+30
-1
lines changed

packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
ButtonVariant,
2121
cx,
2222
Placeholder,
23+
useContextMenuItems,
2324
} from '@mongodb-js/compass-components';
2425
import { ConnectionsNavigationTree } from '@mongodb-js/compass-connections-navigation';
2526
import type { MapDispatchToProps, MapStateToProps } from 'react-redux';
@@ -484,6 +485,15 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
484485
[onCollapseAll, onNewConnection, openConnectionImportExportModal]
485486
);
486487

488+
const ref = useContextMenuItems(
489+
() =>
490+
connectionListTitleActions.map(({ label, action }) => ({
491+
label,
492+
onAction: () => onConnectionListTitleAction(action),
493+
})),
494+
[connectionListTitleActions, onConnectionListTitleAction]
495+
);
496+
487497
// auto-expanding on a workspace change
488498
useEffect(() => {
489499
if (
@@ -516,7 +526,7 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
516526
) : undefined;
517527

518528
return (
519-
<div className={connectionsContainerStyles}>
529+
<div className={connectionsContainerStyles} ref={ref}>
520530
<div
521531
className={connectionListHeaderStyles}
522532
data-testid="connections-header"

packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,25 @@ describe('Multiple Connections Sidebar Component', function () {
240240
).to.equal('Search clusters');
241241
});
242242
});
243+
244+
it('should have context-menu with expected actions', function () {
245+
doRender(undefined, []);
246+
const header = screen.getByTestId('connections-header');
247+
userEvent.click(header, { button: 2 });
248+
const menu = screen.getByTestId('context-menu');
249+
expect(within(menu).getByTestId('menu-group-0-item-0')).to.have.text(
250+
'Collapse all connections'
251+
);
252+
expect(within(menu).getByTestId('menu-group-0-item-1')).to.have.text(
253+
'Add new connection'
254+
);
255+
expect(within(menu).getByTestId('menu-group-0-item-2')).to.have.text(
256+
'Import connections'
257+
);
258+
expect(within(menu).getByTestId('menu-group-0-item-3')).to.have.text(
259+
'Export connections'
260+
);
261+
});
243262
});
244263

245264
describe('connections list', function () {

0 commit comments

Comments
 (0)