feat(connections): adds connection menu to duplicate and remove COMPASS-5255

packages/connections/package.json

@@ -57,6 +57,7 @@
     "@mongodb-js/compass-logging": "^0.6.1",
     "@mongodb-js/connect-form": "^0.4.1",
     "debug": "^4.2.0",
+    "lodash": "^4.17.21",
     "mongodb": "^4.3.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",

packages/connections/src/components/connection-list/connection-list.tsx

@@ -142,13 +142,17 @@ function ConnectionList({
   setActiveConnectionId,
   onDoubleClick,
   removeAllRecentsConnections,
+  duplicateConnection,
+  removeConnection,
 }: {
   activeConnectionId?: string;
   connections: ConnectionInfo[];
   createNewConnection: () => void;
   setActiveConnectionId: (connectionId?: string) => void;
   onDoubleClick: (connectionInfo: ConnectionInfo) => void;
   removeAllRecentsConnections: () => void;
+  duplicateConnection: (connectionInfo: ConnectionInfo) => void;
+  removeConnection: (connectionInfo: ConnectionInfo) => void;
 }): React.ReactElement {
   const [recentHeaderHover, setRecentHover] = useState(false);
   const favoriteConnections = connections
@@ -208,6 +212,8 @@ function ConnectionList({
                 connectionInfo={connectionInfo}
                 onClick={() => setActiveConnectionId(connectionInfo.id)}
                 onDoubleClick={onDoubleClick}
+                removeConnection={removeConnection}
+                duplicateConnection={duplicateConnection}
               />
             </li>
           ))}
@@ -243,6 +249,8 @@ function ConnectionList({
                 connectionInfo={connectionInfo}
                 onClick={() => setActiveConnectionId(connectionInfo.id)}
                 onDoubleClick={onDoubleClick}
+                removeConnection={removeConnection}
+                duplicateConnection={duplicateConnection}
               />
             </li>
           ))}

packages/connections/src/components/connection-list/connection-menu.spec.tsx

@@ -4,11 +4,26 @@ import { expect } from 'chai';
 import sinon from 'sinon';
 
 import ConnectionMenu from './connection-menu';
