feat(preprod): Add Download CSV button to build distribution view (#117927)

Adds a "Download CSV" button to the mobile-builds distribution view
(shown only on the distribution display) that exports build distribution
stats.

It uses a native browser download — an anchor pointed at the
`/builds-export/` endpoint — so the browser saves the file from the
response's `Content-Disposition`. This is the
simplest fit for a low-volume, row-capped export. A small, unit-tested
`getBuildsExportHref` helper builds the URL from the list filters.

The backend `/builds-export/` endpoint landed separately in #117539
(frontend and backend ship as separate PRs).

Refs EME-1035

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: jamieQ

static/app/components/preprod/preprodBuildsSearchControls.tsx

@@ -1,10 +1,12 @@
+import {Button} from '@sentry/scraps/button';
 import {CompactSelect, type SelectOption} from '@sentry/scraps/compactSelect';
 import {Container, Flex} from '@sentry/scraps/layout';
 import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
 
 import {MOBILE_BUILDS_ALLOWED_KEYS} from 'sentry/components/preprod/constants';
 import {PreprodBuildsDisplay} from 'sentry/components/preprod/preprodBuildsDisplay';
 import {PreprodSearchBar} from 'sentry/components/preprod/preprodSearchBar';
+import {IconDownload} from 'sentry/icons';
 import {t} from 'sentry/locale';
 
 const displaySelectOptions: Array<SelectOption<PreprodBuildsDisplay>> = [
@@ -43,6 +45,10 @@ interface PreprodBuildsSearchControlsProps {
    * Called on every keystroke (for controlled input with debounce)
    */
   onChange?: (query: string, state: {queryIsValid: boolean}) => void;
+  /**
+   * When provided, renders a "Download CSV" button in the controls.
+   */
+  onExportCsv?: () => void;
   /**
    * Called when search is submitted (e.g., on Enter)
    */
@@ -62,6 +68,7 @@ export function PreprodBuildsSearchControls({
   onChange,
   onSearch,
   onDisplayChange,
+  onExportCsv,
 }: PreprodBuildsSearchControlsProps) {
   return (
     <Flex
@@ -79,6 +86,11 @@ export function PreprodBuildsSearchControls({
           projects={projects}
         />
       </Container>
+      {onExportCsv && (
+        <Button icon={<IconDownload />} onClick={onExportCsv}>
+          {t('Download CSV')}
+        </Button>
+      )}
       {!hideDisplayToggle && (
         <Container maxWidth="200px">
           <CompactSelect

static/app/utils/analytics/preprodBuildAnalyticsEvents.tsx

@@ -44,6 +44,7 @@ export type PreprodBuildEventParameters = {
   'preprod.builds.details.open_insights_sidebar': BasePreprodBuildEvent & {
     source: 'metric_card' | 'insight_table';
   };
+  'preprod.builds.distribution.download_csv': BasePreprodBuildEvent;
   'preprod.builds.install_modal.opened': BasePreprodBuildEvent & {
     source: 'build_details_sidebar' | 'builds_table';
   };
@@ -144,6 +145,7 @@ export const preprodBuildEventMap: Record<PreprodBuildAnalyticsKey, string | nul
   'preprod.builds.compare.select_base_build': 'Preprod Build Comparison: Base Selected',
   'preprod.builds.compare.trigger_comparison':
     'Preprod Build Comparison: Compare Triggered',
+  'preprod.builds.distribution.download_csv': 'Preprod Builds: Distribution Download CSV',
   'preprod.builds.install_modal.opened': 'Preprod Builds: Install Modal Opened',
   'preprod.builds.onboarding.viewed': 'Preprod Builds: Onboarding Viewed',
   'preprod.builds.onboarding.docs_clicked': 'Preprod Builds: Onboarding Docs Clicked',

static/app/views/explore/releases/list/index.spec.tsx

@@ -631,6 +631,18 @@ describe('ReleasesList', () => {
     expect(router.location.query.query).toBeFalsy();
   });
 
+  it('shows the Download CSV button on the distribution display', async () => {
+    renderMobileBuildsTab({display: 'distribution'});
+    expect(await screen.findByRole('button', {name: 'Download CSV'})).toBeInTheDocument();
+  });
+
+  it('hides the Download CSV button on the size display', async () => {
+    renderMobileBuildsTab();
+    // Wait for the controls to render before asserting the button is absent.
+    expect(await screen.findByRole('button', {name: 'Display Size'})).toBeInTheDocument();
+    expect(screen.queryByRole('button', {name: 'Download CSV'})).not.toBeInTheDocument();
+  });
+
   it('allows searching within the mobile-builds tab', async () => {
     const mobileProject = ProjectFixture({
       id: '13',

static/app/views/explore/releases/list/mobileBuilds.tsx

@@ -23,11 +23,13 @@ import {ProjectsStore} from 'sentry/stores/projectsStore';
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
+import {downloadFromHref} from 'sentry/utils/downloadFromHref';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {usePreprodBuildsAnalytics} from 'sentry/views/preprod/hooks/usePreprodBuildsAnalytics';
 import type {BuildDetailsApiResponse} from 'sentry/views/preprod/types/buildDetailsTypes';
 import {buildDetailsApiOptions} from 'sentry/views/preprod/utils/buildDetailsApiOptions';
+import {getBuildsExportHref} from 'sentry/views/preprod/utils/buildsExportHref';
 import {getUpdatedQueryForDisplay} from 'sentry/views/preprod/utils/installableQueryUtils';
 
 import {MobileBuildsChart} from './mobileBuildsChart';
@@ -120,6 +122,12 @@ export function MobileBuilds({
     [location, navigate, searchQuery]
   );
 
+  const handleExportCsv = useCallback(() => {
+    const url = `${organization.links.regionUrl}${getBuildsExportHref(organization.slug, buildsQueryParams)}`;
+    downloadFromHref(`${organization.slug}-build-distribution.csv`, url);
+    trackAnalytics('preprod.builds.distribution.download_csv', {organization});
+  }, [organization, buildsQueryParams]);
+
   const builds = buildsResponse?.json ?? [];
   const pageLinks = buildsResponse?.headers.Link ?? undefined;
   const hasSearchQuery = !!searchQuery?.trim();
@@ -216,6 +224,11 @@ export function MobileBuilds({
         hideDisplayToggle={hideDisplayToggle}
         onSearch={handleSearch}
         onDisplayChange={handleDisplayChange}
+        onExportCsv={
+          activeDisplay === PreprodBuildsDisplay.DISTRIBUTION
+            ? handleExportCsv
+            : undefined
+        }
       />
 
       {buildsError && <LoadingError onRetry={refetch} />}

static/app/views/preprod/utils/buildsExportHref.spec.ts

@@ -0,0 +1,37 @@
+import {getBuildsExportHref} from 'sentry/views/preprod/utils/buildsExportHref';
+
+describe('getBuildsExportHref', () => {
+  it('targets the org-scoped export endpoint', () => {
+    expect(getBuildsExportHref('my-org', {statsPeriod: '90d'})).toBe(
+      '/api/0/organizations/my-org/builds-export/?statsPeriod=90d'
+    );
+  });
+
+  it('drops pagination params', () => {
+    const href = getBuildsExportHref('my-org', {
+      per_page: 25,
+      cursor: '0:100:0',
+      query: 'foo',
+    });
+    expect(href).not.toContain('per_page');
+    expect(href).not.toContain('cursor');
+    expect(href).toContain('query=foo');
+  });
+
+  it('serializes multiple projects as repeated params', () => {
+    const href = getBuildsExportHref('my-org', {
+      project: ['1', '2'],
+    });
+    expect(href).toContain('project=1');
+    expect(href).toContain('project=2');
+  });
+
+  it('includes the search query and date range', () => {
+    const href = getBuildsExportHref('my-org', {
+      query: 'installable:true',
+      statsPeriod: '90d',
+    });
+    expect(decodeURIComponent(href)).toContain('query=installable:true');
+    expect(href).toContain('statsPeriod=90d');
+  });
+});

static/app/views/preprod/utils/buildsExportHref.ts

@@ -0,0 +1,16 @@
+import * as qs from 'query-string';
+
+/**
+ * Build the CSV export URL from the builds-list query params.
+ */
+export function getBuildsExportHref(
+  organizationSlug: string,
+  queryParams: Record<string, unknown>
+): string {
+  const exportParams = {...queryParams};
+  // This endpoint doesn't paginate
+  delete exportParams.per_page;
+  delete exportParams.cursor;
+
+  return `/api/0/organizations/${organizationSlug}/builds-export/?${qs.stringify(exportParams)}`;
+}