Skip to content

Commit a8b22f4

Browse files
kmruizkmruiz
authored
chore: extract an interface named ConnectionRepository and adapt the current connection loader to use it. (#5476)
* chore: adapting ConnectionInfo to the new requirements * chore: spike refactor * chore: clean up and refactor connection store * chore: some clean up * chore: refactor ConnectionInfo so it's simpler * chore: refactor so it works with the current format of ConnectionInfo * chore: fix linting issues * chore: extract references to the ConnectionStorage and ConnectionProvider as react context * chore: remove deprecation warning * chore: fix test name * chore: fix linting issues: * chore: fixing linting issues * chore: fix tests * chore: fix formatting * chore: fix linting issues * chore: fix latest linting issues, likely * chore: rename methods to be clear * chore: use localeCompare, it just does the same * chore: refactor to use ConnectionRepository, better naming * chore: linter complains * chore: linting * chore: fix autoconnect tests * chore: add todo * chore: fix clipboard tests * chore: change name to non favourite connections * chore: remove dns resolution code * chore: extract providers to their own file * chore: fix test references * chore: rename to keep convention * chore: fix dependency to connection storage * chore: linting * chore: fix oidc tests * chore: fix linting issues * chore: make the migrate function pure * chore: fix typing errors * chore: fix typings * chore: add tests and use a normalised version of the connection
1 parent 708287e commit a8b22f4

File tree

26 files changed

+894
-372
lines changed

26 files changed

+894
-372
lines changed

‎package-lock.json‎

Lines changed: 7 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/compass-connections/src/components/connection-list/connection-list.spec.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ for (let i = 0; i < 5; i++) {
2424
});
2525
}
2626

