ref(releases): Create hooks to fetch commits + files (#86614)

This creates new hooks for querying for commits and commit files. This
will be used for our work on [Release
Drawer](https://github.com/getsentry/sentry/issues/85779)

static/app/views/releases/detail/commitsAndFiles/commits.tsx

@@ -11,10 +11,9 @@ import PanelHeader from 'sentry/components/panels/panelHeader';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {Commit, Repository} from 'sentry/types/integrations';
+import type {Repository} from 'sentry/types/integrations';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
-import {useApiQuery} from 'sentry/utils/queryClient';
 import routeTitleGen from 'sentry/utils/routeTitle';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -24,6 +23,7 @@ import {useRepositories} from 'sentry/utils/useRepositories';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
 import {ReleaseContext} from 'sentry/views/releases/detail';
 import {ReleaseCommit} from 'sentry/views/releases/detail/commitsAndFiles/releaseCommit';
+import {useReleaseCommits} from 'sentry/views/releases/utils/useReleaseCommits';
 
 import {getCommitsByRepository, getQuery, getReposToRender} from '../utils';
 
@@ -42,24 +42,19 @@ function CommitsList({organization, releaseRepos, projectSlug}: CommitsProps) {
   const activeReleaseRepo =
     releaseRepos.find(repo => repo.name === location.query.activeRepo) ?? releaseRepos[0];
 
-  const query = getQuery({location, activeRepository: activeReleaseRepo});
+  const query = getQuery({location});
   const {
     data: commitList = [],
     isPending: isLoadingCommitList,
     error: commitListError,
     refetch,
     getResponseHeader,
-  } = useApiQuery<Commit[]>(
-    [
-      `/projects/${organization.slug}/${projectSlug}/releases/${encodeURIComponent(
-        params.release
-      )}/commits/`,
-      {query},
-    ],
-    {
-      staleTime: Infinity,
-    }
-  );
+  } = useReleaseCommits({
+    release: params.release,
+    projectSlug,
+    activeRepository: activeReleaseRepo,
+    ...query,
+  });
   const commitsByRepository = getCommitsByRepository(commitList);
   const reposToRender = getReposToRender(Object.keys(commitsByRepository));
   const activeRepoName: string | undefined = activeReleaseRepo

static/app/views/releases/detail/commitsAndFiles/filesChanged.tsx

@@ -9,10 +9,9 @@ import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t, tn} from 'sentry/locale';
-import type {CommitFile, Repository} from 'sentry/types/integrations';
+import type {Repository} from 'sentry/types/integrations';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
-import {useApiQuery} from 'sentry/utils/queryClient';
 import routeTitleGen from 'sentry/utils/routeTitle';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -21,6 +20,7 @@ import {useReleaseRepositories} from 'sentry/utils/useReleaseRepositories';
 import {useRepositories} from 'sentry/utils/useRepositories';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
 import {ReleaseContext} from 'sentry/views/releases/detail';
+import {useReleaseCommitFiles} from 'sentry/views/releases/utils/useReleaseCommitFiles';
 
 import {getFilesByRepository, getQuery, getReposToRender} from '../utils';
 
@@ -40,24 +40,18 @@ function FilesChangedList({organization, releaseRepos, projectSlug}: FilesChange
   const activeReleaseRepo =
     releaseRepos.find(repo => repo.name === location.query.activeRepo) ?? releaseRepos[0];
 
-  const query = getQuery({location, activeRepository: activeReleaseRepo});
+  const query = getQuery({location});
   const {
     data: fileList = [],
     isPending: isLoadingFileList,
     error: fileListError,
     refetch,
     getResponseHeader,
-  } = useApiQuery<CommitFile[]>(
-    [
-      `/organizations/${organization.slug}/releases/${encodeURIComponent(
-        params.release
-      )}/commitfiles/`,
-      {query},
-    ],
-    {
-      staleTime: Infinity,
-    }
-  );
+  } = useReleaseCommitFiles({
+    release: params.release,
+    activeRepository: activeReleaseRepo,
+    ...query,
+  });
 
   const filesByRepository = getFilesByRepository(fileList);
   const reposToRender = getReposToRender(Object.keys(filesByRepository));

static/app/views/releases/detail/utils.tsx

@@ -75,25 +75,16 @@ export function getCommitsByRepository(commitList: Commit[]): CommitsByRepositor
 
 type GetQueryProps = {
   location: Location;
-  activeRepository?: Repository;
   perPage?: number;
 };
 
-export function getQuery({location, perPage = 40, activeRepository}: GetQueryProps) {
+export function getQuery({location, perPage = 40}: GetQueryProps) {
   const query = {
     ...pick(location.query, [...Object.values(URL_PARAM), 'cursor']),
     per_page: perPage,
   };
 
-  if (!activeRepository) {
-    return query;
-  }
-
-  return {
-    ...query,
-    repo_id: activeRepository.externalId,
-    repo_name: activeRepository.name,
-  };
+  return query;
 }
 
 /**

static/app/views/releases/utils/useReleaseCommitFiles.tsx

@@ -0,0 +1,49 @@
+import type {CommitFile, Repository} from 'sentry/types/integrations';
+import {useApiQuery, type UseApiQueryOptions} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
+
+// These are the URL params that our project/date/env picker generates (+ cursor for pagination)
+type PageFilterUrlParams =
+  | 'start'
+  | 'end'
+  | 'utc'
+  | 'statsPeriod'
+  | 'project'
+  | 'environment';
+
+interface UseReleaseCommitFilesParams
+  extends Partial<Record<PageFilterUrlParams, string>> {
+  release: string;
+  activeRepository?: Repository;
+  cursor?: string;
+  perPage?: number;
+}
+export function useReleaseCommitFiles(
+  {release, activeRepository, perPage = 40, ...query}: UseReleaseCommitFilesParams,
+  queryOptions?: UseApiQueryOptions<CommitFile[]>
+) {
+  const organization = useOrganization();
+  return useApiQuery<CommitFile[]>(
+    [
+      `/organizations/${organization.slug}/releases/${encodeURIComponent(
+        release
+      )}/commitfiles/`,
+      {
+        query: {
+          ...query,
+          per_page: perPage,
+          ...(activeRepository
+            ? {
+                repo_id: activeRepository.externalId,
+                repo_name: activeRepository.name,
+              }
+            : {}),
+        },
+      },
+    ],
+    {
+      staleTime: Infinity,
+      ...queryOptions,
+    }
+  );
+}

static/app/views/releases/utils/useReleaseCommits.tsx

@@ -0,0 +1,56 @@
+import type {Commit, Repository} from 'sentry/types/integrations';
+import {useApiQuery, type UseApiQueryOptions} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
+
+// These are the URL params that our project/date/env picker generates (+ cursor for pagination)
+type PageFilterUrlParams =
+  | 'start'
+  | 'end'
+  | 'utc'
+  | 'statsPeriod'
+  | 'project'
+  | 'environment';
+
+interface UseReleaseCommitsParams extends Partial<Record<PageFilterUrlParams, string>> {
+  projectSlug: string;
+  release: string;
+  activeRepository?: Repository;
+  cursor?: string;
+  perPage?: number;
+}
+
+export function useReleaseCommits(
+  {
+    release,
+    projectSlug,
+    activeRepository,
+    perPage = 40,
+    ...query
+  }: UseReleaseCommitsParams,
+  queryOptions?: UseApiQueryOptions<Commit[]>
+) {
+  const organization = useOrganization();
+  return useApiQuery<Commit[]>(
+    [
+      `/projects/${organization.slug}/${projectSlug}/releases/${encodeURIComponent(
+        release
+      )}/commits/`,
+      {
+        query: {
+          ...query,
+          per_page: perPage,
+          ...(activeRepository
+            ? {
+                repo_id: activeRepository.externalId,
+                repo_name: activeRepository.name,
+              }
+            : {}),
+        },
+      },
+    ],
+    {
+      staleTime: Infinity,
+      ...queryOptions,
+    }
+  );
+}