Skip to content

Commit 1365e35

Browse files
mabaasitmabaasit
authored
feat(connection-info): setup provider to share current connection info COMPASS-7701 (#5547)
* setup provider * pass connectionInfo from sandox * undo changes * undo change * fix types * test
1 parent 318fea1 commit 1365e35

File tree

8 files changed

+175
-91
lines changed

8 files changed

+175
-91
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/compass-home/src/components/home.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ import {
5252
ConnectionStorageContext,
5353
ConnectionRepositoryContextProvider,
5454
} from '@mongodb-js/connection-storage/provider';
55+
import { ConnectionInfoProvider } from '@mongodb-js/connection-storage/provider';
5556

5657
resetGlobalCSS();
5758

@@ -385,14 +386,16 @@ function Home({
385386
scopeName="Connected Application"
386387
>
387388
<DataServiceProvider value={connectedDataService.current}>
388-
<CompassInstanceStorePlugin>
389-
<FieldStorePlugin>
390-
<Workspace
391-
connectionInfo={connectionInfo}
392-
onActiveWorkspaceTabChange={onWorkspaceChange}
393-
/>
394-
</FieldStorePlugin>
395-
</CompassInstanceStorePlugin>
389+
<ConnectionInfoProvider value={connectionInfo}>
390+
<CompassInstanceStorePlugin>
391+
<FieldStorePlugin>
392+
<Workspace
393+
connectionInfo={connectionInfo}
394+
onActiveWorkspaceTabChange={onWorkspaceChange}
395+
/>
396+
</FieldStorePlugin>
397+
</CompassInstanceStorePlugin>
398+
</ConnectionInfoProvider>
396399
</DataServiceProvider>
397400
</AppRegistryProvider>
398401
)}

‎packages/compass-web/package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,12 +72,13 @@
7272
"@mongodb-js/compass-field-store": "^9.0.19",
7373
"@mongodb-js/compass-generative-ai": "^0.8.1",
7474
"@mongodb-js/compass-indexes": "^5.23.1",
75+
"@mongodb-js/compass-logging": "^1.2.14",
7576
"@mongodb-js/compass-query-bar": "^8.25.1",
7677
"@mongodb-js/compass-schema": "^6.25.1",
7778
"@mongodb-js/compass-schema-validation": "^6.24.1",
7879
"@mongodb-js/compass-sidebar": "^5.24.1",
7980
"@mongodb-js/compass-workspaces": "^0.5.1",
80-
"@mongodb-js/compass-logging": "^1.2.14",
81+
"@mongodb-js/connection-storage": "^0.8.1",
8182
"@mongodb-js/eslint-config-compass": "^1.0.17",
8283
"@mongodb-js/mocha-config-compass": "^1.3.7",
8384
"@mongodb-js/prettier-config-compass": "^1.0.1",
@@ -93,15 +94,16 @@
9394
"@types/sinon-chai": "^3.2.5",
9495
"buffer": "^6.0.3",
9596
"chai": "^4.3.6",
96-
"debug": "^4.2.0",
9797
"compass-preferences-model": "^2.18.1",
98+
"debug": "^4.2.0",
9899
"depcheck": "^1.4.1",
99100
"eslint": "^7.25.0",
100101
"events": "^3.3.0",
101102
"hadron-app-registry": "^9.1.8",
102103
"mocha": "^10.2.0",
103104
"mongodb-connection-string-url": "^2.6.0",
104105
"mongodb-data-service": "^22.18.1",
106+
"mongodb-log-writer": "^1.3.0",
105107
"nyc": "^15.1.0",
106108
"path-browserify": "^1.0.1",
107109
"prettier": "^2.7.1",
@@ -110,7 +112,6 @@
110112
"sinon": "^17.0.1",
111113
"util": "^0.12.5",
112114
"vm-browserify": "^1.1.2",
113-
"whatwg-url": "^13.0.0",
114-
"mongodb-log-writer": "^1.3.0"
115+
"whatwg-url": "^13.0.0"
115116
}
116117
}

‎packages/compass-web/sandbox/index.tsx‎

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { LoggerAndTelemetryProvider } from '@mongodb-js/compass-logging/provider
2727
import { mongoLogId } from '@mongodb-js/compass-logging';
2828
import type { LoggerAndTelemetry } from '@mongodb-js/compass-logging';
2929
import type { MongoLogWriter } from 'mongodb-log-writer';
30+
import type { ConnectionInfo } from '@mongodb-js/connection-storage/renderer';
3031

