feat: active connections filter COMPASS-7772 (#5785)

Author: paula-stacho

packages/compass-app-stores/src/stores/instance-store.ts

@@ -233,9 +233,18 @@ export function createInstancesStore(
         onTopologyDescriptionChanged
       );
 
-      on(globalAppRegistry, 'sidebar-expand-database', (dbName: string) => {
-        void instance.databases.get(dbName)?.fetchCollections({ dataService });
-      });
+      on(
+        globalAppRegistry,
+        'sidebar-expand-database',
+        (connectionId: string, databaseId: string) => {
+          if (connectionId !== instanceConnectionId) {
+            return;
+          }
+          void instance.databases
+            .get(databaseId)
+            ?.fetchCollections({ dataService });
+        }
+      );
 
       on(
         globalAppRegistry,

packages/compass-connections-navigation/src/connections-navigation-tree.tsx

@@ -26,7 +26,7 @@ import {
   databaseItemActions,
 } from './item-actions';
 
-interface ConnectionsNavigationTreeProps {
+export interface ConnectionsNavigationTreeProps {
   connections: Connection[];
   expanded?: Record<string, false | Record<string, boolean>>;
   onConnectionExpand?(id: string, isExpanded: boolean): void;
@@ -188,7 +188,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
 const MCContainer = css({
   display: 'flex',
   flex: '1 0 auto',
-  height: `calc(100% - ${spacing[3]}px)`,
+  height: `calc(100% - ${spacing[1600]}px - ${spacing[200]}px)`,
 });
 
 const SCContainer = css({

packages/compass-connections-navigation/src/tree-data.ts

@@ -12,7 +12,9 @@ import type {
 type Collection = {
   _id: string;
   name: string;
-  type: string;
+  type: 'view' | 'collection' | 'timeseries';
+  sourceName: string | null;
+  pipeline: unknown[];
 };
 
 type Status = 'initial' | 'fetching' | 'refreshing' | 'ready' | 'error';
@@ -228,7 +230,7 @@ const databaseToItems = ({
       id: `${connectionId}.${id}`, // id is the namespace of the collection, so includes db as well
       level: level + 1,
       name,
-      type: type as 'collection' | 'view' | 'timeseries',
+      type,
       setSize: collectionsLength,
       posInSet: collectionIndex + 1,
       colorCode,

packages/compass-sidebar/src/components/legacy/navigation-items.spec.tsx

@@ -31,9 +31,6 @@ function renderNavigationItems(
           }}
           showCreateDatabaseAction={true}
           isPerformanceTabSupported={true}
-          onFilterChange={() => {
-            /* noop */
-          }}
           {...props}
         />
       </WorkspacesProvider>

packages/compass-sidebar/src/components/legacy/navigation-items.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { connect } from 'react-redux';
 import {
   useHoverState,
@@ -23,9 +23,8 @@ import {
   withPreferences,
 } from 'compass-preferences-model/provider';
 import type { ItemAction } from '@mongodb-js/compass-components';
-import DatabaseCollectionFilter from '../database-collection-filter';
+import NavigationItemsFilter from '../navigation-items-filter';
 import SidebarDatabasesNavigation from './sidebar-databases-navigation';
-import { changeFilterRegex } from '../../modules/databases';
 import type { RootState } from '../../modules';
 import {
   useOpenWorkspace,
@@ -40,12 +39,12 @@ const navigationItem = css({
   cursor: 'pointer',
   color: 'var(--item-color)',
   border: 'none',
-  height: spacing[5],
+  height: spacing[800],
   position: 'relative',
 
   '& .item-action-controls': {
     marginLeft: 'auto',
-    marginRight: spacing[1],
+    marginRight: spacing[100],
   },
 
   '&:hover .item-background': {
@@ -88,16 +87,16 @@ const itemPlaceholderStyles = css({
   width: '100%',
   display: 'flex',
   alignItems: 'center',
-  paddingLeft: spacing[3],
-  height: spacing[5],
+  paddingLeft: spacing[400],
+  height: spacing[800],
 });
 
 const itemWrapper = css({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
-  height: spacing[5],
-  gap: spacing[2],
+  height: spacing[800],
+  gap: spacing[200],
   zIndex: 1,
 });
 
@@ -114,7 +113,7 @@ const itemButtonWrapper = css({
   display: 'flex',
   alignItems: 'center',
   minWidth: 0,
-  paddingLeft: spacing[3],
+  paddingLeft: spacing[400],
 });
 
 const signalContainerStyles = css({
@@ -125,7 +124,7 @@ const navigationItemLabel = css({
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
-  marginLeft: spacing[2],
+  marginLeft: spacing[200],
 });
 
 const navigationItemDisabledDarkModeStyles = css({
@@ -140,6 +139,10 @@ const navigationItemDisabledLightModeStyles = css({
   '--item-bg-color-hover': 'var(--item-bg-color)',
 });
 
+const databaseCollectionsFilter = css({
+  margin: `${spacing[100]}px ${spacing[400]}px`,
+});
+
 const navigationItemActionIcons = css({ color: 'inherit' });
 
 export function NavigationItem<Actions extends string>({
@@ -199,7 +202,7 @@ export function NavigationItem<Actions extends string>({
   return (
     <Tooltip
       align="right"
-      spacing={spacing[3]}
+      spacing={spacing[400]}
       isDisabled={!isButtonDisabled || !buttonDisabledMessage}
       trigger={({ children: tooltip, ...triggerProps }) => {
         const props = mergeProps(triggerProps, navigationItemProps);
@@ -257,7 +260,6 @@ export function NavigationItems({
   connectionInfo,
   showCreateDatabaseAction,
   isPerformanceTabSupported,
-  onFilterChange,
   onAction,
   activeWorkspace,
   showTooManyCollectionsInsight = false,
@@ -266,7 +268,6 @@ export function NavigationItems({
   connectionInfo: ConnectionInfo;
   showCreateDatabaseAction: boolean;
   isPerformanceTabSupported: boolean;
-  onFilterChange(regex: RegExp | null): void;
   onAction(actionName: string, ...rest: any[]): void;
   activeWorkspace?: WorkspaceTab;
   showTooManyCollectionsInsight?: boolean;
@@ -278,6 +279,14 @@ export function NavigationItems({
   } = useOpenWorkspace();
   const { hasWorkspacePlugin } = useWorkspacePlugins();
 
+  const [databasesFilterRegex, setDatabasesFilterRegex] =
+    useState<RegExp | null>(null);
+
+  const onDatabasesFilterChange = useCallback(
+    (filterRegex: RegExp | null) => setDatabasesFilterRegex(filterRegex),
+    [setDatabasesFilterRegex]
+  );
+
   const databasesActions = useMemo(() => {
     const actions: ItemAction<DatabasesActions>[] = [
       {
@@ -356,10 +365,16 @@ export function NavigationItems({
         }}
       ></ContentWithFallback>
 
-      <DatabaseCollectionFilter onFilterChange={onFilterChange} />
+      <NavigationItemsFilter
+        onFilterChange={onDatabasesFilterChange}
+        title="Databases and collections filter"
+        ariaLabel="Databases and collections filter"
+        searchInputClassName={databaseCollectionsFilter}
+      />
       <SidebarDatabasesNavigation
         connectionInfo={connectionInfo}
         activeWorkspace={activeWorkspace ?? undefined}
+        filterRegex={databasesFilterRegex}
       />
     </>
   );
@@ -399,9 +414,7 @@ const mapStateToProps = (
 };
 
 const MappedNavigationItems = withPreferences(
-  connect(mapStateToProps, {
-    onFilterChange: changeFilterRegex,
-  })(NavigationItems),
+  connect(mapStateToProps)(NavigationItems),
   ['readOnly']
 );