import {Component} from 'react'; import styled from '@emotion/styled'; import {Button} from 'sentry/components/button'; import Checkbox from 'sentry/components/checkbox'; import EventOrGroupHeader from 'sentry/components/eventOrGroupHeader'; import {Tooltip} from 'sentry/components/tooltip'; import {IconChevron} from 'sentry/icons'; import {t} from 'sentry/locale'; import type {Fingerprint} from 'sentry/stores/groupingStore'; import GroupingStore from 'sentry/stores/groupingStore'; import {space} from 'sentry/styles/space'; import type {Organization} from 'sentry/types'; type Props = { fingerprint: Fingerprint; organization: Organization; totalFingerprint: number; }; type State = { busy: boolean; checked: boolean; collapsed: boolean; }; class MergedItem extends Component { state: State = { collapsed: false, checked: false, busy: false, }; listener = GroupingStore.listen(data => this.onGroupChange(data), undefined); onGroupChange = ({unmergeState}) => { if (!unmergeState) { return; } const {fingerprint} = this.props; const stateForId = unmergeState.has(fingerprint.id) ? unmergeState.get(fingerprint.id) : undefined; if (!stateForId) { return; } Object.keys(stateForId).forEach(key => { if (stateForId[key] === this.state[key]) { return; } this.setState(prevState => ({...prevState, [key]: stateForId[key]})); }); }; handleToggleEvents = () => { const {fingerprint} = this.props; GroupingStore.onToggleCollapseFingerprint(fingerprint.id); }; // Disable default behavior of toggling checkbox handleLabelClick(event: React.MouseEvent) { event.preventDefault(); } handleToggle = () => { const {fingerprint} = this.props; const {latestEvent} = fingerprint; if (this.state.busy) { return; } // clicking anywhere in the row will toggle the checkbox GroupingStore.onToggleUnmerge([fingerprint.id, latestEvent.id]); }; handleCheckClick() { // noop because of react warning about being a controlled input without `onChange` // we handle change via row click } renderFingerprint(id: string, label?: string) { if (!label) { return id; } return ( {label} ); } render() { const {fingerprint, organization, totalFingerprint} = this.props; const {latestEvent, id, label} = fingerprint; const {collapsed, busy, checked} = this.state; const checkboxDisabled = busy || totalFingerprint === 1; // `latestEvent` can be null if last event w/ fingerprint is not within retention period return ( {this.renderFingerprint(id, label)}