feat(dashboards): Allow custom sorting of releases dropdown

static/app/constants/releases.tsx

@@ -1,3 +1,5 @@
+import {t} from 'sentry/locale';
+
 export enum ReleasesSortOption {
   CRASH_FREE_USERS = 'crash_free_users',
   CRASH_FREE_SESSIONS = 'crash_free_sessions',
@@ -9,3 +11,27 @@ export enum ReleasesSortOption {
   SEMVER = 'semver',
   ADOPTION = 'adoption',
 }
+
+/**
+ * Default sort option used when no valid sort is specified or when
+ * a sort option's requirements aren't met (e.g., ADOPTION requires exactly one environment).
+ */
+export const DEFAULT_RELEASES_SORT = ReleasesSortOption.DATE;
+
+/**
+ * Sort options available for dashboard release filtering.
+ *
+ * Note: CRASH_FREE_USERS and CRASH_FREE_SESSIONS are intentionally excluded.
+ * These options are only shown in the releases list page where there's a
+ * "display mode" toggle (users vs sessions) that determines which one to show.
+ * See: static/app/views/releases/list/releasesSortOptions.tsx
+ */
+export const RELEASES_SORT_OPTIONS = {
+  [ReleasesSortOption.SESSIONS_24_HOURS]: t('Active Sessions'),
+  [ReleasesSortOption.USERS_24_HOURS]: t('Active Users'),
+  [ReleasesSortOption.ADOPTION]: t('Adoption'),
+  [ReleasesSortOption.BUILD]: t('Build Number'),
+  [ReleasesSortOption.DATE]: t('Date Created'),
+  [ReleasesSortOption.SEMVER]: t('Semantic Version'),
+  [ReleasesSortOption.SESSIONS]: t('Total Sessions'),
+} as const;

static/app/views/dashboards/components/releasesSortSelect.tsx

@@ -0,0 +1,61 @@
+import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
+
+import {CompactSelect} from 'sentry/components/core/compactSelect';
+import {RELEASES_SORT_OPTIONS, ReleasesSortOption} from 'sentry/constants/releases';
+import {IconSort} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import usePageFilters from 'sentry/utils/usePageFilters';
+
+interface ReleasesSortSelectProps {
+  onChange: (sortBy: ReleasesSortOption) => void;
+  sortBy: ReleasesSortOption;
+  disabled?: boolean;
+}
+
+export function ReleasesSortSelect({
+  sortBy,
+  onChange,
+  disabled,
+}: ReleasesSortSelectProps) {
+  const {selection} = usePageFilters();
+  const {environments} = selection;
+  return (
+    <CompactSelect
+      disabled={disabled}
+      value={sortBy}
+      onChange={option => {
+        onChange(option.value);
+      }}
+      options={(
+        Object.keys(RELEASES_SORT_OPTIONS) as Array<keyof typeof RELEASES_SORT_OPTIONS>
+      ).map(name => {
+        const filter = RELEASES_SORT_OPTIONS[name];
+        if (name !== ReleasesSortOption.ADOPTION) {
+          return {
+            label: filter,
+            value: name,
+          };
+        }
+
+        // Adoption sort requires exactly one environment because it calculates
+        // the percentage of sessions/users in that specific environment
+        const isNotSingleEnvironment = environments.length !== 1;
+        return {
+          label: filter,
+          value: name,
+          disabled: isNotSingleEnvironment,
+          tooltip: isNotSingleEnvironment
+            ? t('Select one environment to use this sort option.')
+            : undefined,
+        };
+      })}
+      trigger={triggerProps => (
+        <OverlayTrigger.IconButton
+          {...triggerProps}
+          icon={<IconSort variant="muted" />}
+          aria-label={t('Sort Releases')}
+        />
+      )}
+    />
+  );
+}

static/app/views/dashboards/detail.spec.tsx

@@ -1531,7 +1531,7 @@ describe('Dashboards > Detail', () => {
         ],
       });
       // Mocked search results