27-
const mockFavorites = [
27+
const mockFavorites: ConnectionInfo[] = [
2828
{
2929
id: 'mock-connection-atlas',
3030
connectionOptions: {
@@ -35,6 +35,7 @@ const mockFavorites = [
3535
name: 'Atlas test',
3636
color: '#d4366e',
3737
},
38+
savedConnectionType: 'favorite',
3839
lastUsed: new Date(),
3940
},
4041
{
@@ -46,6 +47,7 @@ const mockFavorites = [
4647
name: 'super long favorite name - super long favorite name - super long favorite name - super long favorite name',
4748
color: '#5fc86e',
4849
},
50+
savedConnectionType: 'favorite',
4951
lastUsed: new Date(),
5052
},
5153
{
@@ -57,13 +59,15 @@ const mockFavorites = [
5759
name: 'favorite',
5860
color: '#5fc86e',
5961
},
62+
savedConnectionType: 'favorite',
6063
lastUsed: new Date(),
6164
},
6265
{
6366
id: 'mock-connection-invalid string',
6467
connectionOptions: {
6568
connectionString: 'invalid connection string',
6669
},
70+
savedConnectionType: 'recent',
6771
lastUsed: new Date(),
6872
},
6973
];

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -139,14 +139,14 @@ const colorIndicatorStyles = css({
139139
});
140140

141141
function FavoriteColorIndicator({
142-
favorite,
142+
color,
143143
className,
144144
}: {
145-
favorite?: ConnectionInfo['favorite'];
145+
color?: string;
146146
className?: string;
147147
}): React.ReactElement {
148148
const { connectionColorToHex } = useConnectionColor();
149-
const favoriteColorHex = connectionColorToHex(favorite?.color);
149+
const favoriteColorHex = connectionColorToHex(color);
150150

151151
return (
152152
<div
@@ -194,6 +194,7 @@ function Connection({
194194
const connectionTitle = getConnectionTitle(connectionInfo);
195195
const {
196196
connectionOptions: { connectionString },
197+
savedConnectionType,
197198
favorite,
198199
lastUsed,
199200
} = connectionInfo;
@@ -292,25 +293,23 @@ function Connection({
292293
onClick={onClick}
293294
onDoubleClick={() => onDoubleClick(connectionInfo)}
294295
>
295-
<FavoriteColorIndicator favorite={connectionInfo.favorite} />
296+
<FavoriteColorIndicator color={favorite?.color} />
296297
<ConnectionIcon
297298
color={titleColor}
298299
connectionString={connectionString}
299300
/>
300301
<H3
301302
className={connectionTitleStyles}
302303
style={{ color: titleColor }}
303-
data-testid={`${favorite ? 'favorite' : 'recent'}-connection-title`}
304+
data-testid={`${savedConnectionType}-connection-title`}
304305
title={connectionTitle}
305306
>
306307
{connectionTitle}
307308
</H3>
308309
<Description
309310
className={connectionDescriptionStyles}
310311
style={{ color: descriptionColor }}
311-
data-testid={`${
312-
favorite ? 'favorite' : 'recent'
313-
}-connection-description`}
312+
data-testid={`${savedConnectionType}-connection-description`}
314313
>
315314
{lastUsed ? lastUsed.toLocaleString('default', dateConfig) : 'Never'}
316315
</Description>

‎packages/compass-connections/src/components/connections.spec.tsx‎

Lines changed: 76 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ import { ToastArea } from '@mongodb-js/compass-components';
2121
import type { PreferencesAccess } from 'compass-preferences-model';
2222
import { createSandboxFromDefaultPreferences } from 'compass-preferences-model';
2323
import { PreferencesProvider } from 'compass-preferences-model/provider';
24+
import { ConnectionRepository } from '@mongodb-js/connection-storage/main';
25+
import {
26+
ConnectionRepositoryContext,
27+
ConnectionStorageContext,
28+
} from '@mongodb-js/connection-storage/provider';
2429

2530
function getMockConnectionStorage(mockConnections: ConnectionInfo[]) {
2631
return {
@@ -81,20 +86,24 @@ describe('Connections Component', function () {
8186
beforeEach(function () {
8287
const mockStorage = getMockConnectionStorage([]);
8388
loadConnectionsSpy = sinon.spy(mockStorage, 'loadAll');
89+
const connectionRepository = new ConnectionRepository(mockStorage);
8490

8591
render(
8692
<PreferencesProvider value={preferences}>
87-
<Connections
88-
onConnected={onConnectedSpy}
89-
connectionStorage={mockStorage}
90-
appName="Test App Name"
91-
/>
93+
<ConnectionStorageContext.Provider value={mockStorage}>
94+
<ConnectionRepositoryContext.Provider value={connectionRepository}>
95+
<Connections
96+
onConnected={onConnectedSpy}
97+
appName="Test App Name"
98+
/>
99+
</ConnectionRepositoryContext.Provider>
100+
</ConnectionStorageContext.Provider>
92101
</PreferencesProvider>
93102
);
94103
});
95104

96105
it('calls once to load the connections', function () {
97-
expect(loadConnectionsSpy.callCount).to.equal(1);
106+
expect(loadConnectionsSpy.callCount).to.equal(2); // favorite + recent
98107
});
99108

100109
it('renders the connect button from the connect-form', function () {
@@ -164,17 +173,21 @@ describe('Connections Component', function () {
164173
];
165174
mockStorage = getMockConnectionStorage(connections);
166175
sinon.replace(mockStorage, 'save', saveConnectionSpy);
176+
const connectionRepository = new ConnectionRepository(mockStorage);
167177

168178
render(
169179
<PreferencesProvider value={preferences}>
170-
<ToastArea>
171-
<Connections
172-
onConnected={onConnectedSpy}
173-
connectFn={mockConnectFn}
174-
connectionStorage={mockStorage}
175-
appName="Test App Name"
176-
/>
177-
</ToastArea>
180+
<ConnectionStorageContext.Provider value={mockStorage}>
181+
<ConnectionRepositoryContext.Provider value={connectionRepository}>
182+
<ToastArea>
183+
<Connections
184+
onConnected={onConnectedSpy}
185+
connectFn={mockConnectFn}
186+
appName="Test App Name"
187+
/>
188+
</ToastArea>
189+
</ConnectionRepositoryContext.Provider>
190+
</ConnectionStorageContext.Provider>
178191
</PreferencesProvider>
179192
);
180193

@@ -338,15 +351,21 @@ describe('Connections Component', function () {
338351
];
339352
const mockStorage = getMockConnectionStorage(connections);
340353
sinon.replace(mockStorage, 'save', saveConnectionSpy);
354+
const connectionRepository = new ConnectionRepository(mockStorage);
341355

342356
render(
343357
<PreferencesProvider value={preferences}>
344-
<Connections
345-
onConnected={onConnectedSpy}
346-
connectFn={mockConnectFn}
347-
connectionStorage={mockStorage}
348-
appName="Test App Name"
349-
/>
358+
<ConnectionStorageContext.Provider value={mockStorage}>
359+
<ConnectionRepositoryContext.Provider value={connectionRepository}>
360+
<ToastArea>
361+
<Connections
362+
onConnected={onConnectedSpy}
363+
connectFn={mockConnectFn}
364+
appName="Test App Name"
365+
/>
366+
</ToastArea>
367+
</ConnectionRepositoryContext.Provider>
368+
</ConnectionStorageContext.Provider>
350369
</PreferencesProvider>
351370
);
352371

@@ -469,15 +488,21 @@ describe('Connections Component', function () {
469488
sinon
470489
.stub(mockStorage, 'getLegacyConnections')
471490
.resolves([{ name: 'Connection1' }]);
491+
492+
const connectionRepository = new ConnectionRepository(mockStorage);
493+
472494
render(
473495
<PreferencesProvider value={preferences}>
474-
<ToastArea>
475-
<Connections
476-
onConnected={onConnectedSpy}
477-
connectionStorage={mockStorage}
478-
appName="Test App Name"
479-
/>
480-
</ToastArea>
496+
<ConnectionStorageContext.Provider value={mockStorage}>
497+
<ConnectionRepositoryContext.Provider value={connectionRepository}>
498+
<ToastArea>
499+
<Connections
500+
onConnected={onConnectedSpy}
501+
appName="Test App Name"
502+
/>
503+
</ToastArea>
504+
</ConnectionRepositoryContext.Provider>
505+
</ConnectionStorageContext.Provider>
481506
</PreferencesProvider>
482507
);
483508

@@ -494,15 +519,21 @@ describe('Connections Component', function () {
494519
sinon
495520
.stub(mockStorage, 'getLegacyConnections')
496521
.resolves([{ name: 'Connection2' }]);
522+
523+
const connectionRepository = new ConnectionRepository(mockStorage);
524+
497525
const { rerender } = render(
498526
<PreferencesProvider value={preferences}>
499-
<ToastArea>
500-
<Connections
501-
onConnected={onConnectedSpy}
502-
connectionStorage={mockStorage}
503-
appName="Test App Name"
504-
/>
505-
</ToastArea>
527+
<ConnectionStorageContext.Provider value={mockStorage}>
528+
<ConnectionRepositoryContext.Provider value={connectionRepository}>
529+
<ToastArea>
530+
<Connections
531+
onConnected={onConnectedSpy}
532+
appName="Test App Name"
533+
/>
534+
</ToastArea>
535+
</ConnectionRepositoryContext.Provider>
536+
</ConnectionStorageContext.Provider>
506537
</PreferencesProvider>
507538
);
508539

@@ -518,13 +549,17 @@ describe('Connections Component', function () {
518549

519550
rerender(
520551
<PreferencesProvider value={preferences}>
521-
<ToastArea>
522-
<Connections
523-
onConnected={onConnectedSpy}
524-
connectionStorage={mockStorage}
525-
appName="Test App Name"
526-
/>
527-
</ToastArea>
552+
<ConnectionStorageContext.Provider value={mockStorage}>
553+
<ConnectionRepositoryContext.Provider value={connectionRepository}>
554+
<ToastArea>
555+
<Connections
556+
onConnected={onConnectedSpy}
557+
connectionStorage={mockStorage}
558+
appName="Test App Name"
559+
/>
560+
</ToastArea>
561+
</ConnectionRepositoryContext.Provider>
562+
</ConnectionStorageContext.Provider>
528563
</PreferencesProvider>
529564
);
530565

0 commit comments

Comments
 (0)