init

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 {

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}

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;

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,17 +210,18 @@ 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}>
       {item.type === 'placeholder' ? (
         <PlaceholderItem level={item.level} />
       ) : (
         <NavigationBaseItem
+          item={item}
           isActive={isActive}
           isFocused={isFocused}
           isExpanded={!!item.isExpanded}

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;

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;
   }
 
   /**

packages/connection-info/src/connection-info.ts

@@ -48,7 +48,7 @@ export interface AtlasClusterMetadata {
     | 'UPDATING'
     | 'PAUSED'
     | 'IDLE'
-    | 'REPARING'
+    | 'REPAIRING'
     | 'DELETING'
     | 'DELETED';