-      MockApiClient.addMockResponse({
+      const searchMock = MockApiClient.addMockResponse({
         url: '/organizations/org-slug/releases/',
         body: [
           ReleaseFixture({
@@ -1571,6 +1571,12 @@ describe('Dashboards > Detail', () => {
 
       await userEvent.click(await screen.findByText('All Releases'));
       await userEvent.type(screen.getByPlaceholderText('Search\u2026'), 's');
+
+      // Wait for debounce and search to complete
+      await waitFor(() => {
+        expect(searchMock).toHaveBeenCalled();
+      });
+
       await userEvent.click(await screen.findByRole('option', {name: 'search-result'}));
 
       // Validate that after search is cleared, search result still appears

static/app/views/dashboards/filtersBar.tsx

@@ -1,13 +1,19 @@
-import {Fragment, useMemo, useState} from 'react';
+import {Fragment, useEffect, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 import type {Location} from 'history';
+import {createParser, useQueryState} from 'nuqs';
 
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
+import {
+  DEFAULT_RELEASES_SORT,
+  RELEASES_SORT_OPTIONS,
+  ReleasesSortOption,
+} from 'sentry/constants/releases';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {DataCategory} from 'sentry/types/core';
@@ -17,6 +23,7 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import {ToggleOnDemand} from 'sentry/utils/performance/contexts/onDemandControl';
 import {useMaxPickableDays} from 'sentry/utils/useMaxPickableDays';
 import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
 import {useUser} from 'sentry/utils/useUser';
 import {useUserTeams} from 'sentry/utils/useUserTeams';
 import AddFilter from 'sentry/views/dashboards/globalFilter/addFilter';
@@ -31,7 +38,7 @@ import {
 } from 'sentry/views/dashboards/utils/prebuiltConfigs';
 
 import {checkUserHasEditAccess} from './utils/checkUserHasEditAccess';
-import ReleasesSelectControl from './releasesSelectControl';
+import {SortableReleasesSelect} from './sortableReleasesSelect';
 import type {
   DashboardDetails,
   DashboardFilters,
@@ -138,6 +145,18 @@ export default function FiltersBar({
   // Calculate maxPickableDays based on the data categories
   const maxPickableDaysOptions = useMaxPickableDays({dataCategories});
 
+  // Release sort state - validates and defaults to DATE via custom parser
+  const [releaseSort, setReleaseSort] = useQueryState('sortReleasesBy', parseReleaseSort);
+
+  // Reset sort to default if ADOPTION is selected but environment requirement isn't met
+  const {selection} = usePageFilters();
+  const {environments} = selection;
+  useEffect(() => {
+    if (releaseSort === ReleasesSortOption.ADOPTION && environments.length !== 1) {
+      setReleaseSort(DEFAULT_RELEASES_SORT);
+    }
+  }, [releaseSort, environments.length, setReleaseSort]);
+
   const hasEditAccess = checkUserHasEditAccess(
     currentUser,
     userTeams,
@@ -204,19 +223,17 @@ export default function FiltersBar({
           }}
         />
       </PageFilterBar>
-      <ReleasesSelectControl
+      <SortableReleasesSelect
+        sortBy={releaseSort}
+        selectedReleases={selectedReleases}
+        isDisabled={isEditingDashboard}
         handleChangeFilter={activeFilters => {
           onDashboardFilterChange({
             ...activeFilters,
             [DashboardFilterKeys.GLOBAL_FILTER]: activeGlobalFilters,
           });
-          trackAnalytics('dashboards2.filter.change', {
-            organization,
-            filter_type: 'release',
-          });
         }}
-        selectedReleases={selectedReleases}
-        isDisabled={isEditingDashboard}
+        onSortChange={setReleaseSort}
       />
       {organization.features.includes('dashboards-global-filters') && (
         <Fragment>
@@ -301,6 +318,16 @@ export default function FiltersBar({
   );
 }
 
+const parseReleaseSort = createParser({
+  parse: (value: string): ReleasesSortOption => {
+    if (value in RELEASES_SORT_OPTIONS) {
+      return value as ReleasesSortOption;
+    }
+    return DEFAULT_RELEASES_SORT;
+  },
+  serialize: (value: ReleasesSortOption): string => value,
+}).withDefault(DEFAULT_RELEASES_SORT);
+
 const Wrapper = styled('div')`
   display: flex;
   flex-direction: row;