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
mongodb-js · Mar 7, 2024 · 1365e35 · 1365e35
1 parent 318fea1
commit 1365e35
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 91 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/compass-home/src/components/home.tsx b/packages/compass-home/src/components/home.tsx
@@ -52,6 +52,7 @@ import {
   ConnectionStorageContext,
   ConnectionRepositoryContextProvider,
 } from '@mongodb-js/connection-storage/provider';
+import { ConnectionInfoProvider } from '@mongodb-js/connection-storage/provider';
 
 resetGlobalCSS();
 
@@ -385,14 +386,16 @@ function Home({
               scopeName="Connected Application"
             >
               <DataServiceProvider value={connectedDataService.current}>
-                <CompassInstanceStorePlugin>
-                  <FieldStorePlugin>
-                    <Workspace
-                      connectionInfo={connectionInfo}
-                      onActiveWorkspaceTabChange={onWorkspaceChange}
-                    />
-                  </FieldStorePlugin>
-                </CompassInstanceStorePlugin>
+                <ConnectionInfoProvider value={connectionInfo}>
+                  <CompassInstanceStorePlugin>
+                    <FieldStorePlugin>
+                      <Workspace
+                        connectionInfo={connectionInfo}
+                        onActiveWorkspaceTabChange={onWorkspaceChange}
+                      />
+                    </FieldStorePlugin>
+                  </CompassInstanceStorePlugin>
+                </ConnectionInfoProvider>
               </DataServiceProvider>
             </AppRegistryProvider>
           )}

diff --git a/packages/compass-web/package.json b/packages/compass-web/package.json
@@ -72,12 +72,13 @@
     "@mongodb-js/compass-field-store": "^9.0.19",
     "@mongodb-js/compass-generative-ai": "^0.8.1",
     "@mongodb-js/compass-indexes": "^5.23.1",
+    "@mongodb-js/compass-logging": "^1.2.14",
     "@mongodb-js/compass-query-bar": "^8.25.1",
     "@mongodb-js/compass-schema": "^6.25.1",
     "@mongodb-js/compass-schema-validation": "^6.24.1",
     "@mongodb-js/compass-sidebar": "^5.24.1",
     "@mongodb-js/compass-workspaces": "^0.5.1",
-    "@mongodb-js/compass-logging": "^1.2.14",
+    "@mongodb-js/connection-storage": "^0.8.1",
     "@mongodb-js/eslint-config-compass": "^1.0.17",
     "@mongodb-js/mocha-config-compass": "^1.3.7",
     "@mongodb-js/prettier-config-compass": "^1.0.1",
@@ -93,15 +94,16 @@
     "@types/sinon-chai": "^3.2.5",
     "buffer": "^6.0.3",
     "chai": "^4.3.6",
-    "debug": "^4.2.0",
     "compass-preferences-model": "^2.18.1",
+    "debug": "^4.2.0",
     "depcheck": "^1.4.1",
     "eslint": "^7.25.0",
     "events": "^3.3.0",
     "hadron-app-registry": "^9.1.8",
     "mocha": "^10.2.0",
     "mongodb-connection-string-url": "^2.6.0",
     "mongodb-data-service": "^22.18.1",
+    "mongodb-log-writer": "^1.3.0",
     "nyc": "^15.1.0",
     "path-browserify": "^1.0.1",
     "prettier": "^2.7.1",
@@ -110,7 +112,6 @@
     "sinon": "^17.0.1",
     "util": "^0.12.5",
     "vm-browserify": "^1.1.2",
-    "whatwg-url": "^13.0.0",
-    "mongodb-log-writer": "^1.3.0"
+    "whatwg-url": "^13.0.0"
   }
 }
diff --git a/packages/compass-web/sandbox/index.tsx b/packages/compass-web/sandbox/index.tsx
@@ -27,6 +27,7 @@ import { LoggerAndTelemetryProvider } from '@mongodb-js/compass-logging/provider
 import { mongoLogId } from '@mongodb-js/compass-logging';
 import type { LoggerAndTelemetry } from '@mongodb-js/compass-logging';
 import type { MongoLogWriter } from 'mongodb-log-writer';
