Add connections context menu to ConnectionsNavigation

Author: kraenhansen

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

@@ -20,6 +20,7 @@ import {
   ButtonVariant,
   cx,
   Placeholder,
+  useContextMenuItems,
 } from '@mongodb-js/compass-components';
 import { ConnectionsNavigationTree } from '@mongodb-js/compass-connections-navigation';
 import type { MapDispatchToProps, MapStateToProps } from 'react-redux';
@@ -484,6 +485,15 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
     [onCollapseAll, onNewConnection, openConnectionImportExportModal]
   );
 
+  const ref = useContextMenuItems(
+    () =>
+      connectionListTitleActions.map(({ label, action }) => ({
+        label,
+        onAction: () => onConnectionListTitleAction(action),
+      })),
+    [connectionListTitleActions, onConnectionListTitleAction]
+  );
+
   // auto-expanding on a workspace change
   useEffect(() => {
     if (
@@ -516,7 +526,7 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
   ) : undefined;
 
   return (
-    <div className={connectionsContainerStyles}>
+    <div className={connectionsContainerStyles} ref={ref}>
       <div
         className={connectionListHeaderStyles}
         data-testid="connections-header"

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

@@ -240,6 +240,25 @@ describe('Multiple Connections Sidebar Component', function () {
         ).to.equal('Search clusters');
       });
     });
+
+    it('should have context-menu with expected actions', function () {
+      doRender(undefined, []);
+      const header = screen.getByTestId('connections-header');
+      userEvent.click(header, { button: 2 });
+      const menu = screen.getByTestId('context-menu');
+      expect(within(menu).getByTestId('menu-group-0-item-0')).to.have.text(
+        'Collapse all connections'
+      );
+      expect(within(menu).getByTestId('menu-group-0-item-1')).to.have.text(
+        'Add new connection'
+      );
+      expect(within(menu).getByTestId('menu-group-0-item-2')).to.have.text(
+        'Import connections'
+      );
+      expect(within(menu).getByTestId('menu-group-0-item-3')).to.have.text(
+        'Export connections'
+      );
+    });
   });
 
   describe('connections list', function () {