feat(Codecov): add test search bar with dynamic title to TA page (#94893)

This PR adds a search bar with dynamic title to the TA page. This
component mainly changes the url to add the `term` key, but this PR
doesn't clal the API directly as that part needs to be implemented.

Notes
-
- Add `TestSearchBar` component and add it to the tests page
- Expose `totalCount` from the test results endpoint

Author: adrianviquez

static/app/views/codecov/tests/queries/useGetTestResults.ts

@@ -151,6 +151,7 @@ export function useInfiniteTestResults() {
 
   return {
     data: memoizedData,
+    totalCount: data?.pages?.[0]?.[0]?.totalCount ?? 0,
     // TODO: only provide the values that we're interested in
     ...rest,
   };

static/app/views/codecov/tests/testSearchBar/testSearchBar.tsx

@@ -0,0 +1,87 @@
+import {useEffect, useMemo} from 'react';
+import {useSearchParams} from 'react-router-dom';
+import styled from '@emotion/styled';
+import debounce from 'lodash/debounce';
+
+import BaseSearchBar from 'sentry/components/searchBar';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+
+const FILTER_TO_NAME = {
+  slowestTests: 'Slowest Tests',
+  flakyTests: 'Flaky Tests',
+  failedTests: 'Failed Tests',
+  skippedTests: 'Skipped Tests',
+};
+
+type TestSearchBarProps = {
+  testCount: number;
+};
+
+export function TestSearchBar({testCount}: TestSearchBarProps) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const term = searchParams.get('term') || '';
+
+  const filterBy = searchParams.get('filterBy') || '';
+  const testTitle =
+    filterBy in FILTER_TO_NAME
+      ? FILTER_TO_NAME[filterBy as keyof typeof FILTER_TO_NAME]
+      : 'Tests';
+  const count = testCount > 999 ? `${(testCount / 1000).toFixed(1)}K` : testCount;
+  const searchTitle = `${testTitle} (${count})`;
+
+  const handleSearchChange = useMemo(
+    () =>
+      debounce((newValue: string) => {
+        setSearchParams(prev => {
+          const currentParams = Object.fromEntries(prev.entries());
+
+          if (newValue) {
+            currentParams.term = newValue;
+          } else {
+            delete currentParams.term;
+          }
+
+          return currentParams;
+        });
+      }, 500),
+    [setSearchParams]
+  );
+
+  useEffect(() => {
+    // Create a use effect to cancel handleSearchChange fn on unmount to avoid memory leaks
+    return () => {
+      handleSearchChange.cancel();
+    };
+  }, [handleSearchChange]);
+
+  return (
+    <Container>
+      <Title>{searchTitle}</Title>
+      <StyledSearchBar
+        placeholder={t('Search by test name')}
+        onChange={handleSearchChange}
+        query={term}
+      />
+    </Container>
+  );
+}
+
+const StyledSearchBar = styled(BaseSearchBar)`
+  flex: 1 1 auto;
+  min-width: 0;
+`;
+
+const Title = styled('h2')`
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin: 0;
+  font-size: ${p => p.theme.fontSize.xl};
+`;
+
+const Container = styled('div')`
+  display: flex;
+  align-items: center;
+  gap: ${space(1.5)};
+  width: 100%;
+`;

static/app/views/codecov/tests/tests.tsx

@@ -20,6 +20,7 @@ import type {ValidSort} from 'sentry/views/codecov/tests/testAnalyticsTable/test
 import TestAnalyticsTable, {
   isAValidSort,
 } from 'sentry/views/codecov/tests/testAnalyticsTable/testAnalyticsTable';
+import {TestSearchBar} from 'sentry/views/codecov/tests/testSearchBar/testSearchBar';
 
 function EmptySelectorsMessage() {
   return (
@@ -70,6 +71,7 @@ function Content() {
     <Fragment>
       {/* TODO: Conditionally show these if the branch we're in is the main branch */}
       <Summaries />
+      <TestSearchBar testCount={response.totalCount} />
       <TestAnalyticsTable response={response} sort={sorts[0]} />
     </Fragment>
   );