+import { ConnectionInfo } from 'mongodb-data-service';
 
 describe('ConnectionMenu Component', function () {
-  describe('when rendered', function () {
+  describe('on non-favorite item', function () {
     beforeEach(function () {
-      render(<ConnectionMenu connectionString={'mongodb://kaleesi'} />);
+      const connectionInfo: ConnectionInfo = {
+        id: 'test-id',
+        connectionOptions: {
+          connectionString: 'mongodb://kaleesi',
+        },
+      };
+      render(
+        <ConnectionMenu
+          connectionString={'mongodb://kaleesi'}
+          duplicateConnection={() => true}
+          removeConnection={() => true}
+          connectionInfo={connectionInfo}
+          iconColor="#EAEAEA"
+        />
+      );
     });
 
     it('shows a button', function () {
@@ -17,6 +32,60 @@ describe('ConnectionMenu Component', function () {
 
     it('does not show the menu items', function () {
       expect(screen.queryByText('Copy Connection String')).to.not.exist;
+      expect(screen.queryByText('Duplicate')).to.not.exist;
+      expect(screen.queryByText('Remove')).to.not.exist;
+    });
+
+    describe('when clicked', function () {
+      beforeEach(function () {
+        const button = screen.getByRole('button');
+
+        fireEvent(
+          button,
+          new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true,
+          })
+        );
+      });
+
+      it('shows the menu items without the "Duplicate" option', function () {
+        expect(screen.getByText('Copy Connection String')).to.be.visible;
+        expect(screen.queryByText('Duplicate')).to.throw;
+        expect(screen.getByText('Remove')).to.be.visible;
+      });
+    });
+  });
+  describe('on favorite item', function () {
+    beforeEach(function () {
+      const connectionInfo: ConnectionInfo = {
+        id: 'test-id',
+        favorite: {
+          name: 'First Server',
+        },
+        connectionOptions: {
+          connectionString: 'mongodb://kaleesi',
+        },
+      };
+      render(
+        <ConnectionMenu
+          connectionString={'mongodb://kaleesi'}
+          duplicateConnection={() => true}
+          removeConnection={() => true}
+          connectionInfo={connectionInfo}
+          iconColor="#EAEAEA"
+        />
+      );
+    });
+
+    it('shows a button', function () {
+      expect(screen.getByRole('button')).to.be.visible;
+    });
+
+    it('does not show the menu items', function () {
+      expect(screen.queryByText('Copy Connection String')).to.not.exist;
+      expect(screen.queryByText('Duplicate')).to.not.exist;
+      expect(screen.queryByText('Remove')).to.not.exist;
     });
 
     describe('when clicked', function () {
@@ -34,6 +103,8 @@ describe('ConnectionMenu Component', function () {
 
       it('shows the menu items', function () {
         expect(screen.getByText('Copy Connection String')).to.be.visible;
+        expect(screen.getByText('Duplicate')).to.be.visible;
+        expect(screen.getByText('Remove')).to.be.visible;
       });
 
       describe('when copy connection is clicked', function () {
@@ -174,4 +245,83 @@ describe('ConnectionMenu Component', function () {
       });
     });
   });
+  describe('function calls', function () {
+    it('should call the removeConnection function', function () {
+      const connectionInfo: ConnectionInfo = {
+        id: 'test-id',
+        favorite: {
+          name: 'First Server',
+        },
+        connectionOptions: {
+          connectionString: 'mongodb://kaleesi',
+        },
+      };
+      const mockRemoveConnection = sinon.fake.resolves(null);
+      render(
+        <ConnectionMenu
+          connectionString={'mongodb://kaleesi'}
+          duplicateConnection={() => true}
+          removeConnection={mockRemoveConnection}
+          connectionInfo={connectionInfo}
+          iconColor="#EAEAEA"
+        />
+      );
+
+      fireEvent(
+        screen.getByRole('button'),
+        new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+        })
+      );
+
+      const removeConnectionButton = screen.getByText('Remove');
+      fireEvent(
+        removeConnectionButton,
+        new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+        })
+      );
+      expect(mockRemoveConnection.called).to.equal(true);
+    });
+    it('should call the duplicateConnection function', function () {
+      const connectionInfo: ConnectionInfo = {
+        id: 'test-id',
+        favorite: {
+          name: 'First Server',
+        },
+        connectionOptions: {
+          connectionString: 'mongodb://kaleesi',
+        },
+      };
+      const mockDuplicateConnection = sinon.fake.resolves(null);
+      render(
+        <ConnectionMenu
+          connectionString={'mongodb://kaleesi'}
+          duplicateConnection={mockDuplicateConnection}
+          removeConnection={() => true}
+          connectionInfo={connectionInfo}
+          iconColor="#EAEAEA"
+        />
+      );
+
+      fireEvent(
+        screen.getByRole('button'),
+        new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+        })
+      );
+      const duplicateConnectionButton = screen.getByText('Duplicate');
+      fireEvent(
+        duplicateConnectionButton,
+        new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+        })
+      );
+      expect(mockDuplicateConnection.called).to.equal(true);
+    });
+  });
 });

