feat(insights): Introduce sort by selector for releases

static/app/constants/releases.tsx

@@ -0,0 +1,11 @@
+export enum ReleasesSortOption {
+  CRASH_FREE_USERS = 'crash_free_users',
+  CRASH_FREE_SESSIONS = 'crash_free_sessions',
+  USERS_24_HOURS = 'users_24h',
+  SESSIONS_24_HOURS = 'sessions_24h',
+  SESSIONS = 'sessions',
+  DATE = 'date',
+  BUILD = 'build',
+  SEMVER = 'semver',
+  ADOPTION = 'adoption',
+}

static/app/views/insights/common/components/releaseSelector.tsx

@@ -1,18 +1,27 @@
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import styled from '@emotion/styled';
 import debounce from 'lodash/debounce';
 
 import type {SelectOption} from 'sentry/components/compactSelect';
 import {CompactSelect} from 'sentry/components/compactSelect';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants';
+import {ReleasesSortOption} from 'sentry/constants/releases';
 import {IconReleases} from 'sentry/icons/iconReleases';
-import {t, tn} from 'sentry/locale';
+import {t, tct, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {defined} from 'sentry/utils';
 import {getFormattedDate} from 'sentry/utils/dates';
+import {decodeScalar} from 'sentry/utils/queryString';
+import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
+import usePageFilters from 'sentry/utils/usePageFilters';
+import {
+  ReleasesSort,
+  type ReleasesSortByOption,
+  SORT_BY_OPTIONS,
+} from 'sentry/views/insights/common/components/releasesSort';
 import {
   useReleases,
   useReleaseSelection,
@@ -24,19 +33,25 @@ export const SECONDARY_RELEASE_ALIAS = 'R2';
 
 type Props = {
   selectorKey: string;
+  sortBy: ReleasesSortByOption;
   selectorName?: string;
   selectorValue?: string;
   triggerLabelPrefix?: string;
 };
 
-export function ReleaseSelector({selectorKey, selectorValue, triggerLabelPrefix}: Props) {
+export function ReleaseSelector({
+  selectorKey,
+  selectorValue,
+  triggerLabelPrefix,
+  sortBy,
+}: Props) {
   const [searchTerm, setSearchTerm] = useState<string | undefined>(undefined);
-  const {data, isLoading} = useReleases(searchTerm);
+  const {data, isLoading} = useReleases(searchTerm, sortBy);
   const {primaryRelease, secondaryRelease} = useReleaseSelection();
   const navigate = useNavigate();
   const location = useLocation();
 
-  const options: SelectOption<string>[] = [];
+  const options: (SelectOption<string> & {count?: number})[] = [];
   if (defined(selectorValue)) {
     const index = data?.findIndex(({version}) => version === selectorValue);
     const selectedRelease = defined(index) ? data?.[index] : undefined;
@@ -49,6 +64,7 @@ export function ReleaseSelector({selectorKey, selectorValue, triggerLabelPrefix}
 
     options.push({
       value: selectorValue,
+      count: selectedReleaseSessionCount,
       label: selectorValue,
       details: (
         <LabelDetails
@@ -58,12 +74,14 @@ export function ReleaseSelector({selectorKey, selectorValue, triggerLabelPrefix}
       ),
     });
   }
+
   data
     ?.filter(({version}) => ![primaryRelease, secondaryRelease].includes(version))
     .forEach(release => {
       const option = {
         value: release.version,
         label: release.version,
+        count: release.count,
         details: (
           <LabelDetails screenCount={release.count} dateCreated={release.dateCreated} />
         ),
@@ -88,10 +106,19 @@ export function ReleaseSelector({selectorKey, selectorValue, triggerLabelPrefix}
       searchable
       value={selectorValue}
       options={[
+        {
+          value: '_selected_release',
+          // We do this because the selected/default release might not be sorted,
+          // but instead could have been added to the top of options list.
+          options: options.slice(0, 1),
+        },
         {
           value: '_releases',
-          label: t('Sorted by date created'),
-          options,
+          label: tct('Sorted by [sortBy]', {
+            sortBy: SORT_BY_OPTIONS[sortBy].label,
+          }),
+          // Display other releases sorted by the selected option
+          options: options.slice(1),
         },
       ]}
       onSearch={debounce(val => {
@@ -135,8 +162,76 @@ function LabelDetails(props: LabelDetailsProps) {
   );
 }
 
+function getReleasesSortBy(
+  sort: ReleasesSortByOption,
+  environments: string[]
+): ReleasesSortByOption {
+  // Require 1 environment for date adopted
+  if (sort === ReleasesSortOption.ADOPTION && environments.length !== 1) {
+    return ReleasesSortOption.DATE;
+  }
+
+  if (sort in SORT_BY_OPTIONS) {
+    return sort;
+  }
+
+  // We could give a visual feedback to the user, saying that the sort by is invalid but
+  // since this UI will be refactored, maybe we just don't do anything now.
+  // This is the same fallback as the one used in static/app/views/insights/common/queries/useReleases.tsx.
+  return ReleasesSortOption.DATE;
+}
+
 export function ReleaseComparisonSelector() {
   const {primaryRelease, secondaryRelease} = useReleaseSelection();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const {selection} = usePageFilters();
+
+  const [localStoragedReleaseBy, setLocalStoragedReleaseBy] =
+    useLocalStorageState<ReleasesSortByOption>(
+      'insightsReleasesSortBy',
+      ReleasesSortOption.DATE
+    );
+
+  const urlStoragedReleaseBy = decodeScalar(
+    location.query.sortReleasesBy
+  ) as ReleasesSortByOption;
+
+  useEffect(() => {
+    if (urlStoragedReleaseBy === localStoragedReleaseBy) {
+      return;
+    }
+
+    // this is useful in case the user shares the url with another user
+    // and the user has a different sort by in their local storage
+    if (!urlStoragedReleaseBy) {
+      navigate(
+        {
+          ...location,
+          query: {
+            ...location.query,
+            sortReleasesBy: localStoragedReleaseBy,
+          },
+        },
+        {replace: true}
+      );
+      return;
+    }
+
+    setLocalStoragedReleaseBy(urlStoragedReleaseBy);
+  }, [
+    urlStoragedReleaseBy,
+    localStoragedReleaseBy,
+    setLocalStoragedReleaseBy,
+    location,
+    navigate,
+  ]);
+
+  const sortReleasesBy = getReleasesSortBy(
+    localStoragedReleaseBy,
+    selection.environments
+  );
+
   return (
     <StyledPageSelector condensed>
       <ReleaseSelector
@@ -145,13 +240,28 @@ export function ReleaseComparisonSelector() {
         selectorName={t('Release 1')}
         key="primaryRelease"
         triggerLabelPrefix={PRIMARY_RELEASE_ALIAS}
+        sortBy={sortReleasesBy}
       />
       <ReleaseSelector
         selectorKey="secondaryRelease"
         selectorName={t('Release 2')}
         selectorValue={secondaryRelease}
         key="secondaryRelease"
         triggerLabelPrefix={SECONDARY_RELEASE_ALIAS}
+        sortBy={sortReleasesBy}
+      />
+      <ReleasesSort
+        sortBy={sortReleasesBy}
+        environments={selection.environments}
+        onChange={value =>
+          navigate({
+            ...location,
+            query: {
+              ...location.query,
+              sortReleasesBy: value,
+            },
+          })
+        }
       />
     </StyledPageSelector>
   );
@@ -167,7 +277,10 @@ const StyledPageSelector = styled(PageFilterBar)`
   & > * {
     min-width: 135px;
     &:last-child {
-      min-width: 135px;
+      min-width: auto;
+      > button[aria-haspopup] {
+        padding-right: ${space(1.5)};
+      }
     }
   }
 `;

static/app/views/insights/common/components/releasesSort.tsx

@@ -0,0 +1,65 @@
+import {Button} from 'sentry/components/button';
+import {CompositeSelect} from 'sentry/components/compactSelect/composite';
+import {ReleasesSortOption} from 'sentry/constants/releases';
+import {IconSort} from 'sentry/icons';
+import {t} from 'sentry/locale';
+
+export const SORT_BY_OPTIONS = {
+  [ReleasesSortOption.SESSIONS_24_HOURS]: {label: t('Active Sessions')},
+  [ReleasesSortOption.USERS_24_HOURS]: {label: t('Active Users')},
+  [ReleasesSortOption.ADOPTION]: {label: t('Adoption')},
+  [ReleasesSortOption.BUILD]: {label: t('Build Number')},
+  [ReleasesSortOption.DATE]: {label: t('Date Created')},
+  [ReleasesSortOption.SEMVER]: {label: t('Semantic Version')},
+  [ReleasesSortOption.SESSIONS]: {label: t('Total Sessions')},
+};
+
+export type ReleasesSortByOption = keyof typeof SORT_BY_OPTIONS;
+
+interface Props {
+  environments: string[];
+  onChange: (sortBy: string) => void;
+  sortBy: ReleasesSortByOption;
+}
+
+export function ReleasesSort({environments, sortBy, onChange}: Props) {
+  return (
+    <CompositeSelect
+      trigger={triggerProps => (
+        <Button
+          {...triggerProps}
+          size="xs"
+          icon={<IconSort />}
+          title={t('Sort Releases')}
+          aria-label={t('Sort Releases')}
+        />
+      )}
+    >
+      <CompositeSelect.Region
+        label={t('Sort By')}
+        value={sortBy}
+        onChange={selection => {
+          onChange(selection.value);
+        }}
+        options={Object.entries(SORT_BY_OPTIONS).map(([name, filter]) => {
+          if (name !== ReleasesSortOption.ADOPTION) {
+            return {
+              label: filter.label,
+              value: name,
+            };
+          }
+
+          const isNotSingleEnvironment = environments.length !== 1;
+          return {
+            label: filter.label,
+            value: name,
+            disabled: isNotSingleEnvironment,
+            tooltip: isNotSingleEnvironment
+              ? t('Select one environment to use this sort option.')
+              : undefined,
+          };
+        })}
+      />
+    </CompositeSelect>
+  );
+}

static/app/views/insights/common/queries/useReleases.tsx

@@ -1,5 +1,6 @@
 import chunk from 'lodash/chunk';
 
+import {ReleasesSortOption} from 'sentry/constants/releases';
 import type {NewQuery} from 'sentry/types/organization';
 import type {Release} from 'sentry/types/release';
 import type {TableData} from 'sentry/utils/discover/discoverQuery';
@@ -13,14 +14,19 @@ import useApi from 'sentry/utils/useApi';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
+import type {ReleasesSortByOption} from 'sentry/views/insights/common/components/releasesSort';
 
-export function useReleases(searchTerm?: string) {
+export function useReleases(
+  searchTerm: string | undefined,
+  sortBy: ReleasesSortByOption | undefined
+) {
   const organization = useOrganization();
   const location = useLocation();
   const {selection, isReady} = usePageFilters();
   const {environments, projects} = selection;
   const api = useApi();
 
+  const activeSort = sortBy ?? ReleasesSortOption.DATE;
   const releaseResults = useApiQuery<Release[]>(
     [
       `/organizations/${organization.slug}/releases/`,
@@ -30,7 +36,10 @@ export function useReleases(searchTerm?: string) {
           per_page: 50,
           environment: environments,
           query: searchTerm,
-          sort: 'date',
+          sort: activeSort,
+          // Depending on the selected sortBy option, 'flatten' is needed or we get an error from the backend.
+          // A similar logic can be found in https://github.com/getsentry/sentry/blob/6209d6fbf55839bb7a2f93ef65decbf495a64974/static/app/views/releases/list/index.tsx#L106
+          flatten: activeSort === ReleasesSortOption.DATE ? 0 : 1,
         },
       },
     ],
@@ -120,7 +129,7 @@ export function useReleaseSelection(): {
 } {
   const location = useLocation();
 
-  const {data: releases, isLoading} = useReleases();
+  const {data: releases, isLoading} = useReleases(undefined, undefined);
 
   // If there are more than 1 release, the first one should be the older one
   const primaryRelease =

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

@@ -13,10 +13,10 @@ import {
   within,
 } from 'sentry-test/reactTestingLibrary';
 
+import {ReleasesSortOption} from 'sentry/constants/releases';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import ReleasesList from 'sentry/views/releases/list/';
 import {ReleasesDisplayOption} from 'sentry/views/releases/list/releasesDisplayOptions';
-import {ReleasesSortOption} from 'sentry/views/releases/list/releasesSortOptions';
 import {ReleasesStatusOption} from 'sentry/views/releases/list/releasesStatusOptions';
 
 describe('ReleasesList', () => {

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

@@ -27,6 +27,7 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {getRelativeSummary} from 'sentry/components/timeRangeSelector/utils';
 import {DEFAULT_STATS_PERIOD} from 'sentry/constants';
 import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
+import {ReleasesSortOption} from 'sentry/constants/releases';
 import {releaseHealth} from 'sentry/data/platformCategories';
 import {IconSearch} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -56,7 +57,7 @@ import ReleasesAdoptionChart from './releasesAdoptionChart';
 import ReleasesDisplayOptions, {ReleasesDisplayOption} from './releasesDisplayOptions';
 import ReleasesPromo from './releasesPromo';
 import ReleasesRequest from './releasesRequest';
-import ReleasesSortOptions, {ReleasesSortOption} from './releasesSortOptions';
+import ReleasesSortOptions from './releasesSortOptions';
 import ReleasesStatusOptions, {ReleasesStatusOption} from './releasesStatusOptions';
 
 type RouteParams = {