fix(web, connections): filter out paused clusters; cleanup connections on plugin deactivate COMPASS-8510 CLOUDP-284226 (#6500)

* fix(web, connections): filter out paused clusters; cleanup connections on plugin deactivate

* chore(connections): fix test

Author: gribnoysup

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+  createDefaultConnectionInfo,
+  render,
+} from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+
+describe('CompassConnections', function () {
+  it('cleans-up connections when unmounted', async function () {
+    const conn1 = createDefaultConnectionInfo();
+    const conn2 = createDefaultConnectionInfo();
+
+    const result = render(
+      <div>
+        {/* it's a bit weird, but testing-library-compass already renders CompassConnections for us */}
+      </div>,
+      { connections: [conn1, conn2] }
+    );
+
+    await result.connectionsStore.actions.connect(conn1);
+
+    expect(
+      result.connectionsStore.getState().connections.byId[conn1.id]
+    ).to.have.property('status', 'connected');
+
+    result.unmount();
+
+    expect(
+      result.connectionsStore.getState().connections.byId[conn1.id]
+    ).to.have.property('status', 'disconnected');
+  });
+});

packages/compass-connections/src/index.tsx

@@ -2,6 +2,7 @@ import { registerHadronPlugin } from 'hadron-app-registry';
 import {
   autoconnectCheck,
   configureStore,
+  disconnect,
   loadConnections,
 } from './stores/connections-store-redux';
 import React, { useContext, useRef } from 'react';
@@ -46,7 +47,7 @@ const CompassConnectionsPlugin = registerHadronPlugin(
     activate(
       initialProps,
       { logger, preferences, connectionStorage, track },
-      helpers
+      { addCleanup, cleanup }
     ) {
       const store = configureStore(initialProps.preloadStorageConnectionInfos, {
         logger,
@@ -67,9 +68,16 @@ const CompassConnectionsPlugin = registerHadronPlugin(
         }
       });
 
+      // Stop all connections on disconnect
+      addCleanup(() => {
+        for (const connectionId of store.getState().connections.ids) {
+          store.dispatch(disconnect(connectionId));
+        }
+      });
+
       return {
         store,
-        deactivate: helpers.cleanup,
+        deactivate: cleanup,
         context: ConnectionsStoreContext,
       };
     },

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

@@ -1423,6 +1423,10 @@ function getCurrentConnectionInfo(
   return state.connections.byId[connectionId]?.info;
 }
 
+function getCurrentConnectionStatus(state: State, connectionId: ConnectionId) {
+  return state.connections.byId[connectionId]?.status;
+}
+
 /**
  * Returns the number of active connections. We count in-progress connections
  * as "active" to make sure that the maximum connection allowed check takes
@@ -1967,15 +1971,21 @@ const cleanupConnection = (
       'Initiating disconnect attempt'
     );
 
+    const currentStatus = getCurrentConnectionStatus(getState(), connectionId);
+
     // We specifically want to track Disconnected even when it's not really
     // triggered by user at all, so we put it in the cleanup function that is
     // called every time you disconnect, or remove a connection, or all of them,
-    // or close the app
-    track(
-      'Connection Disconnected',
-      {},
-      getCurrentConnectionInfo(getState(), connectionId)
-    );
+    // or close the app. Only track when connection is either connected or
+    // connecting, we might be calling this on something that was never
+    // connected
+    if (currentStatus === 'connected' || currentStatus === 'connecting') {
+      track(
+        'Connection Disconnected',
+        {},
+        getCurrentConnectionInfo(getState(), connectionId)
+      );
+    }
 
     const { closeConnectionStatusToast } = getNotificationTriggers(
       preferences.getPreferences().enableMultipleConnectionSystem

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

@@ -470,6 +470,8 @@ describe('useConnections', function () {
           preferences: defaultPreferences,
         });
 
+      await connectionsStore.actions.connect(mockConnections[0]);
+
       result.current.removeConnection(mockConnections[0].id);
 
       await waitFor(() => {

packages/compass-web/src/connection-storage.tsx

@@ -37,6 +37,7 @@ type ClusterDescription = {
   state: string;
   deploymentItemName: string;
   replicationSpecList?: ReplicationSpec[];
+  isPaused?: boolean;
 };
 
 export type ClusterDescriptionWithDataProcessingRegion = ClusterDescription & {
@@ -250,7 +251,7 @@ class AtlasCloudConnectionStorage
                 // account in the UI for a special state of a deployment as
                 // clusters can become inactive during their runtime and it's
                 // valuable UI info to display
-                return !!description.srvAddress;
+                return !description.isPaused && !!description.srvAddress;
               })
               .map(async (description) => {
                 // Even though nds/clusters will list serverless clusters, to get