packages/connections/src/components/connection-list/connection-menu.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useReducer } from 'react';
+import React, { useEffect, useRef, useReducer, useState } from 'react';
 import {
   IconButton,
   Icon,
@@ -10,7 +10,7 @@ import {
   css,
   cx,
 } from '@mongodb-js/compass-components';
-
+import { ConnectionInfo } from 'mongodb-data-service';
 const dropdownButtonStyles = css({
   position: 'absolute',
   right: spacing[1],
@@ -74,15 +74,21 @@ function reducer(state: State, action: Action): State {
 function ConnectionMenu({
   connectionString,
   iconColor,
+  connectionInfo,
+  duplicateConnection,
+  removeConnection,
 }: {
   connectionString: string;
   iconColor: string;
+  connectionInfo: ConnectionInfo;
+  duplicateConnection: (connectionInfo: ConnectionInfo) => void;
+  removeConnection: (connectionInfo: ConnectionInfo) => void;
 }): React.ReactElement {
   const [{ error, toastOpen, toastVariant }, dispatch] = useReducer(reducer, {
     ...defaultToastState,
   });
   const toastHideTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
-
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
   function startToastHideTimeout() {
     if (toastHideTimeout.current) {
       // If we're currently showing a toast, cancel that previous timeout.
@@ -164,10 +170,30 @@ function ConnectionMenu({
             <Icon glyph="Ellipsis" />
           </IconButton>
         }
+        open={menuIsOpen}
+        setOpen={setMenuIsOpen}
       >
-        <MenuItem onClick={() => copyConnectionString(connectionString)}>
+        <MenuItem
+          onClick={async () => {
+            await copyConnectionString(connectionString);
+            setMenuIsOpen(false);
+          }}
+        >
           Copy Connection String
         </MenuItem>
+        {connectionInfo.favorite && (
+          <MenuItem
+            onClick={() => {
+              duplicateConnection(connectionInfo);
+              setMenuIsOpen(false);
+            }}
+          >
+            Duplicate
+          </MenuItem>
+        )}
+        <MenuItem onClick={() => removeConnection(connectionInfo)}>
+          Remove
+        </MenuItem>
       </Menu>
     </>
   );

packages/connections/src/components/connection-list/connection.tsx

@@ -126,11 +126,15 @@ function Connection({
   connectionInfo,
   onClick,
   onDoubleClick,
+  duplicateConnection,
+  removeConnection,
 }: {
   isActive: boolean;
   connectionInfo: ConnectionInfo;
   onClick: () => void;
   onDoubleClick: (connectionInfo: ConnectionInfo) => void;
+  duplicateConnection: (connectionInfo: ConnectionInfo) => void;
+  removeConnection: (connectionInfo: ConnectionInfo) => void;
 }): React.ReactElement {
   const connectionTitle = getConnectionTitle(connectionInfo);
   const {
@@ -189,7 +193,10 @@ function Connection({
               ? uiColors.gray.dark3
               : uiColors.white
           }
-          connectionString={connectionString}
+          connectionString={connectionInfo.connectionOptions.connectionString}
+          connectionInfo={connectionInfo}
+          duplicateConnection={duplicateConnection}
+          removeConnection={removeConnection}
         />
       </div>
     </div>

packages/connections/src/components/connections.tsx

@@ -77,6 +77,8 @@ function Connections({
       hideStoreConnectionError,
       setActiveConnectionById,
       removeAllRecentsConnections,
+      removeConnection,
+      duplicateConnection,
     },
   ] = useConnections(onConnected, connectionStorage, connectFn);
 
@@ -94,6 +96,8 @@ function Connections({
         setActiveConnectionId={setActiveConnectionById}
         onConnectionDoubleClicked={connect}
         removeAllRecentsConnections={removeAllRecentsConnections}
+        removeConnection={removeConnection}
+        duplicateConnection={duplicateConnection}
       />
       <div className={connectItemContainerStyles}>
         {storeConnectionError && (

packages/connections/src/components/resizeable-sidebar.tsx

@@ -36,13 +36,17 @@ function ResizableSidebar({
   setActiveConnectionId,
   onConnectionDoubleClicked,
   removeAllRecentsConnections,
+  duplicateConnection,
+  removeConnection,
 }: {
   activeConnectionId?: string;
   connections: ConnectionInfo[];
   createNewConnection: () => void;
   setActiveConnectionId: (newConnectionId?: string) => void;
   onConnectionDoubleClicked: (connectionInfo: ConnectionInfo) => void;
   removeAllRecentsConnections: () => void;
+  duplicateConnection: (connectionInfo: ConnectionInfo) => void;
+  removeConnection: (connectionInfo: ConnectionInfo) => void;
 }): React.ReactElement {
   const [width, setWidth] = useState(initialSidebarWidth);
 
@@ -61,6 +65,8 @@ function ResizableSidebar({
         setActiveConnectionId={setActiveConnectionId}
         onDoubleClick={onConnectionDoubleClicked}
         removeAllRecentsConnections={removeAllRecentsConnections}
+        removeConnection={removeConnection}
+        duplicateConnection={duplicateConnection}
       />
       <ResizeHandle
         onChange={(newWidth) => setWidth(newWidth)}