chore(storage-mixin): connections from storage COMPASS-6948 COMPASS-6949 (#4647)

Co-authored-by: Anna Henningsen <[email protected]>

Author: mabaasit

.evergreen/functions.yml

@@ -169,6 +169,14 @@ functions:
           set -e
           eval $(.evergreen/print-compass-env.sh)
 
+          # Pre-built binaries for keytar do not support older RHEL versions.
+          # Since we have started importing keytar from top-level scripts in packages,
+          # re-built keytar before the bootstrap process so that it is always usable.
+          if [[ "$IS_RHEL" == "true" ]]; then
+            echo "Rebuilding packages for rhel"
+            npm run node-rebuild
+          fi
+
           # Prepare workspaces in provided scope
           npx lerna run bootstrap \
             --stream \

CONTRIBUTING.md

@@ -138,6 +138,6 @@ The root cause is native modules compiled for a different version of the runtime
 1. Modules have to be recompiled for the runtime they will be used in
 1. Due to npm workspaces hoisting all shared dependencies to the very root of the monorepo, all packages use the same modules imported from the same location
 
-This means that if you e.g., start Compass application locally it will recompile all native modules to work in Electron runtime, if you would try to run tests for `mongodb-connection-model` library right after that, tests would fail due to `keytar` library not being compatible with Node.js environment that the tests are running in.
+This means that if you e.g., start Compass application locally it will recompile all native modules to work in Electron runtime, if you would try to run tests for `@mongodb-js/connection-storage` library right after that, tests would fail due to `keytar` library not being compatible with Node.js environment that the tests are running in.
 
 If you run into this issue, make sure that native modules are rebuilt for whatever runtime you are planning to use at the moment. To help with that we provide two npm scripts: `npm run electron-rebuild` will recompile native modules to work with Electron and `npm run node-rebuild` will recompile them to work with Node.js.

README.md

@@ -72,7 +72,6 @@ Is there anything else you’d like to see in Compass? Let us know by submitting
 - [**hadron-reflux-store**](packages/reflux-store): Hadron Reflux Stores
 - [**hadron-type-checker**](packages/hadron-type-checker): Hadron Type Checker
 - [**mongodb-collection-model**](packages/collection-model): MongoDB collection model
-- [**mongodb-connection-model**](packages/connection-model): MongoDB connection model
 - [**mongodb-data-service**](packages/data-service): MongoDB Data Service
 - [**mongodb-database-model**](packages/database-model): MongoDB database model
 - [**mongodb-explain-compat**](packages/mongodb-explain-compat): Convert mongodb SBE explain output to 4.4 explain output

package-lock.json

@@ -25,6 +25,7 @@ function getMockConnectionStorage(
     loadAll: () => {
       return Promise.resolve(mockConnections);
     },
+    hasLegacyConnections: () => Promise.resolve(false),
     save: () => Promise.resolve(),
     delete: () => Promise.resolve(),
     load: (id: string) =>
@@ -444,4 +445,21 @@ describe('Connections Component', function () {
       });
     });
   });
+
+  it('shows toast when user has any legacy connection', async function () {
+    const mockStorage = getMockConnectionStorage([]);
+    sinon.stub(mockStorage, 'hasLegacyConnections').resolves(true);
+    render(
+      <ToastArea>
+        <Connections
+          onConnected={onConnectedSpy}
+          connectionStorage={mockStorage}
+          appName="Test App Name"
+        />
+      </ToastArea>
+    );
+    await waitFor(
+      () => expect(screen.getByTestId('toast-legacy-connections')).to.exist
+    );
+  });
 });

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   ImportConnectionsModal,
   ExportConnectionsModal,
@@ -8,6 +8,8 @@ import {
   ErrorBoundary,
   spacing,
   css,
+  openToast,
+  Link,
 } from '@mongodb-js/compass-components';
 import ConnectionForm from '@mongodb-js/connection-form';
 import type { DataService } from 'mongodb-data-service';
@@ -22,11 +24,14 @@ import Connecting from './connecting/connecting';
 import { useConnections } from '../stores/connections-store';
 import { cloneDeep } from 'lodash';
 import ConnectionList from './connection-list/connection-list';
+import { getStoragePaths } from '@mongodb-js/compass-utils';
 
 const { log, mongoLogId } = createLoggerAndTelemetry(
   'mongodb-compass:connections:connections'
 );
 
+const { basepath } = getStoragePaths() ?? {};
+
 type ConnectFn = typeof connect;
 
 export type { ConnectFn };
@@ -55,11 +60,56 @@ const formContainerStyles = css({
   height: '100%',
 });
 
