feat(preprod): Auto-filter installable:true when switching to Distribution view (#112533)

Auto-populate `installable:true` in the search bar when a user switches
to the Distribution display on the mobile builds tab. The token is
visible and removable by the user. Switching away from Distribution
strips the token automatically.

Direct navigation to a Distribution URL (e.g. shared links) respects
the URL as-is — no automatic injection. This keeps shared links
faithful to what the sender intended.

Uses `MutableSearch` for safe token manipulation (handles duplicates,
replaces `installable:false`, etc).

**Files changed:**
- New `installableQueryUtils.ts` helper with `addInstallableFilter` /
`removeInstallableFilter`
- Updated `handleDisplayChange` in both `mobileBuilds.tsx` and
`preprodBuilds.tsx`
- Unit tests for helpers + integration tests for display switching


https://github.com/user-attachments/assets/a8fcc4f2-970e-44e5-8468-4eb92ed58c06


Refs EME-1017

---------

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

Author: mtopo27

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

@@ -0,0 +1,83 @@
+import {PreprodBuildsDisplay} from 'sentry/components/preprod/preprodBuildsDisplay';
+
+import {
+  addInstallableFilter,
+  getUpdatedQueryForDisplay,
+  removeInstallableFilter,
+} from './installableQueryUtils';
+
+describe('addInstallableFilter', () => {
+  it('adds installable:true to an empty query', () => {
+    expect(addInstallableFilter('')).toBe('installable:true');
+  });
+
+  it('appends installable:true to an existing query', () => {
+    expect(addInstallableFilter('app_id:com.example')).toBe(
+      'app_id:com.example installable:true'
+    );
+  });
+
+  it('does not double-add if already present', () => {
+    expect(addInstallableFilter('installable:true')).toBe('installable:true');
+  });
+
+  it('does not double-add when mixed with other tokens', () => {
+    expect(addInstallableFilter('app_id:com.example installable:true')).toBe(
+      'app_id:com.example installable:true'
+    );
+  });
+
+  it('replaces installable:false with installable:true', () => {
+    expect(addInstallableFilter('installable:false')).toBe('installable:true');
+  });
+});
+
+describe('removeInstallableFilter', () => {
+  it('removes installable:true from a query', () => {
+    expect(removeInstallableFilter('app_id:com.example installable:true')).toBe(
+      'app_id:com.example'
+    );
+  });
+
+  it('returns empty string when only installable:true', () => {
+    expect(removeInstallableFilter('installable:true')).toBe('');
+  });
+
+  it('is a no-op when installable is not present', () => {
+    expect(removeInstallableFilter('app_id:com.example')).toBe('app_id:com.example');
+  });
+
+  it('returns empty string for empty input', () => {
+    expect(removeInstallableFilter('')).toBe('');
+  });
+});
+
+describe('getUpdatedQueryForDisplay', () => {
+  it('adds installable:true for Distribution display', () => {
+    expect(getUpdatedQueryForDisplay('', PreprodBuildsDisplay.DISTRIBUTION)).toBe(
+      'installable:true'
+    );
+  });
+
+  it('removes installable filter for Size display', () => {
+    expect(
+      getUpdatedQueryForDisplay('installable:true', PreprodBuildsDisplay.SIZE)
+    ).toBeUndefined();
+  });
+
+  it('handles null query', () => {
+    expect(getUpdatedQueryForDisplay(null, PreprodBuildsDisplay.DISTRIBUTION)).toBe(
+      'installable:true'
+    );
+  });
+
+  it('preserves other tokens when switching to Distribution', () => {
+    expect(
+      getUpdatedQueryForDisplay('app_id:com.example', PreprodBuildsDisplay.DISTRIBUTION)
+    ).toBe('app_id:com.example installable:true');
+  });
+
+  it('returns undefined when result is empty', () => {
+    expect(getUpdatedQueryForDisplay('', PreprodBuildsDisplay.SIZE)).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,43 @@
+import {PreprodBuildsDisplay} from 'sentry/components/preprod/preprodBuildsDisplay';
+import {MutableSearch} from 'sentry/components/searchSyntax/mutableSearch';
+
+const INSTALLABLE_KEY = 'installable';
+const INSTALLABLE_VALUE = 'true';
+
+/**
+ * Adds `installable:true` to a search query string if not already present.
+ */
+export function addInstallableFilter(query: string): string {
+  const search = new MutableSearch(query);
+  const existing = search.getFilterValues(INSTALLABLE_KEY);
+  if (existing.includes(INSTALLABLE_VALUE)) {
+    return query;
+  }
+  search.setFilterValues(INSTALLABLE_KEY, [INSTALLABLE_VALUE]);
+  return search.formatString();
+}
+
+/**
+ * Removes the `installable` filter from a search query string.
+ */
+export function removeInstallableFilter(query: string): string {
+  const search = new MutableSearch(query);
+  search.removeFilter(INSTALLABLE_KEY);
+  return search.formatString();
+}
+
+/**
+ * Returns the updated query string for a display change.
+ * Distribution display adds `installable:true`; other displays strip it.
+ */
+export function getUpdatedQueryForDisplay(
+  currentQuery: string | null,
+  display: PreprodBuildsDisplay
+): string | undefined {
+  const trimmed = (currentQuery ?? '').trim();
+  const updated =
+    display === PreprodBuildsDisplay.DISTRIBUTION
+      ? addInstallableFilter(trimmed)
+      : removeInstallableFilter(trimmed);
+  return updated || undefined;
+}

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

@@ -1,4 +1,4 @@
-import {useCallback, useContext, useEffect, useMemo, useState} from 'react';
+import {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {useQuery} from '@tanstack/react-query';
 
 import {Container} from '@sentry/scraps/layout';
@@ -26,6 +26,7 @@ import {formatVersion} from 'sentry/utils/versions/formatVersion';
 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 {getUpdatedQueryForDisplay} from 'sentry/views/preprod/utils/installableQueryUtils';
 import {ReleaseContext} from 'sentry/views/releases/detail';
 
 import {PreprodOnboarding} from './preprodOnboarding';
@@ -53,12 +54,18 @@ export default function PreprodBuilds() {
 
   const [localSearchQuery, setLocalSearchQuery] = useState(urlSearchQuery || '');
   const debouncedLocalSearchQuery = useDebouncedValue(localSearchQuery);
+  const prevDebouncedRef = useRef(debouncedLocalSearchQuery);
 
   useEffect(() => {
     setLocalSearchQuery(urlSearchQuery || '');
   }, [urlSearchQuery]);
 
   useEffect(() => {
+    if (debouncedLocalSearchQuery === prevDebouncedRef.current) {
+      return;
+    }
+    prevDebouncedRef.current = debouncedLocalSearchQuery;
+
     if (debouncedLocalSearchQuery !== (urlSearchQuery || '')) {
       navigate({
         ...location,
@@ -129,10 +136,11 @@ export default function PreprodBuilds() {
           ...location.query,
           cursor: undefined,
           display,
+          query: getUpdatedQueryForDisplay(urlSearchQuery, display),
         },
       });
     },
-    [location, navigate]
+    [location, navigate, urlSearchQuery]
   );
 
   const builds = buildsResponse?.json ?? [];

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

@@ -559,82 +559,75 @@ describe('ReleasesList', () => {
     );
   });
 
-  it('toggles display mode in the mobile-builds tab', async () => {
-    const organizationWithDistribution = OrganizationFixture({
-      slug: organization.slug,
-      features: [...organization.features],
-    });
+  function renderMobileBuildsTab(queryOverrides: Record<string, string> = {}) {
     const mobileProject = ProjectFixture({
       id: '15',
       slug: 'mobile-project-4',
       platform: 'android',
       features: ['releases'],
     });
-
     ProjectsStore.loadInitialData([mobileProject]);
     PageFiltersStore.updateProjects([Number(mobileProject.id)], null);
 
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/builds/`,
-      body: [
-        {
-          id: 'build-id',
-          project_id: 15,
-          project_slug: 'mobile-project-4',
-          state: 1,
-          app_info: {
-            app_id: 'com.example.app',
-            name: 'Example App',
-            platform: 'android',
-            build_number: '1',
-            version: '1.0.0',
-            date_added: '2024-01-01T00:00:00Z',
-          },
-          distribution_info: {
-            is_installable: true,
-            download_count: 12,
-            release_notes: null,
-          },
-          size_info: {},
-          vcs_info: {
-            head_sha: 'abcdef1',
-            pr_number: 123,
-            head_ref: 'main',
-          },
-        },
-      ],
+      body: [],
     });
-
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/recent-searches/`,
       body: [],
     });
-
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/recent-searches/`,
+      method: 'POST',
+      body: [],
+    });
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/trace-items/attributes/`,
       body: [],
     });
 
-    const {router} = render(<ReleasesList />, {
-      organization: organizationWithDistribution,
+    return render(<ReleasesList />, {
+      organization,
       initialRouterConfig: {
         location: {
           pathname: `/organizations/${organization.slug}/releases/`,
-          query: {tab: 'mobile-builds', cursor: '123', display: 'users'},
+          query: {tab: 'mobile-builds', ...queryOverrides},
         },
       },
     });
+  }
 
-    expect(await screen.findByText('Example App')).toBeInTheDocument();
+  it('toggles display mode in the mobile-builds tab and injects installable:true', async () => {
+    const {router} = renderMobileBuildsTab();
 
-    const displayTrigger = screen.getByRole('button', {name: 'Display Size'});
+    const displayTrigger = await screen.findByRole('button', {name: 'Display Size'});
     await userEvent.click(displayTrigger);
 
     const distributionOption = screen.getByRole('option', {name: 'Distribution'});
     await userEvent.click(distributionOption);
 
     expect(router.location.query.display).toBe(PreprodBuildsDisplay.DISTRIBUTION);
     expect(router.location.query.cursor).toBeUndefined();
+    expect(router.location.query.query).toBe('installable:true');
+  });
+
+  it('strips installable:true when switching from Distribution to Size', async () => {
+    const {router} = renderMobileBuildsTab({
+      display: 'distribution',
+      query: 'installable:true',
+    });
+
+    const displayTrigger = await screen.findByRole('button', {
+      name: 'Display Distribution',
+    });
+    await userEvent.click(displayTrigger);
+
+    const sizeOption = screen.getByRole('option', {name: 'Size'});
+    await userEvent.click(sizeOption);
+
+    expect(router.location.query.display).toBe(PreprodBuildsDisplay.SIZE);
+    expect(router.location.query.query).toBeFalsy();
   });
 
   it('allows searching within the mobile-builds tab', async () => {

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

@@ -22,6 +22,7 @@ import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {usePreprodBuildsAnalytics} from 'sentry/views/preprod/hooks/usePreprodBuildsAnalytics';
 import {buildDetailsApiOptions} from 'sentry/views/preprod/utils/buildDetailsApiOptions';
+import {getUpdatedQueryForDisplay} from 'sentry/views/preprod/utils/installableQueryUtils';
 
 import {MobileBuildsChart} from './mobileBuildsChart';
 
@@ -95,10 +96,15 @@ export function MobileBuilds({organization, selectedProjectIds}: Props) {
     (display: PreprodBuildsDisplay) => {
       navigate({
         ...location,
-        query: {...location.query, cursor: undefined, display},
+        query: {
+          ...location.query,
+          cursor: undefined,
+          display,
+          query: getUpdatedQueryForDisplay(searchQuery, display),
+        },
       });
     },
-    [location, navigate]
+    [location, navigate, searchQuery]
   );
 
   const builds = buildsResponse?.json ?? [];