Skip to content

Commit 779ff82

Browse files
kmruizkmruiz
authored
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
1 parent 4c531a1 commit 779ff82

File tree

25 files changed

+1084
-139
lines changed

25 files changed

+1084
-139
lines changed

Diff for: ‎package-lock.json

+92-67
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎packages/compass-components/src/components/item-action-controls.tsx

+48-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import React, { useRef, forwardRef, useCallback, useState } from 'react';
2-
import { Button, Icon, IconButton, Menu, MenuItem } from './leafygreen';
2+
import {
3+
Button,
4+
Icon,
5+
IconButton,
6+
Menu,
7+
MenuItem,
8+
MenuSeparator,
9+
} from './leafygreen';
310
import { Tooltip } from './tooltip';
411
import type { TooltipProps } from './tooltip';
512
import type { ButtonProps } from '@leafygreen-ui/button';
@@ -11,18 +18,30 @@ export type ItemAction<Action extends string> = {
1118
action: Action;
1219
label: string;
1320
icon: React.ReactChild;
21+
variant?: 'default' | 'destructive';
1422
};
1523

24+
export type ItemSeparator = { separator: true };
25+
1626
export type GroupedItemAction<Action extends string> = ItemAction<Action> & {
1727
tooltip?: string;
1828
tooltipProps?: TooltipProps;
1929
};
2030

21-
export type MenuAction<Action extends string> = {
22-
action: Action;
23-
label: string;
24-
icon?: React.ReactChild;
25-
};
31+
export type MenuAction<Action extends string> =
32+
| {
33+
action: Action;
34+
label: string;
35+
icon?: React.ReactChild;
36+
variant?: 'default' | 'destructive';
37+
}
38+
| ItemSeparator;
39+
40+
function isSeparatorMenuAction<T extends string, MA extends MenuAction<T>>(
41+
menuAction: MA | ItemSeparator
42+
): menuAction is ItemSeparator {
43+
return (menuAction as any).separator;
44+
}
2645