3132
const sandboxContainerStyles = css({
3233
width: '100%',
@@ -84,7 +85,7 @@ const historyItemButtonStyles = css({
8485

8586
resetGlobalCSS();
8687

87-
function getHistory(): string[] {
88+
function getHistory(): ConnectionInfo[] {
8889
try {
8990
const b64Str = localStorage.getItem('CONNECTIONS_HISTORY');
9091
if (!b64Str) {
@@ -139,11 +140,16 @@ const App = () => {
139140
}
140141
return { type: 'Databases' };
141142
});
142-
const [connectionsHistory, setConnectionsHistory] = useState<string[]>(() => {
143+
const [connectionsHistory, setConnectionsHistory] = useState<
144+
ConnectionInfo[]
145+
>(() => {
143146
return getHistory();
144147
});
145148
const [focused, setFocused] = useState(false);
146149
const [connectionString, setConnectionString] = useState('');
150+
const [connectionInfo, setConnectionInfo] = useState<ConnectionInfo | null>(
151+
null
152+
);
147153
const [openCompassWeb, setOpenCompassWeb] = useState(false);
148154
const [
149155
connectionStringValidationResult,
@@ -165,10 +171,22 @@ const App = () => {
165171
const onConnectClick = useCallback(() => {
166172
setOpenCompassWeb(true);
167173
setConnectionsHistory((history) => {
168-
if (history.includes(connectionString)) {
174+
const info = history.find(
175+
(info) => info.connectionOptions.connectionString === connectionString
176+
);
177+
if (info) {
178+
setConnectionInfo(info);
169179
return history;
170180
}
171-
history.unshift(connectionString);
181+
182+
const newInfo: ConnectionInfo = {
183+
id: Math.random().toString(36).slice(2),
184+
connectionOptions: {
185+
connectionString,
186+
},
187+
};
188+
setConnectionInfo(newInfo);
189+
history.unshift(newInfo);
172190
if (history.length > 10) {
173191
history.pop();
174192
}
@@ -211,13 +229,13 @@ const App = () => {
211229
},
212230
});
213231

214-
if (openCompassWeb) {
232+
if (openCompassWeb && connectionInfo) {
215233
return (
216234
<Body as="div" className={sandboxContainerStyles}>
217235
<LoggerAndTelemetryProvider value={loggerProvider.current}>
218236
<ErrorBoundary>
219237
<CompassWeb
220-
connectionString={connectionString}
238+
connectionInfo={connectionInfo}
221239
initialWorkspaceTabs={[initialTab]}
222240
onActiveWorkspaceTabChange={(tab) => {
223241
let newPath: string;
@@ -290,22 +308,26 @@ const App = () => {
290308
<div>
291309
<Label htmlFor="connection-list">Connection history</Label>
292310
<ul id="connection-list" className={historyListStyles}>
293-
{connectionsHistory.map((connectionString) => {
311+
{connectionsHistory.map((connectionInfo) => {
294312
return (
295313
<KeylineCard
296314
as="li"
297-
key={connectionString}
315+
key={connectionInfo.id}
298316
className={historyListItemStyles}
299317
contentStyle="clickable"
300318
>
301319
<button
302320
className={historyItemButtonStyles}
303321
type="button"
304322
onClick={() => {
305-
onChangeConnectionString(connectionString);
323+
onChangeConnectionString(
324+
connectionInfo.connectionOptions.connectionString
325+
);
306326
}}
307327
>
308-
{redactConnectionString(connectionString)}
328+
{redactConnectionString(
329+
connectionInfo.connectionOptions.connectionString
330+
)}
309331
</button>
310332
</KeylineCard>
311333
);

‎packages/compass-web/src/index.spec.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,10 @@ describe('CompassWeb', function () {
6363
) {
6464
return render(
6565
<CompassWeb
66-
connectionString="mongodb://localhost:27017"
66+
connectionInfo={{
67+
id: 'foo',
68+
connectionOptions: { connectionString: 'mongodb://localhost:27017' },
69+
}}
6770
onActiveWorkspaceTabChange={() => {}}
6871
{...props}
6972
// @ts-expect-error see component props description

0 commit comments

Comments
 (0)