chore: show the list of saved connections in the new sidebar COMPASS-…

…7708 (#5552) * chore: draft structure * chore: add tests * chore: add tests to saved connection list * chore: fix linting issues * chore: disable multiple connections in compass web * chore: fix webpack web dependencies * chore: align to variable names * chore: use provider pattern * chore: move connection telemetry to home * chore: linting issues * chore: fix styles and linter * chore: fix styles so now scroll is in the list * chore: fix style issues * chore: fix tests and saved-connection icon styles * chore: fix styling * chore: fix linting issues * chore: fix sidebar styling * chore: remove debugs and extract telemetry to use a hook * chore: remove wrong provider * chore: remove unnecessary maxHeight * chore: it depends on the real telemetry
mongodb-js · Mar 14, 2024 · 779ff82 · 779ff82
1 parent 4c531a1
commit 779ff82
Show file tree

Hide file tree

Showing 25 changed files with 1,084 additions and 139 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/compass-components/src/components/item-action-controls.tsx b/packages/compass-components/src/components/item-action-controls.tsx
@@ -1,5 +1,12 @@
 import React, { useRef, forwardRef, useCallback, useState } from 'react';
-import { Button, Icon, IconButton, Menu, MenuItem } from './leafygreen';
+import {
+  Button,
+  Icon,
+  IconButton,
+  Menu,
+  MenuItem,
+  MenuSeparator,
+} from './leafygreen';
 import { Tooltip } from './tooltip';
 import type { TooltipProps } from './tooltip';
 import type { ButtonProps } from '@leafygreen-ui/button';
@@ -11,18 +18,30 @@ export type ItemAction<Action extends string> = {
   action: Action;
   label: string;
   icon: React.ReactChild;
+  variant?: 'default' | 'destructive';
 };
 
+export type ItemSeparator = { separator: true };
+
 export type GroupedItemAction<Action extends string> = ItemAction<Action> & {
   tooltip?: string;
   tooltipProps?: TooltipProps;
 };
 
-export type MenuAction<Action extends string> = {
-  action: Action;
-  label: string;
-  icon?: React.ReactChild;
-};
+export type MenuAction<Action extends string> =
+  | {
+      action: Action;
+      label: string;
+      icon?: React.ReactChild;
+      variant?: 'default' | 'destructive';
+    }
+  | ItemSeparator;
+
+function isSeparatorMenuAction<T extends string, MA extends MenuAction<T>>(
+  menuAction: MA | ItemSeparator
+): menuAction is ItemSeparator {
+  return (menuAction as any).separator;
+}
 
 const ItemActionButtonSize = {
   XSmall: 'xsmall',
@@ -216,7 +235,13 @@ export function ItemActionMenu<Action extends string>({
           );
         }}
       >
-        {actions.map(({ action, label, icon }) => {
+        {actions.map((menuAction, idx) => {
+          if (isSeparatorMenuAction(menuAction)) {
+            return <MenuSeparator key={`separator-${idx}`} />;
+          }
+
+          const { action, label, icon, variant } = menuAction;
+
           return (
             <MenuItem
               key={action}
@@ -225,6 +250,8 @@ export function ItemActionMenu<Action extends string>({
               data-menuitem={true}
               glyph={<ActionGlyph glyph={icon} size={iconSize} />}
               onClick={onClick}
+              // @ts-expect-error This will compile when we upgrade leafy-green
+              variant={variant || 'default'}
             >
               {label}
             </MenuItem>
@@ -245,7 +272,7 @@ export function ItemActionGroup<Action extends string>({
   isVisible = true,
   'data-testid': dataTestId,
 }: {
-  actions: GroupedItemAction<Action>[];
+  actions: (GroupedItemAction<Action> | ItemSeparator)[];
   onAction(actionName: Action): void;
   className?: string;
   iconClassName?: string;
@@ -273,7 +300,12 @@ export function ItemActionGroup<Action extends string>({
       className={cx(actionControlsStyle, className)}
       data-testid={dataTestId}
     >
-      {actions.map(({ action, icon, label, tooltip, tooltipProps }) => {
+      {actions.map((menuItem, idx) => {
+        if (isSeparatorMenuAction(menuItem)) {
+          return <MenuSeparator key={`separator-${idx}`} />;
+        }
+
+        const { action, icon, label, tooltip, tooltipProps } = menuItem;
         const button = (
           <ItemActionButton
             key={action}
@@ -325,7 +357,7 @@ export function ItemActionControls<Action extends string>({
   'data-testid': dataTestId,
 }: {
   isVisible?: boolean;
-  actions: ItemAction<Action>[];
+  actions: (ItemAction<Action> | ItemSeparator)[];
   onAction(actionName: Action): void;
   className?: string;
   iconSize?: ItemActionButtonSize;
@@ -449,7 +481,12 @@ export function DropdownMenuButton<Action extends string>({
         );
       }}
     >
-      {actions.map(({ action, label, icon }) => {
+      {actions.map((menuAction, idx) => {
+        if (isSeparatorMenuAction(menuAction)) {
+          return <MenuSeparator key={`separator-${idx}`} />;
+        }
+
+        const { action, label, icon } = menuAction;
         return (
           <MenuItem
             active={activeAction === action}

diff --git a/packages/compass-connections/package.json b/packages/compass-connections/package.json
@@ -19,13 +19,16 @@
     "url": "https://github.com/mongodb-js/compass.git"
   },
   "files": [
-    "dist"
+    "dist",
+    "provider.js",
+    "provider.d.ts"
   ],
   "license": "SSPL",
   "main": "dist/index.js",
   "compass:main": "src/index.ts",
   "compass:exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./provider": "./src/provider.ts"
   },
   "types": "./dist/index.d.ts",
   "scripts": {
@@ -62,7 +65,6 @@
     "compass-preferences-model": "^2.18.1",
     "hadron-ipc": "^3.2.12",
     "lodash": "^4.17.21",
-    "mongodb": "^6.3.0",
     "uuid": "^8.2.0"
   },
   "devDependencies": {
@@ -90,14 +92,12 @@
     "lodash": "^4.17.21",
     "mocha": "^10.2.0",
     "mongodb-build-info": "^1.7.0",
-    "mongodb-cloud-info": "^2.1.1",
     "mongodb-connection-string-url": "^2.6.0",
     "mongodb-data-service": "^22.18.1",
     "nyc": "^15.1.0",
     "prettier": "^2.7.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "resolve-mongodb-srv": "^1.1.2",
     "sinon": "^9.2.3",
     "xvfb-maybe": "^0.2.1"
   }

diff --git a/packages/compass-connections/provider.d.ts b/packages/compass-connections/provider.d.ts
@@ -0,0 +1 @@
+export * from './dist/provider.d';
diff --git a/packages/compass-connections/provider.js b/packages/compass-connections/provider.js
@@ -0,0 +1 @@
+module.exports = require('./dist/provider');
diff --git a/packages/compass-connections/src/components/connections.spec.tsx b/packages/compass-connections/src/components/connections.spec.tsx
@@ -66,6 +66,8 @@ async function loadSavedConnectionAndConnect(connectionInfo: ConnectionInfo) {
 describe('Connections Component', function () {
   let preferences: PreferencesAccess;
   let onConnectedSpy: sinon.SinonSpy;
+  let onConnectionFailedSpy: sinon.SinonSpy;
+  let onConnectionAttemptStartedSpy: sinon.SinonSpy;
 
   before(async function () {
     preferences = await createSandboxFromDefaultPreferences();
@@ -74,6 +76,8 @@ describe('Connections Component', function () {
 
   beforeEach(function () {
     onConnectedSpy = sinon.spy();
+    onConnectionFailedSpy = sinon.spy();
+    onConnectionAttemptStartedSpy = sinon.spy();
   });
 
   afterEach(function () {
@@ -94,6 +98,8 @@ describe('Connections Component', function () {
             <ConnectionRepositoryContext.Provider value={connectionRepository}>
               <Connections
                 onConnected={onConnectedSpy}
+                onConnectionFailed={onConnectionFailedSpy}
+                onConnectionAttemptStarted={onConnectionAttemptStartedSpy}
                 appName="Test App Name"
               />
             </ConnectionRepositoryContext.Provider>
@@ -187,6 +193,8 @@ describe('Connections Component', function () {
               <ToastArea>
                 <Connections
                   onConnected={onConnectedSpy}
+                  onConnectionFailed={onConnectionFailedSpy}
+                  onConnectionAttemptStarted={onConnectionAttemptStartedSpy}
                   connectFn={mockConnectFn}
                   appName="Test App Name"
                 />
@@ -365,6 +373,8 @@ describe('Connections Component', function () {
               <ToastArea>
                 <Connections
                   onConnected={onConnectedSpy}
+                  onConnectionFailed={onConnectionFailedSpy}
+                  onConnectionAttemptStarted={onConnectionAttemptStartedSpy}
                   connectFn={mockConnectFn}
                   appName="Test App Name"
                 />
@@ -503,6 +513,8 @@ describe('Connections Component', function () {
               <ToastArea>
                 <Connections
                   onConnected={onConnectedSpy}
+                  onConnectionFailed={onConnectionFailedSpy}
+                  onConnectionAttemptStarted={onConnectionAttemptStartedSpy}
                   appName="Test App Name"
                 />
               </ToastArea>
@@ -534,6 +546,8 @@ describe('Connections Component', function () {
               <ToastArea>
                 <Connections
                   onConnected={onConnectedSpy}
+                  onConnectionFailed={onConnectionFailedSpy}
+                  onConnectionAttemptStarted={onConnectionAttemptStartedSpy}
                   appName="Test App Name"
                 />
               </ToastArea>
@@ -559,6 +573,8 @@ describe('Connections Component', function () {
               <ToastArea>
                 <Connections
                   onConnected={onConnectedSpy}
+                  onConnectionFailed={onConnectionFailedSpy}
+                  onConnectionAttemptStarted={onConnectionAttemptStartedSpy}
                   connectionStorage={mockStorage}
                   appName="Test App Name"
                 />

diff --git a/packages/compass-connections/src/components/connections.tsx b/packages/compass-connections/src/components/connections.tsx
@@ -86,6 +86,8 @@ const formCardLightThemeStyles = css({
 function Connections({
   appRegistry,
   onConnected,
+  onConnectionFailed,
+  onConnectionAttemptStarted,
   isConnected,
   appName,
   getAutoConnectInfo,
@@ -96,6 +98,8 @@ function Connections({
     connectionInfo: ConnectionInfo,
     dataService: DataService
   ) => void;
+  onConnectionFailed: (connectionInfo: ConnectionInfo, error: Error) => void;
+  onConnectionAttemptStarted: (connectionInfo: ConnectionInfo) => void;
   isConnected: boolean;
   appName: string;
   getAutoConnectInfo?: () => Promise<ConnectionInfo | undefined>;
@@ -122,6 +126,8 @@ function Connections({
     reloadConnections,
   } = useConnections({
     onConnected,
+    onConnectionFailed,
+    onConnectionAttemptStarted,
     isConnected,
     connectFn,
     appName,

diff --git a/packages/compass-connections/src/provider.ts b/packages/compass-connections/src/provider.ts
@@ -0,0 +1 @@
+export { useConnections } from './stores/connections-store';
diff --git a/packages/compass-connections/src/stores/connections-store.spec.ts b/packages/compass-connections/src/stores/connections-store.spec.ts
@@ -96,6 +96,8 @@ describe('use-connections hook', function () {
       const { result } = renderHookWithContext(() =>
         useConnections({
           onConnected: noop,
+          onConnectionFailed: noop,
+          onConnectionAttemptStarted: noop,
           connectFn: noop,
           appName: 'Test App Name',
         })
@@ -133,6 +135,8 @@ describe('use-connections hook', function () {
       const { result } = renderHookWithContext(() =>
         useConnections({
           onConnected: noop,
+          onConnectionFailed: noop,
+          onConnectionAttemptStarted: noop,
           connectFn: noop,
           appName: 'Test App Name',
         })
@@ -204,6 +208,8 @@ describe('use-connections hook', function () {
       const { result } = renderHookWithContext(() =>
         useConnections({
           onConnected: noop,
+          onConnectionFailed: noop,
+          onConnectionAttemptStarted: noop,
           connectFn: noop,
           appName: 'Test App Name',
         })
@@ -245,6 +251,8 @@ describe('use-connections hook', function () {
       const { result } = renderHookWithContext(() =>
         useConnections({
           onConnected,
+          onConnectionFailed: noop,
+          onConnectionAttemptStarted: noop,
           connectionRepository,
           connectFn: () => Promise.resolve({} as any),
           appName: 'Test App Name',
@@ -269,6 +277,8 @@ describe('use-connections hook', function () {
       const { result } = renderHookWithContext(() =>
         useConnections({
           onConnected,
+          onConnectionFailed: noop,
+          onConnectionAttemptStarted: noop,
           connectionRepository,
           connectFn: () => Promise.resolve({} as any),
           appName: 'Test App Name',
@@ -301,6 +311,8 @@ describe('use-connections hook', function () {
         const { result } = renderHookWithContext(() =>
           useConnections({
             onConnected: noop,
+            onConnectionFailed: noop,
+            onConnectionAttemptStarted: noop,
             connectFn: noop,
             appName: 'Test App Name',
           })
@@ -360,6 +372,8 @@ describe('use-connections hook', function () {
         const { result } = renderHookWithContext(() =>
           useConnections({
             onConnected: noop,
+            onConnectionFailed: noop,
+            onConnectionAttemptStarted: noop,
             connectFn: noop,
             appName: 'Test App Name',
           })
@@ -390,6 +404,8 @@ describe('use-connections hook', function () {
         const { result } = renderHookWithContext(() =>
           useConnections({
             onConnected: noop,
+            onConnectionFailed: noop,
+            onConnectionAttemptStarted: noop,
             connectFn: noop,
             appName: 'Test App Name',
           })
@@ -428,6 +444,8 @@ describe('use-connections hook', function () {
         const { result } = renderHookWithContext(() =>
           useConnections({
             onConnected: noop,
+            onConnectionFailed: noop,
+            onConnectionAttemptStarted: noop,
             connectFn: noop,
             appName: 'Test App Name',
           })
@@ -514,6 +532,8 @@ describe('use-connections hook', function () {
       const { result } = renderHookWithContext(() =>
         useConnections({
           onConnected: noop,
+          onConnectionFailed: noop,
+          onConnectionAttemptStarted: noop,
           connectFn: noop,
           appName: 'Test App Name',
         })
@@ -538,6 +558,8 @@ describe('use-connections hook', function () {
       const { result } = renderHookWithContext(() =>
         useConnections({
           onConnected: noop,
+          onConnectionFailed: noop,
+          onConnectionAttemptStarted: noop,
           connectFn: noop,
           appName: 'Test App Name',
         })
@@ -570,6 +592,8 @@ describe('use-connections hook', function () {
       const { result } = renderHookWithContext(() =>
         useConnections({
           onConnected: noop,
+          onConnectionFailed: noop,
+          onConnectionAttemptStarted: noop,
           connectFn: noop,
           appName: 'Test App Name',
         })
@@ -624,6 +648,8 @@ describe('use-connections hook', function () {
       const { result } = renderHookWithContext(() =>
         useConnections({
           onConnected: noop,
+          onConnectionFailed: noop,
+          onConnectionAttemptStarted: noop,
           connectFn: noop,
           appName: 'Test App Name',
         })
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { useConnections } from './stores/connections-store';