fix: adjust to rename and opening

Author: gagik

package-lock.json

@@ -49,11 +49,12 @@
     "reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
   },
   "dependencies": {
-    "@mongodb-js/compass-connections": "^1.63.0",
     "@mongodb-js/compass-components": "^1.41.0",
-    "@mongodb-js/connection-info": "^0.15.4",
-    "@mongodb-js/connection-form": "^1.55.0",
+    "@mongodb-js/compass-connections": "^1.63.0",
+    "@mongodb-js/compass-context-menu": "^0.1.1",
     "@mongodb-js/compass-workspaces": "^0.44.0",
+    "@mongodb-js/connection-form": "^1.55.0",
+    "@mongodb-js/connection-info": "^0.15.4",
     "compass-preferences-model": "^2.43.0",
     "mongodb-build-info": "^1.7.2",
     "react": "^17.0.2",

packages/compass-connections-navigation/package.json

@@ -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';
@@ -507,6 +508,15 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
     [onCollapseAll, onNewConnection, openConnectionImportExportModal]
   );
 
+  const contextMenuRef = useContextMenuItems(
+    () =>
+      connectionListTitleActions.map(({ label, action }) => ({
+        label,
+        onAction: () => onConnectionListTitleAction(action),
+      })),
+    [connectionListTitleActions, onConnectionListTitleAction]
+  );
+
   // auto-expanding on a workspace change
   useEffect(() => {
     if (
@@ -543,6 +553,7 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
       <div
         className={connectionListHeaderStyles}
         data-testid="connections-header"
+        ref={contextMenuRef}
       >
         <Subtitle className={connectionListHeaderTitleStyles}>
           {isAtlasConnectionStorage ? 'Clusters' : 'Connections'}

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

@@ -358,10 +358,10 @@ describe('Multiple Connections Sidebar Component', function () {
           const favAction = screen.getByText('Unfavorite');
           expect(favAction).to.be.visible;
 
-          const duplicateAction = screen.getByText('Duplicate');
+          const duplicateAction = screen.getByText('Duplicate connection');
           expect(duplicateAction).to.be.visible;
 
-          const removeAction = screen.getByText('Remove');
+          const removeAction = screen.getByText('Remove connection');
           expect(removeAction).to.be.visible;
         });
 
@@ -389,10 +389,10 @@ describe('Multiple Connections Sidebar Component', function () {
           const favAction = screen.getByText('Favorite');
           expect(favAction).to.be.visible;
 
-          const duplicateAction = screen.getByText('Duplicate');
+          const duplicateAction = screen.getByText('Duplicate connection');
           expect(duplicateAction).to.be.visible;
 
-          const removeAction = screen.getByText('Remove');
+          const removeAction = screen.getByText('Remove connection');
           expect(removeAction).to.be.visible;
         });
       });
@@ -438,8 +438,8 @@ describe('Multiple Connections Sidebar Component', function () {
           expect(screen.getByText('Copy connection string')).to.be.visible;
           // because it is already a favorite
           expect(screen.getByText('Unfavorite')).to.be.visible;
-          expect(screen.getByText('Duplicate')).to.be.visible;
-          expect(screen.getByText('Remove')).to.be.visible;
+          expect(screen.getByText('Duplicate connection')).to.be.visible;
+          expect(screen.getByText('Remove connection')).to.be.visible;
         });
 
         it('should render the only connected connections when toggled', async () => {
@@ -511,7 +511,11 @@ describe('Multiple Connections Sidebar Component', function () {
 
             expect(workspace.openShellWorkspace).to.have.been.calledWith(
               savedFavoriteConnection.id,
-              { newTab: true }
+              {
+                newTab: true,
+                initialEvaluate: undefined,
+                initialInput: undefined,
+              }
             );
 
             await waitFor(() => {
@@ -652,7 +656,7 @@ describe('Multiple Connections Sidebar Component', function () {
               within(connectionItem).getByLabelText('Show actions')
             );
 
-            userEvent.click(screen.getByText('Duplicate'));
+            userEvent.click(screen.getByText('Duplicate connection'));
 
             // We see the connect button in the form modal
             expect(screen.getByTestId('connect-button')).to.be.visible;
@@ -675,7 +679,7 @@ describe('Multiple Connections Sidebar Component', function () {
               within(connectionItem).getByLabelText('Show actions')
             );
 
-            userEvent.click(screen.getByText('Remove'));
+            userEvent.click(screen.getByText('Remove connection'));
 
             await waitFor(() => {
               expect(