comments

Author: syn-zhu

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

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

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

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 = {
   /**

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

@@ -254,6 +254,7 @@ const VISIBLE_CLUSTER_STATES: AtlasClusterMetadata['clusterState'][] = [
   'PAUSED',
   'CREATING',
   'DELETING',
+  'DELETED',
 ];
 
 /**