Merge remote-tracking branch 'origin/main' into beta-releases

Author: github-actions[bot]

THIRD-PARTY-NOTICES.md

@@ -1,5 +1,5 @@
 The following third-party software is used by and included in **Mongodb Compass**.
-This document was automatically generated on Fri Nov 24 2023.
+This document was automatically generated on Sun Nov 26 2023.
 
 ## List of dependencies
 

package-lock.json

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Link } from './leafygreen';
+import { css } from '@leafygreen-ui/emotion';
+
+const toastBodyFlexStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+});
+
+const toastBodyTextStyles = css({
+  flexGrow: 1,
+});
+
+const toastActionStyles = css({
+  textTransform: 'uppercase',
+  flexGrow: 0,
+  alignSelf: 'center',
+
+  // Remove button styles.
+  border: 'none',
+  padding: 0,
+  margin: 0,
+  background: 'none',
+});
+
+export function ToastBody({
+  statusMessage,
+  actionHandler,
+  actionText,
+}: {
+  statusMessage: string;
+  actionHandler?: () => void;
+  actionText?: string;
+}) {
+  return (
+    <div className={toastBodyFlexStyles}>
+      <p className={toastBodyTextStyles}>{statusMessage}</p>
+      {!!actionHandler && (
+        <Link
+          as="button"
+          data-testid={`toast-action-${actionText ?? 'none'}`}
+          onClick={actionHandler}
+          hideExternalIcon
+          className={toastActionStyles}
+        >
+          {actionText}
+        </Link>
+      )}
+    </div>
+  );
+}

packages/compass-components/src/components/toast-body.tsx

@@ -183,3 +183,4 @@ export { usePersistedState } from './hooks/use-persisted-state';
 export { GuideCue, GuideCueProvider } from './components/guide-cue/guide-cue';
 export type { Cue, GroupCue } from './components/guide-cue/guide-cue';
 export { PerformanceSignals } from './components/signals';
+export { ToastBody } from './components/toast-body';

packages/compass-components/src/index.ts

@@ -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",

packages/compass-connections/package.json

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

packages/compass-connections/src/components/connection-list/connection-list.spec.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-${