feat: create frontend repositories hook for TA page (#95511)

This PR creates the useRepositories hook to be consumed by the codecov
selector. Please play around w/ the repo selector and tell me how it
feels. This currently doesn't pass/need pagination params to be supplied
by the FE, while the BE does accept them if needed for future use cases.

Author: adrianviquez

static/app/components/codecov/repoSelector/repoSelector.tsx

@@ -1,7 +1,9 @@
-import {useCallback, useMemo} from 'react';
+import {useCallback, useEffect, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
+import debounce from 'lodash/debounce';
 
 import {useCodecovContext} from 'sentry/components/codecov/context/codecovContext';
+import {useInfiniteRepositories} from 'sentry/components/codecov/repoSelector/useInfiniteRepositories';
 import {Button} from 'sentry/components/core/button';
 import type {SelectOption} from 'sentry/components/core/compactSelect';
 import {CompactSelect} from 'sentry/components/core/compactSelect';
@@ -14,8 +16,6 @@ import {space} from 'sentry/styles/space';
 
 import {IconRepository} from './iconRepository';
 
-const CODECOV_PLACEHOLDER_REPOS = ['gazebo', 'sentry'];
-
 function SyncRepoButton() {
   return (
     <StyledButtonContainer>
@@ -56,6 +56,10 @@ function MenuFooter({repoAccessLink}: MenuFooterProps) {
 
 export function RepoSelector() {
   const {repository, integratedOrg, changeContextValue} = useCodecovContext();
+  const [searchValue, setSearchValue] = useState<string | undefined>();
+  const {data: repositories} = useInfiniteRepositories({term: searchValue});
+
+  const disabled = !integratedOrg;
 
   const handleChange = useCallback(
     (selectedOption: SelectOption<string>) => {
@@ -64,11 +68,19 @@ export function RepoSelector() {
     [changeContextValue]
   );
 
+  const handleOnSearch = useMemo(
+    () =>
+      debounce((value: string) => {
+        setSearchValue(value);
+      }, 500),
+    [setSearchValue]
+  );
+
   const options = useMemo((): Array<SelectOption<string>> => {
     // TODO: When API is ready, replace placeholder w/ api response
     const repoSet = new Set([
       ...(repository ? [repository] : []),
-      ...(CODECOV_PLACEHOLDER_REPOS.length ? CODECOV_PLACEHOLDER_REPOS : []),
+      ...(repositories.length > 0 ? repositories.map(item => item.name) : []),
     ]);
 
     return [...repoSet].map((value): SelectOption<string> => {
@@ -80,12 +92,18 @@ export function RepoSelector() {
         textValue: value,
       };
     });
-  }, [repository]);
+  }, [repository, repositories]);
 
-  const disabled = !integratedOrg;
+  useEffect(() => {
+    // Create a use effect to cancel handleOnSearch fn on unmount to avoid memory leaks
+    return () => {
+      handleOnSearch.cancel();
+    };
+  }, [handleOnSearch]);
 
   return (
     <CompactSelect
+      onSearch={handleOnSearch}
       searchable
       searchPlaceholder={t('search by repository name')}
       options={options}

static/app/components/codecov/repoSelector/useInfiniteRepositories.tsx

@@ -0,0 +1,107 @@
+import {useMemo} from 'react';
+
+import type {ApiResult} from 'sentry/api';
+import {useCodecovContext} from 'sentry/components/codecov/context/codecovContext';
+import {
+  fetchDataQuery,
+  type InfiniteData,
+  type QueryKeyEndpointOptions,
+  useInfiniteQuery,
+} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
+
+type RepositoryItem = {
+  defaultBranch: string;
+  latestCommitAt: string;
+  name: string;
+  updatedAt: string;
+};
+
+interface Repositories {
+  pageInfo: {
+    endCursor: string;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    startCursor: string;
+  };
+  results: RepositoryItem[];
+  totalCount: number;
+}
+
+type QueryKey = [url: string, endpointOptions: QueryKeyEndpointOptions];
+
+type Props = {
+  term?: string;
+};
+
+export function useInfiniteRepositories({term}: Props) {
+  const {integratedOrg} = useCodecovContext();
+  const organization = useOrganization();
+
+  const {data, ...rest} = useInfiniteQuery<
+    ApiResult<Repositories>,
+    Error,
+    InfiniteData<ApiResult<Repositories>>,
+    QueryKey
+  >({
+    queryKey: [
+      `/organizations/${organization.slug}/prevent/owner/${integratedOrg}/repositories/`,
+      {query: {term}},
+    ],
+    queryFn: async ({
+      queryKey: [url, {query}],
+      pageParam,
+      client,
+      signal,
+      meta,
+    }): Promise<ApiResult<Repositories>> => {
+      const result = await fetchDataQuery({
+        queryKey: [
+          url,
+          {
+            query: {
+              ...query,
+              cursor: pageParam ?? undefined,
+            },
+          },
+        ],
+        client,
+        signal,
+        meta,
+      });
+
+      return result as ApiResult<Repositories>;
+    },
+    getNextPageParam: ([lastPage]) => {
+      return lastPage.pageInfo?.hasNextPage ? lastPage.pageInfo.endCursor : undefined;
+    },
+    getPreviousPageParam: ([firstPage]) => {
+      return firstPage.pageInfo?.hasPreviousPage
+        ? firstPage.pageInfo.startCursor
+        : undefined;
+    },
+    initialPageParam: undefined,
+    enabled: Boolean(integratedOrg),
+  });
+
+  const memoizedData = useMemo(
+    () =>
+      data?.pages?.flatMap(([pageData]) =>
+        pageData.results.map(({defaultBranch, latestCommitAt, name, updatedAt}) => {
+          return {
+            name,
+            updatedAt,
+            defaultBranch,
+            latestCommitAt,
+          };
+        })
+      ) ?? [],
+    [data]
+  );
+
+  return {
+    data: memoizedData,
+    // TODO: only provide the values that we're interested in
+    ...rest,
+  };
+}

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

@@ -39,6 +39,21 @@ const mockTestResultAggregates = [
   },
 ];
 
+const mockRepositories = [
+  {
+    name: 'test-repo-one',
+    updatedAt: '2025-05-22T16:21:18.763951+00:00',
+    latestCommitAt: '2025-05-21T16:21:18.763951+00:00',
+    defaultBranch: 'branch-one',
+  },
+  {
+    name: 'test-repo-two',
+    updatedAt: '2025-05-22T16:21:18.763951+00:00',
+    latestCommitAt: '2025-05-21T16:21:18.763951+00:00',
+    defaultBranch: 'branch-two',
+  },
+];
+
 const mockApiCall = () => {
   MockApiClient.addMockResponse({
     url: `/organizations/org-slug/prevent/owner/some-org-name/repository/some-repository/test-results/`,
@@ -60,6 +75,14 @@ const mockApiCall = () => {
       results: mockTestResultAggregates,
     },
   });
+
+  MockApiClient.addMockResponse({
+    url: `/organizations/org-slug/prevent/owner/some-org-name/repositories/`,
+    method: 'GET',
+    body: {
+      results: mockRepositories,
+    },
+  });
 };
 
 describe('CoveragePageWrapper', () => {