feat(connections): show list of legacy connections COMPASS-7081 (#4714)

Author: mabaasit

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

@@ -24,7 +24,7 @@ function getMockConnectionStorage(mockConnections: ConnectionInfo[]) {
     loadAll: () => {
       return Promise.resolve(mockConnections);
     },
-    hasLegacyConnections: () => Promise.resolve(false),
+    getLegacyConnections: () => Promise.resolve([]),
     save: () => Promise.resolve(),
     delete: () => Promise.resolve(),
     load: (id: string) =>
@@ -448,7 +448,9 @@ describe('Connections Component', function () {
   context('when user has any legacy connection', function () {
     it('shows modal', async function () {
       const mockStorage = getMockConnectionStorage([]);
-      sinon.stub(mockStorage, 'hasLegacyConnections').resolves(true);
+      sinon
+        .stub(mockStorage, 'getLegacyConnections')
+        .resolves([{ name: 'Connection1' }]);
       render(
         <ToastArea>
           <Connections
@@ -458,14 +460,20 @@ describe('Connections Component', function () {
           />
         </ToastArea>
       );
+
       await waitFor(
         () => expect(screen.getByTestId('legacy-connections-modal')).to.exist
       );
+
+      const modal = screen.getByTestId('legacy-connections-modal');
+      expect(within(modal).getByText('Connection1')).to.exist;
     });
 
     it('does not show modal when user hides it', async function () {
       const mockStorage = getMockConnectionStorage([]);
-      sinon.stub(mockStorage, 'hasLegacyConnections').resolves(true);
+      sinon
+        .stub(mockStorage, 'getLegacyConnections')
+        .resolves([{ name: 'Connection2' }]);
       const { rerender } = render(
         <ToastArea>
           <Connections

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

@@ -11,6 +11,7 @@ import {
   ModalFooter,
   Checkbox,
   Body,
+  Banner,
 } from '@mongodb-js/compass-components';
 
 import type { ConnectionStorage } from '@mongodb-js/connection-storage/renderer';
@@ -20,11 +21,21 @@ const LEGACY_MODAL_STORAGE_KEY = 'hide_legacy_connections_modal';
 const listStyle = css({
   listStyle: 'decimal',
   paddingLeft: spacing[5],
+  li: {
+    marginTop: spacing[1],
+    marginBottom: spacing[1],
+  },
 });
 
 const bodyStyles = css({
-  paddingTop: spacing[3],
-  paddingBottom: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacing[3],
+});
+
+const bannerContentStyles = css({
+  maxHeight: spacing[6] * 2,
+  overflowY: 'scroll',
 });
 
 const footerStyles = css({
@@ -33,7 +44,7 @@ const footerStyles = css({
 });
 
 const useLegacyModel = (connectionStorage: typeof ConnectionStorage) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [connections, setConnections] = useState<{ name: string }[]>([]);
 
   const [isModalHiddenByUser, setIsModalHiddenByUser] = usePersistedState(
     LEGACY_MODAL_STORAGE_KEY,
@@ -42,16 +53,17 @@ const useLegacyModel = (connectionStorage: typeof ConnectionStorage) => {
 
   useEffect(() => {
     void connectionStorage
-      .hasLegacyConnections()
-      .then((hasLegacyConnections) => setIsModalOpen(hasLegacyConnections));
+      .getLegacyConnections()
+      .then((connections) => setConnections(connections));
   }, []);
 
   return {
-    isOpen: isModalOpen && !isModalHiddenByUser,
-    hideModal: () => setIsModalOpen(false),
+    isOpen: connections.length > 0 && !isModalHiddenByUser,
+    connections,
+    hideModal: () => setConnections([]),
     hideModalPermanently: () => {
       setIsModalHiddenByUser(true);
-      setIsModalOpen(false);
+      setConnections([]);
     },
   };
 };
@@ -62,7 +74,7 @@ export const LegacyConnectionsModal = ({
   connectionStorage: typeof ConnectionStorage;
 }) => {
   const [isHideModalChecked, setIsHideModalChecked] = useState(false);
-  const { hideModal, hideModalPermanently, isOpen } =
+  const { hideModal, hideModalPermanently, isOpen, connections } =
     useLegacyModel(connectionStorage);
 
   const onCloseModal = useCallback(() => {
@@ -83,8 +95,18 @@ export const LegacyConnectionsModal = ({
       <ModalBody className={bodyStyles}>
         <Body>
           Compass has identified legacy connections that are no longer supported
-          beyond v1.39.0. To migrate these connections:
+          beyond v1.39.0.
         </Body>
+        <Banner>
+          <div className={bannerContentStyles}>
+            <ul>
+              {connections.map(({ name }, index) => (
+                <li key={index}>{name}</li>
+              ))}
+            </ul>
+          </div>
+        </Banner>
+        <strong>To migrate these connections:</strong>
         <ol className={listStyle}>
           <li>
             <Body>

packages/compass/src/main/application.ts

@@ -142,7 +142,8 @@ class CompassApplication {
     track('Application Launched', async () => {
       let hasLegacyConnections: boolean;
       try {
-        hasLegacyConnections = await ConnectionStorage.hasLegacyConnections();
+        hasLegacyConnections =
+          (await ConnectionStorage.getLegacyConnections()).length > 0;
       } catch (e) {
         debug('Failed to check legacy connections', e);
         hasLegacyConnections = false;

packages/connection-storage/src/connection-storage.spec.ts

@@ -350,15 +350,15 @@ describe('ConnectionStorage', function () {
     });
   });
 
-  describe('hasLegacyConnections', function () {
+  describe('getLegacyConnections', function () {
     it('returns false if there are no legacy connections', async function () {
       const connectionInfo = getConnectionInfo();
       writeFakeConnection(tmpDir, {
         connectionInfo,
       });
-      const hasLegacyConnections =
-        await ConnectionStorage.hasLegacyConnections();
-      expect(hasLegacyConnections).to.be.false;
+      const getLegacyConnections =
+        await ConnectionStorage.getLegacyConnections();
+      expect(getLegacyConnections).to.have.lengthOf(0);
     });
 
     it('returns false if there are no favorite legacy connections', async function () {
@@ -377,9 +377,9 @@ describe('ConnectionStorage', function () {
         })
       );
 
-      const hasLegacyConnections =
-        await ConnectionStorage.hasLegacyConnections();
-      expect(hasLegacyConnections).to.be.false;
+      const getLegacyConnections =
+        await ConnectionStorage.getLegacyConnections();
+      expect(getLegacyConnections).to.have.lengthOf(0);
     });
 
     it('returns true if there are favorite legacy connections', async function () {
@@ -392,16 +392,17 @@ describe('ConnectionStorage', function () {
         JSON.stringify({
           _id,
           isFavorite: true,
+          name: 'Local 1',
           hosts: [{ host: 'localhost', port: 27017 }],
           readPreference: 'primary',
           port: 27017,
           hostname: 'localhost',
         })
       );
 
-      const hasLegacyConnections =
-        await ConnectionStorage.hasLegacyConnections();
-      expect(hasLegacyConnections).to.be.true;
+      const getLegacyConnections =
+        await ConnectionStorage.getLegacyConnections();
+      expect(getLegacyConnections).to.deep.equal([{ name: 'Local 1' }]);
     });
   });
 

packages/connection-storage/src/connection-storage.ts

@@ -50,7 +50,7 @@ export class ConnectionStorage {
     ipcExpose('ConnectionStorage', this, [
       'loadAll',
       'load',
-      'hasLegacyConnections',
+      'getLegacyConnections',
       'save',
       'delete',
       'deserializeConnections',
@@ -132,20 +132,21 @@ export class ConnectionStorage {
    * connection.connectionInfo  -> new connection
    * connection.isFavorite      -> legacy favorite connection
    */
-  static async hasLegacyConnections({
+  static async getLegacyConnections({
     signal,
   }: {
     signal?: AbortSignal;
-  } = {}): Promise<boolean> {
+  } = {}): Promise<{ name: string }[]> {
     throwIfAborted(signal);
     try {
-      return (
-        (await this.getConnections()).filter(
-          (x) => !x.connectionInfo && x.isFavorite
-        ).length > 0
+      const legacyConnections = (await this.getConnections()).filter(
+        (x) => !x.connectionInfo && x.isFavorite
       );
+      return legacyConnections.map((x) => ({
+        name: x.name,
+      }));
     } catch (e) {
-      return false;
+      return [];
     }
   }
 

packages/connection-storage/src/renderer.ts

@@ -9,7 +9,7 @@ export class ConnectionStorage {
     typeof ConnectionStorageMain,
     | 'loadAll'
     | 'load'
-    | 'hasLegacyConnections'
+    | 'getLegacyConnections'
     | 'save'
     | 'delete'
     | 'deserializeConnections'
@@ -18,7 +18,7 @@ export class ConnectionStorage {
   >('ConnectionStorage', [
     'loadAll',
     'load',
-    'hasLegacyConnections',
+    'getLegacyConnections',
     'save',
     'delete',
     'deserializeConnections',
@@ -28,7 +28,7 @@ export class ConnectionStorage {
 
   static loadAll = this.ipc.loadAll;
   static load = this.ipc.load;
-  static hasLegacyConnections = this.ipc.hasLegacyConnections;
+  static getLegacyConnections = this.ipc.getLegacyConnections;
   static save = this.ipc.save;
   static delete = this.ipc.delete;
   static deserializeConnections = this.ipc.deserializeConnections;