feat(connections): add filter to saved connections when there are mor…

…e than 10 saved COMPASS-7439 (#5093)
mongodb-js · Nov 24, 2023 · bd7e51b · bd7e51b
1 parent c7da735
commit bd7e51b
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/compass-connections/package.json b/packages/compass-connections/package.json
@@ -75,6 +75,7 @@
     "@mongodb-js/tsconfig-compass": "^1.0.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/chai": "^4.2.21",
     "@types/chai-dom": "^0.0.10",
     "@types/mocha": "^9.0.0",

diff --git a/packages/compass-connections/src/components/connection-list/connection-list.spec.tsx b/packages/compass-connections/src/components/connection-list/connection-list.spec.tsx
@@ -6,6 +6,7 @@ import {
   waitFor,
   cleanup,
 } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import type { ConnectionInfo } from '@mongodb-js/connection-storage/renderer';
@@ -113,6 +114,68 @@ describe('ConnectionList Component', function () {
       const listItems = screen.getAllByTestId('recent-connection');
       expect(listItems.length).to.equal(mockRecents.length);
     });
+
+    it('does not show the saved connections filter input', function () {
+      const filter = screen.queryByTestId(
+        'sidebar-filter-saved-connections-input'
+      );
+      expect(filter).to.not.exist;
+    });
+  });
+
+  describe('with more than 10 favorite connections', function () {
+    beforeEach(function () {
+      const favorites = [
+        ...mockFavorites,
+        ...mockFavorites.map((favorite) => ({
+          ...favorite,
+          id: favorite.id + '__1',
+        })),
+        ...mockFavorites.map((favorite) => ({
+          ...favorite,
+          id: favorite.id + '__2',
+        })),
+        ...mockFavorites.map((favorite) => ({
+          ...favorite,
+          id: favorite.id + '__3',
+        })),
+      ];
+      render(
+        <ConnectionList
+          activeConnectionId={mockFavorites[2].id}
+          favoriteConnections={favorites}
+          recentConnections={mockRecents}
+          createNewConnection={createNewConnectionSpy}
+          setActiveConnectionId={setActiveConnectionIdSpy}
+          removeAllRecentsConnections={() => true}
+          onDoubleClick={() => true}
+        />
+      );
+    });
+
+    it('shows the saved connections filter input', function () {
+      expect(screen.getByTestId('sidebar-filter-saved-connections-input')).to.be
+        .visible;
+      expect(
+        screen.getAllByTestId('favorite-connection-title').length
+      ).to.equal(12);
+    });
+
+    describe('when the saved connections filter input is updated', function () {
+      beforeEach(function () {
+        const textInput = screen.getByTestId(
+          'sidebar-filter-saved-connections-input'
+        );
+
+        userEvent.type(textInput, 'super');
+      });
+
+      it('only shows the partial favorite connections', function () {
+        expect(
+          screen.getAllByTestId('favorite-connection-title').length
+        ).to.equal(4);
+      });
+    });
   });
 
   describe('when new connection is clicked', function () {

diff --git a/packages/compass-connections/src/components/connection-list/connection-list.tsx b/packages/compass-connections/src/components/connection-list/connection-list.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useMemo, useState } from 'react';
 import {
   Button,
   FavoriteIcon,
@@ -18,11 +18,16 @@ import type AppRegistry from 'hadron-app-registry';
 
 import Connection from './connection';
 import ConnectionsTitle from './connections-title';
+import { TextInput } from '@mongodb-js/compass-components';
 
 const newConnectionButtonContainerStyles = css({
   padding: spacing[3],
 });
 
+const savedConnectionsFilter = css({
+  margin: `${spacing[2]}px ${spacing[3]}px`,
+});
+
 const newConnectionButtonStyles = css({
   width: '100%',
   justifyContent: 'center',
@@ -89,6 +94,8 @@ const connectionListStyles = css({
   padding: 0,
 });
 
+const MIN_FAV_CONNECTIONS_TO_SHOW_FILTER = 10;
+
 function RecentIcon() {
   const darkMode = useDarkMode();
 
@@ -163,6 +170,22 @@ function ConnectionList({
   const [recentHoverProps, recentHeaderHover] = useHoverState();
   const [favoriteHoverProps, favoriteHeaderHover] = useHoverState();
 
+  const [favoriteConnectionsFilter, setSavedConnectionsFilter] = useState('');
+
+  const filteredSavedConnections = useMemo(() => {
+    if (!favoriteConnectionsFilter) {
+      return favoriteConnections;
+    }
+
+    return favoriteConnections.filter((connection) =>
+      connection.favorite?.name
+        ?.toLowerCase()
+        .includes(favoriteConnectionsFilter.toLowerCase())
+    );
+  }, [favoriteConnections, favoriteConnectionsFilter]);
+  const showFilteredSavedConnections =
+    favoriteConnections.length > MIN_FAV_CONNECTIONS_TO_SHOW_FILTER;
+
   return (
     <Fragment>
       <ConnectionsTitle
@@ -211,8 +234,24 @@ function ConnectionList({
             isVisible={favoriteHeaderHover}
           ></ItemActionControls>
         </div>
+        {showFilteredSavedConnections && (
+          <TextInput
+            data-testid="sidebar-filter-saved-connections-input"
+            placeholder="Search"
+            type="search"
+            aria-label="Saved connections filter"
+            title="Saved connections filter"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setSavedConnectionsFilter(e.target.value)
+            }
+            className={savedConnectionsFilter}
+          />
+        )}
         <ul className={connectionListStyles}>
-          {favoriteConnections.map((connectionInfo, index) => (
+          {(showFilteredSavedConnections
+            ? filteredSavedConnections
+            : favoriteConnections
+          ).map((connectionInfo, index) => (
             <li
               data-testid="favorite-connection"
               data-id={`favorite-connection-${