diff --git a/static/app/components/feedback/feedbackItem/feedbackItem.tsx b/static/app/components/feedback/feedbackItem/feedbackItem.tsx index d8d2ac4f034e54..e814ba315897f5 100644 --- a/static/app/components/feedback/feedbackItem/feedbackItem.tsx +++ b/static/app/components/feedback/feedbackItem/feedbackItem.tsx @@ -97,11 +97,9 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) { /> {eventData ? ( - + + + ) : null}
} title={t('Tags')}> diff --git a/static/app/components/feedback/feedbackItem/traceDataSection.tsx b/static/app/components/feedback/feedbackItem/traceDataSection.tsx index 478cce007a23ce..e37fce4afe4fc0 100644 --- a/static/app/components/feedback/feedbackItem/traceDataSection.tsx +++ b/static/app/components/feedback/feedbackItem/traceDataSection.tsx @@ -1,13 +1,17 @@ import {useEffect} from 'react'; import Section from 'sentry/components/feedback/feedbackItem/feedbackItemSection'; +import Placeholder from 'sentry/components/placeholder'; import {IconSpan} from 'sentry/icons'; import {t} from 'sentry/locale'; import type {Event} from 'sentry/types/event'; import {trackAnalytics} from 'sentry/utils/analytics'; import useOrganization from 'sentry/utils/useOrganization'; import {TraceDataSection as IssuesTraceDataSection} from 'sentry/views/issueDetails/traceDataSection'; -import {useTraceTimelineEvents} from 'sentry/views/issueDetails/traceTimeline/useTraceTimelineEvents'; +import { + type TimelineEvent, + useTraceTimelineEvents, +} from 'sentry/views/issueDetails/traceTimeline/useTraceTimelineEvents'; /** * Doesn't require a Section wrapper. Rendered conditionally if @@ -17,11 +21,9 @@ import {useTraceTimelineEvents} from 'sentry/views/issueDetails/traceTimeline/us export default function TraceDataSection({ eventData, crashReportId, - hasProject, }: { crashReportId: string | undefined; eventData: Event; - hasProject: boolean; }) { // If there's a linked error from a crash report and only one other issue, showing both could be redundant. // TODO: we could add a jest test .spec for this ^ @@ -29,11 +31,7 @@ export default function TraceDataSection({ const {oneOtherIssueEvent, traceEvents, isLoading, isError} = useTraceTimelineEvents({ event: eventData, }); - const show = - !isLoading && - !isError && - traceEvents.length > 1 && // traceEvents include the current event. - (!hasProject || !crashReportId || oneOtherIssueEvent?.id === crashReportId); + // Note traceEvents includes the current event (feedback). useEffect(() => { if (isError) { @@ -45,23 +43,36 @@ export default function TraceDataSection({ organization, }); } - if (hasProject && !!crashReportId && oneOtherIssueEvent?.id === crashReportId) { + if (eventIsCrashReportDup(oneOtherIssueEvent, crashReportId)) { trackAnalytics('feedback.trace-section.crash-report-dup', {organization}); } } }, [ crashReportId, - hasProject, isError, isLoading, - oneOtherIssueEvent?.id, + oneOtherIssueEvent, organization, traceEvents.length, ]); - return show && organization.features.includes('user-feedback-trace-section') ? ( + return organization.features.includes('user-feedback-trace-section') && + !isError && + traceEvents.length > 1 && + !eventIsCrashReportDup(oneOtherIssueEvent, crashReportId) ? (
} title={t('Data From The Same Trace')}> - + {isLoading ? ( + + ) : ( + + )}
) : null; } + +function eventIsCrashReportDup( + event: TimelineEvent | undefined, + crashReportId: string | undefined +) { + return !!crashReportId && event?.id === crashReportId; +}