feat: allow to configure the search query debounce interval (#2107)

The search will now debounce instead of throttle the search queries.

Author: MartinCupela

docusaurus/docs/React/components/utility-components/channel-search.mdx

@@ -338,6 +338,14 @@ Custom search function to override default. The first argument should expect an
 | --------------------------------------------------------------------------------------------------- |
 | (`params: ChannelSearchFunctionParams, event: React.BaseSyntheticEvent` ) => Promise<void\> \| void |
 
+### searchDebounceIntervalMs
+
+The number of milliseconds to debounce the search query.
+
+| Type     | Default |
+|----------|---------|
+| `number` | 300     |
+
 ### SearchInput
 
 Custom UI component to display the search text input.

docusaurus/docs/React/guides/customization/channel-search.mdx

@@ -311,7 +311,7 @@ const additionalProps = {
 
 ### The searchFunction Prop:
 
-By default the `ChannelSearch` component searches just for users. Use the `searchForChannels` prop to also search for channels.
+By default, the `ChannelSearch` component searches just for users. Use the `searchForChannels` prop to also search for channels.
 
 To override the search method, completely use the `searchFunction` prop. This prop is useful, say, when you want to search just for channels
 and for only channels that the current logged in user is a member of. See the example below for this.

src/components/ChannelList/__tests__/ChannelList.test.js

@@ -48,7 +48,7 @@ const channelsQueryStateMock = {
 };
 
 /**
- * We are gonna use following custom UI components for preview and list.
+ * We use the following custom UI components for preview and list.
  * If we use ChannelPreviewMessenger or ChannelPreviewLastMessage here, then changes
  * to those components might end up breaking tests for ChannelList, which will be quite painful
  * to debug then.
@@ -438,6 +438,7 @@ describe('ChannelList', () => {
     });
 
     describe('channel search', () => {
+      const defaultSearchDebounceInterval = 300;
       const inputText = 'xxxxxxxxxx';
       const user1 = generateUser();
       const user2 = generateUser();
@@ -551,20 +552,24 @@ describe('ChannelList', () => {
       ])(
         'theme v%s %s unmount search results on result click, if configured',
         async (themeVersion, _, clearSearchOnClickOutside) => {
+          jest.useFakeTimers('modern');
+          jest.spyOn(client, 'queryUsers').mockResolvedValue({ users: [generateUser()] });
           const { container } = await renderComponents(
             { channel, client, themeVersion },
             { additionalChannelSearchProps: { clearSearchOnClickOutside } },
           );
-          const input = screen.queryByTestId('search-input');
+          const input = screen.getByTestId('search-input');
           await act(() => {
             fireEvent.change(input, {
               target: {
                 value: inputText,
               },
             });
           });
-
-          const searchResults = screen.queryAllByRole('option');
+          await act(() => {
+            jest.advanceTimersByTime(defaultSearchDebounceInterval + 1);
+          });
+          const searchResults = screen.queryAllByTestId('channel-search-result-user');
           useMockedApis(client, [getOrCreateChannelApi(generateChannel())]);
           await act(() => {
             fireEvent.click(searchResults[0]);
@@ -577,6 +582,7 @@ describe('ChannelList', () => {
               expect(container.querySelector(SEARCH_RESULT_LIST_SELECTOR)).toBeInTheDocument();
             }
           });
+          jest.useRealTimers();
         },
       );
 
@@ -645,6 +651,8 @@ describe('ChannelList', () => {
       it.each([['1'], ['2']])(
         'theme v%s should add the selected result to the top of the channel list',
         async (themeVersion) => {
+          jest.useFakeTimers('modern');
+          jest.spyOn(client, 'queryUsers').mockResolvedValue({ users: [generateUser()] });
           const getComputedStyleMock = jest.spyOn(window, 'getComputedStyle');
           getComputedStyleMock.mockReturnValue({
             getPropertyValue: jest.fn().mockReturnValue(themeVersion),
@@ -679,8 +687,11 @@ describe('ChannelList', () => {
               },
             });
           });
+          await act(() => {
+            jest.advanceTimersByTime(defaultSearchDebounceInterval + 1);
+          });
 
-          const targetChannelPreview = screen.queryByText(channelNotInTheList.channel.name);
+          const targetChannelPreview = screen.getByText(channelNotInTheList.channel.name);
           expect(targetChannelPreview).toBeInTheDocument();
           await act(() => {
             fireEvent.click(targetChannelPreview);
@@ -693,6 +704,7 @@ describe('ChannelList', () => {
             }
           });
           getComputedStyleMock.mockClear();
+          jest.useRealTimers();
         },
       );
     });