releasesSort.tsx 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import {Button} from 'sentry/components/button';
  2. import {CompositeSelect} from 'sentry/components/compactSelect/composite';
  3. import {ReleasesSortOption} from 'sentry/constants/releases';
  4. import {IconSort} from 'sentry/icons';
  5. import {t} from 'sentry/locale';
  6. export const SORT_BY_OPTIONS = {
  7. [ReleasesSortOption.SESSIONS_24_HOURS]: {label: t('Active Sessions')},
  8. [ReleasesSortOption.USERS_24_HOURS]: {label: t('Active Users')},
  9. [ReleasesSortOption.ADOPTION]: {label: t('Adoption')},
  10. [ReleasesSortOption.BUILD]: {label: t('Build Number')},
  11. [ReleasesSortOption.DATE]: {label: t('Date Created')},
  12. [ReleasesSortOption.SEMVER]: {label: t('Semantic Version')},
  13. [ReleasesSortOption.SESSIONS]: {label: t('Total Sessions')},
  14. };
  15. export type ReleasesSortByOption = keyof typeof SORT_BY_OPTIONS;
  16. interface Props {
  17. environments: string[];
  18. onChange: (sortBy: string) => void;
  19. sortBy: ReleasesSortByOption;
  20. }
  21. export function ReleasesSort({environments, sortBy, onChange}: Props) {
  22. return (
  23. <CompositeSelect
  24. trigger={triggerProps => (
  25. <Button
  26. {...triggerProps}
  27. size="xs"
  28. icon={<IconSort />}
  29. title={t('Sort Releases')}
  30. aria-label={t('Sort Releases')}
  31. />
  32. )}
  33. >
  34. <CompositeSelect.Region
  35. label={t('Sort By')}
  36. value={sortBy}
  37. onChange={selection => {
  38. onChange(selection.value);
  39. }}
  40. options={Object.entries(SORT_BY_OPTIONS).map(([name, filter]) => {
  41. if (name !== ReleasesSortOption.ADOPTION) {
  42. return {
  43. label: filter.label,
  44. value: name,
  45. };
  46. }
  47. const isNotSingleEnvironment = environments.length !== 1;
  48. return {
  49. label: filter.label,
  50. value: name,
  51. disabled: isNotSingleEnvironment,
  52. tooltip: isNotSingleEnvironment
  53. ? t('Select one environment to use this sort option.')
  54. : undefined,
  55. };
  56. })}
  57. />
  58. </CompositeSelect>
  59. );
  60. }