releasesSelectControl.tsx 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. import {useEffect, useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import debounce from 'lodash/debounce';
  4. import Badge from 'sentry/components/badge';
  5. import {CompactSelect} from 'sentry/components/compactSelect';
  6. import TextOverflow from 'sentry/components/textOverflow';
  7. import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants';
  8. import {IconReleases} from 'sentry/icons';
  9. import {t} from 'sentry/locale';
  10. import {space} from 'sentry/styles/space';
  11. import {useReleases} from 'sentry/utils/releases/releasesProvider';
  12. import type {DashboardFilters} from './types';
  13. import {DashboardFilterKeys} from './types';
  14. type Props = {
  15. selectedReleases: string[];
  16. className?: string;
  17. handleChangeFilter?: (activeFilters: DashboardFilters) => void;
  18. isDisabled?: boolean;
  19. };
  20. const ALIASED_RELEASES = [
  21. {
  22. label: t('Latest Release(s)'),
  23. value: 'latest',
  24. },
  25. ];
  26. function ReleasesSelectControl({
  27. handleChangeFilter,
  28. selectedReleases,
  29. className,
  30. isDisabled,
  31. }: Props) {
  32. const {releases, loading, onSearch} = useReleases();
  33. const [activeReleases, setActiveReleases] = useState<string[]>(selectedReleases);
  34. function resetSearch() {
  35. onSearch('');
  36. }
  37. useEffect(() => {
  38. setActiveReleases(selectedReleases);
  39. }, [selectedReleases]);
  40. const triggerLabel = activeReleases.length ? (
  41. <TextOverflow>{activeReleases[0]} </TextOverflow>
  42. ) : (
  43. t('All Releases')
  44. );
  45. const activeReleasesSet = new Set(activeReleases);
  46. return (
  47. <StyledCompactSelect
  48. multiple
  49. clearable
  50. searchable
  51. disabled={isDisabled}
  52. loading={loading}
  53. menuTitle={<MenuTitleWrapper>{t('Filter Releases')}</MenuTitleWrapper>}
  54. className={className}
  55. onSearch={debounce(val => {
  56. onSearch(val);
  57. }, DEFAULT_DEBOUNCE_DURATION)}
  58. options={[
  59. {
  60. value: '_releases',
  61. label: t('Sorted by date created'),
  62. options: [
  63. ...ALIASED_RELEASES,
  64. ...activeReleases
  65. .filter(version => version !== 'latest')
  66. .map(version => ({
  67. label: version,
  68. value: version,
  69. })),
  70. ...releases
  71. .filter(({version}) => !activeReleasesSet.has(version))
  72. .map(({version}) => ({
  73. label: version,
  74. value: version,
  75. })),
  76. ],
  77. },
  78. ]}
  79. onChange={opts => setActiveReleases(opts.map(opt => opt.value as string))}
  80. onClose={() => {
  81. resetSearch();
  82. handleChangeFilter?.({
  83. [DashboardFilterKeys.RELEASE]: activeReleases,
  84. });
  85. }}
  86. value={activeReleases}
  87. triggerLabel={
  88. <ButtonLabelWrapper>
  89. {triggerLabel}{' '}
  90. {activeReleases.length > 1 && (
  91. <StyledBadge text={`+${activeReleases.length - 1}`} />
  92. )}
  93. </ButtonLabelWrapper>
  94. }
  95. triggerProps={{icon: <IconReleases />}}
  96. />
  97. );
  98. }
  99. export default ReleasesSelectControl;
  100. const StyledBadge = styled(Badge)`
  101. flex-shrink: 0;
  102. `;
  103. const StyledCompactSelect = styled(CompactSelect)`
  104. @media (min-width: ${p => p.theme.breakpoints.small}) {
  105. max-width: 300px;
  106. }
  107. `;
  108. const ButtonLabelWrapper = styled('span')`
  109. width: 100%;
  110. text-align: left;
  111. align-items: center;
  112. display: inline-grid;
  113. grid-template-columns: 1fr auto;
  114. `;
  115. const MenuTitleWrapper = styled('span')`
  116. display: inline-block;
  117. padding-top: ${space(0.5)};
  118. padding-bottom: ${space(0.5)};
  119. `;