mailboxPicker.tsx 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import Badge from 'sentry/components/badge';
  2. import type decodeMailbox from 'sentry/components/feedback/decodeMailbox';
  3. import useMailboxCounts from 'sentry/components/feedback/list/useMailboxCounts';
  4. import {Flex} from 'sentry/components/profiling/flex';
  5. import {SegmentedControl} from 'sentry/components/segmentedControl';
  6. import {Tooltip} from 'sentry/components/tooltip';
  7. import {t} from 'sentry/locale';
  8. import useOrganization from 'sentry/utils/useOrganization';
  9. type Mailbox = ReturnType<typeof decodeMailbox>;
  10. interface Props {
  11. onChange: (next: Mailbox) => void;
  12. value: Mailbox;
  13. }
  14. const MAILBOXES = [
  15. {key: 'unresolved', label: t('Inbox')},
  16. {key: 'resolved', label: t('Resolved')},
  17. {key: 'ignored', label: t('Spam')},
  18. ];
  19. export default function MailboxPicker({onChange, value}: Props) {
  20. const organization = useOrganization();
  21. const {data} = useMailboxCounts({organization});
  22. const hasSpamFeature = organization.features.includes('user-feedback-spam-filter-ui');
  23. const filteredMailboxes = hasSpamFeature
  24. ? MAILBOXES
  25. : MAILBOXES.filter(i => i.key !== 'ignored');
  26. return (
  27. <Flex justify="flex-end" flex="1 0 auto">
  28. <SegmentedControl
  29. size="xs"
  30. aria-label={t('Filter feedbacks')}
  31. value={value}
  32. onChange={onChange}
  33. >
  34. {filteredMailboxes.map(c => {
  35. const count = data?.[c.key];
  36. const display = count && count >= 100 ? '99+' : count;
  37. const title =
  38. count === 1 ? t('1 unassigned item') : t('%s unassigned items', display);
  39. return (
  40. <SegmentedControl.Item key={c.key}>
  41. <Tooltip disabled={!count} title={title}>
  42. <Flex align="center">
  43. {c.label}
  44. {display ? <Badge type="gray" text={display} /> : null}
  45. </Flex>
  46. </Tooltip>
  47. </SegmentedControl.Item>
  48. );
  49. })}
  50. </SegmentedControl>
  51. </Flex>
  52. );
  53. }