+import type { ConnectionInfo } from '@mongodb-js/connection-storage/renderer';
 
 const sandboxContainerStyles = css({
   width: '100%',
@@ -84,7 +85,7 @@ const historyItemButtonStyles = css({
 
 resetGlobalCSS();
 
-function getHistory(): string[] {
+function getHistory(): ConnectionInfo[] {
   try {
     const b64Str = localStorage.getItem('CONNECTIONS_HISTORY');
     if (!b64Str) {
@@ -139,11 +140,16 @@ const App = () => {
     }
     return { type: 'Databases' };
   });
-  const [connectionsHistory, setConnectionsHistory] = useState<string[]>(() => {
+  const [connectionsHistory, setConnectionsHistory] = useState<
+    ConnectionInfo[]
+  >(() => {
     return getHistory();
   });
   const [focused, setFocused] = useState(false);
   const [connectionString, setConnectionString] = useState('');
+  const [connectionInfo, setConnectionInfo] = useState<ConnectionInfo | null>(
+    null
+  );
   const [openCompassWeb, setOpenCompassWeb] = useState(false);
   const [
     connectionStringValidationResult,
@@ -165,10 +171,22 @@ const App = () => {
   const onConnectClick = useCallback(() => {
     setOpenCompassWeb(true);
     setConnectionsHistory((history) => {
-      if (history.includes(connectionString)) {
+      const info = history.find(
+        (info) => info.connectionOptions.connectionString === connectionString
+      );
+      if (info) {
+        setConnectionInfo(info);
         return history;
       }
-      history.unshift(connectionString);
+
+      const newInfo: ConnectionInfo = {
+        id: Math.random().toString(36).slice(2),
+        connectionOptions: {
+          connectionString,
+        },
+      };
+      setConnectionInfo(newInfo);
+      history.unshift(newInfo);
       if (history.length > 10) {
         history.pop();
       }
@@ -211,13 +229,13 @@ const App = () => {
     },
   });
 
-  if (openCompassWeb) {
+  if (openCompassWeb && connectionInfo) {
     return (
       <Body as="div" className={sandboxContainerStyles}>
         <LoggerAndTelemetryProvider value={loggerProvider.current}>
           <ErrorBoundary>
             <CompassWeb
-              connectionString={connectionString}
+              connectionInfo={connectionInfo}
               initialWorkspaceTabs={[initialTab]}
               onActiveWorkspaceTabChange={(tab) => {
                 let newPath: string;
@@ -290,22 +308,26 @@ const App = () => {
               <div>
                 <Label htmlFor="connection-list">Connection history</Label>
                 <ul id="connection-list" className={historyListStyles}>
-                  {connectionsHistory.map((connectionString) => {
+                  {connectionsHistory.map((connectionInfo) => {
                     return (
                       <KeylineCard
                         as="li"
-                        key={connectionString}
+                        key={connectionInfo.id}
                         className={historyListItemStyles}
                         contentStyle="clickable"
                       >
                         <button
                           className={historyItemButtonStyles}
                           type="button"
                           onClick={() => {
-                            onChangeConnectionString(connectionString);
+                            onChangeConnectionString(
+                              connectionInfo.connectionOptions.connectionString
+                            );
                           }}
                         >
-                          {redactConnectionString(connectionString)}
+                          {redactConnectionString(
+                            connectionInfo.connectionOptions.connectionString
+                          )}
                         </button>
                       </KeylineCard>
                     );

diff --git a/packages/compass-web/src/index.spec.tsx b/packages/compass-web/src/index.spec.tsx
@@ -63,7 +63,10 @@ describe('CompassWeb', function () {
   ) {
     return render(
       <CompassWeb
-        connectionString="mongodb://localhost:27017"
+        connectionInfo={{
+          id: 'foo',
+          connectionOptions: { connectionString: 'mongodb://localhost:27017' },
+        }}
         onActiveWorkspaceTabChange={() => {}}
         {...props}
         // @ts-expect-error see component props description