diff --git a/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx index b151d7effd..9c15c9fc66 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx @@ -273,6 +273,7 @@ const ConnectionsNavigation: React.FC = ({ filterRegex, fetchAllCollections, onDatabaseExpand, + excludeInactive, }); const connectionListTitleActions = diff --git a/packages/compass-sidebar/src/components/use-filtered-connections.ts b/packages/compass-sidebar/src/components/use-filtered-connections.ts index 2d882324de..a90c6589c9 100644 --- a/packages/compass-sidebar/src/components/use-filtered-connections.ts +++ b/packages/compass-sidebar/src/components/use-filtered-connections.ts @@ -42,11 +42,19 @@ type FilteredConnection = ( const filterConnections = ( connections: SidebarConnection[], - regex: RegExp + regex: RegExp | null, + excludeInactive: boolean ): FilteredConnection[] => { const results: FilteredConnection[] = []; for (const connection of connections) { - const isMatch = regex.test(connection.name); + // Conditionally skip connections that aren't considered active + const inactive = + connection.connectionStatus !== 'connected' && + connection.connectionStatus !== 'connecting'; + if (excludeInactive && inactive) { + continue; + } + const isMatch = !regex || regex.test(connection.name); let childMatches: FilteredDatabase[] = []; if (connection.connectionStatus === 'connected') { childMatches = filterDatabases(connection.databases, regex); @@ -72,11 +80,11 @@ const filterConnections = ( const filterDatabases = ( databases: SidebarDatabase[], - regex: RegExp + regex: RegExp | null ): FilteredDatabase[] => { const results: FilteredDatabase[] = []; for (const db of databases) { - const isMatch = regex.test(db.name); + const isMatch = !regex || regex.test(db.name); const childMatches = filterCollections(db.collections, regex); if (isMatch || childMatches.length) { @@ -89,7 +97,7 @@ const filterDatabases = ( ? childMatches : db.collections.map((collection) => ({ ...collection, - isMatch: regex.test(collection.name), + isMatch: !regex || regex.test(collection.name), })); results.push({ ...db, @@ -103,10 +111,10 @@ const filterDatabases = ( const filterCollections = ( collections: SidebarCollection[], - regex: RegExp + regex: RegExp | null ): FilteredCollection[] => { return collections - .filter(({ name }) => regex.test(name)) + .filter(({ name }) => !regex || regex.test(name)) .map((collection) => ({ ...collection, isMatch: true })); }; @@ -205,7 +213,8 @@ const FILTER_CONNECTIONS = interface FilterConnectionsAction { type: typeof FILTER_CONNECTIONS; connections: SidebarConnection[]; - filterRegex: RegExp; + filterRegex: RegExp | null; + excludeInactive: boolean; } const CLEAR_FILTER = 'sidebar/active-connections/CLEAR_FILTER' as const; @@ -265,7 +274,8 @@ const connectionsReducer = ( case FILTER_CONNECTIONS: { const filtered = filterConnections( action.connections, - action.filterRegex + action.filterRegex, + action.excludeInactive ); const persistingExpanded = revertTemporaryExpanded(state.expanded); return { @@ -381,11 +391,13 @@ function filteredConnectionsToSidebarConnection( export const useFilteredConnections = ({ connections, filterRegex, + excludeInactive, fetchAllCollections, onDatabaseExpand, }: { connections: SidebarConnection[]; filterRegex: RegExp | null; + excludeInactive: boolean; fetchAllCollections: () => void; onDatabaseExpand: (connectionId: string, databaseId: string) => void; }): UseFilteredConnectionsHookResult => { @@ -410,11 +422,12 @@ export const useFilteredConnections = ({ // filter updates // connections change often, but the effect only uses connections if the filter is active // so we use this conditional dependency to avoid too many calls - const connectionsButOnlyIfFilterIsActive = filterRegex && connections; + const connectionsWhenFiltering = + (filterRegex || excludeInactive) && connections; useEffect(() => { - if (!filterRegex) { + if (!filterRegex && !excludeInactive) { dispatch({ type: CLEAR_FILTER }); - } else if (connectionsButOnlyIfFilterIsActive) { + } else if (connectionsWhenFiltering) { // the above check is extra just to please TS // When filtering, emit an event so that we can fetch all collections. This @@ -424,11 +437,17 @@ export const useFilteredConnections = ({ dispatch({ type: FILTER_CONNECTIONS, - connections: connectionsButOnlyIfFilterIsActive, + connections: connectionsWhenFiltering, filterRegex, + excludeInactive, }); } - }, [filterRegex, connectionsButOnlyIfFilterIsActive, fetchAllCollections]); + }, [ + filterRegex, + excludeInactive, + connectionsWhenFiltering, + fetchAllCollections, + ]); const onConnectionToggle = useCallback( (connectionId: string, expand: boolean) =>