Add "exclude inactive" to connections filtering

Author: kraenhansen

packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx

@@ -273,6 +273,7 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
     filterRegex,
     fetchAllCollections,
     onDatabaseExpand,
+    excludeInactive,
   });
 
   const connectionListTitleActions =

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) =>