fix tests

Author: syn-zhu

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,
     ]
   );
 

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,
   ]);

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: {

packages/compass-web/sandbox/index.tsx

@@ -135,6 +135,7 @@ const App = () => {
               enableCreatingNewConnections: !isAtlas,
               enableGlobalWrites: isAtlas,
               enableRollingIndexes: isAtlas,
+              showDisabledConnections: true,
               enableGenAIFeaturesAtlasProject:
                 isAtlas && !!enableGenAIFeaturesAtlasProject,
               enableGenAISampleDocumentPassingOnAtlasProject: