fix(releases): Display only the selected repo's commits (#65029)

fixtures/js-stubs/commit.ts

@@ -1,9 +1,9 @@
 import {CommitAuthorFixture} from 'sentry-fixture/commitAuthor';
 import {RepositoryFixture} from 'sentry-fixture/repository';
 
-import {type Commit} from 'sentry/types';
+import type {Commit} from 'sentry/types';
 
-export function CommitFixture(params = {}): Commit {
+export function CommitFixture(params: Partial<Commit> = {}): Commit {
   return {
     dateCreated: '2018-11-30T18:46:31Z',
     message:

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

@@ -123,4 +123,54 @@ describe('Commits', () => {
     selectEvent.openMenu(screen.getByRole('button'));
     expect(screen.getByText('getsentry/sentry-frontend')).toBeInTheDocument();
   });
+
+  it('should render the commits from the selected repo', async () => {
+    const otherRepo = RepositoryFixture({
+      id: '5',
+      name: 'getsentry/sentry-frontend',
+      integrationId: '1',
+    });
+    // Current repo is stored in query parameter activeRepo
+    const {routerContext: newRouterContext, routerProps: newRouterProps} = initializeOrg({
+      router: {
+        params: {release: release.version},
+        location: {query: {activeRepo: otherRepo.name}},
+      },
+    });
+    MockApiClient.addMockResponse({
+      url: `/projects/${organization.slug}/${project.slug}/releases/${encodeURIComponent(
+        release.version
+      )}/repositories/`,
+      body: [repos[0]!, otherRepo],
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/org-slug/releases/${encodeURIComponent(
+        release.version
+      )}/commits/`,
+      body: [
+        CommitFixture(),
+        CommitFixture({
+          repository: otherRepo,
+        }),
+      ],
+    });
+    render(
+      <ReleaseContext.Provider
+        value={{
+          release,
+          project,
+          deploys: [],
+          refetchData: () => {},
+          hasHealthData: false,
+          releaseBounds: {} as any,
+          releaseMeta: {} as any,
+        }}
+      >
+        <Commits releaseRepos={[]} projectSlug={project.slug} {...newRouterProps} />
+      </ReleaseContext.Provider>,
+      {context: newRouterContext}
+    );
+    expect(await screen.findByRole('button')).toHaveTextContent(otherRepo.name);
+    expect(screen.queryByText('example/repo-name')).not.toBeInTheDocument();
+  });
 });

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

@@ -59,6 +59,9 @@ function Commits({activeReleaseRepo, releaseRepos, projectSlug}: CommitsProps) {
 
   const commitsByRepository = getCommitsByRepository(commitList);
   const reposToRender = getReposToRender(Object.keys(commitsByRepository));
+  const activeRepoName: string | undefined = activeReleaseRepo
+    ? activeReleaseRepo.name
+    : reposToRender[0];
 
   return (
     <Layout.Body>
@@ -80,18 +83,16 @@ function Commits({activeReleaseRepo, releaseRepos, projectSlug}: CommitsProps) {
         {commitListError && <LoadingError onRetry={refetch} />}
         {isLoadingCommitList ? (
           <LoadingIndicator />
-        ) : commitList.length ? (
+        ) : commitList.length && activeRepoName ? (
           <Fragment>
-            {reposToRender.map(repoName => (
-              <Panel key={repoName}>
-                <PanelHeader>{repoName}</PanelHeader>
-                <PanelBody>
-                  {commitsByRepository[repoName]?.map(commit => (
-                    <CommitRow key={commit.id} commit={commit} />
-                  ))}
-                </PanelBody>
-              </Panel>
-            ))}
+            <Panel>
+              <PanelHeader>{activeRepoName}</PanelHeader>
+              <PanelBody>
+                {commitsByRepository[activeRepoName]?.map(commit => (
+                  <CommitRow key={commit.id} commit={commit} />
+                ))}
+              </PanelBody>
+            </Panel>
             <Pagination pageLinks={getResponseHeader?.('Link')} />
           </Fragment>
         ) : (