+const toastListStyle = css({
+  listStyle: 'inherit',
+  paddingLeft: spacing[1] + spacing[2],
+});
+
+const MigrateLegacyConnectionDescription = () => (
+  <>
+    Compass has identified connections created with an older version, which are
+    no longer supported by the current version. To migrate these connections,
+    follow the steps below:
+    <ul className={toastListStyle}>
+      <li>
+        Install Compass{' '}
+        <Link
+          target="_blank"
+          hideExternalIcon
+          href="https://github.com/mongodb-js/compass/releases/tag/v1.39.0"
+        >
+          v1.39.0
+        </Link>{' '}
+        and{' '}
+        <Link
+          target="_blank"
+          hideExternalIcon
+          href="https://www.mongodb.com/docs/compass/current/connect/favorite-connections/import-export-ui/export/"
+        >
+          export all the connections
+        </Link>
+        .
+      </li>
+      <li>
+        Update Compass to the latest version and{' '}
+        <Link
+          target="_blank"
+          hideExternalIcon
+          href="https://www.mongodb.com/docs/compass/current/connect/favorite-connections/import-export-ui/import/"
+        >
+          import the connections
+        </Link>{' '}
+        exported.
+      </li>
+    </ul>
+  </>
+);
+
 function Connections({
   appRegistry,
   onConnected,
   isConnected,
-  connectionStorage = new ConnectionStorage(),
+  connectionStorage = new ConnectionStorage(basepath),
   appName,
   getAutoConnectInfo,
   connectFn = connect,
@@ -122,6 +172,25 @@ function Connections({
     []
   );
 
+  // Handle Legacy Connections toast.
+  const [hasSeenLegacyToast, setHasSeenLegacyToast] = useState(false);
+  useEffect(() => {
+    if (hasSeenLegacyToast) {
+      return;
+    }
+    void connectionStorage
+      .hasLegacyConnections()
+      .then((hasLegacyConnections) => {
+        if (hasLegacyConnections) {
+          openToast('legacy-connections', {
+            title: 'Legacy connections detected',
+            description: <MigrateLegacyConnectionDescription />,
+          });
+          setHasSeenLegacyToast(true);
+        }
+      });
+  }, [connectionStorage, hasSeenLegacyToast]);
+
   return (
     <div data-testid="connections-wrapper" className={connectStyles}>
       <ResizableSidebar>

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

@@ -217,7 +217,7 @@ describe('use-connections hook', function () {
       await waitFor(() => {
         // eslint-disable-next-line @typescript-eslint/unbound-method
         expect(mockConnectionStorage.delete).to.have.been.calledWith(
-          mockRecents[mockRecents.length - 1]
+          mockRecents[mockRecents.length - 1].id
         );
       });
     });

packages/compass-connections/src/stores/connections-store.spec.ts

@@ -344,7 +344,7 @@ export function useConnections({
   }
 
   async function removeConnection(connectionInfo: ConnectionInfo) {
-    await connectionStorage.delete(connectionInfo);
+    await connectionStorage.delete(connectionInfo.id);
     dispatch({
       type: 'set-connections',
       connections: connections.filter((conn) => conn.id !== connectionInfo.id),
@@ -437,7 +437,7 @@ export function useConnections({
           recentConnections.length >= MAX_RECENT_CONNECTIONS_LENGTH
         ) {
           await connectionStorage.delete(
-            recentConnections[recentConnections.length - 1]
+            recentConnections[recentConnections.length - 1].id
           );
         }
       } catch (err) {
@@ -700,7 +700,7 @@ export function useConnections({
         return !conn.favorite;
       });
       await Promise.all(
-        recentConnections.map((conn) => connectionStorage.delete(conn))
+        recentConnections.map((conn) => connectionStorage.delete(conn.id))
       );
       dispatch({
         type: 'set-connections',

packages/compass-connections/src/stores/connections-store.ts

@@ -61,6 +61,7 @@
     "@mongodb-js/compass-databases-navigation": "^1.10.0",
     "@mongodb-js/compass-logging": "^1.1.6",
     "@mongodb-js/compass-maybe-protect-connection-string": "^0.8.0",
+    "@mongodb-js/compass-utils": "^0.3.1",
     "@mongodb-js/connection-form": "^1.10.0",
     "@mongodb-js/connection-storage": "^0.1.0",
     "@mongodb-js/mongodb-redux-common": "^2.0.8",
@@ -73,6 +74,7 @@
     "@mongodb-js/compass-databases-navigation": "^1.10.0",
     "@mongodb-js/compass-logging": "^1.1.6",
     "@mongodb-js/compass-maybe-protect-connection-string": "^0.8.0",
+    "@mongodb-js/compass-utils": "^0.3.1",
     "@mongodb-js/connection-form": "^1.10.0",
     "@mongodb-js/connection-storage": "^0.1.0",
     "@mongodb-js/mongodb-redux-common": "^2.0.8",

packages/compass-sidebar/package.json

@@ -1,8 +1,11 @@
 import { ConnectionStorage } from '@mongodb-js/connection-storage';
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
+import { getStoragePaths } from '@mongodb-js/compass-utils';
 
 const { debug } = createLoggerAndTelemetry('COMPASS-SIDEBAR');
 
+const { basepath } = getStoragePaths() ?? {};
+
 /**
  * Change connection action name.
  */
@@ -22,7 +25,7 @@ export const INITIAL_STATE = {
       connectionString: 'mongodb://localhost:27017',
     },
   },
-  connectionStorage: new ConnectionStorage(),
+  connectionStorage: new ConnectionStorage(basepath),
 };
 
 async function saveConnectionInfo(connectionInfo, connectionStorage) {
@@ -79,7 +82,6 @@ const MAPPINGS = {
  * @param {String} state - The status state.
  * @param {Object} action - The action.
  *
- * @returns {String} The new state.
  */
 export default function reducer(state = INITIAL_STATE, action) {
   const fn = MAPPINGS[action.type];