From 3b30da4fc47c97798328487e3cc7ce7bb002835a Mon Sep 17 00:00:00 2001
From: Simon Zhu <simon.zhu@mongodb.com>
Date: Tue, 29 Apr 2025 21:22:53 -0400
Subject: [PATCH 01/14] init

---
 .../src/hooks/use-theme.tsx                   |  1 +
 .../src/base-navigation-item.tsx              | 37 +++++++++++++++++++
 .../src/item-actions.ts                       |  7 ++++
 .../src/navigation-item.tsx                   | 18 +++++++--
 .../src/styled-navigation-item.tsx            | 12 +++++-
 .../compass-web/src/connection-storage.tsx    | 22 +++++++----
 .../connection-info/src/connection-info.ts    |  2 +-
 7 files changed, 86 insertions(+), 13 deletions(-)

diff --git a/packages/compass-components/src/hooks/use-theme.tsx b/packages/compass-components/src/hooks/use-theme.tsx
index b91b1deea30..4f3dabe41bf 100644
--- a/packages/compass-components/src/hooks/use-theme.tsx
+++ b/packages/compass-components/src/hooks/use-theme.tsx
@@ -11,6 +11,7 @@ enum Theme {
 export function useDarkMode(localDarkMode?: boolean): boolean | undefined {
   const darkMode = useLeafyGreenDarkMode(localDarkMode);
   return darkMode.darkMode;
+  // return false;
 }
 
 interface WithDarkModeProps {
diff --git a/packages/compass-connections-navigation/src/base-navigation-item.tsx b/packages/compass-connections-navigation/src/base-navigation-item.tsx
index 0b39b0ca02b..30c26b7a2eb 100644
--- a/packages/compass-connections-navigation/src/base-navigation-item.tsx
+++ b/packages/compass-connections-navigation/src/base-navigation-item.tsx
@@ -5,12 +5,16 @@ import {
   css,
   ItemActionControls,
   cx,
+  Badge,
+  BadgeVariant,
 } from '@mongodb-js/compass-components';
 import { type Actions, ROW_HEIGHT } from './constants';
 import { ExpandButton } from './tree-item';
 import { type NavigationItemActions } from './item-actions';
+import type { SidebarTreeItem, SidebarActionableItem } from './tree-data';
 
 type NavigationBaseItemProps = {
+  item: SidebarTreeItem;
   name: string;
   isActive: boolean;
   isExpandVisible: boolean;
@@ -87,6 +91,7 @@ const actionControlsWrapperStyles = css({
 });
 
 export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
+  item,
   isActive,
   actionProps,
   name,
@@ -101,6 +106,26 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
   toggleExpand,
   children,
 }) => {
+  // TODO: add extra UI stuff here
+
+  let isDisabled = false;
+  let status = '';
+  let variant = BadgeVariant.LightGray;
+  if (item.type === 'connection') {
+    const connectionInfo = item.connectionInfo;
+    isDisabled =
+      connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
+      connectionInfo.atlasMetadata?.clusterState === 'PAUSED' ||
+      connectionInfo.atlasMetadata?.clusterState === 'CREATING';
+    if (isDisabled) {
+      status = connectionInfo.atlasMetadata?.clusterState;
+      if (status === 'CREATING') {
+        variant = BadgeVariant.Blue;
+      }
+      console.log(status);
+    }
+  }
+
   const [hoverProps, isHovered] = useHoverState();
   return (
     <div
@@ -127,6 +152,18 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
           {icon}
           <span title={name}>{name}</span>
         </div>
+        {isDisabled && (
+          <Badge
+            variant={variant}
+            className={css({
+              verticalAlign: 'middle',
+              marginLeft: spacing[100],
+            })}
+            data-testid="navigation-item-state-badge"
+          >
+            {status}
+          </Badge>
+        )}
         <div className={actionControlsWrapperStyles}>
           <ItemActionControls
             menuClassName={menuStyles}
diff --git a/packages/compass-connections-navigation/src/item-actions.ts b/packages/compass-connections-navigation/src/item-actions.ts
index 9e4f58c5b19..5097cdcfa14 100644
--- a/packages/compass-connections-navigation/src/item-actions.ts
+++ b/packages/compass-connections-navigation/src/item-actions.ts
@@ -146,6 +146,13 @@ export const notConnectedConnectionItemActions = ({
   connectionInfo: ConnectionInfo;
   connectionStatus: NotConnectedConnectionStatus;
 }): NavigationItemActions => {
+  if (
+    connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
+    connectionInfo.atlasMetadata?.clusterState === 'PAUSED' ||
+    connectionInfo.atlasMetadata?.clusterState === 'CREATING'
+  ) {
+    return [];
+  }
   const commonActions = commonConnectionItemActions({ connectionInfo });
   if (connectionStatus === 'connecting') {
     return commonActions;
diff --git a/packages/compass-connections-navigation/src/navigation-item.tsx b/packages/compass-connections-navigation/src/navigation-item.tsx
index 46b576b9576..e5e6e4ebcff 100644
--- a/packages/compass-connections-navigation/src/navigation-item.tsx
+++ b/packages/compass-connections-navigation/src/navigation-item.tsx
@@ -111,14 +111,23 @@ export function NavigationItem({
   onItemExpand,
   getItemActions,
 }: NavigationItemProps) {
+  let isDisabled = false;
+  if (item.type === 'connection') {
+    const connectionInfo = item.connectionInfo;
+    isDisabled =
+      connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
+      connectionInfo.atlasMetadata?.clusterState === 'PAUSED' ||
+      connectionInfo.atlasMetadata?.clusterState === 'CREATING';
+  }
+
   const isDarkMode = useDarkMode();
   const onAction = useCallback(
     (action: Actions) => {
-      if (item.type !== 'placeholder') {
+      if (item.type !== 'placeholder' || !isDisabled) {
         onItemAction(item, action);
       }
     },
-    [item, onItemAction]
+    [item, onItemAction, isDisabled]
   );
 
   const style = useMemo(() => getTreeItemStyles(item), [item]);
@@ -201,10 +210,10 @@ export function NavigationItem({
   }, [item, isDarkMode]);
 
   const toggleExpand = useCallback(() => {
-    if (item.type !== 'placeholder') {
+    if (item.type !== 'placeholder' || isDisabled) {
       onItemExpand(item, !item.isExpanded);
     }
-  }, [onItemExpand, item]);
+  }, [onItemExpand, item, isDisabled]);
 
   return (
     <StyledNavigationItem item={item}>
@@ -212,6 +221,7 @@ export function NavigationItem({
         <PlaceholderItem level={item.level} />
       ) : (
         <NavigationBaseItem
+          item={item}
           isActive={isActive}
           isFocused={isFocused}
           isExpanded={!!item.isExpanded}
diff --git a/packages/compass-connections-navigation/src/styled-navigation-item.tsx b/packages/compass-connections-navigation/src/styled-navigation-item.tsx
index bf6e39b6549..d290501b61c 100644
--- a/packages/compass-connections-navigation/src/styled-navigation-item.tsx
+++ b/packages/compass-connections-navigation/src/styled-navigation-item.tsx
@@ -34,6 +34,7 @@ export default function StyledNavigationItem({
     const style: AcceptedStyles = {};
     const isDisconnectedConnection =
       item.type === 'connection' && item.connectionStatus !== 'connected';
+
     const isNonExistentNamespace =
       (item.type === 'database' || item.type === 'collection') &&
       item.isNonExistent;
@@ -44,12 +45,21 @@ export default function StyledNavigationItem({
       style['--item-bg-color-active'] = connectionColorToHexActive(colorCode);
     }
 
-    if (isDisconnectedConnection || isNonExistentNamespace) {
+    if (isDisconnectedConnection) {
       style['--item-color'] = inactiveColor;
+      const connectionInfo = item.connectionInfo;
+      if (
+        connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
+        connectionInfo.atlasMetadata?.clusterState === 'PAUSED' ||
+        connectionInfo.atlasMetadata?.clusterState === 'CREATING'
+      ) {
+        style['--item-color-active'] = inactiveColor;
+      }
     }
 
     // For a non-existent namespace, even if its active, we show it as inactive
     if (isNonExistentNamespace) {
+      style['--item-color'] = inactiveColor;
       style['--item-color-active'] = inactiveColor;
     }
     return style;
diff --git a/packages/compass-web/src/connection-storage.tsx b/packages/compass-web/src/connection-storage.tsx
index a51889c2275..2710ed037d7 100644
--- a/packages/compass-web/src/connection-storage.tsx
+++ b/packages/compass-web/src/connection-storage.tsx
@@ -247,10 +247,13 @@ export function buildConnectionInfoFromClusterDescription(
   };
 }
 
-const CONNECTABLE_CLUSTER_STATES: AtlasClusterMetadata['clusterState'][] = [
+const VISIBLE_CLUSTER_STATES: AtlasClusterMetadata['clusterState'][] = [
   'IDLE',
-  'REPARING',
+  'REPAIRING',
   'UPDATING',
+  'PAUSED',
+  'CREATING',
+  'DELETING',
 ];
 
 /**
@@ -288,20 +291,21 @@ export class AtlasCloudConnectionStorage
 
     const connectionInfoList = (await res.json()) as ConnectionInfo[];
 
-    return connectionInfoList
+    console.log(connectionInfoList);
+
+    const cil = connectionInfoList
       .map((connectionInfo: ConnectionInfo): ConnectionInfo | null => {
         if (
-          !connectionInfo.connectionOptions.connectionString ||
           !connectionInfo.atlasMetadata ||
-          // TODO(COMPASS-8228): do not filter out those connections, display
-          // them in navigation, but in a way that doesn't allow connecting
-          !CONNECTABLE_CLUSTER_STATES.includes(
+          !VISIBLE_CLUSTER_STATES.includes(
             connectionInfo.atlasMetadata.clusterState
           )
         ) {
           return null;
         }
 
+        console.log(connectionInfo);
+
         const clusterName = connectionInfo.atlasMetadata.clusterName;
 
         return {
@@ -323,6 +327,10 @@ export class AtlasCloudConnectionStorage
       .filter((connectionInfo): connectionInfo is ConnectionInfo => {
         return !!connectionInfo;
       });
+
+    console.log('FILTERED');
+    console.log(cil);
+    return cil;
   }
 
   /**
diff --git a/packages/connection-info/src/connection-info.ts b/packages/connection-info/src/connection-info.ts
index 310bd8f237f..831bdc31d52 100644
--- a/packages/connection-info/src/connection-info.ts
+++ b/packages/connection-info/src/connection-info.ts
@@ -48,7 +48,7 @@ export interface AtlasClusterMetadata {
     | 'UPDATING'
     | 'PAUSED'
     | 'IDLE'
-    | 'REPARING'
+    | 'REPAIRING'
     | 'DELETING'
     | 'DELETED';
 

From e12899d63333b18229304b1390d4d96c49a0299c Mon Sep 17 00:00:00 2001
From: Simon Zhu <simon.zhu@mongodb.com>
Date: Tue, 29 Apr 2025 22:20:03 -0400
Subject: [PATCH 02/14] refactor

---
 .../src/hooks/use-theme.tsx                   |  1 -
 .../src/base-navigation-item.tsx              | 87 ++++++++++++-------
 .../src/navigation-item-icon.tsx              | 10 +++
 .../src/navigation-item.tsx                   | 17 +---
 .../src/styled-navigation-item.tsx            | 12 +--
 .../compass-web/src/connection-storage.tsx    | 10 +--
 6 files changed, 70 insertions(+), 67 deletions(-)

diff --git a/packages/compass-components/src/hooks/use-theme.tsx b/packages/compass-components/src/hooks/use-theme.tsx
index 4f3dabe41bf..b91b1deea30 100644
--- a/packages/compass-components/src/hooks/use-theme.tsx
+++ b/packages/compass-components/src/hooks/use-theme.tsx
@@ -11,7 +11,6 @@ enum Theme {
 export function useDarkMode(localDarkMode?: boolean): boolean | undefined {
   const darkMode = useLeafyGreenDarkMode(localDarkMode);
   return darkMode.darkMode;
-  // return false;
 }
 
 interface WithDarkModeProps {
diff --git a/packages/compass-connections-navigation/src/base-navigation-item.tsx b/packages/compass-connections-navigation/src/base-navigation-item.tsx
index 30c26b7a2eb..58f2670755d 100644
--- a/packages/compass-connections-navigation/src/base-navigation-item.tsx
+++ b/packages/compass-connections-navigation/src/base-navigation-item.tsx
@@ -7,11 +7,14 @@ import {
   cx,
   Badge,
   BadgeVariant,
+  Tooltip,
+  useDarkMode,
+  Body,
 } from '@mongodb-js/compass-components';
 import { type Actions, ROW_HEIGHT } from './constants';
 import { ExpandButton } from './tree-item';
 import { type NavigationItemActions } from './item-actions';
-import type { SidebarTreeItem, SidebarActionableItem } from './tree-data';
+import type { SidebarTreeItem } from './tree-data';
 
 type NavigationBaseItemProps = {
   item: SidebarTreeItem;
@@ -90,6 +93,55 @@ const actionControlsWrapperStyles = css({
   gap: spacing[100],
 });
 
+const ClusterStateBadge: React.FunctionComponent<{
+  state: string;
+}> = ({ state }) => {
+  const badgeVariant =
+    state === 'CREATING' ? BadgeVariant.Blue : BadgeVariant.LightGray;
+
+  return (
+    <Badge variant={badgeVariant} data-testid="navigation-item-state-badge">
+      {state}
+    </Badge>
+  );
+};
+
+const ClusterStateBadgeWithTooltip: React.FunctionComponent<{
+  item: SidebarTreeItem;
+}> = ({ item }) => {
+  const isDarkMode = useDarkMode();
+
+  if (item.type === 'connection') {
+    const atlasClusterState = item.connectionInfo.atlasMetadata?.clusterState;
+    if (atlasClusterState === 'PAUSED') {
+      return (
+        <Tooltip
+          enabled={true}
+          darkMode={isDarkMode}
+          trigger={({
+            children: tooltipChildren,
+            ...tooltipTriggerProps
+          }: React.HTMLProps<HTMLDivElement>) => (
+            <div {...tooltipTriggerProps}>
+              <ClusterStateBadge state={atlasClusterState} />
+              {tooltipChildren}
+            </div>
+          )}
+        >
+          <Body>Unpause your cluster to connect to it</Body>
+        </Tooltip>
+      );
+    } else if (
+      atlasClusterState === 'DELETING' ||
+      atlasClusterState === 'CREATING'
+    ) {
+      return <ClusterStateBadge state={atlasClusterState} />;
+    }
+  }
+
+  return null;
+};
+
 export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
   item,
   isActive,
@@ -106,26 +158,6 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
   toggleExpand,
   children,
 }) => {
-  // TODO: add extra UI stuff here
-
-  let isDisabled = false;
-  let status = '';
-  let variant = BadgeVariant.LightGray;
-  if (item.type === 'connection') {
-    const connectionInfo = item.connectionInfo;
-    isDisabled =
-      connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
-      connectionInfo.atlasMetadata?.clusterState === 'PAUSED' ||
-      connectionInfo.atlasMetadata?.clusterState === 'CREATING';
-    if (isDisabled) {
-      status = connectionInfo.atlasMetadata?.clusterState;
-      if (status === 'CREATING') {
-        variant = BadgeVariant.Blue;
-      }
-      console.log(status);
-    }
-  }
-
   const [hoverProps, isHovered] = useHoverState();
   return (
     <div
@@ -152,18 +184,7 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
           {icon}
           <span title={name}>{name}</span>
         </div>
-        {isDisabled && (
-          <Badge
-            variant={variant}
-            className={css({
-              verticalAlign: 'middle',
-              marginLeft: spacing[100],
-            })}
-            data-testid="navigation-item-state-badge"
-          >
-            {status}
-          </Badge>
-        )}
+        <ClusterStateBadgeWithTooltip item={item} />
         <div className={actionControlsWrapperStyles}>
           <ItemActionControls
             menuClassName={menuStyles}
diff --git a/packages/compass-connections-navigation/src/navigation-item-icon.tsx b/packages/compass-connections-navigation/src/navigation-item-icon.tsx
index 6b5dc4ed9ae..53a2ff9600e 100644
--- a/packages/compass-connections-navigation/src/navigation-item-icon.tsx
+++ b/packages/compass-connections-navigation/src/navigation-item-icon.tsx
@@ -78,6 +78,16 @@ export const NavigationItemIcon = ({ item }: { item: SidebarTreeItem }) => {
         </WithStatusMarker>
       );
     }
+    if (
+      item.connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
+      item.connectionInfo.atlasMetadata?.clusterState === 'CREATING'
+    ) {
+      return (
+        <WithStatusMarker status={item.connectionStatus}>
+          <Icon glyph="Refresh" />
+        </WithStatusMarker>
+      );
+    }
     return (
       <WithStatusMarker status={item.connectionStatus}>
         <ServerIcon />
diff --git a/packages/compass-connections-navigation/src/navigation-item.tsx b/packages/compass-connections-navigation/src/navigation-item.tsx
index e5e6e4ebcff..4ba31889ce7 100644
--- a/packages/compass-connections-navigation/src/navigation-item.tsx
+++ b/packages/compass-connections-navigation/src/navigation-item.tsx
@@ -111,23 +111,14 @@ export function NavigationItem({
   onItemExpand,
   getItemActions,
 }: NavigationItemProps) {
-  let isDisabled = false;
-  if (item.type === 'connection') {
-    const connectionInfo = item.connectionInfo;
-    isDisabled =
-      connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
-      connectionInfo.atlasMetadata?.clusterState === 'PAUSED' ||
-      connectionInfo.atlasMetadata?.clusterState === 'CREATING';
-  }
-
   const isDarkMode = useDarkMode();
   const onAction = useCallback(
     (action: Actions) => {
-      if (item.type !== 'placeholder' || !isDisabled) {
+      if (item.type !== 'placeholder') {
         onItemAction(item, action);
       }
     },
-    [item, onItemAction, isDisabled]
+    [item, onItemAction]
   );
 
   const style = useMemo(() => getTreeItemStyles(item), [item]);
@@ -210,10 +201,10 @@ export function NavigationItem({
   }, [item, isDarkMode]);
 
   const toggleExpand = useCallback(() => {
-    if (item.type !== 'placeholder' || isDisabled) {
+    if (item.type !== 'placeholder') {
       onItemExpand(item, !item.isExpanded);
     }
-  }, [onItemExpand, item, isDisabled]);
+  }, [onItemExpand, item]);
 
   return (
     <StyledNavigationItem item={item}>
diff --git a/packages/compass-connections-navigation/src/styled-navigation-item.tsx b/packages/compass-connections-navigation/src/styled-navigation-item.tsx
index d290501b61c..bf6e39b6549 100644
--- a/packages/compass-connections-navigation/src/styled-navigation-item.tsx
+++ b/packages/compass-connections-navigation/src/styled-navigation-item.tsx
@@ -34,7 +34,6 @@ export default function StyledNavigationItem({
     const style: AcceptedStyles = {};
     const isDisconnectedConnection =
       item.type === 'connection' && item.connectionStatus !== 'connected';
-
     const isNonExistentNamespace =
       (item.type === 'database' || item.type === 'collection') &&
       item.isNonExistent;
@@ -45,21 +44,12 @@ export default function StyledNavigationItem({
       style['--item-bg-color-active'] = connectionColorToHexActive(colorCode);
     }
 
-    if (isDisconnectedConnection) {
+    if (isDisconnectedConnection || isNonExistentNamespace) {
       style['--item-color'] = inactiveColor;
-      const connectionInfo = item.connectionInfo;
-      if (
-        connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
-        connectionInfo.atlasMetadata?.clusterState === 'PAUSED' ||
-        connectionInfo.atlasMetadata?.clusterState === 'CREATING'
-      ) {
-        style['--item-color-active'] = inactiveColor;
-      }
     }
 
     // For a non-existent namespace, even if its active, we show it as inactive
     if (isNonExistentNamespace) {
-      style['--item-color'] = inactiveColor;
       style['--item-color-active'] = inactiveColor;
     }
     return style;
diff --git a/packages/compass-web/src/connection-storage.tsx b/packages/compass-web/src/connection-storage.tsx
index 2710ed037d7..5a80a4e74f0 100644
--- a/packages/compass-web/src/connection-storage.tsx
+++ b/packages/compass-web/src/connection-storage.tsx
@@ -291,9 +291,7 @@ export class AtlasCloudConnectionStorage
 
     const connectionInfoList = (await res.json()) as ConnectionInfo[];
 
-    console.log(connectionInfoList);
-
-    const cil = connectionInfoList
+    return connectionInfoList
       .map((connectionInfo: ConnectionInfo): ConnectionInfo | null => {
         if (
           !connectionInfo.atlasMetadata ||
@@ -304,8 +302,6 @@ export class AtlasCloudConnectionStorage
           return null;
         }
 
-        console.log(connectionInfo);
-
         const clusterName = connectionInfo.atlasMetadata.clusterName;
 
         return {
@@ -327,10 +323,6 @@ export class AtlasCloudConnectionStorage
       .filter((connectionInfo): connectionInfo is ConnectionInfo => {
         return !!connectionInfo;
       });
-
-    console.log('FILTERED');
-    console.log(cil);
-    return cil;
   }
 
   /**

From 82b9518cdf63fc3e879675abea659bc9b85aa726 Mon Sep 17 00:00:00 2001
From: Simon Zhu <simon.zhu@mongodb.com>
Date: Tue, 29 Apr 2025 22:23:17 -0400
Subject: [PATCH 03/14] Update base-navigation-item.tsx

---
 .../src/base-navigation-item.tsx                               | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/compass-connections-navigation/src/base-navigation-item.tsx b/packages/compass-connections-navigation/src/base-navigation-item.tsx
index 58f2670755d..55fd50bc19d 100644
--- a/packages/compass-connections-navigation/src/base-navigation-item.tsx
+++ b/packages/compass-connections-navigation/src/base-navigation-item.tsx
@@ -98,10 +98,11 @@ const ClusterStateBadge: React.FunctionComponent<{
 }> = ({ state }) => {
   const badgeVariant =
     state === 'CREATING' ? BadgeVariant.Blue : BadgeVariant.LightGray;
+  const badgeText = state === 'DELETING' ? 'TERMINATING' : state;
 
   return (
     <Badge variant={badgeVariant} data-testid="navigation-item-state-badge">
-      {state}
+      {badgeText}
     </Badge>
   );
 };

From 8f1a3f11cbfa6c77cc6b95e7bdeb0ce82b05aef2 Mon Sep 17 00:00:00 2001
From: Simon Zhu <simon.zhu@mongodb.com>
Date: Tue, 29 Apr 2025 22:44:33 -0400
Subject: [PATCH 04/14] Update connections-store-redux.ts

---
 .../src/stores/connections-store-redux.ts                | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/compass-connections/src/stores/connections-store-redux.ts b/packages/compass-connections/src/stores/connections-store-redux.ts
index c8c01277fee..66f4cded312 100644
--- a/packages/compass-connections/src/stores/connections-store-redux.ts
+++ b/packages/compass-connections/src/stores/connections-store-redux.ts
@@ -1489,6 +1489,15 @@ const connectWithOptions = (
           return;
         }
 
+        const atlasClusterState = connectionInfo.atlasMetadata?.clusterState;
+        if (
+          atlasClusterState === 'DELETED' ||
+          atlasClusterState === 'PAUSED' ||
+          atlasClusterState === 'CREATING'
+        ) {
+          return;
+        }
+
         const isAutoconnectAttempt = isAutoconnectInfo(
           getState(),
           connectionInfo.id

From b96fb95e6f561e93705940bcc08cf8f436679927 Mon Sep 17 00:00:00 2001
From: Simon Zhu <simon.zhu@mongodb.com>
Date: Wed, 30 Apr 2025 03:16:32 -0400
Subject: [PATCH 05/14] Refactor

---
 .../src/base-navigation-item.tsx              | 64 +++++++++++--------
 .../src/connections-navigation-tree.tsx       | 29 ++++++++-
 .../src/item-actions.ts                       |  7 --
 .../src/navigation-item-icon.tsx              | 26 +++++---
 .../src/styled-navigation-item.tsx            | 16 +++--
 .../src/tree-data.ts                          | 18 ++++++
 .../src/stores/connections-store-redux.ts     | 28 +++++++-
 7 files changed, 133 insertions(+), 55 deletions(-)

diff --git a/packages/compass-connections-navigation/src/base-navigation-item.tsx b/packages/compass-connections-navigation/src/base-navigation-item.tsx
index 55fd50bc19d..35e070e3521 100644
--- a/packages/compass-connections-navigation/src/base-navigation-item.tsx
+++ b/packages/compass-connections-navigation/src/base-navigation-item.tsx
@@ -97,8 +97,17 @@ const ClusterStateBadge: React.FunctionComponent<{
   state: string;
 }> = ({ state }) => {
   const badgeVariant =
-    state === 'CREATING' ? BadgeVariant.Blue : BadgeVariant.LightGray;
-  const badgeText = state === 'DELETING' ? 'TERMINATING' : state;
+    state === 'CREATING'
+      ? BadgeVariant.Blue
+      : state === 'DELETED'
+      ? BadgeVariant.Red
+      : BadgeVariant.LightGray;
+  const badgeText =
+    state === 'DELETING'
+      ? 'TERMINATING'
+      : state === 'DELETED'
+      ? 'TERMINATED'
+      : state;
 
   return (
     <Badge variant={badgeVariant} data-testid="navigation-item-state-badge">
@@ -112,32 +121,31 @@ const ClusterStateBadgeWithTooltip: React.FunctionComponent<{
 }> = ({ item }) => {
   const isDarkMode = useDarkMode();
 
-  if (item.type === 'connection') {
-    const atlasClusterState = item.connectionInfo.atlasMetadata?.clusterState;
-    if (atlasClusterState === 'PAUSED') {
-      return (
-        <Tooltip
-          enabled={true}
-          darkMode={isDarkMode}
-          trigger={({
-            children: tooltipChildren,
-            ...tooltipTriggerProps
-          }: React.HTMLProps<HTMLDivElement>) => (
-            <div {...tooltipTriggerProps}>
-              <ClusterStateBadge state={atlasClusterState} />
-              {tooltipChildren}
-            </div>
-          )}
-        >
-          <Body>Unpause your cluster to connect to it</Body>
-        </Tooltip>
-      );
-    } else if (
-      atlasClusterState === 'DELETING' ||
-      atlasClusterState === 'CREATING'
-    ) {
-      return <ClusterStateBadge state={atlasClusterState} />;
-    }
+  const atlasClusterState = item.connectionInfo?.atlasMetadata?.clusterState;
+  if (atlasClusterState === 'PAUSED') {
+    return (
+      <Tooltip
+        enabled={true}
+        darkMode={isDarkMode}
+        trigger={({
+          children: tooltipChildren,
+          ...tooltipTriggerProps
+        }: React.HTMLProps<HTMLDivElement>) => (
+          <div {...tooltipTriggerProps}>
+            <ClusterStateBadge state={atlasClusterState} />
+            {tooltipChildren}
+          </div>
+        )}
+      >
+        <Body>Unpause your cluster to connect to it</Body>
+      </Tooltip>
+    );
+  } else if (
+    atlasClusterState === 'DELETING' ||
+    atlasClusterState === 'CREATING' ||
+    atlasClusterState === 'DELETED'
+  ) {
+    return <ClusterStateBadge state={atlasClusterState} />;
   }
 
   return null;
diff --git a/packages/compass-connections-navigation/src/connections-navigation-tree.tsx b/packages/compass-connections-navigation/src/connections-navigation-tree.tsx
index 6f8634c226a..6ca8e209871 100644
--- a/packages/compass-connections-navigation/src/connections-navigation-tree.tsx
+++ b/packages/compass-connections-navigation/src/connections-navigation-tree.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { getVirtualTreeItems } from './tree-data';
+import { clusterIsConnectable, getVirtualTreeItems } from './tree-data';
 import { ROW_HEIGHT } from './constants';
 import type { Actions } from './constants';
 import { VirtualTree } from './virtual-list/virtual-list';
@@ -21,6 +21,7 @@ import {
 import type { WorkspaceTab } from '@mongodb-js/compass-workspaces';
 import { usePreference } from 'compass-preferences-model/provider';
 import type { NavigationItemActions } from './item-actions';
+import { useConnectionsListRef } from '@mongodb-js/compass-connections/provider';
 import {
   collectionItemActions,
   connectedConnectionItemActions,
@@ -57,6 +58,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
   );
 
   const id = useId();
+  const { getConnectionById } = useConnectionsListRef();
 
   const treeData = useMemo(() => {
     return getVirtualTreeItems({
@@ -69,6 +71,14 @@ const ConnectionsNavigationTree: React.FunctionComponent<
 
   const onDefaultAction: OnDefaultAction<SidebarActionableItem> = useCallback(
     (item, evt) => {
+      const isConnectableCluster = clusterIsConnectable(
+        item,
+        getConnectionById
+      );
+      if (!isConnectableCluster) {
+        return;
+      }
+
       if (item.type === 'connection') {
         if (item.connectionStatus === 'connected') {
           onItemAction(item, 'select-connection');
@@ -83,7 +93,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
         }
       }
     },
-    [onItemAction]
+    [onItemAction, getConnectionById]
   );
 
   const activeItemId = useMemo(() => {
@@ -144,6 +154,15 @@ const ConnectionsNavigationTree: React.FunctionComponent<
 
   const getItemActionsAndConfig = useCallback(
     (item: SidebarTreeItem) => {
+      const isConnectableCluster = clusterIsConnectable(
+        item,
+        getConnectionById
+      );
+      if (!isConnectableCluster) {
+        return {
+          actions: [],
+        };
+      }
       switch (item.type) {
         case 'placeholder':
           return {
@@ -192,7 +211,11 @@ const ConnectionsNavigationTree: React.FunctionComponent<
           };
       }
     },
-    [isRenameCollectionEnabled, getCollapseAfterForConnectedItem]
+    [
+      isRenameCollectionEnabled,
+      getCollapseAfterForConnectedItem,
+      getConnectionById,
+    ]
   );
 
   const isTestEnv = process.env.NODE_ENV === 'test';
diff --git a/packages/compass-connections-navigation/src/item-actions.ts b/packages/compass-connections-navigation/src/item-actions.ts
index 5097cdcfa14..9e4f58c5b19 100644
--- a/packages/compass-connections-navigation/src/item-actions.ts
+++ b/packages/compass-connections-navigation/src/item-actions.ts
@@ -146,13 +146,6 @@ export const notConnectedConnectionItemActions = ({
   connectionInfo: ConnectionInfo;
   connectionStatus: NotConnectedConnectionStatus;
 }): NavigationItemActions => {
-  if (
-    connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
-    connectionInfo.atlasMetadata?.clusterState === 'PAUSED' ||
-    connectionInfo.atlasMetadata?.clusterState === 'CREATING'
-  ) {
-    return [];
-  }
   const commonActions = commonConnectionItemActions({ connectionInfo });
   if (connectionStatus === 'connecting') {
     return commonActions;
diff --git a/packages/compass-connections-navigation/src/navigation-item-icon.tsx b/packages/compass-connections-navigation/src/navigation-item-icon.tsx
index 53a2ff9600e..1dd55b8b34b 100644
--- a/packages/compass-connections-navigation/src/navigation-item-icon.tsx
+++ b/packages/compass-connections-navigation/src/navigation-item-icon.tsx
@@ -63,6 +63,22 @@ export const NavigationItemIcon = ({ item }: { item: SidebarTreeItem }) => {
     return <Icon glyph="TimeSeries" />;
   }
   if (item.type === 'connection') {
+    const atlasClusterState = item.connectionInfo.atlasMetadata?.clusterState;
+    if (atlasClusterState === 'DELETING' || atlasClusterState === 'CREATING') {
+      return (
+        <WithStatusMarker status={'disconnected'}>
+          <Icon glyph="Refresh" />
+        </WithStatusMarker>
+      );
+    }
+    if (atlasClusterState === 'PAUSED' || atlasClusterState === 'DELETED') {
+      return (
+        <WithStatusMarker status={'disconnected'}>
+          <ServerIcon />
+        </WithStatusMarker>
+      );
+    }
+
     const isFavorite = item.connectionInfo.savedConnectionType === 'favorite';
     if (isFavorite) {
       return (
@@ -78,16 +94,6 @@ export const NavigationItemIcon = ({ item }: { item: SidebarTreeItem }) => {
         </WithStatusMarker>
       );
     }
-    if (
-      item.connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
-      item.connectionInfo.atlasMetadata?.clusterState === 'CREATING'
-    ) {
-      return (
-        <WithStatusMarker status={item.connectionStatus}>
-          <Icon glyph="Refresh" />
-        </WithStatusMarker>
-      );
-    }
     return (
       <WithStatusMarker status={item.connectionStatus}>
         <ServerIcon />
diff --git a/packages/compass-connections-navigation/src/styled-navigation-item.tsx b/packages/compass-connections-navigation/src/styled-navigation-item.tsx
index bf6e39b6549..64aceb97ab8 100644
--- a/packages/compass-connections-navigation/src/styled-navigation-item.tsx
+++ b/packages/compass-connections-navigation/src/styled-navigation-item.tsx
@@ -4,7 +4,8 @@ import {
   DefaultColorCode,
 } from '@mongodb-js/connection-form';
 import { palette, useDarkMode } from '@mongodb-js/compass-components';
-import type { SidebarTreeItem } from './tree-data';
+import { clusterIsConnectable, type SidebarTreeItem } from './tree-data';
+import { useConnectionsListRef } from '@mongodb-js/compass-connections/provider';
 
 type AcceptedStyles = {
   '--item-bg-color'?: string;
@@ -29,6 +30,8 @@ export default function StyledNavigationItem({
     () => (isDarkMode ? palette.gray.light1 : palette.gray.dark1),
     [isDarkMode]
   );
+  const { getConnectionById } = useConnectionsListRef();
+  const isConnectableCluster = clusterIsConnectable(item, getConnectionById);
 
   const style: React.CSSProperties & AcceptedStyles = useMemo(() => {
     const style: AcceptedStyles = {};
@@ -44,17 +47,22 @@ export default function StyledNavigationItem({
       style['--item-bg-color-active'] = connectionColorToHexActive(colorCode);
     }
 
-    if (isDisconnectedConnection || isNonExistentNamespace) {
+    if (
+      isDisconnectedConnection ||
+      isNonExistentNamespace ||
+      !isConnectableCluster
+    ) {
       style['--item-color'] = inactiveColor;
     }
 
-    // For a non-existent namespace, even if its active, we show it as inactive
-    if (isNonExistentNamespace) {
+    // We always show these as inactive
+    if (isNonExistentNamespace || !isConnectableCluster) {
       style['--item-color-active'] = inactiveColor;
     }
     return style;
   }, [
     inactiveColor,
+    isConnectableCluster,
     item,
     colorCode,
     connectionColorToHex,
diff --git a/packages/compass-connections-navigation/src/tree-data.ts b/packages/compass-connections-navigation/src/tree-data.ts
index 2d3476f2649..4c0942c2db1 100644
--- a/packages/compass-connections-navigation/src/tree-data.ts
+++ b/packages/compass-connections-navigation/src/tree-data.ts
@@ -124,6 +124,24 @@ export type SidebarActionableItem =
 
 export type SidebarTreeItem = PlaceholderTreeItem | SidebarActionableItem;
 
+export function clusterIsConnectable(
+  item: SidebarTreeItem,
+  getConnectionById: any
+): boolean {
+  if (item.type === 'connection') {
+    const clusterState = item.connectionInfo.atlasMetadata?.clusterState;
+    return !['DELETING', 'DELETED', 'CREATING', 'PAUSED'].includes(
+      clusterState
+    );
+  } else if (item.type === 'database' || item.type === 'collection') {
+    const connection = getConnectionById(item.connectionId);
+    return !['DELETING', 'DELETED', 'CREATING', 'PAUSED'].includes(
+      connection.info.atlasMetadata?.clusterState
+    );
+  }
+  return true;
+}
+
 const notConnectedConnectionToItems = ({
   connection: { name, connectionInfo, connectionStatus },
   connectionIndex,
diff --git a/packages/compass-connections/src/stores/connections-store-redux.ts b/packages/compass-connections/src/stores/connections-store-redux.ts
index 66f4cded312..ea61619c30a 100644
--- a/packages/compass-connections/src/stores/connections-store-redux.ts
+++ b/packages/compass-connections/src/stores/connections-store-redux.ts
@@ -530,9 +530,12 @@ function mergeConnections(
     ? newConnections
     : [newConnections];
 
+  const removedConnectionIds = new Set(connectionsState.ids);
+
   let newConnectionsById = connectionsState.byId;
 
   for (const connectionInfo of newConnections) {
+    removedConnectionIds.delete(connectionInfo.id);
     const existingConnection = newConnectionsById[connectionInfo.id];
 
     // If we got a new connection, just create a default state for this
@@ -560,6 +563,25 @@ function mergeConnections(
     }
   }
 
+  for (const connectionId of removedConnectionIds) {
+    const removedConnection = newConnectionsById[connectionId];
+    if (removedConnection.info.atlasMetadata) {
+      newConnectionsById = {
+        ...newConnectionsById,
+        [connectionId]: {
+          ...removedConnection,
+          info: {
+            ...removedConnection.info,
+            atlasMetadata: {
+              ...removedConnection.info.atlasMetadata,
+              clusterState: 'DELETED',
+            },
+          },
+        },
+      };
+    }
+  }
+
   // If we haven't modified newConnectionsById at this point, we can stop: none
   // of the new connections are different from what we have in the state already
   if (newConnectionsById === connectionsState.byId) {
@@ -1491,9 +1513,9 @@ const connectWithOptions = (
 
         const atlasClusterState = connectionInfo.atlasMetadata?.clusterState;
         if (
-          atlasClusterState === 'DELETED' ||
-          atlasClusterState === 'PAUSED' ||
-          atlasClusterState === 'CREATING'
+          ['DELETING', 'DELETED', 'CREATING', 'PAUSED'].includes(
+            atlasClusterState
+          )
         ) {
           return;
         }

From 6b232a9d92f59a159e2157fb938336fd68f07284 Mon Sep 17 00:00:00 2001
From: Simon Zhu <simon.zhu@mongodb.com>
Date: Wed, 30 Apr 2025 18:16:08 -0400
Subject: [PATCH 06/14] Update connection-storage.tsx

---
 .../src/stores/connections-store-redux.ts                  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/compass-connections/src/stores/connections-store-redux.ts b/packages/compass-connections/src/stores/connections-store-redux.ts
index ea61619c30a..dbe56ea870e 100644
--- a/packages/compass-connections/src/stores/connections-store-redux.ts
+++ b/packages/compass-connections/src/stores/connections-store-redux.ts
@@ -1513,9 +1513,10 @@ const connectWithOptions = (
 
         const atlasClusterState = connectionInfo.atlasMetadata?.clusterState;
         if (
-          ['DELETING', 'DELETED', 'CREATING', 'PAUSED'].includes(
-            atlasClusterState
-          )
+          atlasClusterState === 'DELETED' ||
+          atlasClusterState === 'DELETING' ||
+          atlasClusterState === 'CREATING' ||
+          atlasClusterState === 'PAUSED'
         ) {
           return;
         }

From 2860e70bbed9fe96db6aca0ce3a3797ba79f60fe Mon Sep 17 00:00:00 2001
From: Simon Zhu <simon.zhu@mongodb.com>
Date: Wed, 30 Apr 2025 22:38:27 -0400
Subject: [PATCH 07/14] refactor

---
 .../src/connections-navigation-tree.tsx       | 24 +++++--------
 .../src/styled-navigation-item.tsx            | 19 +++++------
 .../src/tree-data.ts                          | 22 ++++--------
 .../src/hooks/use-connectable.ts              | 34 +++++++++++++++++++
 packages/compass-connections/src/index.tsx    |  2 +-
 packages/compass-connections/src/provider.ts  |  2 ++
 .../src/stores/connections-store-redux.ts     | 10 ++----
 .../src/utils/connection-supports.ts          | 13 +++++++
 8 files changed, 77 insertions(+), 49 deletions(-)
 create mode 100644 packages/compass-connections/src/hooks/use-connectable.ts

diff --git a/packages/compass-connections-navigation/src/connections-navigation-tree.tsx b/packages/compass-connections-navigation/src/connections-navigation-tree.tsx
index 6ca8e209871..f22e0370f3b 100644
--- a/packages/compass-connections-navigation/src/connections-navigation-tree.tsx
+++ b/packages/compass-connections-navigation/src/connections-navigation-tree.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { clusterIsConnectable, getVirtualTreeItems } from './tree-data';
+import { getConnectionId, getVirtualTreeItems } from './tree-data';
 import { ROW_HEIGHT } from './constants';
 import type { Actions } from './constants';
 import { VirtualTree } from './virtual-list/virtual-list';
@@ -18,10 +18,10 @@ import {
   spacing,
   useId,
 } from '@mongodb-js/compass-components';
+import { useConnectableRef } from '@mongodb-js/compass-connections/provider';
 import type { WorkspaceTab } from '@mongodb-js/compass-workspaces';
 import { usePreference } from 'compass-preferences-model/provider';
 import type { NavigationItemActions } from './item-actions';
-import { useConnectionsListRef } from '@mongodb-js/compass-connections/provider';
 import {
   collectionItemActions,
   connectedConnectionItemActions,
@@ -58,7 +58,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
   );
 
   const id = useId();
-  const { getConnectionById } = useConnectionsListRef();
+  const { getConnectable } = useConnectableRef();
 
   const treeData = useMemo(() => {
     return getVirtualTreeItems({
@@ -71,11 +71,8 @@ const ConnectionsNavigationTree: React.FunctionComponent<
 
   const onDefaultAction: OnDefaultAction<SidebarActionableItem> = useCallback(
     (item, evt) => {
-      const isConnectableCluster = clusterIsConnectable(
-        item,
-        getConnectionById
-      );
-      if (!isConnectableCluster) {
+      const connectionId = getConnectionId(item);
+      if (!getConnectable(connectionId)) {
         return;
       }
 
@@ -93,7 +90,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
         }
       }
     },
-    [onItemAction, getConnectionById]
+    [onItemAction, getConnectable]
   );
 
   const activeItemId = useMemo(() => {
@@ -154,11 +151,8 @@ const ConnectionsNavigationTree: React.FunctionComponent<
 
   const getItemActionsAndConfig = useCallback(
     (item: SidebarTreeItem) => {
-      const isConnectableCluster = clusterIsConnectable(
-        item,
-        getConnectionById
-      );
-      if (!isConnectableCluster) {
+      const connectionId = getConnectionId(item);
+      if (!getConnectable(connectionId)) {
         return {
           actions: [],
         };
@@ -214,7 +208,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
     [
       isRenameCollectionEnabled,
       getCollapseAfterForConnectedItem,
-      getConnectionById,
+      getConnectable,
     ]
   );
 
diff --git a/packages/compass-connections-navigation/src/styled-navigation-item.tsx b/packages/compass-connections-navigation/src/styled-navigation-item.tsx
index 64aceb97ab8..d79abfcd9eb 100644
--- a/packages/compass-connections-navigation/src/styled-navigation-item.tsx
+++ b/packages/compass-connections-navigation/src/styled-navigation-item.tsx
@@ -4,8 +4,8 @@ import {
   DefaultColorCode,
 } from '@mongodb-js/connection-form';
 import { palette, useDarkMode } from '@mongodb-js/compass-components';
-import { clusterIsConnectable, type SidebarTreeItem } from './tree-data';
-import { useConnectionsListRef } from '@mongodb-js/compass-connections/provider';
+import { getConnectionId, type SidebarTreeItem } from './tree-data';
+import { useConnectable } from '@mongodb-js/compass-connections/provider';
 
 type AcceptedStyles = {
   '--item-bg-color'?: string;
@@ -30,8 +30,9 @@ export default function StyledNavigationItem({
     () => (isDarkMode ? palette.gray.light1 : palette.gray.dark1),
     [isDarkMode]
   );
-  const { getConnectionById } = useConnectionsListRef();
-  const isConnectableCluster = clusterIsConnectable(item, getConnectionById);
+
+  const connectionId = getConnectionId(item);
+  const isConnectable = useConnectable(connectionId);
 
   const style: React.CSSProperties & AcceptedStyles = useMemo(() => {
     const style: AcceptedStyles = {};
@@ -47,22 +48,18 @@ export default function StyledNavigationItem({
       style['--item-bg-color-active'] = connectionColorToHexActive(colorCode);
     }
 
-    if (
-      isDisconnectedConnection ||
-      isNonExistentNamespace ||
-      !isConnectableCluster
-    ) {
+    if (isDisconnectedConnection || isNonExistentNamespace || !isConnectable) {
       style['--item-color'] = inactiveColor;
     }
 
     // We always show these as inactive
-    if (isNonExistentNamespace || !isConnectableCluster) {
+    if (isNonExistentNamespace || !isConnectable) {
       style['--item-color-active'] = inactiveColor;
     }
     return style;
   }, [
     inactiveColor,
-    isConnectableCluster,
+    isConnectable,
     item,
     colorCode,
     connectionColorToHex,
diff --git a/packages/compass-connections-navigation/src/tree-data.ts b/packages/compass-connections-navigation/src/tree-data.ts
index 4c0942c2db1..3d14d0eeacd 100644
--- a/packages/compass-connections-navigation/src/tree-data.ts
+++ b/packages/compass-connections-navigation/src/tree-data.ts
@@ -124,22 +124,14 @@ export type SidebarActionableItem =
 
 export type SidebarTreeItem = PlaceholderTreeItem | SidebarActionableItem;
 
-export function clusterIsConnectable(
-  item: SidebarTreeItem,
-  getConnectionById: any
-): boolean {
-  if (item.type === 'connection') {
-    const clusterState = item.connectionInfo.atlasMetadata?.clusterState;
-    return !['DELETING', 'DELETED', 'CREATING', 'PAUSED'].includes(
-      clusterState
-    );
-  } else if (item.type === 'database' || item.type === 'collection') {
-    const connection = getConnectionById(item.connectionId);
-    return !['DELETING', 'DELETED', 'CREATING', 'PAUSED'].includes(
-      connection.info.atlasMetadata?.clusterState
-    );
+export function getConnectionId(item: SidebarTreeItem): string {
+  if (item.type === 'placeholder') {
+    return '';
+  } else if (item.type === 'connection') {
+    return item.connectionInfo.id;
+  } else {
+    return item.connectionId;
   }
-  return true;
 }
 
 const notConnectedConnectionToItems = ({
diff --git a/packages/compass-connections/src/hooks/use-connectable.ts b/packages/compass-connections/src/hooks/use-connectable.ts
new file mode 100644
index 00000000000..cc804d29a27
--- /dev/null
+++ b/packages/compass-connections/src/hooks/use-connectable.ts
@@ -0,0 +1,34 @@
+import { useSelector, useStore } from '../stores/store-context';
+import { useRef, useState } from 'react';
+import { connectable } from '../utils/connection-supports';
+
+export function useConnectable(connectionId: string): boolean {
+  return useSelector((state) => {
+    const connection = state.connections.byId[connectionId];
+
+    if (!connection) {
+      return false;
+    }
+
+    return connectable(connection.info);
+  });
+}
+
+export function useConnectableRef(): {
+  getConnectable(this: void, connectionId: string): boolean;
+} {
+  const storeRef = useRef(useStore());
+  const [ref] = useState(() => {
+    return {
+      getConnectable(connectionId: string) {
+        const conn = storeRef.current.getState().connections.byId[connectionId];
+        if (!conn) {
+          return false;
+        }
+
+        return connectable(conn.info);
+      },
+    };
+  });
+  return ref;
+}
diff --git a/packages/compass-connections/src/index.tsx b/packages/compass-connections/src/index.tsx
index e6a20fabea6..aab107b17a2 100644
--- a/packages/compass-connections/src/index.tsx
+++ b/packages/compass-connections/src/index.tsx
@@ -23,7 +23,7 @@ import {
   ConnectionActionsProvider,
 } from './stores/store-context';
 export type { ConnectionFeature } from './utils/connection-supports';
-export { connectionSupports } from './utils/connection-supports';
+export { connectionSupports, connectable } from './utils/connection-supports';
 
 const ConnectionsComponent: React.FunctionComponent<{
   /**
diff --git a/packages/compass-connections/src/provider.ts b/packages/compass-connections/src/provider.ts
index c3f97fb6168..db85fd35904 100644
--- a/packages/compass-connections/src/provider.ts
+++ b/packages/compass-connections/src/provider.ts
@@ -69,6 +69,8 @@ export type { ConnectionsService } from './stores/store-context';
 
 export { useConnectionSupports } from './hooks/use-connection-supports';
 
+export { useConnectable, useConnectableRef } from './hooks/use-connectable';
+
 const ConnectionStatus = {
   /**
    * @deprecated use a string literal directly
diff --git a/packages/compass-connections/src/stores/connections-store-redux.ts b/packages/compass-connections/src/stores/connections-store-redux.ts
index dbe56ea870e..a2a33c42a0d 100644
--- a/packages/compass-connections/src/stores/connections-store-redux.ts
+++ b/packages/compass-connections/src/stores/connections-store-redux.ts
@@ -32,6 +32,7 @@ import EventEmitter from 'events';
 import { showNonGenuineMongoDBWarningModal as _showNonGenuineMongoDBWarningModal } from '../components/non-genuine-connection-modal';
 import ConnectionString from 'mongodb-connection-string-url';
 import type { ExtraConnectionData as ExtraConnectionDataForTelemetry } from '@mongodb-js/compass-telemetry';
+import { connectable } from '../utils/connection-supports';
 
 export type ConnectionsEventMap = {
   connected: (
@@ -563,6 +564,7 @@ function mergeConnections(
     }
   }
 
+  // If an Atlas connection was removed, it means that the cluster was deleted
   for (const connectionId of removedConnectionIds) {
     const removedConnection = newConnectionsById[connectionId];
     if (removedConnection.info.atlasMetadata) {
@@ -1511,13 +1513,7 @@ const connectWithOptions = (
           return;
         }
 
-        const atlasClusterState = connectionInfo.atlasMetadata?.clusterState;
-        if (
-          atlasClusterState === 'DELETED' ||
-          atlasClusterState === 'DELETING' ||
-          atlasClusterState === 'CREATING' ||
-          atlasClusterState === 'PAUSED'
-        ) {
+        if (!connectable(connectionInfo)) {
           return;
         }
 
diff --git a/packages/compass-connections/src/utils/connection-supports.ts b/packages/compass-connections/src/utils/connection-supports.ts
index c70388f5b68..f1767a6f606 100644
--- a/packages/compass-connections/src/utils/connection-supports.ts
+++ b/packages/compass-connections/src/utils/connection-supports.ts
@@ -11,6 +11,19 @@ function supportsRollingIndexCreation(connectionInfo: ConnectionInfo) {
   return atlasMetadata.supports.rollingIndexes;
 }
 
+export function connectable(connectionInfo: ConnectionInfo) {
+  const atlasClusterState = connectionInfo.atlasMetadata?.clusterState;
+  if (
+    atlasClusterState === 'DELETED' ||
+    atlasClusterState === 'DELETING' ||
+    atlasClusterState === 'CREATING' ||
+    atlasClusterState === 'PAUSED'
+  ) {
+    return false;
+  }
+  return true;
+}
+
 function supportsGlobalWrites(connectionInfo: ConnectionInfo) {
   const atlasMetadata = connectionInfo.atlasMetadata;
 

From 68b30a41c418f4c6173ea44e6e203cd60fc64101 Mon Sep 17 00:00:00 2001
From: Simon Zhu <simon.zhu@mongodb.com>
Date: Thu, 1 May 2025 08:57:28 -0400
Subject: [PATCH 08/14] Update base-navigation-item.tsx

---
 .../src/base-navigation-item.tsx                 | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/compass-connections-navigation/src/base-navigation-item.tsx b/packages/compass-connections-navigation/src/base-navigation-item.tsx
index 35e070e3521..8d330a1d3ef 100644
--- a/packages/compass-connections-navigation/src/base-navigation-item.tsx
+++ b/packages/compass-connections-navigation/src/base-navigation-item.tsx
@@ -14,7 +14,12 @@ import {
 import { type Actions, ROW_HEIGHT } from './constants';
 import { ExpandButton } from './tree-item';
 import { type NavigationItemActions } from './item-actions';
-import type { SidebarTreeItem } from './tree-data';
+import type {
+  ConnectedConnectionTreeItem,
+  NotConnectedConnectionTreeItem,
+  SidebarActionableItem,
+  SidebarTreeItem,
+} from './tree-data';
 
 type NavigationBaseItemProps = {
   item: SidebarTreeItem;
@@ -117,11 +122,11 @@ const ClusterStateBadge: React.FunctionComponent<{
 };
 
 const ClusterStateBadgeWithTooltip: React.FunctionComponent<{
-  item: SidebarTreeItem;
+  item: ConnectedConnectionTreeItem | NotConnectedConnectionTreeItem;
 }> = ({ item }) => {
   const isDarkMode = useDarkMode();
 
-  const atlasClusterState = item.connectionInfo?.atlasMetadata?.clusterState;
+  const atlasClusterState = item.connectionInfo.atlasMetadata?.clusterState;
   if (atlasClusterState === 'PAUSED') {
     return (
       <Tooltip
@@ -168,6 +173,7 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
   children,
 }) => {
   const [hoverProps, isHovered] = useHoverState();
+
   return (
     <div
       data-testid="base-navigation-item"
@@ -193,7 +199,9 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
           {icon}
           <span title={name}>{name}</span>
         </div>
-        <ClusterStateBadgeWithTooltip item={item} />
+        {item.type === 'connection' && (
+          <ClusterStateBadgeWithTooltip item={item} />
+        )}
         <div className={actionControlsWrapperStyles}>
           <ItemActionControls
             menuClassName={menuStyles}

From 2a145699a1a51113f76eb5fa40078095539323ef Mon Sep 17 00:00:00 2001
From: Simon Zhu <simon.zhu@mongodb.com>
Date: Thu, 1 May 2025 09:51:50 -0400
Subject: [PATCH 09/14] remove unused'

---
 .../src/base-navigation-item.tsx                            | 1 -
 packages/compass-web/src/connection-storage.tsx             | 1 +
 packages/compass-web/src/entrypoint.tsx                     | 6 ++++--
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/compass-connections-navigation/src/base-navigation-item.tsx b/packages/compass-connections-navigation/src/base-navigation-item.tsx
index 8d330a1d3ef..65c5ffa2189 100644
--- a/packages/compass-connections-navigation/src/base-navigation-item.tsx
+++ b/packages/compass-connections-navigation/src/base-navigation-item.tsx
@@ -17,7 +17,6 @@ import { type NavigationItemActions } from './item-actions';
 import type {
   ConnectedConnectionTreeItem,
   NotConnectedConnectionTreeItem,
-  SidebarActionableItem,
   SidebarTreeItem,
 } from './tree-data';
 
diff --git a/packages/compass-web/src/connection-storage.tsx b/packages/compass-web/src/connection-storage.tsx
index 5a80a4e74f0..330bd8f6c3c 100644
--- a/packages/compass-web/src/connection-storage.tsx
+++ b/packages/compass-web/src/connection-storage.tsx
@@ -306,6 +306,7 @@ export class AtlasCloudConnectionStorage
 
         return {
           ...connectionInfo,
+          id: connectionInfo.atlasMetadata.clusterUniqueId,
           connectionOptions: {
             ...connectionInfo.connectionOptions,
             lookup: () => {
diff --git a/packages/compass-web/src/entrypoint.tsx b/packages/compass-web/src/entrypoint.tsx
index 4fdf1f0138a..58b56f6fc69 100644
--- a/packages/compass-web/src/entrypoint.tsx
+++ b/packages/compass-web/src/entrypoint.tsx
@@ -234,7 +234,7 @@ const WithConnectionsStore: React.FunctionComponent<{
   useEffect(() => {
     const intervalId = setInterval(() => {
       void actions.refreshConnections();
-    }, /* Matches default polling intervals in mms codebase */ 60_000);
+    }, /* Matches default polling intervals in mms codebase */ 5_000);
     return () => {
       clearInterval(intervalId);
     };
@@ -286,6 +286,8 @@ const CompassWeb = ({
       ? initialWorkspaceRef.current.connectionId
       : initialAutoconnectId ?? undefined;
 
+  console.log('AUTOCONNECT ID', autoconnectId);
+
   const onTrackRef = useRef(onTrack);
 
   const telemetryOptions = useRef<TelemetryServiceOptions>({
@@ -300,7 +302,7 @@ const CompassWeb = ({
     <GlobalAppRegistryProvider value={appRegistry.current}>
       <AppRegistryProvider scopeName="Compass Web Root">
         <CompassComponentsProvider
-          darkMode={darkMode}
+          darkMode={false}
           // Making sure that compass-web modals and tooltips are definitely not
           // hidden by Cloud UI sidebar and page header
           stackedElementsZIndex={10_000}

From dd54676f57856973c9b98ba3f71326afc5cb77ad Mon Sep 17 00:00:00 2001
From: Simon Zhu <simon.zhu@mongodb.com>
Date: Thu, 1 May 2025 09:52:25 -0400
Subject: [PATCH 10/14] Revert "remove unused'"

This reverts commit 2a145699a1a51113f76eb5fa40078095539323ef.
---
 packages/compass-web/src/connection-storage.tsx | 1 -
 packages/compass-web/src/entrypoint.tsx         | 6 ++----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/compass-web/src/connection-storage.tsx b/packages/compass-web/src/connection-storage.tsx
index 330bd8f6c3c..5a80a4e74f0 100644
--- a/packages/compass-web/src/connection-storage.tsx
+++ b/packages/compass-web/src/connection-storage.tsx
@@ -306,7 +306,6 @@ export class AtlasCloudConnectionStorage
 
         return {
           ...connectionInfo,
-          id: connectionInfo.atlasMetadata.clusterUniqueId,
           connectionOptions: {
             ...connectionInfo.connectionOptions,
             lookup: () => {
diff --git a/packages/compass-web/src/entrypoint.tsx b/packages/compass-web/src/entrypoint.tsx
index 58b56f6fc69..4fdf1f0138a 100644
--- a/packages/compass-web/src/entrypoint.tsx
+++ b/packages/compass-web/src/entrypoint.tsx
@@ -234,7 +234,7 @@ const WithConnectionsStore: React.FunctionComponent<{
   useEffect(() => {
     const intervalId = setInterval(() => {
       void actions.refreshConnections();
-    }, /* Matches default polling intervals in mms codebase */ 5_000);
+    }, /* Matches default polling intervals in mms codebase */ 60_000);
     return () => {
       clearInterval(intervalId);
     };
@@ -286,8 +286,6 @@ const CompassWeb = ({
       ? initialWorkspaceRef.current.connectionId
       : initialAutoconnectId ?? undefined;
 
-  console.log('AUTOCONNECT ID', autoconnectId);
-
   const onTrackRef = useRef(onTrack);
 
   const telemetryOptions = useRef<TelemetryServiceOptions>({
@@ -302,7 +300,7 @@ const CompassWeb = ({
     <GlobalAppRegistryProvider value={appRegistry.current}>
       <AppRegistryProvider scopeName="Compass Web Root">
         <CompassComponentsProvider
-          darkMode={false}
+          darkMode={darkMode}
           // Making sure that compass-web modals and tooltips are definitely not
           // hidden by Cloud UI sidebar and page header
           stackedElementsZIndex={10_000}

From 01cf00a00df17a6a74b40f4d94bf05b1877c91e7 Mon Sep 17 00:00:00 2001
From: Simon Zhu <simon.zhu@mongodb.com>
Date: Thu, 1 May 2025 20:13:37 -0400
Subject: [PATCH 11/14] comments

---
 .../src/connections-navigation-tree.tsx       |  4 +-
 .../src/styled-navigation-item.tsx            |  8 ++--
 .../src/hooks/use-connectable.ts              | 44 +++++++------------
 packages/compass-connections/src/provider.ts  |  2 +-
 .../compass-web/src/connection-storage.tsx    |  1 +
 5 files changed, 23 insertions(+), 36 deletions(-)

diff --git a/packages/compass-connections-navigation/src/connections-navigation-tree.tsx b/packages/compass-connections-navigation/src/connections-navigation-tree.tsx
index f22e0370f3b..77156b5f810 100644
--- a/packages/compass-connections-navigation/src/connections-navigation-tree.tsx
+++ b/packages/compass-connections-navigation/src/connections-navigation-tree.tsx
@@ -18,7 +18,7 @@ import {
   spacing,
   useId,
 } from '@mongodb-js/compass-components';
-import { useConnectableRef } from '@mongodb-js/compass-connections/provider';
+import { useConnectable } from '@mongodb-js/compass-connections/provider';
 import type { WorkspaceTab } from '@mongodb-js/compass-workspaces';
 import { usePreference } from 'compass-preferences-model/provider';
 import type { NavigationItemActions } from './item-actions';
@@ -58,7 +58,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
   );
 
   const id = useId();
-  const { getConnectable } = useConnectableRef();
+  const getConnectable = useConnectable();
 
   const treeData = useMemo(() => {
     return getVirtualTreeItems({
diff --git a/packages/compass-connections-navigation/src/styled-navigation-item.tsx b/packages/compass-connections-navigation/src/styled-navigation-item.tsx
index d79abfcd9eb..1627b62c1bb 100644
--- a/packages/compass-connections-navigation/src/styled-navigation-item.tsx
+++ b/packages/compass-connections-navigation/src/styled-navigation-item.tsx
@@ -30,12 +30,12 @@ export default function StyledNavigationItem({
     () => (isDarkMode ? palette.gray.light1 : palette.gray.dark1),
     [isDarkMode]
   );
-
-  const connectionId = getConnectionId(item);
-  const isConnectable = useConnectable(connectionId);
+  const getConnectable = useConnectable();
 
   const style: React.CSSProperties & AcceptedStyles = useMemo(() => {
     const style: AcceptedStyles = {};
+    const connectionId = getConnectionId(item);
+    const isConnectable = getConnectable(connectionId);
     const isDisconnectedConnection =
       item.type === 'connection' && item.connectionStatus !== 'connected';
     const isNonExistentNamespace =
@@ -59,9 +59,9 @@ export default function StyledNavigationItem({
     return style;
   }, [
     inactiveColor,
-    isConnectable,
     item,
     colorCode,
+    getConnectable,
     connectionColorToHex,
     connectionColorToHexActive,
   ]);
diff --git a/packages/compass-connections/src/hooks/use-connectable.ts b/packages/compass-connections/src/hooks/use-connectable.ts
index cc804d29a27..df2ead4262b 100644
--- a/packages/compass-connections/src/hooks/use-connectable.ts
+++ b/packages/compass-connections/src/hooks/use-connectable.ts
@@ -1,34 +1,20 @@
-import { useSelector, useStore } from '../stores/store-context';
-import { useRef, useState } from 'react';
+import { useStore } from '../stores/store-context';
+import { useCallback } from 'react';
 import { connectable } from '../utils/connection-supports';
 
-export function useConnectable(connectionId: string): boolean {
-  return useSelector((state) => {
-    const connection = state.connections.byId[connectionId];
+export function useConnectable(): (connectionId: string) => boolean {
+  const store = useStore();
+  const getConnectable = useCallback(
+    (connectionId: string) => {
+      const conn = store.getState().connections.byId[connectionId];
+      if (!conn) {
+        return false;
+      }
 
-    if (!connection) {
-      return false;
-    }
+      return connectable(conn.info);
+    },
+    [store]
+  );
 
-    return connectable(connection.info);
-  });
-}
-
-export function useConnectableRef(): {
-  getConnectable(this: void, connectionId: string): boolean;
-} {
-  const storeRef = useRef(useStore());
-  const [ref] = useState(() => {
-    return {
-      getConnectable(connectionId: string) {
-        const conn = storeRef.current.getState().connections.byId[connectionId];
-        if (!conn) {
-          return false;
-        }
-
-        return connectable(conn.info);
-      },
-    };
-  });
-  return ref;
+  return getConnectable;
 }
diff --git a/packages/compass-connections/src/provider.ts b/packages/compass-connections/src/provider.ts
index db85fd35904..e01a522615a 100644
--- a/packages/compass-connections/src/provider.ts
+++ b/packages/compass-connections/src/provider.ts
@@ -69,7 +69,7 @@ export type { ConnectionsService } from './stores/store-context';
 
 export { useConnectionSupports } from './hooks/use-connection-supports';
 
-export { useConnectable, useConnectableRef } from './hooks/use-connectable';
+export { useConnectable } from './hooks/use-connectable';
 
 const ConnectionStatus = {
   /**
diff --git a/packages/compass-web/src/connection-storage.tsx b/packages/compass-web/src/connection-storage.tsx
index 5a80a4e74f0..64265b8cc2a 100644
--- a/packages/compass-web/src/connection-storage.tsx
+++ b/packages/compass-web/src/connection-storage.tsx
@@ -254,6 +254,7 @@ const VISIBLE_CLUSTER_STATES: AtlasClusterMetadata['clusterState'][] = [
   'PAUSED',
   'CREATING',
   'DELETING',
+  'DELETED',
 ];
 
 /**

From 2bce9f07abaf66168b40163c4a5c6ba4df284128 Mon Sep 17 00:00:00 2001
From: Simon Zhu <simon.zhu@mongodb.com>
Date: Thu, 1 May 2025 21:54:26 -0400
Subject: [PATCH 12/14] Update connections-store-redux.ts

---
 .../src/stores/connections-store-redux.ts                 | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/compass-connections/src/stores/connections-store-redux.ts b/packages/compass-connections/src/stores/connections-store-redux.ts
index a2a33c42a0d..65dd8608009 100644
--- a/packages/compass-connections/src/stores/connections-store-redux.ts
+++ b/packages/compass-connections/src/stores/connections-store-redux.ts
@@ -561,6 +561,10 @@ function mergeConnections(
           info: connectionInfo,
         },
       };
+
+      // TODO: if an Atlas connection is going from PAUSED state to unpaused, we should
+      // reconnect the data service, since it would previously have been disconnected
+      // due to non-retryable error code.
     }
   }
 
@@ -1423,7 +1427,9 @@ function getDescriptionForNonRetryableError(error: Error): string {
   // to the generic error description.
   const reason = error.message.match(/code: \d+, reason: (.*)$/)?.[1];
   return reason && reason.length > 0
-    ? reason
+    ? reason.endsWith('.')
+      ? reason.slice(0, -1)
+      : reason // Remove trailing period
     : NonRetryableErrorDescriptionFallbacks[
         Number(
           error.message.match(/code: (\d+),/)?.[1]

From 8a70b1cb884aaf57b3e0d1a260f69e5d4c373934 Mon Sep 17 00:00:00 2001
From: Simon Zhu <simon.zhu@mongodb.com>
Date: Fri, 2 May 2025 13:10:54 -0400
Subject: [PATCH 13/14] Update connections-store-redux.ts

---
 .../compass-connections/src/stores/connections-store-redux.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/compass-connections/src/stores/connections-store-redux.ts b/packages/compass-connections/src/stores/connections-store-redux.ts
index 65dd8608009..e6b0f8a7c4d 100644
--- a/packages/compass-connections/src/stores/connections-store-redux.ts
+++ b/packages/compass-connections/src/stores/connections-store-redux.ts
@@ -562,7 +562,7 @@ function mergeConnections(
         },
       };
 
-      // TODO: if an Atlas connection is going from PAUSED state to unpaused, we should
+      // TODO(COMPASS-9319): if an Atlas connection is going from PAUSED state to unpaused, we should
       // reconnect the data service, since it would previously have been disconnected
       // due to non-retryable error code.
     }

From 291d6cf1924b6b1869978e4650e29ecdf8e967ec Mon Sep 17 00:00:00 2001
From: Simon Zhu <simon.zhu@mongodb.com>
Date: Tue, 6 May 2025 00:08:24 -0400
Subject: [PATCH 14/14] fix tests

---
 .../src/connections-navigation-tree.tsx       | 24 ++++++++++++-------
 .../src/styled-navigation-item.tsx            |  6 ++++-
 .../src/feature-flags.ts                      |  9 +++++++
 packages/compass-web/sandbox/index.tsx        |  1 +
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/packages/compass-connections-navigation/src/connections-navigation-tree.tsx b/packages/compass-connections-navigation/src/connections-navigation-tree.tsx
index 77156b5f810..58ba9a36511 100644
--- a/packages/compass-connections-navigation/src/connections-navigation-tree.tsx
+++ b/packages/compass-connections-navigation/src/connections-navigation-tree.tsx
@@ -56,6 +56,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
   const isRenameCollectionEnabled = usePreference(
     'enableRenameCollectionModal'
   );
+  const showDisabledConnections = !!usePreference('showDisabledConnections');
 
   const id = useId();
   const getConnectable = useConnectable();
@@ -71,9 +72,11 @@ const ConnectionsNavigationTree: React.FunctionComponent<
 
   const onDefaultAction: OnDefaultAction<SidebarActionableItem> = useCallback(
     (item, evt) => {
-      const connectionId = getConnectionId(item);
-      if (!getConnectable(connectionId)) {
-        return;
+      if (showDisabledConnections) {
+        const connectionId = getConnectionId(item);
+        if (!getConnectable(connectionId)) {
+          return;
+        }
       }
 
       if (item.type === 'connection') {
@@ -90,7 +93,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
         }
       }
     },
-    [onItemAction, getConnectable]
+    [onItemAction, getConnectable, showDisabledConnections]
   );
 
   const activeItemId = useMemo(() => {
@@ -151,11 +154,13 @@ const ConnectionsNavigationTree: React.FunctionComponent<
 
   const getItemActionsAndConfig = useCallback(
     (item: SidebarTreeItem) => {
-      const connectionId = getConnectionId(item);
-      if (!getConnectable(connectionId)) {
-        return {
-          actions: [],
-        };
+      if (showDisabledConnections) {
+        const connectionId = getConnectionId(item);
+        if (!getConnectable(connectionId)) {
+          return {
+            actions: [],
+          };
+        }
       }
       switch (item.type) {
         case 'placeholder':
@@ -209,6 +214,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
       isRenameCollectionEnabled,
       getCollapseAfterForConnectedItem,
       getConnectable,
+      showDisabledConnections,
     ]
   );
 
diff --git a/packages/compass-connections-navigation/src/styled-navigation-item.tsx b/packages/compass-connections-navigation/src/styled-navigation-item.tsx
index 1627b62c1bb..0fdc7912110 100644
--- a/packages/compass-connections-navigation/src/styled-navigation-item.tsx
+++ b/packages/compass-connections-navigation/src/styled-navigation-item.tsx
@@ -6,6 +6,7 @@ import {
 import { palette, useDarkMode } from '@mongodb-js/compass-components';
 import { getConnectionId, type SidebarTreeItem } from './tree-data';
 import { useConnectable } from '@mongodb-js/compass-connections/provider';
+import { usePreference } from 'compass-preferences-model/provider';
 
 type AcceptedStyles = {
   '--item-bg-color'?: string;
@@ -22,6 +23,7 @@ export default function StyledNavigationItem({
   item: SidebarTreeItem;
   children: React.ReactChild;
 }): React.ReactElement {
+  const showDisabledConnections = !!usePreference('showDisabledConnections');
   const isDarkMode = useDarkMode();
   const { connectionColorToHex, connectionColorToHexActive } =
     useConnectionColor();
@@ -35,7 +37,8 @@ export default function StyledNavigationItem({
   const style: React.CSSProperties & AcceptedStyles = useMemo(() => {
     const style: AcceptedStyles = {};
     const connectionId = getConnectionId(item);
-    const isConnectable = getConnectable(connectionId);
+    const isConnectable =
+      !showDisabledConnections || getConnectable(connectionId);
     const isDisconnectedConnection =
       item.type === 'connection' && item.connectionStatus !== 'connected';
     const isNonExistentNamespace =
@@ -62,6 +65,7 @@ export default function StyledNavigationItem({
     item,
     colorCode,
     getConnectable,
+    showDisabledConnections,
     connectionColorToHex,
     connectionColorToHexActive,
   ]);
diff --git a/packages/compass-preferences-model/src/feature-flags.ts b/packages/compass-preferences-model/src/feature-flags.ts
index f16ed69ed35..668556e7286 100644
--- a/packages/compass-preferences-model/src/feature-flags.ts
+++ b/packages/compass-preferences-model/src/feature-flags.ts
@@ -22,6 +22,7 @@ export type FeatureFlags = {
   enableQueryHistoryAutocomplete: boolean;
   enableProxySupport: boolean;
   enableRollingIndexes: boolean;
+  showDisabledConnections: boolean;
   enableGlobalWrites: boolean;
   enableDataModeling: boolean;
   enableIndexesGuidanceExp: boolean;
@@ -91,6 +92,14 @@ export const featureFlags: Required<{
     },
   },
 
+  showDisabledConnections: {
+    stage: 'development',
+    description: {
+      short:
+        'Show clusters that are not in a "connectable" state in Atlas Cloud',
+    },
+  },
+
   enableRollingIndexes: {
     stage: 'development',
     description: {
diff --git a/packages/compass-web/sandbox/index.tsx b/packages/compass-web/sandbox/index.tsx
index 1392df7a318..35dc4780dcb 100644
--- a/packages/compass-web/sandbox/index.tsx
+++ b/packages/compass-web/sandbox/index.tsx
@@ -135,6 +135,7 @@ const App = () => {
               enableCreatingNewConnections: !isAtlas,
               enableGlobalWrites: isAtlas,
               enableRollingIndexes: isAtlas,
+              showDisabledConnections: true,
               enableGenAIFeaturesAtlasProject:
                 isAtlas && !!enableGenAIFeaturesAtlasProject,
               enableGenAISampleDocumentPassingOnAtlasProject: