mergedToolbar.tsx 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import {openDiffModal} from 'sentry/actionCreators/modal';
  2. import {Button} from 'sentry/components/button';
  3. import ButtonBar from 'sentry/components/buttonBar';
  4. import Confirm from 'sentry/components/confirm';
  5. import PanelHeader from 'sentry/components/panels/panelHeader';
  6. import {t, tct} from 'sentry/locale';
  7. import GroupingStore from 'sentry/stores/groupingStore';
  8. import {useLegacyStore} from 'sentry/stores/useLegacyStore';
  9. import {Group, Organization, Project} from 'sentry/types';
  10. type Props = {
  11. groupId: Group['id'];
  12. onToggleCollapse: () => void;
  13. onUnmerge: () => void;
  14. orgId: Organization['slug'];
  15. project: Project;
  16. };
  17. export function MergedToolbar({
  18. groupId,
  19. project,
  20. orgId,
  21. onUnmerge,
  22. onToggleCollapse,
  23. }: Props) {
  24. const {
  25. unmergeList,
  26. mergedItems,
  27. unmergeLastCollapsed,
  28. unmergeDisabled,
  29. enableFingerprintCompare,
  30. } = useLegacyStore(GroupingStore);
  31. const unmergeCount = unmergeList?.size ?? 0;
  32. function handleShowDiff(event: React.MouseEvent) {
  33. event.stopPropagation();
  34. const entries = unmergeList.entries();
  35. // `unmergeList` should only have 2 items in map
  36. if (unmergeList.size !== 2) {
  37. return;
  38. }
  39. // only need eventId, not fingerprint
  40. const [baseEventId, targetEventId] = Array.from(entries).map(
  41. ([, eventId]) => eventId
  42. );
  43. openDiffModal({
  44. targetIssueId: groupId,
  45. project,
  46. baseIssueId: groupId,
  47. orgId,
  48. baseEventId,
  49. targetEventId,
  50. });
  51. }
  52. const unmergeDisabledReason =
  53. mergedItems.length <= 1
  54. ? t('To unmerge, the list must contain 2 or more items')
  55. : unmergeList.size === 0
  56. ? t('To unmerge, 1 or more items must be selected')
  57. : GroupingStore.isAllUnmergedSelected()
  58. ? t('We are unable to unmerge all items at once')
  59. : undefined;
  60. return (
  61. <PanelHeader hasButtons>
  62. <ButtonBar gap={1}>
  63. <Confirm
  64. disabled={unmergeDisabled}
  65. onConfirm={onUnmerge}
  66. message={t(
  67. 'These events will be unmerged and grouped into a new issue. Are you sure you want to unmerge these events?'
  68. )}
  69. >
  70. <Button size="xs" title={unmergeDisabledReason}>
  71. {mergedItems.length <= 1
  72. ? t('Unmerge')
  73. : tct('Unmerge ([itemsSelectedQuantity])', {
  74. itemsSelectedQuantity: unmergeCount,
  75. })}
  76. </Button>
  77. </Confirm>
  78. <Button
  79. size="xs"
  80. disabled={!enableFingerprintCompare}
  81. onClick={handleShowDiff}
  82. title={
  83. !enableFingerprintCompare
  84. ? t('To compare, exactly 2 items must be selected')
  85. : undefined
  86. }
  87. >
  88. {t('Compare')}
  89. </Button>
  90. </ButtonBar>
  91. <Button size="xs" onClick={onToggleCollapse}>
  92. {unmergeLastCollapsed ? t('Expand All') : t('Collapse All')}
  93. </Button>
  94. </PanelHeader>
  95. );
  96. }