2746
const ItemActionButtonSize = {
2847
XSmall: 'xsmall',
@@ -216,7 +235,13 @@ export function ItemActionMenu<Action extends string>({
216235
);
217236
}}
218237
>
219-
{actions.map(({ action, label, icon }) => {
238+
{actions.map((menuAction, idx) => {
239+
if (isSeparatorMenuAction(menuAction)) {
240+
return <MenuSeparator key={`separator-${idx}`} />;
241+
}
242+
243+
const { action, label, icon, variant } = menuAction;
244+
220245
return (
221246
<MenuItem
222247
key={action}
@@ -225,6 +250,8 @@ export function ItemActionMenu<Action extends string>({
225250
data-menuitem={true}
226251
glyph={<ActionGlyph glyph={icon} size={iconSize} />}
227252
onClick={onClick}
253+
// @ts-expect-error This will compile when we upgrade leafy-green
254+
variant={variant || 'default'}
228255
>
229256
{label}
230257
</MenuItem>
@@ -245,7 +272,7 @@ export function ItemActionGroup<Action extends string>({
245272
isVisible = true,
246273
'data-testid': dataTestId,
247274
}: {
248-
actions: GroupedItemAction<Action>[];
275+
actions: (GroupedItemAction<Action> | ItemSeparator)[];
249276
onAction(actionName: Action): void;
250277
className?: string;
251278
iconClassName?: string;
@@ -273,7 +300,12 @@ export function ItemActionGroup<Action extends string>({
273300
className={cx(actionControlsStyle, className)}
274301
data-testid={dataTestId}
275302
>
276-
{actions.map(({ action, icon, label, tooltip, tooltipProps }) => {
303+
{actions.map((menuItem, idx) => {
304+
if (isSeparatorMenuAction(menuItem)) {
305+
return <MenuSeparator key={`separator-${idx}`} />;
306+
}
307+
308+
const { action, icon, label, tooltip, tooltipProps } = menuItem;
277309
const button = (
278310
<ItemActionButton
279311
key={action}
@@ -325,7 +357,7 @@ export function ItemActionControls<Action extends string>({
325357
'data-testid': dataTestId,
326358
}: {
327359
isVisible?: boolean;
328-
actions: ItemAction<Action>[];
360+
actions: (ItemAction<Action> | ItemSeparator)[];
329361
onAction(actionName: Action): void;
330362
className?: string;
331363
iconSize?: ItemActionButtonSize;
@@ -449,7 +481,12 @@ export function DropdownMenuButton<Action extends string>({
449481
);
450482
}}
451483
>
452-
{actions.map(({ action, label, icon }) => {
484+
{actions.map((menuAction, idx) => {
485+
if (isSeparatorMenuAction(menuAction)) {
486+
return <MenuSeparator key={`separator-${idx}`} />;
487+
}
488+
489+
const { action, label, icon } = menuAction;
453490
return (
454491
<MenuItem
455492
active={activeAction === action}

Diff for: ‎packages/compass-connections/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,16 @@
1919
"url": "https://github.com/mongodb-js/compass.git"
2020
},
2121
"files": [
22-
"dist"
22+
"dist",
23+
"provider.js",
24+
"provider.d.ts"
2325
],
2426
"license": "SSPL",
2527
"main": "dist/index.js",
2628
"compass:main": "src/index.ts",
2729
"compass:exports": {
28-
".": "./src/index.ts"
30+
".": "./src/index.ts",
31+
"./provider": "./src/provider.ts"
2932
},
3033
"types": "./dist/index.d.ts",
3134
"scripts": {
@@ -62,7 +65,6 @@
6265
"compass-preferences-model": "^2.18.1",
6366
"hadron-ipc": "^3.2.12",
6467
"lodash": "^4.17.21",
65-
"mongodb": "^6.3.0",
6668
"uuid": "^8.2.0"
6769
},
6870
"devDependencies": {
@@ -90,14 +92,12 @@
9092
"lodash": "^4.17.21",
9193
"mocha": "^10.2.0",
9294
"mongodb-build-info": "^1.7.0",
93-
"mongodb-cloud-info": "^2.1.1",
9495
"mongodb-connection-string-url": "^2.6.0",
9596
"mongodb-data-service": "^22.18.1",
9697
"nyc": "^15.1.0",
9798
"prettier": "^2.7.1",
9899
"react": "^17.0.2",
99100
"react-dom": "^17.0.2",
100-
"resolve-mongodb-srv": "^1.1.2",
101101
"sinon": "^9.2.3",
102102
"xvfb-maybe": "^0.2.1"
103103
}

Diff for: ‎packages/compass-connections/provider.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './dist/provider.d';

Diff for: ‎packages/compass-connections/provider.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('./dist/provider');

Diff for: ‎packages/compass-connections/src/components/connections.spec.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ async function loadSavedConnectionAndConnect(connectionInfo: ConnectionInfo) {
6666
describe('Connections Component', function () {
6767
let preferences: PreferencesAccess;
6868
let onConnectedSpy: sinon.SinonSpy;
69+
let onConnectionFailedSpy: sinon.SinonSpy;
70+
let onConnectionAttemptStartedSpy: sinon.SinonSpy;
6971

7072
before(async function () {
7173
preferences = await createSandboxFromDefaultPreferences();
@@ -74,6 +76,8 @@ describe('Connections Component', function () {
7476

7577
beforeEach(function () {
7678
onConnectedSpy = sinon.spy();
79+
onConnectionFailedSpy = sinon.spy();
80+
onConnectionAttemptStartedSpy = sinon.spy();
7781
});
7882

7983
afterEach(function () {
@@ -94,6 +98,8 @@ describe('Connections Component', function () {
9498
<ConnectionRepositoryContext.Provider value={connectionRepository}>
9599
<Connections
96100
onConnected={onConnectedSpy}
101+
onConnectionFailed={onConnectionFailedSpy}
102+
onConnectionAttemptStarted={onConnectionAttemptStartedSpy}
97103
appName="Test App Name"
98104
/>
99105
</ConnectionRepositoryContext.Provider>
@@ -187,6 +193,8 @@ describe('Connections Component', function () {
187193
<ToastArea>
188194
<Connections
189195
onConnected={onConnectedSpy}
196+
onConnectionFailed={onConnectionFailedSpy}
197+
onConnectionAttemptStarted={onConnectionAttemptStartedSpy}
190198
connectFn={mockConnectFn}
191199
appName="Test App Name"
192200
/>
@@ -365,6 +373,8 @@ describe('Connections Component', function () {
365373
<ToastArea>
366374
<Connections
367375
onConnected={onConnectedSpy}
376+
onConnectionFailed={onConnectionFailedSpy}
377+
onConnectionAttemptStarted={onConnectionAttemptStartedSpy}
368378
connectFn={mockConnectFn}
369379
appName="Test App Name"
370380
/>
@@ -503,6 +513,8 @@ describe('Connections Component', function () {
503513
<ToastArea>
504514
<Connections
505515
onConnected={onConnectedSpy}
516+
onConnectionFailed={onConnectionFailedSpy}
517+
onConnectionAttemptStarted={onConnectionAttemptStartedSpy}
506518
appName="Test App Name"
507519
/>
508520
</ToastArea>
@@ -534,6 +546,8 @@ describe('Connections Component', function () {
534546
<ToastArea>
535547
<Connections
536548
onConnected={onConnectedSpy}
549+
onConnectionFailed={onConnectionFailedSpy}
550+
onConnectionAttemptStarted={onConnectionAttemptStartedSpy}
537551
appName="Test App Name"
538552
/>
539553
</ToastArea>
@@ -559,6 +573,8 @@ describe('Connections Component', function () {
559573
<ToastArea>
560574
<Connections
561575
onConnected={onConnectedSpy}
576+
onConnectionFailed={onConnectionFailedSpy}
577+
onConnectionAttemptStarted={onConnectionAttemptStartedSpy}
562578
connectionStorage={mockStorage}
563579
appName="Test App Name"
564580
/>

Diff for: ‎packages/compass-connections/src/components/connections.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,8 @@ const formCardLightThemeStyles = css({
8686
function Connections({
8787
appRegistry,
8888
onConnected,
89+
onConnectionFailed,
90+
onConnectionAttemptStarted,
8991
isConnected,
9092
appName,
9193
getAutoConnectInfo,
@@ -96,6 +98,8 @@ function Connections({
9698
connectionInfo: ConnectionInfo,
9799
dataService: DataService
98100
) => void;
101+
onConnectionFailed: (connectionInfo: ConnectionInfo, error: Error) => void;
102+
onConnectionAttemptStarted: (connectionInfo: ConnectionInfo) => void;
99103
isConnected: boolean;
100104
appName: string;
101105
getAutoConnectInfo?: () => Promise<ConnectionInfo | undefined>;
@@ -122,6 +126,8 @@ function Connections({
122126
reloadConnections,
123127
} = useConnections({
124128
onConnected,
129+
onConnectionFailed,
130+
onConnectionAttemptStarted,
125131
isConnected,
126132
connectFn,
127133
appName,

Diff for: ‎packages/compass-connections/src/provider.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { useConnections } from './stores/connections-store';

Diff for: ‎packages/compass-connections/src/stores/connections-store.spec.ts

+26
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,8 @@ describe('use-connections hook', function () {
9696
const { result } = renderHookWithContext(() =>
9797
useConnections({
9898
onConnected: noop,
99+
onConnectionFailed: noop,
100+
onConnectionAttemptStarted: noop,
99101
connectFn: noop,
100102
appName: 'Test App Name',
101103
})
@@ -133,6 +135,8 @@ describe('use-connections hook', function () {
133135
const { result } = renderHookWithContext(() =>
134136
useConnections({
135137
onConnected: noop,
138+
onConnectionFailed: noop,
139+
onConnectionAttemptStarted: noop,
136140
connectFn: noop,
137141
appName: 'Test App Name',
138142
})
@@ -204,6 +208,8 @@ describe('use-connections hook', function () {
204208
const { result } = renderHookWithContext(() =>
205209
useConnections({
206210
onConnected: noop,
211+
onConnectionFailed: noop,
212+
onConnectionAttemptStarted: noop,
207213
connectFn: noop,
208214
appName: 'Test App Name',
209215
})
@@ -245,6 +251,8 @@ describe('use-connections hook', function () {
245251
const { result } = renderHookWithContext(() =>
246252
useConnections({
247253
onConnected,
254+
onConnectionFailed: noop,
255+
onConnectionAttemptStarted: noop,
248256
connectionRepository,
249257
connectFn: () => Promise.resolve({} as any),
250258
appName: 'Test App Name',
@@ -269,6 +277,8 @@ describe('use-connections hook', function () {
269277
const { result } = renderHookWithContext(() =>
270278
useConnections({
271279
onConnected,
280+
onConnectionFailed: noop,
281+
onConnectionAttemptStarted: noop,
272282
connectionRepository,
273283
connectFn: () => Promise.resolve({} as any),
274284
appName: 'Test App Name',
@@ -301,6 +311,8 @@ describe('use-connections hook', function () {
301311
const { result } = renderHookWithContext(() =>
302312
useConnections({
303313
onConnected: noop,
314+
onConnectionFailed: noop,
315+
onConnectionAttemptStarted: noop,
304316
connectFn: noop,
305317
appName: 'Test App Name',
306318
})
@@ -360,6 +372,8 @@ describe('use-connections hook', function () {
360372
const { result } = renderHookWithContext(() =>
361373
useConnections({
362374
onConnected: noop,
375+
onConnectionFailed: noop,
376+
onConnectionAttemptStarted: noop,
363377
connectFn: noop,
364378
appName: 'Test App Name',
365379
})
@@ -390,6 +404,8 @@ describe('use-connections hook', function () {
390404
const { result } = renderHookWithContext(() =>
391405
useConnections({
392406
onConnected: noop,
407+
onConnectionFailed: noop,
408+
onConnectionAttemptStarted: noop,
393409
connectFn: noop,
394410
appName: 'Test App Name',
395411
})
@@ -428,6 +444,8 @@ describe('use-connections hook', function () {
428444
const { result } = renderHookWithContext(() =>
429445
useConnections({
430446
onConnected: noop,
447+
onConnectionFailed: noop,
448+
onConnectionAttemptStarted: noop,
431449
connectFn: noop,
432450
appName: 'Test App Name',
433451
})
@@ -514,6 +532,8 @@ describe('use-connections hook', function () {
514532
const { result } = renderHookWithContext(() =>
515533
useConnections({
516534
onConnected: noop,
535+
onConnectionFailed: noop,
536+
onConnectionAttemptStarted: noop,
517537
connectFn: noop,
518538
appName: 'Test App Name',
519539
})
@@ -538,6 +558,8 @@ describe('use-connections hook', function () {
538558
const { result } = renderHookWithContext(() =>
539559
useConnections({
540560
onConnected: noop,
561+
onConnectionFailed: noop,
562+
onConnectionAttemptStarted: noop,
541563
connectFn: noop,
542564
appName: 'Test App Name',
543565
})
@@ -570,6 +592,8 @@ describe('use-connections hook', function () {
570592
const { result } = renderHookWithContext(() =>
571593
useConnections({
572594
onConnected: noop,
595+
onConnectionFailed: noop,
596+
onConnectionAttemptStarted: noop,
573597
connectFn: noop,
574598
appName: 'Test App Name',
575599
})
@@ -624,6 +648,8 @@ describe('use-connections hook', function () {
624648
const { result } = renderHookWithContext(() =>
625649
useConnections({
626650
onConnected: noop,
651+
onConnectionFailed: noop,
652+
onConnectionAttemptStarted: noop,
627653
connectFn: noop,
628654
appName: 'Test App Name',
629655
})

0 commit comments

Comments
 (0)