123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- import styled from '@emotion/styled';
- import {openDiffModal} from 'sentry/actionCreators/modal';
- import Button from 'sentry/components/button';
- import Confirm from 'sentry/components/confirm';
- import {PanelHeader} from 'sentry/components/panels';
- import {t, tct} from 'sentry/locale';
- import GroupingStore from 'sentry/stores/groupingStore';
- import {useLegacyStore} from 'sentry/stores/useLegacyStore';
- import space from 'sentry/styles/space';
- import {Group, Organization, Project} from 'sentry/types';
- type Props = {
- groupId: Group['id'];
- onToggleCollapse: () => void;
- onUnmerge: () => void;
- orgId: Organization['slug'];
- project: Project;
- };
- export function MergedToolbar({
- groupId,
- project,
- orgId,
- onUnmerge,
- onToggleCollapse,
- }: Props) {
- const {
- unmergeList,
- mergedItems,
- unmergeLastCollapsed,
- unmergeDisabled,
- enableFingerprintCompare,
- } = useLegacyStore(GroupingStore);
- const unmergeCount = unmergeList?.size ?? 0;
- function handleShowDiff(event: React.MouseEvent) {
- event.stopPropagation();
- const entries = unmergeList.entries();
- // `unmergeList` should only have 2 items in map
- if (unmergeList.size !== 2) {
- return;
- }
- // only need eventId, not fingerprint
- const [baseEventId, targetEventId] = Array.from(entries).map(
- ([, eventId]) => eventId
- );
- openDiffModal({
- targetIssueId: groupId,
- project,
- baseIssueId: groupId,
- orgId,
- baseEventId,
- targetEventId,
- });
- }
- const unmergeDisabledReason =
- mergedItems.length <= 1
- ? t('To unmerge, the list must contain 2 or more items')
- : unmergeList.size === 0
- ? t('To unmerge, 1 or more items must be selected')
- : GroupingStore.isAllUnmergedSelected()
- ? t('We are unable to unmerge all items at once')
- : undefined;
- return (
- <PanelHeader hasButtons>
- <div>
- <Confirm
- disabled={unmergeDisabled}
- onConfirm={onUnmerge}
- message={t(
- 'These events will be unmerged and grouped into a new issue. Are you sure you want to unmerge these events?'
- )}
- >
- <Button size="sm" title={unmergeDisabledReason}>
- {mergedItems.length <= 1
- ? t('Unmerge')
- : tct('Unmerge ([itemsSelectedQuantity])', {
- itemsSelectedQuantity: unmergeCount,
- })}
- </Button>
- </Confirm>
- <CompareButton
- size="sm"
- disabled={!enableFingerprintCompare}
- onClick={handleShowDiff}
- title={
- !enableFingerprintCompare
- ? t('To compare, exactly 2 items must be selected')
- : undefined
- }
- >
- {t('Compare')}
- </CompareButton>
- </div>
- <Button size="sm" onClick={onToggleCollapse}>
- {unmergeLastCollapsed ? t('Expand All') : t('Collapse All')}
- </Button>
- </PanelHeader>
- );
- }
- const CompareButton = styled(Button)`
- margin-left: ${space(1)};
- `;
|