fix: Add debounce to branch search

[suejung-sentry]

Add debounce to the branch search element to improve the current slow timing that takes ~10seconds+ to load.

The branch search bar runs below query in postgres sql which takes ~3 seconds to run (20+seconds in the worst case) - see Sentry board.

Without a debounce, we are sending these 3+second queries over and over as the user types into the search bar and waiting until the last of those queries return a value until displaying it. So separate from trying to optimize the query, this debounce should cut down the time significantly on the frontend.

Closes codecov/engineering-team#2537

Underlying query:

SELECT branches.branch, branches.repoid, branches.authors, branches.head, branches.base,
  branches.updatestamp
FROM branches
WHERE (
  branches.repoid = 111 AND UPPER(branches.branch::text) LIKE UPPER('%codecov%')
)
ORDER BY branches.updatestamp DESC
LIMIT 21;

RE: optimizing the query on the backend - There is an index on branches.repoid and one on branches.repoid,branches.branch but the latter index doesn't get picked up with LIKE operator. The LIKE operator does a full scan on all rows returned by the repoid filter, according to the EXPLAIN ANALYZE. There are options as an alternative to LIKE like going for prefix search only instead but that is a worse user experience. I think this frontend fix gets us pretty far for now until we need to go change our db solution for search

[codecov-staging]

Bundle Report

Changes will decrease total bundle size by 27 bytes (-0.0%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
gazebo-staging-system-esm	5.55MB	75 bytes (0.0%) ⬆️
gazebo-staging-system	5.5MB	102 bytes (-0.0%) ⬇️

[codecov]

Bundle Report

Changes will decrease total bundle size by 27 bytes (-0.0%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
gazebo-production-system	5.5MB	102 bytes (-0.0%) ⬇️
gazebo-production-system-esm	5.55MB	75 bytes (0.0%) ⬆️

[codecov]

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
5688	1	5687	0

View the top 1 failed tests by shortest run time

src/pages/RepoPage/BundlesTab/BundleContent/BundleSelection/BranchSelector.test.tsx > BranchSelector > BranchSelector debounce functionality > debounces the branch search term

Stack Traces | 0s run time

Error: [Vitest] Unexpected .only modifier. Remove it or pass --allowOnly argument to bypass this error

To view individual test run time comparison to the main branch, go to the Test Analytics Dashboard

[codecov-staging]

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
5688	1	5687	0

View the top 1 failed tests by shortest run time

src/pages/RepoPage/BundlesTab/BundleContent/BundleSelection/BranchSelector.test.tsx BranchSelector > BranchSelector debounce functionality > debounces the branch search term

Stack Traces | 0s run time

Error: [Vitest] Unexpected .only modifier. Remove it or pass --allowOnly argument to bypass this error

To view individual test run time comparison to the main branch, go to the Test Analytics Dashboard

[codecov-qa]

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
5688	1	5687	0

View the top 1 failed tests by shortest run time

src/pages/RepoPage/BundlesTab/BundleContent/BundleSelection/BranchSelector.test.tsx > BranchSelector > BranchSelector debounce functionality > debounces the branch search term

Stack Traces | 0s run time

Error: [Vitest] Unexpected .only modifier. Remove it or pass --allowOnly argument to bypass this error

To view individual test run time comparison to the main branch, go to the Test Analytics Dashboard

[codecov-public-qa]

Test Failures Detected: Due to failing tests, we cannot provide coverage reports at this time.

❌ Failed Test Results:

Completed 4900 tests with 1 failed, 4899 passed and 0 skipped.

View the full list of failed tests

src/pages/RepoPage/BundlesTab/BundleContent/BundleSelection/BranchSelector.test.tsx

• Class name: src/pages/RepoPage/BundlesTab/BundleContent/BundleSelection/BranchSelector.test.tsx
  Test name: BranchSelector > BranchSelector debounce functionality > debounces the branch search term
  
  

  Error: [Vitest] Unexpected .only modifier. Remove it or pass --allowOnly argument to bypass this error

[codecov-releaser]

✅ Deploy preview for gazebo ready!

Previews expire after 1 month automatically.

Storybook

Commit	Created	Cloud	Enterprise
e095f2d	Mon, 21 Oct 2024 03:24:40 GMT	Expired	Expired
5423bca	Mon, 21 Oct 2024 18:16:59 GMT	Cloud	Enterprise

[suejung-sentry]

Looks like there is a debounce already from BranchSelector > Select > SearchField (here)