From 86a0d6b8d6368733cd2a50ad32f3d0682b1d40d2 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Mon, 11 May 2026 20:15:09 -0700 Subject: [PATCH 1/7] ref(issues): Remove InterimSection InterimSection was only a temporary adapter around FoldSection. Replace the call sites with FoldSection directly and let the section context accept the string keys those call sites already used. Also keeps jump-to limited to the known issue detail sections, so arbitrary drawer/sidebar section keys don't show up there. Co-authored-by: Codex GPT-5 --- .../breadcrumbs/breadcrumbsDataSection.tsx | 10 +- .../events/contexts/contextDataSection.tsx | 21 +- static/app/components/events/device.tsx | 6 +- .../components/events/eventAttachments.tsx | 12 +- .../app/components/events/eventEvidence.tsx | 9 +- .../events/eventExtraData/index.tsx | 8 +- .../eventHydrationDiff/replayDiffContent.tsx | 28 +-- .../eventHydrationDiff/replayDiffSection.tsx | 8 +- .../components/events/eventInsightDiff.tsx | 6 +- .../events/eventProcessingErrors.tsx | 8 +- .../events/eventReplay/replayClipSection.tsx | 13 +- .../replayInlineOnboardingPanel.tsx | 6 +- static/app/components/events/eventSdk.tsx | 6 +- .../aggregateSpanDiff.tsx | 8 +- .../breakpointChart.tsx | 8 +- .../eventComparison/index.tsx | 8 +- .../eventRegressionSummary.tsx | 9 +- .../functionBreakpointChart.tsx | 8 +- .../screenshot/screenshotDataSection.tsx | 11 +- .../events/eventTagsAndScreenshot/tags.tsx | 27 +-- .../components/events/eventViewHierarchy.tsx | 8 +- .../app/components/events/eventXrayDiff.tsx | 6 +- .../featureFlags/eventFeatureFlagSection.tsx | 12 +- .../groupingInfo/groupingInfoSection.tsx | 8 +- .../highlights/highlightsDataSection.tsx | 53 +++-- .../events/interfaces/csp/index.tsx | 6 +- .../events/interfaces/debugMeta/index.tsx | 11 +- .../components/events/interfaces/generic.tsx | 8 +- .../components/events/interfaces/message.tsx | 6 +- .../interfaces/performance/anrRootCause.tsx | 18 +- .../interfaces/performance/eventTraceView.tsx | 8 +- .../interfaces/performance/spanEvidence.tsx | 17 +- .../components/events/interfaces/template.tsx | 6 +- .../components/events/interfaces/threads.tsx | 8 +- .../uptime/uptimeAssertionsSection.tsx | 8 +- .../events/metrics/metricsSection.tsx | 11 +- .../events/ourlogs/ourlogsSection.tsx | 11 +- static/app/components/events/packageData.tsx | 8 +- .../events/profileEventEvidence.tsx | 6 +- .../components/events/rrwebIntegration.tsx | 14 +- .../events/traceEventDataSection.tsx | 187 +++++++++--------- .../stackTrace/issueStackTrace/index.tsx | 14 +- .../issueStackTrace/sharedIssueStackTrace.tsx | 14 +- .../groupEventDetailsContent.tsx | 12 +- .../metricIssues/metricIssuesSection.tsx | 16 +- .../metricKitHangProfileSection.tsx | 8 +- .../issueDetails/profilePreviewSection.tsx | 8 +- .../views/issueDetails/streamline/context.tsx | 12 +- .../issueDetails/streamline/foldSection.tsx | 10 +- .../streamline/interimSection.tsx | 40 ---- .../streamline/issueDetailsJumpTo.tsx | 19 +- .../sidebar/attributeComparisonSection.tsx | 8 +- .../metricDetectorTriggeredSection.tsx | 22 +-- .../sidebar/openPeriodTimelineSection.tsx | 6 +- .../sidebar/sizeAnalysisTriggeredSection.tsx | 8 +- .../details/profiling/profilePreview.tsx | 8 +- .../span/components/profileDetails.tsx | 8 +- .../traceDrawer/details/span/index.tsx | 8 +- .../details/span/sections/generalInfo.tsx | 10 +- .../traceDrawer/details/transaction/index.tsx | 8 +- .../transaction/sections/breadCrumbs.tsx | 8 +- .../details/transaction/sections/entries.tsx | 6 +- .../transaction/sections/generalInfo.tsx | 10 +- .../transaction/sections/replayPreview.tsx | 8 +- 64 files changed, 400 insertions(+), 511 deletions(-) delete mode 100644 static/app/views/issueDetails/streamline/interimSection.tsx diff --git a/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx b/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx index d0e45a612b9f..1d0e14935bd9 100644 --- a/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx +++ b/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx @@ -33,7 +33,7 @@ import {trackAnalytics} from 'sentry/utils/analytics'; import {useLocalStorageState} from 'sentry/utils/useLocalStorageState'; import {useOrganization} from 'sentry/utils/useOrganization'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; interface BreadcrumbsDataSectionProps { event: Event; @@ -164,11 +164,9 @@ export function BreadcrumbsDataSection({ const numHiddenCrumbs = enhancedCrumbs.length - summaryCrumbs.length; return ( - @@ -201,7 +199,7 @@ export function BreadcrumbsDataSection({ )} - + ); } diff --git a/static/app/components/events/contexts/contextDataSection.tsx b/static/app/components/events/contexts/contextDataSection.tsx index ff470da656f1..dc1941696ca1 100644 --- a/static/app/components/events/contexts/contextDataSection.tsx +++ b/static/app/components/events/contexts/contextDataSection.tsx @@ -1,15 +1,12 @@ -import {ExternalLink} from '@sentry/scraps/link'; - import {ErrorBoundary} from 'sentry/components/errorBoundary'; import {getOrderedContextItems} from 'sentry/components/events/contexts'; import {ContextCard} from 'sentry/components/events/contexts/contextCard'; -import {CONTEXT_DOCS_LINK} from 'sentry/components/events/contexts/utils'; import {KeyValueData} from 'sentry/components/keyValueData'; -import {t, tct} from 'sentry/locale'; +import {t} from 'sentry/locale'; import type {Event} from 'sentry/types/event'; import type {Project} from 'sentry/types/project'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; interface ContextDataSectionProps { event: Event; @@ -40,22 +37,14 @@ export function ContextDataSection({ } return ( - , - } - )} - isHelpHoverable disableCollapsePersistence={disableCollapsePersistence} > {cards} - + ); } diff --git a/static/app/components/events/device.tsx b/static/app/components/events/device.tsx index afa075852652..fb180f41ff83 100644 --- a/static/app/components/events/device.tsx +++ b/static/app/components/events/device.tsx @@ -2,7 +2,7 @@ import {t} from 'sentry/locale'; import type {Event} from 'sentry/types/event'; import {isEmptyObject} from 'sentry/utils/object/isEmptyObject'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {KeyValueList} from './interfaces/keyValueList'; @@ -24,7 +24,7 @@ export function EventDevice({event}: Props) { } return ( - + - + ); } diff --git a/static/app/components/events/eventAttachments.tsx b/static/app/components/events/eventAttachments.tsx index 6e2b640ef5ad..5d0dff420e4a 100644 --- a/static/app/components/events/eventAttachments.tsx +++ b/static/app/components/events/eventAttachments.tsx @@ -20,7 +20,7 @@ import {useLocation} from 'sentry/utils/useLocation'; import {useOrganization} from 'sentry/utils/useOrganization'; import {InlineEventAttachment} from 'sentry/views/issueDetails/groupEventAttachments/inlineEventAttachment'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {Tab, TabPaths} from 'sentry/views/issueDetails/types'; import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute'; @@ -86,12 +86,12 @@ function EventAttachmentsContent({ if (isError) { return ( - + - + ); } @@ -113,8 +113,8 @@ function EventAttachmentsContent({ }; return ( - : null} disableCollapsePersistence={disableCollapsePersistence} @@ -179,7 +179,7 @@ function EventAttachmentsContent({ ))} )} - + ); } diff --git a/static/app/components/events/eventEvidence.tsx b/static/app/components/events/eventEvidence.tsx index ff00cea0d9d8..6a623292ae3a 100644 --- a/static/app/components/events/eventEvidence.tsx +++ b/static/app/components/events/eventEvidence.tsx @@ -9,7 +9,7 @@ import { getIssueCategoryAndTypeFromOccurrenceType, } from 'sentry/utils/issueTypeConfig'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; type EvidenceProps = { event: Event; @@ -46,10 +46,9 @@ export function EventEvidence({ } return ( - - + ); } diff --git a/static/app/components/events/eventExtraData/index.tsx b/static/app/components/events/eventExtraData/index.tsx index a89973a76610..90bf932a2313 100644 --- a/static/app/components/events/eventExtraData/index.tsx +++ b/static/app/components/events/eventExtraData/index.tsx @@ -12,7 +12,7 @@ import type {Event} from 'sentry/types/event'; import {defined} from 'sentry/utils'; import {isEmptyObject} from 'sentry/utils/object/isEmptyObject'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {getEventExtraDataKnownDataDetails} from './getEventExtraDataKnownDataDetails'; import type {EventExtraDataType, EventExtraData as TEventExtraData} from './types'; @@ -42,8 +42,8 @@ export function EventExtraData({event}: Props) { } return ( - {contextBlock} - + ); } diff --git a/static/app/components/events/eventHydrationDiff/replayDiffContent.tsx b/static/app/components/events/eventHydrationDiff/replayDiffContent.tsx index 7c1f125f64ad..cc9d285311cc 100644 --- a/static/app/components/events/eventHydrationDiff/replayDiffContent.tsx +++ b/static/app/components/events/eventHydrationDiff/replayDiffContent.tsx @@ -19,7 +19,7 @@ import {getReplayDiffOffsetsFromEvent} from 'sentry/utils/replays/getDiffTimesta import {useLoadReplayReader} from 'sentry/utils/replays/hooks/useLoadReplayReader'; import {useOrganization} from 'sentry/utils/useOrganization'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; interface Props { event: Event; @@ -37,7 +37,7 @@ export default function ReplayDiffContent({event, group, orgSlug, replaySlug}: P }); const sectionProps = { - type: SectionKey.HYDRATION_DIFF, + sectionKey: SectionKey.HYDRATION_DIFF, title: t('Hydration Error Diff'), }; @@ -45,33 +45,33 @@ export default function ReplayDiffContent({event, group, orgSlug, replaySlug}: P ( - + - + )} renderLoading={() => ( - + - + )} renderError={() => ( - + - + )} renderThrottled={() => ( - + - + )} renderMissing={() => ( - + - + )} > {({replay}) => { @@ -80,7 +80,7 @@ export default function ReplayDiffContent({event, group, orgSlug, replaySlug}: P event ); return ( - - + ); }} diff --git a/static/app/components/events/eventHydrationDiff/replayDiffSection.tsx b/static/app/components/events/eventHydrationDiff/replayDiffSection.tsx index 1c3a239abaf2..83207eda032e 100644 --- a/static/app/components/events/eventHydrationDiff/replayDiffSection.tsx +++ b/static/app/components/events/eventHydrationDiff/replayDiffSection.tsx @@ -13,7 +13,7 @@ import type {Group} from 'sentry/types/group'; import {useOrganization} from 'sentry/utils/useOrganization'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; import {SectionDivider} from 'sentry/views/issueDetails/streamline/foldSection'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; interface Props { event: Event; @@ -36,14 +36,14 @@ export function ReplayDiffSection({event, group, replayId}: Props) { replaySlug={replayId} LazyComponent={ReplayDiffContent} loadingFallback={ - - + } /> diff --git a/static/app/components/events/eventInsightDiff.tsx b/static/app/components/events/eventInsightDiff.tsx index fefd3a404e18..740c02f7a466 100644 --- a/static/app/components/events/eventInsightDiff.tsx +++ b/static/app/components/events/eventInsightDiff.tsx @@ -12,7 +12,7 @@ import { useSizeAnalysisComparison, } from 'sentry/utils/preprod/useSizeAnalysisComparison'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {InsightComparisonSection} from 'sentry/views/preprod/buildComparison/main/insightComparisonSection'; type SectionProps = MetricIds & {project: Project}; @@ -50,7 +50,7 @@ function EventInsightDiffContent({baseMetricId, headMetricId, project}: SectionP function EventInsightDiffSection({baseMetricId, headMetricId, project}: SectionProps) { return ( - + - + ); } diff --git a/static/app/components/events/eventProcessingErrors.tsx b/static/app/components/events/eventProcessingErrors.tsx index 524ba7079f9b..2f98ebf555b1 100644 --- a/static/app/components/events/eventProcessingErrors.tsx +++ b/static/app/components/events/eventProcessingErrors.tsx @@ -13,7 +13,7 @@ import {t, tct} from 'sentry/locale'; import type {Event} from 'sentry/types/event'; import type {Project} from 'sentry/types/project'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; type Props = { event: Event; @@ -124,15 +124,15 @@ export function EventProcessingErrors({event, project, isShare}: Props) { } return ( - {errors.map((error, idx) => { return ; })} - + ); } diff --git a/static/app/components/events/eventReplay/replayClipSection.tsx b/static/app/components/events/eventReplay/replayClipSection.tsx index f2f2c87b35e6..feb5c63f924f 100644 --- a/static/app/components/events/eventReplay/replayClipSection.tsx +++ b/static/app/components/events/eventReplay/replayClipSection.tsx @@ -17,7 +17,7 @@ import {getAnalyticsDataForEvent, getAnalyticsDataForGroup} from 'sentry/utils/e import {useReplayCountForIssues} from 'sentry/utils/replayCount/useReplayCountForIssues'; import {useOrganization} from 'sentry/utils/useOrganization'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {Tab, TabPaths} from 'sentry/views/issueDetails/types'; import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute'; @@ -103,26 +103,21 @@ export function ReplayClipSection({event, group, replayId}: Props) { return ( - {lazyReplay} - + ); } -// The min-height here is due to max-height that is set in replayPreview.tsx -const ReplaySectionMinHeight = styled(InterimSection)` - min-height: 557px; -`; - const StyledNegativeSpaceContainer = styled(NegativeSpaceContainer)` height: ${REPLAY_LOADING_HEIGHT}px; margin-bottom: ${p => p.theme.space.xl}; diff --git a/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx b/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx index d0b04c9fc698..389f05c6dfb0 100644 --- a/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx +++ b/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx @@ -17,7 +17,7 @@ import {useReplayOnboardingSidebarPanel} from 'sentry/utils/replays/hooks/useRep import {useMedia} from 'sentry/utils/useMedia'; import {useOrganization} from 'sentry/utils/useOrganization'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; type OnboardingCTAProps = { platform: PlatformKey; @@ -48,7 +48,7 @@ export default function ReplayInlineOnboardingPanel({ } return ( - +
@@ -106,7 +106,7 @@ export default function ReplayInlineOnboardingPanel({ ]} /> - + ); } diff --git a/static/app/components/events/eventSdk.tsx b/static/app/components/events/eventSdk.tsx index 7e30b81baf4b..6c01f6fdca0a 100644 --- a/static/app/components/events/eventSdk.tsx +++ b/static/app/components/events/eventSdk.tsx @@ -2,7 +2,7 @@ import {t} from 'sentry/locale'; import type {Event} from 'sentry/types/event'; import {isEmptyObject} from 'sentry/utils/object/isEmptyObject'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {KeyValueList} from './interfaces/keyValueList'; import {AnnotatedText} from './meta/annotatedText'; @@ -18,7 +18,7 @@ export function EventSdk({sdk, meta}: Props) { } return ( - + - + ); } diff --git a/static/app/components/events/eventStatisticalDetector/aggregateSpanDiff.tsx b/static/app/components/events/eventStatisticalDetector/aggregateSpanDiff.tsx index 67ebf508806c..fa1fc9f20ac3 100644 --- a/static/app/components/events/eventStatisticalDetector/aggregateSpanDiff.tsx +++ b/static/app/components/events/eventStatisticalDetector/aggregateSpanDiff.tsx @@ -15,7 +15,7 @@ import {useOrganization} from 'sentry/utils/useOrganization'; import {useSpans} from 'sentry/views/insights/common/queries/useDiscover'; import {SpanFields} from 'sentry/views/insights/types'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {makeTracesPathname} from 'sentry/views/traces/pathnames'; import {EventRegressionTable, type EventRegressionTableRow} from './eventRegressionTable'; @@ -217,8 +217,8 @@ export function AggregateSpanDiff({event, project}: AggregateSpanDiffProps) { }); return ( - - + ); } diff --git a/static/app/components/events/eventStatisticalDetector/breakpointChart.tsx b/static/app/components/events/eventStatisticalDetector/breakpointChart.tsx index 63ca0502c0ae..983072fdedee 100644 --- a/static/app/components/events/eventStatisticalDetector/breakpointChart.tsx +++ b/static/app/components/events/eventStatisticalDetector/breakpointChart.tsx @@ -18,7 +18,7 @@ import {useOrganization} from 'sentry/utils/useOrganization'; import {Mode} from 'sentry/views/explore/queryParams/mode'; import {getExploreUrl} from 'sentry/views/explore/utils'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import type {BreakpointEvidenceData} from './breakpointChartOptions'; import {RELATIVE_DAYS_WINDOW} from './consts'; @@ -96,8 +96,8 @@ export function EventBreakpointChart({event}: EventBreakpointChartProps) { }); return ( - - + ); } diff --git a/static/app/components/events/eventStatisticalDetector/eventComparison/index.tsx b/static/app/components/events/eventStatisticalDetector/eventComparison/index.tsx index b086c84a419e..e68cf4e6db02 100644 --- a/static/app/components/events/eventStatisticalDetector/eventComparison/index.tsx +++ b/static/app/components/events/eventStatisticalDetector/eventComparison/index.tsx @@ -7,7 +7,7 @@ import {t} from 'sentry/locale'; import type {Event} from 'sentry/types/event'; import type {Project} from 'sentry/types/project'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; const COMPARISON_DESCRIPTION = t( 'To better understand what happened before and after this regression, compare a baseline event with a regressed event. Look for any significant shape changes, operation percentage changes, and tag differences.' @@ -25,8 +25,8 @@ export function EventComparison({event, project}: EventComparisonProps) { event?.occurrence?.evidenceData ?? {}; return ( -

{COMPARISON_DESCRIPTION}

@@ -52,7 +52,7 @@ export function EventComparison({event, project}: EventComparisonProps) { /> - + ); } diff --git a/static/app/components/events/eventStatisticalDetector/eventRegressionSummary.tsx b/static/app/components/events/eventStatisticalDetector/eventRegressionSummary.tsx index 8b9fdfa14511..b04dff7fdbe2 100644 --- a/static/app/components/events/eventStatisticalDetector/eventRegressionSummary.tsx +++ b/static/app/components/events/eventStatisticalDetector/eventRegressionSummary.tsx @@ -15,7 +15,7 @@ import {getDuration} from 'sentry/utils/duration/getDuration'; import {formatPercentage} from 'sentry/utils/number/formatPercentage'; import {useOrganization} from 'sentry/utils/useOrganization'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import { DisplayModes, transactionSummaryRouteWithQuery, @@ -39,9 +39,12 @@ export function EventRegressionSummary({event, group}: EventRegressionSummaryPro } return ( - + - + ); } diff --git a/static/app/components/events/eventStatisticalDetector/functionBreakpointChart.tsx b/static/app/components/events/eventStatisticalDetector/functionBreakpointChart.tsx index 69e7c89636d5..8bfb74bab1f4 100644 --- a/static/app/components/events/eventStatisticalDetector/functionBreakpointChart.tsx +++ b/static/app/components/events/eventStatisticalDetector/functionBreakpointChart.tsx @@ -10,7 +10,7 @@ import {defined} from 'sentry/utils'; import {useProfileEventsStats} from 'sentry/utils/profiling/hooks/useProfileEventsStats'; import {useRelativeDateTime} from 'sentry/utils/profiling/hooks/useRelativeDateTime'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {RELATIVE_DAYS_WINDOW} from './consts'; @@ -84,8 +84,8 @@ function EventFunctionBreakpointChartInner({ }; return ( - - + ); } diff --git a/static/app/components/events/eventTagsAndScreenshot/screenshot/screenshotDataSection.tsx b/static/app/components/events/eventTagsAndScreenshot/screenshot/screenshotDataSection.tsx index 3da64f98c8cf..be637a0780dc 100644 --- a/static/app/components/events/eventTagsAndScreenshot/screenshot/screenshotDataSection.tsx +++ b/static/app/components/events/eventTagsAndScreenshot/screenshot/screenshotDataSection.tsx @@ -21,7 +21,7 @@ import {useLocation} from 'sentry/utils/useLocation'; import {useOrganization} from 'sentry/utils/useOrganization'; import {EventAttachmentFilter} from 'sentry/views/issueDetails/groupEventAttachments/groupEventAttachmentsFilter'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {Tab, TabPaths} from 'sentry/views/issueDetails/types'; interface ScreenshotDataSectionProps { @@ -109,12 +109,9 @@ export function ScreenshotDataSection({ const title = tn('Screenshot', 'Screenshots', screenshots.length); return showScreenshot ? ( - {t('View All')} @@ -134,6 +131,6 @@ export function ScreenshotDataSection({ totalScreenshots={screenshots.length} openVisualizationModal={handleOpenVisualizationModal} /> - + ) : null; } diff --git a/static/app/components/events/eventTagsAndScreenshot/tags.tsx b/static/app/components/events/eventTagsAndScreenshot/tags.tsx index 7d20e55c8d25..db78ed223d2e 100644 --- a/static/app/components/events/eventTagsAndScreenshot/tags.tsx +++ b/static/app/components/events/eventTagsAndScreenshot/tags.tsx @@ -1,8 +1,6 @@ import {useMemo, useState} from 'react'; -import styled from '@emotion/styled'; import {Grid} from '@sentry/scraps/layout'; -import {ExternalLink} from '@sentry/scraps/link'; import {SegmentedControl} from '@sentry/scraps/segmentedControl'; import {GuideAnchor} from 'sentry/components/assistant/guideAnchor'; @@ -12,13 +10,12 @@ import { getSentryDefaultTags, TagFilter, TagFilterData, - TAGS_DOCS_LINK, } from 'sentry/components/events/eventTags/util'; -import {t, tct} from 'sentry/locale'; +import {t} from 'sentry/locale'; import type {Event} from 'sentry/types/event'; import type {Project} from 'sentry/types/project'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; type Props = { event: Event; @@ -84,20 +81,15 @@ export function EventTagsDataSection({ ); return ( - {t('Tags')} } - help={tct('The searchable tags associated with this event. [link:Learn more]', { - link: , - })} - isHelpHoverable actions={actions} - data-test-id="event-tags" - type={SectionKey.TAGS} + sectionKey={SectionKey.TAGS} ref={ref} > - + ); } - -const StyledEventDataSection = styled(InterimSection)` - padding: ${p => p.theme.space.xs} ${p => p.theme.space.xl} ${p => p.theme.space.md}; - - @media (min-width: ${p => p.theme.breakpoints.md}) { - padding: ${p => p.theme.space.md} ${p => p.theme.space['3xl']} - ${p => p.theme.space.lg}; - } -`; diff --git a/static/app/components/events/eventViewHierarchy.tsx b/static/app/components/events/eventViewHierarchy.tsx index f3ea25b585b5..928a02b13437 100644 --- a/static/app/components/events/eventViewHierarchy.tsx +++ b/static/app/components/events/eventViewHierarchy.tsx @@ -16,7 +16,7 @@ import type {getApiUrl} from 'sentry/utils/api/getApiUrl'; import {useApiQuery} from 'sentry/utils/queryClient'; import {useOrganization} from 'sentry/utils/useOrganization'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import type {ViewHierarchyData} from './viewHierarchy'; import {ViewHierarchy} from './viewHierarchy'; @@ -96,9 +96,9 @@ function EventViewHierarchyContent({event, project, disableCollapsePersistence}: const platformViewConfig = getPlatformViewConfig(platform); return ( - @@ -110,7 +110,7 @@ function EventViewHierarchyContent({event, project, disableCollapsePersistence}: nodeField={platformViewConfig.nodeField} /> - + ); } diff --git a/static/app/components/events/eventXrayDiff.tsx b/static/app/components/events/eventXrayDiff.tsx index d9b9d29ff019..6832694a17d8 100644 --- a/static/app/components/events/eventXrayDiff.tsx +++ b/static/app/components/events/eventXrayDiff.tsx @@ -11,7 +11,7 @@ import { useSizeAnalysisComparison, } from 'sentry/utils/preprod/useSizeAnalysisComparison'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {TreemapDiffSection} from 'sentry/views/preprod/buildComparison/main/treemapDiffSection'; type SectionProps = MetricIds & {project: Project}; @@ -43,7 +43,7 @@ function EventXrayDiffContent({baseMetricId, headMetricId, project}: SectionProp function EventXrayDiffSection({baseMetricId, headMetricId, project}: SectionProps) { return ( - + - + ); } diff --git a/static/app/components/events/featureFlags/eventFeatureFlagSection.tsx b/static/app/components/events/featureFlags/eventFeatureFlagSection.tsx index f6f0c3bf384e..346dc0c249ad 100644 --- a/static/app/components/events/featureFlags/eventFeatureFlagSection.tsx +++ b/static/app/components/events/featureFlags/eventFeatureFlagSection.tsx @@ -37,8 +37,8 @@ import {useLocation} from 'sentry/utils/useLocation'; import {useMedia} from 'sentry/utils/useMedia'; import {useOrganization} from 'sentry/utils/useOrganization'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {useIssueDetailsEventView} from 'sentry/views/issueDetails/streamline/hooks/useIssueDetailsDiscoverQuery'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; export function EventFeatureFlagSection(props: EventFeatureFlagSectionProps) { return ( @@ -271,13 +271,9 @@ function BaseEventFeatureFlagList({event, group, project}: EventFeatureFlagSecti const label = tn('View 1 More Flag', 'View %s More Flags', extraFlags); return ( - {hasFlags ? ( @@ -302,7 +298,7 @@ function BaseEventFeatureFlagList({event, group, project}: EventFeatureFlagSecti {label} )} - + ); } diff --git a/static/app/components/events/groupingInfo/groupingInfoSection.tsx b/static/app/components/events/groupingInfo/groupingInfoSection.tsx index 9ee6686c828e..05df74bfbd10 100644 --- a/static/app/components/events/groupingInfo/groupingInfoSection.tsx +++ b/static/app/components/events/groupingInfo/groupingInfoSection.tsx @@ -5,7 +5,7 @@ import {t} from 'sentry/locale'; import type {Event} from 'sentry/types/event'; import type {Group} from 'sentry/types/group'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; interface EventGroupingInfoSectionProps { event: Event; @@ -23,9 +23,9 @@ export function EventGroupingInfoSection({ group, }: EventGroupingInfoSectionProps) { return ( - - + ); } diff --git a/static/app/components/events/highlights/highlightsDataSection.tsx b/static/app/components/events/highlights/highlightsDataSection.tsx index f45c0fe4bd66..a4bacd87d4d4 100644 --- a/static/app/components/events/highlights/highlightsDataSection.tsx +++ b/static/app/components/events/highlights/highlightsDataSection.tsx @@ -3,7 +3,6 @@ import {css, type Theme, useTheme} from '@emotion/react'; import styled from '@emotion/styled'; import {Button} from '@sentry/scraps/button'; -import {ExternalLink} from '@sentry/scraps/link'; import {useModal} from '@sentry/scraps/modal'; import {hasEveryAccess} from 'sentry/components/acl/access'; @@ -21,11 +20,10 @@ import { EMPTY_HIGHLIGHT_DEFAULT, getHighlightContextData, getHighlightTagData, - HIGHLIGHT_DOCS_LINK, } from 'sentry/components/events/highlights/util'; import {LoadingIndicator} from 'sentry/components/loadingIndicator'; import {IconEdit} from 'sentry/icons'; -import {t, tct} from 'sentry/locale'; +import {t} from 'sentry/locale'; import type {Event} from 'sentry/types/event'; import type {Project} from 'sentry/types/project'; import {trackAnalytics} from 'sentry/utils/analytics'; @@ -34,7 +32,7 @@ import {useReplayData} from 'sentry/utils/replays/hooks/useReplayData'; import {useLocation} from 'sentry/utils/useLocation'; import {useOrganization} from 'sentry/utils/useOrganization'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; interface HighlightsDataSectionProps { event: Event; @@ -226,24 +224,26 @@ function HighlightsData({ return ( {isPending ? ( + hasDisabledHighlights ? ( + + + {t("There's nothing here...")} + + {t('Add Highlights')} + + + + ) : ( + columns + ) + ) : ( - ) : hasDisabledHighlights ? ( - - - {t("There's nothing here...")} - - {t('Add Highlights')} - - - - ) : ( - columns )} ); @@ -251,18 +251,9 @@ function HighlightsData({ export function HighlightsDataSection({event, project}: HighlightsDataSectionProps) { return ( - , - } - )} - isHelpHoverable - data-test-id="event-highlights" actions={ @@ -272,7 +263,7 @@ export function HighlightsDataSection({event, project}: HighlightsDataSectionPro - + ); } diff --git a/static/app/components/events/interfaces/csp/index.tsx b/static/app/components/events/interfaces/csp/index.tsx index 3a793f238b3c..2c7d93aa47a9 100644 --- a/static/app/components/events/interfaces/csp/index.tsx +++ b/static/app/components/events/interfaces/csp/index.tsx @@ -7,7 +7,7 @@ import {t} from 'sentry/locale'; import type {Event} from 'sentry/types/event'; import {EntryType} from 'sentry/types/event'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import type {HelpProps} from './help'; import {CSPHelp as Help} from './help'; @@ -68,8 +68,8 @@ export function Csp({data, event}: Props) { ); return ( - + {getView(view, cleanData, meta)} - + ); } diff --git a/static/app/components/events/interfaces/debugMeta/index.tsx b/static/app/components/events/interfaces/debugMeta/index.tsx index b9583167fa31..ab6a3e1b5909 100644 --- a/static/app/components/events/interfaces/debugMeta/index.tsx +++ b/static/app/components/events/interfaces/debugMeta/index.tsx @@ -33,7 +33,7 @@ import type {Project} from 'sentry/types/project'; import {defined} from 'sentry/utils'; import {useOrganization} from 'sentry/utils/useOrganization'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {Status} from './debugImage/status'; import {DebugImage} from './debugImage'; @@ -228,12 +228,9 @@ export function DebugMeta({data, projectSlug, groupId, event}: DebugMetaProps) { const showFilters = filterOptions.some(s => 'options' in s && s.options.length > 1); return ( - @@ -328,7 +325,7 @@ export function DebugMeta({data, projectSlug, groupId, event}: DebugMetaProps) { )} - + ); } diff --git a/static/app/components/events/interfaces/generic.tsx b/static/app/components/events/interfaces/generic.tsx index a95be95ee798..bccb0f2853ef 100644 --- a/static/app/components/events/interfaces/generic.tsx +++ b/static/app/components/events/interfaces/generic.tsx @@ -5,7 +5,7 @@ import {SegmentedControl} from '@sentry/scraps/segmentedControl'; import {KeyValueList} from 'sentry/components/events/interfaces/keyValueList'; import {AnnotatedText} from 'sentry/components/events/meta/annotatedText'; import {t} from 'sentry/locale'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; function getView({ data, @@ -49,8 +49,8 @@ type View = 'report' | 'raw'; export function Generic({type, data, meta}: Props) { const [view, setView] = useState('report'); return ( - {getView({view, data, meta})} - + ); } diff --git a/static/app/components/events/interfaces/message.tsx b/static/app/components/events/interfaces/message.tsx index 505df62a6245..fce148da8abd 100644 --- a/static/app/components/events/interfaces/message.tsx +++ b/static/app/components/events/interfaces/message.tsx @@ -8,7 +8,7 @@ import type {Event} from 'sentry/types/event'; import {EntryType} from 'sentry/types/event'; import {isEmptyObject} from 'sentry/utils/object/isEmptyObject'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; type Props = { data: { @@ -60,12 +60,12 @@ export function Message({data, event}: Props) { : null; return ( - + {renderParams(data.params, meta)} - + ); } diff --git a/static/app/components/events/interfaces/performance/anrRootCause.tsx b/static/app/components/events/interfaces/performance/anrRootCause.tsx index 94c11b0810d2..577708c1632e 100644 --- a/static/app/components/events/interfaces/performance/anrRootCause.tsx +++ b/static/app/components/events/interfaces/performance/anrRootCause.tsx @@ -24,7 +24,7 @@ import {trackAnalytics} from 'sentry/utils/analytics'; import {useLocation} from 'sentry/utils/useLocation'; import {useProjects} from 'sentry/utils/useProjects'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {useIssuesTraceTree} from 'sentry/views/performance/newTraceDetails/traceApi/useIssuesTraceTree'; import {useTrace} from 'sentry/views/performance/newTraceDetails/traceApi/useTrace'; import {useTraceStateAnalytics} from 'sentry/views/performance/newTraceDetails/useTraceStateAnalytics'; @@ -90,15 +90,6 @@ export function AnrRootCause({event, organization}: Props) { return Object.values(AnrRootCauseAllowlist).includes(issueType); }); - const helpText = - !potentialAnrRootCause || potentialAnrRootCause.length === 0 - ? t( - 'Suspect Root Cause identifies common patterns that may be contributing to this ANR' - ) - : t( - 'Suspect Root Cause identifies potential Performance Issues that may be contributing to this ANR.' - ); - function renderAnrCulprit() { if (!defined(anrCulprit)) { return; @@ -139,10 +130,9 @@ export function AnrRootCause({event, organization}: Props) { } return ( - {potentialAnrRootCause?.map(occurence => { const project = projects.find(p => p.id === occurence.project_id.toString()); @@ -179,7 +169,7 @@ export function AnrRootCause({event, organization}: Props) { ); })} {renderAnrCulprit()} - + ); } diff --git a/static/app/components/events/interfaces/performance/eventTraceView.tsx b/static/app/components/events/interfaces/performance/eventTraceView.tsx index e2ab731ce52c..2dc5d2d6e05b 100644 --- a/static/app/components/events/interfaces/performance/eventTraceView.tsx +++ b/static/app/components/events/interfaces/performance/eventTraceView.tsx @@ -20,7 +20,7 @@ import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig'; import {useRouteAnalyticsParams} from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams'; import {useLocation} from 'sentry/utils/useLocation'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {TraceIssueEvent} from 'sentry/views/issueDetails/traceTimeline/traceIssue'; import {useTraceTimelineEvents} from 'sentry/views/issueDetails/traceTimeline/useTraceTimelineEvents'; import {IssuesTraceWaterfall} from 'sentry/views/performance/newTraceDetails/issuesTraceWaterfall'; @@ -180,8 +180,8 @@ export function EventTraceView({group, event, organization}: EventTraceViewProps const hasTracePreviewFeature = organization.features.includes('profiling'); return ( - @@ -211,6 +211,6 @@ export function EventTraceView({group, event, organization}: EventTraceViewProps )} - + ); } diff --git a/static/app/components/events/interfaces/performance/spanEvidence.tsx b/static/app/components/events/interfaces/performance/spanEvidence.tsx index 06d4a41526b1..840c932f78af 100644 --- a/static/app/components/events/interfaces/performance/spanEvidence.tsx +++ b/static/app/components/events/interfaces/performance/spanEvidence.tsx @@ -13,7 +13,7 @@ import { import type {Organization} from 'sentry/types/organization'; import {sanitizeQuerySelector} from 'sentry/utils/sanitizeQuerySelector'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {SpanEvidenceKeyValueList} from './spanEvidenceKeyValueList'; @@ -23,7 +23,7 @@ interface Props { projectSlug: string; } -function SpanEvidenceInterimSection({ +function SpanEvidenceFoldSection({ children, event, organization, @@ -39,12 +39,9 @@ function SpanEvidenceInterimSection({ const sanitizedHash = hashTitle && sanitizeQuerySelector(hashTitle); return ( - {children} - + ); } @@ -81,7 +78,7 @@ export function SpanEvidenceSection({event, organization, projectSlug}: Props) { const traceId = event.contexts.trace?.trace_id; return ( - )} - + ); } diff --git a/static/app/components/events/interfaces/template.tsx b/static/app/components/events/interfaces/template.tsx index beb508aff640..82b1427caeb3 100644 --- a/static/app/components/events/interfaces/template.tsx +++ b/static/app/components/events/interfaces/template.tsx @@ -2,7 +2,7 @@ import {t} from 'sentry/locale'; import type {Event, Frame} from 'sentry/types/event'; import {EntryType} from 'sentry/types/event'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import DeprecatedLine from './frame/deprecatedLine'; @@ -15,7 +15,7 @@ export function Template({data, event}: Props) { const entryIndex = event.entries.findIndex(entry => entry.type === EntryType.TEMPLATE); const meta = event._meta?.entries?.[entryIndex]?.data?.values; return ( - +
- + ); } diff --git a/static/app/components/events/interfaces/threads.tsx b/static/app/components/events/interfaces/threads.tsx index 3fef288206a9..8a50b30e458d 100644 --- a/static/app/components/events/interfaces/threads.tsx +++ b/static/app/components/events/interfaces/threads.tsx @@ -37,8 +37,8 @@ import type {PlatformKey, Project} from 'sentry/types/project'; import {StackType, StackView} from 'sentry/types/stacktrace'; import {defined} from 'sentry/utils'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {setActiveThreadId} from 'sentry/views/issueDetails/streamline/hooks/useCopyIssueDetails'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; import {ExceptionContent} from './crashContent/exception'; import {StackTraceContent} from './crashContent/stackTrace'; @@ -402,15 +402,15 @@ export function Threads({data, event, projectSlug, groupingCurrentLevel, group}: // If there is only one thread, we expect the stacktrace to wrap itself in a section return hasMoreThanOneThread ? ( - {threadComponent} - + ) : ( threadComponent ); diff --git a/static/app/components/events/interfaces/uptime/uptimeAssertionsSection.tsx b/static/app/components/events/interfaces/uptime/uptimeAssertionsSection.tsx index 72d79149d1e0..ad0cd019cb45 100644 --- a/static/app/components/events/interfaces/uptime/uptimeAssertionsSection.tsx +++ b/static/app/components/events/interfaces/uptime/uptimeAssertionsSection.tsx @@ -3,7 +3,7 @@ import {t} from 'sentry/locale'; import type {Event} from 'sentry/types/event'; import {AssertionFailureTree} from 'sentry/views/alerts/rules/uptime/assertions/assertionFailure/assertionFailureTree'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; export function UptimeAssertionsSection({event}: {event: Event}) { const evidenceData = event.occurrence?.evidenceData; @@ -13,8 +13,8 @@ export function UptimeAssertionsSection({event}: {event: Event}) { } return ( - @@ -31,6 +31,6 @@ export function UptimeAssertionsSection({event}: {event: Event}) { }, ]} /> - + ); } diff --git a/static/app/components/events/metrics/metricsSection.tsx b/static/app/components/events/metrics/metricsSection.tsx index 75a7fb884a51..47408d35ba56 100644 --- a/static/app/components/events/metrics/metricsSection.tsx +++ b/static/app/components/events/metrics/metricsSection.tsx @@ -21,7 +21,7 @@ import {METRICS_DRAWER_QUERY_PARAM} from 'sentry/views/explore/metrics/constants import {MetricsSamplesTable} from 'sentry/views/explore/metrics/metricInfoTabs/metricsSamplesTable'; import {canUseMetricsUI} from 'sentry/views/explore/metrics/metricsFlags'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {TraceViewMetricsProviderWrapper} from 'sentry/views/performance/newTraceDetails/traceMetrics'; import {NUMBER_ABBREVIATED_METRICS} from './useMetricsIssueSection'; @@ -145,12 +145,7 @@ function MetricsSectionContent({ } return ( - + {result.data && result.data.length > NUMBER_ABBREVIATED_METRICS ? ( @@ -167,6 +162,6 @@ function MetricsSectionContent({
) : null} - + ); } diff --git a/static/app/components/events/ourlogs/ourlogsSection.tsx b/static/app/components/events/ourlogs/ourlogsSection.tsx index ee2ed42bb6c1..10b5fa33cf0a 100644 --- a/static/app/components/events/ourlogs/ourlogsSection.tsx +++ b/static/app/components/events/ourlogs/ourlogsSection.tsx @@ -29,7 +29,7 @@ import {LogsQueryParamsProvider} from 'sentry/views/explore/logs/logsQueryParams import {LogRowContent} from 'sentry/views/explore/logs/tables/logsTableRow'; import {useQueryParamsSearch} from 'sentry/views/explore/queryParams/context'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; export function OurlogsSection({ event, @@ -185,12 +185,7 @@ function OurlogsSectionContent({ return null; } return ( - + @@ -222,7 +217,7 @@ function OurlogsSectionContent({ ) : null} - + ); } diff --git a/static/app/components/events/packageData.tsx b/static/app/components/events/packageData.tsx index 50f45aabe6e7..3453744fd5b5 100644 --- a/static/app/components/events/packageData.tsx +++ b/static/app/components/events/packageData.tsx @@ -7,7 +7,7 @@ import {t} from 'sentry/locale'; import type {Event} from 'sentry/types/event'; import {isEmptyObject} from 'sentry/utils/object/isEmptyObject'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; type Props = { event: Event; @@ -59,14 +59,14 @@ export function EventPackageData({event}: Props) { } return ( - {columns} - + ); } diff --git a/static/app/components/events/profileEventEvidence.tsx b/static/app/components/events/profileEventEvidence.tsx index 6acbfbb5bc1d..be0ede36f788 100644 --- a/static/app/components/events/profileEventEvidence.tsx +++ b/static/app/components/events/profileEventEvidence.tsx @@ -9,7 +9,7 @@ import {generateProfileFlamechartRouteWithHighlightFrame} from 'sentry/utils/pro import {useLocation} from 'sentry/utils/useLocation'; import {useOrganization} from 'sentry/utils/useOrganization'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; type ProfileEvidenceProps = {event: Event; projectSlug: string}; @@ -79,8 +79,8 @@ export function ProfileEventEvidence({event, projectSlug}: ProfileEvidenceProps) ]; return ( - + - + ); } diff --git a/static/app/components/events/rrwebIntegration.tsx b/static/app/components/events/rrwebIntegration.tsx index a0549fd5756d..33144c637ae3 100644 --- a/static/app/components/events/rrwebIntegration.tsx +++ b/static/app/components/events/rrwebIntegration.tsx @@ -1,5 +1,4 @@ import {lazy} from 'react'; -import styled from '@emotion/styled'; import {LazyLoad} from 'sentry/components/lazyLoad'; import {LoadingError} from 'sentry/components/loadingError'; @@ -12,7 +11,7 @@ import {getApiUrl} from 'sentry/utils/api/getApiUrl'; import {useApiQuery} from 'sentry/utils/queryClient'; import {useOrganization} from 'sentry/utils/useOrganization'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; type Props = { event: Event; @@ -78,8 +77,8 @@ function EventRRWebIntegrationContent({ `/api/0/projects/${orgId}/${projectSlug}/events/${event.id}/attachments/${attachment.id}/?download`; return ( - @@ -87,7 +86,7 @@ function EventRRWebIntegrationContent({ LazyComponent={LazyReplayer} urls={attachmentList.map(createAttachmentUrl)} /> - + ); } @@ -104,8 +103,3 @@ export function EventRRWebIntegration(props: Props) { return ; } - -const StyledReplayEventDataSection = styled(InterimSection)` - overflow: hidden; - margin-bottom: ${p => p.theme.space['2xl']}; -`; diff --git a/static/app/components/events/traceEventDataSection.tsx b/static/app/components/events/traceEventDataSection.tsx index d0545d75cdd2..76af22d8d9b4 100644 --- a/static/app/components/events/traceEventDataSection.tsx +++ b/static/app/components/events/traceEventDataSection.tsx @@ -19,7 +19,7 @@ import {trackAnalytics} from 'sentry/utils/analytics'; import {isMobilePlatform, isNativePlatform} from 'sentry/utils/platform'; import {useApi} from 'sentry/utils/useApi'; import {useOrganization} from 'sentry/utils/useOrganization'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; const sortByOptions = { 'recent-first': t('Newest'), @@ -425,106 +425,111 @@ export function TraceEventDataSection({ : undefined : t('Not available on stack trace with single frame'); - const SectionComponent = isNestedSection ? InlineThreadSection : InterimSection; - const optionsToShow = getDisplayOptions(); const displayValues = displayOptions.filter(value => optionsToShow.some(opt => opt.value === value && !opt.disabled) ); + const actions = !stackTraceNotFound && ( + + {!displayOptions.includes('raw-stack-trace') && ( + + + {t('Most Relevant')} + + + {t('Full Stack Trace')} + + + )} + {displayOptions.includes('raw-stack-trace') && nativePlatform && ( + { + trackAnalytics('stack-trace.download_clicked', { + organization, + project_slug: projectSlug, + platform, + is_mobile: isMobile, + }); + }} + > + {t('Download')} + + )} + ( + } + size="xs" + tooltipProps={{title: sortByTooltip}} + /> + )} + disabled={!!sortByTooltip} + position="bottom-end" + onChange={selectedOption => { + handleSortByChange(selectedOption.value); + }} + value={isNewestFramesFirst ? 'recent-first' : 'recent-last'} + options={Object.entries(sortByOptions).map(([value, label]) => ({ + label, + value: value as keyof typeof sortByOptions, + }))} + /> + ( + } + aria-label={t('Display as')} + > + {t('Display as')} + + )} + multiple + position="bottom-end" + value={displayValues} + onChange={opts => handleDisplayChange(opts.map(opt => opt.value))} + options={[{label: t('Display'), options: optionsToShow}]} + /> + + + + ); + + if (isNestedSection) { + return ( + + {children} + + ); + } + return ( - - {!displayOptions.includes('raw-stack-trace') && ( - - - {t('Most Relevant')} - - - {t('Full Stack Trace')} - - - )} - {displayOptions.includes('raw-stack-trace') && nativePlatform && ( - { - trackAnalytics('stack-trace.download_clicked', { - organization, - project_slug: projectSlug, - platform, - is_mobile: isMobile, - }); - }} - > - {t('Download')} - - )} - ( - } - size="xs" - tooltipProps={{title: sortByTooltip}} - /> - )} - disabled={!!sortByTooltip} - position="bottom-end" - onChange={selectedOption => { - handleSortByChange(selectedOption.value); - }} - value={isNewestFramesFirst ? 'recent-first' : 'recent-last'} - options={Object.entries(sortByOptions).map(([value, label]) => ({ - label, - value: value as keyof typeof sortByOptions, - }))} - /> - ( - } - aria-label={t('Display as')} - > - {t('Display as')} - - )} - multiple - position="bottom-end" - value={displayValues} - onChange={opts => handleDisplayChange(opts.map(opt => opt.value))} - options={[{label: t('Display'), options: optionsToShow}]} - /> - - - - ) - } + actions={actions} > {children} - + ); } diff --git a/static/app/components/stackTrace/issueStackTrace/index.tsx b/static/app/components/stackTrace/issueStackTrace/index.tsx index b526a37650bc..ae28dece7063 100644 --- a/static/app/components/stackTrace/issueStackTrace/index.tsx +++ b/static/app/components/stackTrace/issueStackTrace/index.tsx @@ -39,7 +39,7 @@ import {useDetailedProject} from 'sentry/utils/project/useDetailedProject'; import {useLocalStorageState} from 'sentry/utils/useLocalStorageState'; import {useOrganization} from 'sentry/utils/useOrganization'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {IssueFrameActions} from './issueFrameActions'; import {IssueStackTraceFrameContext} from './issueStackTraceFrameContext'; @@ -217,7 +217,7 @@ function IssueStackTraceContent({ if (view === 'raw') { return ( - + @@ -235,7 +235,7 @@ function IssueStackTraceContent({ projectSlug={projectSlug} /> - + ); } @@ -247,7 +247,7 @@ function IssueStackTraceContent({ const excMeta = exceptionValuesMeta?.[exc.exceptionIndex]; return ( - + {hasExceptionInfo && ( @@ -285,12 +285,12 @@ function IssueStackTraceContent({ projectSlug={projectSlug} /> - + ); } return ( - + {tn( @@ -376,7 +376,7 @@ function IssueStackTraceContent({ projectSlug={projectSlug} /> - + ); } diff --git a/static/app/components/stackTrace/issueStackTrace/sharedIssueStackTrace.tsx b/static/app/components/stackTrace/issueStackTrace/sharedIssueStackTrace.tsx index bf4aaf6c6fad..3be882d07e88 100644 --- a/static/app/components/stackTrace/issueStackTrace/sharedIssueStackTrace.tsx +++ b/static/app/components/stackTrace/issueStackTrace/sharedIssueStackTrace.tsx @@ -31,7 +31,7 @@ import {EntryType} from 'sentry/types/event'; import type {StacktraceType} from 'sentry/types/stacktrace'; import {defined} from 'sentry/utils'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import { formatExceptionsAsText, @@ -172,7 +172,7 @@ function SharedIssueStackTraceContent({ if (view === 'raw') { return ( - + {formatExceptionsAsText({ @@ -183,7 +183,7 @@ function SharedIssueStackTraceContent({ })} - + ); } @@ -194,7 +194,7 @@ function SharedIssueStackTraceContent({ const excMeta = exceptionValuesMeta?.[exc.exceptionIndex]; return ( - + {hasExceptionInfo && ( @@ -218,12 +218,12 @@ function SharedIssueStackTraceContent({ - + ); } return ( - + {tn( @@ -295,6 +295,6 @@ function SharedIssueStackTraceContent({ ); })} - + ); } diff --git a/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx b/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx index 482c8741af5c..4a768bd959a6 100644 --- a/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx +++ b/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx @@ -78,9 +78,9 @@ import { import {ProfilePreviewSection} from 'sentry/views/issueDetails/profilePreviewSection'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; import {EventDetails} from 'sentry/views/issueDetails/streamline/eventDetails'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {useCopyIssueDetails} from 'sentry/views/issueDetails/streamline/hooks/useCopyIssueDetails'; import {InstrumentationFixSection} from 'sentry/views/issueDetails/streamline/instrumentationFixSection'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; import {MetricDetectorTriggeredSection} from 'sentry/views/issueDetails/streamline/sidebar/metricDetectorTriggeredSection'; import {SizeAnalysisTriggeredSection} from 'sentry/views/issueDetails/streamline/sidebar/sizeAnalysisTriggeredSection'; import {useIsSampleEvent} from 'sentry/views/issueDetails/utils'; @@ -145,14 +145,14 @@ export function EventDetailsContent({ )} {event.userReport && ( - + - + )} {(event.contexts?.metric_alert?.alert_rule_id || event?.occurrence?.evidenceData?.alertId) && ( @@ -293,8 +293,8 @@ export function EventDetailsContent({ - {t('Largest Changes in Call Stack Frequency')} @@ -304,7 +304,7 @@ export function EventDetailsContent({ contributed to the cause for the duration regression.`)}

- + )} diff --git a/static/app/views/issueDetails/metricIssues/metricIssuesSection.tsx b/static/app/views/issueDetails/metricIssues/metricIssuesSection.tsx index e6cc0714d224..a73b25dd8d34 100644 --- a/static/app/views/issueDetails/metricIssues/metricIssuesSection.tsx +++ b/static/app/views/issueDetails/metricIssues/metricIssuesSection.tsx @@ -17,7 +17,7 @@ import { useMetricTimePeriod, } from 'sentry/views/issueDetails/metricIssues/utils'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; interface MetricIssuesSectionProps { group: Group; @@ -78,10 +78,9 @@ export function MetricIssuesSection({ ); return ( - - + ); } if ([Dataset.TRANSACTIONS, Dataset.GENERIC_METRICS].includes(dataset)) { return ( - - + ); } diff --git a/static/app/views/issueDetails/metricKitHangProfileSection.tsx b/static/app/views/issueDetails/metricKitHangProfileSection.tsx index af2941e95aa6..adba83f913fd 100644 --- a/static/app/views/issueDetails/metricKitHangProfileSection.tsx +++ b/static/app/views/issueDetails/metricKitHangProfileSection.tsx @@ -10,7 +10,7 @@ import {t} from 'sentry/locale'; import type {Event, Frame} from 'sentry/types/event'; import {EntryType} from 'sentry/types/event'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; export interface HangProfileData { exceptionValue: string; @@ -61,8 +61,8 @@ export function getHangProfileData(event: Event): HangProfileData | null { export function MetricKitHangProfileSection({data}: {data: HangProfileData}) { return ( - {t('Hang Profile')} @@ -77,7 +77,7 @@ export function MetricKitHangProfileSection({data}: {data: HangProfileData}) { > {data.exceptionValue && {data.exceptionValue}} - + ); } diff --git a/static/app/views/issueDetails/profilePreviewSection.tsx b/static/app/views/issueDetails/profilePreviewSection.tsx index 37f4ea2fcabf..419f2259daf1 100644 --- a/static/app/views/issueDetails/profilePreviewSection.tsx +++ b/static/app/views/issueDetails/profilePreviewSection.tsx @@ -29,7 +29,7 @@ import { useProfiles, } from 'sentry/views/explore/profiling/profilesProvider'; import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; export function ProfilePreviewSection({ event, @@ -82,8 +82,8 @@ export function ProfilePreviewSection({ > {profiles => ( - {sectionTitle} @@ -117,7 +117,7 @@ export function ProfilePreviewSection({ /> - + )} diff --git a/static/app/views/issueDetails/streamline/context.tsx b/static/app/views/issueDetails/streamline/context.tsx index 371a2f083351..143b07452938 100644 --- a/static/app/views/issueDetails/streamline/context.tsx +++ b/static/app/views/issueDetails/streamline/context.tsx @@ -105,13 +105,15 @@ export const enum SectionKey { STACKTRACE_FLAMEGRAPH = 'stacktrace-flamegraph', } +export type FoldSectionKey = SectionKey | string; + /** * This can be extended to create shared state for each section. * For example, if we needed to know the number of context cards we're rendering, * the can update the config for other components to read from. */ export interface SectionConfig { - key: SectionKey; + key: FoldSectionKey; initialCollapse?: boolean; } @@ -156,11 +158,11 @@ interface IssueDetailsState { /** * Controls the state of each section. */ - sectionData: Partial>; + sectionData: Partial>; } type UpdateEventSectionAction = { - key: SectionKey; + key: FoldSectionKey; type: 'UPDATE_EVENT_SECTION'; config?: Partial; }; @@ -177,7 +179,7 @@ type UpdateDetectorDetailsAction = { }; type RemoveEventSectionAction = { - key: SectionKey; + key: FoldSectionKey; type: 'REMOVE_EVENT_SECTION'; }; @@ -191,7 +193,7 @@ type IssueDetailsActions = function updateEventSection( state: IssueDetailsState, - sectionKey: SectionKey, + sectionKey: FoldSectionKey, updatedConfig: Partial ): IssueDetailsState { const existingConfig = state.sectionData[sectionKey] ?? {key: sectionKey}; diff --git a/static/app/views/issueDetails/streamline/foldSection.tsx b/static/app/views/issueDetails/streamline/foldSection.tsx index d81f1416bb8a..4b1258333329 100644 --- a/static/app/views/issueDetails/streamline/foldSection.tsx +++ b/static/app/views/issueDetails/streamline/foldSection.tsx @@ -18,10 +18,10 @@ import {t} from 'sentry/locale'; import {trackAnalytics} from 'sentry/utils/analytics'; import {useOrganization} from 'sentry/utils/useOrganization'; import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState'; -import type {SectionKey} from 'sentry/views/issueDetails/streamline/context'; +import type {FoldSectionKey} from 'sentry/views/issueDetails/streamline/context'; import {useIssueDetails} from 'sentry/views/issueDetails/streamline/context'; -export function getFoldSectionKey(key: SectionKey) { +export function getFoldSectionKey(key: FoldSectionKey) { // Original key had a typo, this will migrate existing keys to the correct key const localStorageValue = localStorage.getItem( `'issue-details-fold-section-collapse:${key}` @@ -35,7 +35,7 @@ export function getFoldSectionKey(key: SectionKey) { export interface FoldSectionProps { children: React.ReactNode; - sectionKey: SectionKey; + sectionKey: FoldSectionKey; /** * Title of the section, always visible */ @@ -64,7 +64,7 @@ export interface FoldSectionProps { } function useOptionalLocalStorageState( - key: SectionKey, + key: FoldSectionKey, initialState: boolean, disablePersistence: boolean ): [boolean, (value: boolean) => void] { @@ -80,7 +80,7 @@ function useOptionalLocalStorageState( } function useScrollToSection( - sectionKey: SectionKey, + sectionKey: FoldSectionKey, expanded: boolean, setIsCollapsed: (value: boolean) => void ): React.RefCallback { diff --git a/static/app/views/issueDetails/streamline/interimSection.tsx b/static/app/views/issueDetails/streamline/interimSection.tsx deleted file mode 100644 index b2d111cd7a32..000000000000 --- a/static/app/views/issueDetails/streamline/interimSection.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import {type EventDataSectionProps} from 'sentry/components/events/eventDataSection'; -import type {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import { - FoldSection, - type FoldSectionProps, -} from 'sentry/views/issueDetails/streamline/foldSection'; - -/** - * This section is meant to provide a shared component while the streamline UI - * for issue details is being developed. Once GA'd, all occurances should be replaced - * with just - */ -export function InterimSection({ - ref, - children, - title, - type, - actions = null, - initialCollapse, - preventCollapse, - disableCollapsePersistence, -}: EventDataSectionProps & - Pick< - FoldSectionProps, - 'initialCollapse' | 'preventCollapse' | 'disableCollapsePersistence' - >) { - return ( - - {children} - - ); -} diff --git a/static/app/views/issueDetails/streamline/issueDetailsJumpTo.tsx b/static/app/views/issueDetails/streamline/issueDetailsJumpTo.tsx index 64835a974699..b631ca8a6968 100644 --- a/static/app/views/issueDetails/streamline/issueDetailsJumpTo.tsx +++ b/static/app/views/issueDetails/streamline/issueDetailsJumpTo.tsx @@ -31,6 +31,19 @@ const sectionLabels: Partial> = { [SectionKey.FEATURE_FLAGS]: t('Flags'), }; +type JumpToSectionConfig = SectionConfig & {key: SectionKey}; + +function isJumpToSectionConfig( + config: SectionConfig | undefined, + excludedSectionKeys: SectionKey[] +): config is JumpToSectionConfig { + return Boolean( + config && + Object.hasOwn(sectionLabels, config.key) && + !excludedSectionKeys.includes(config.key as SectionKey) + ); +} + export function IssueDetailsJumpTo() { const {sectionData} = useIssueDetails(); const organization = useOrganization(); @@ -51,8 +64,8 @@ export function IssueDetailsJumpTo() { }, [organization.features]); const eventSectionConfigs = useMemo(() => { - const configs = Object.values(sectionData ?? {}).filter( - config => sectionLabels[config.key] && !excludedSectionKeys.includes(config.key) + const configs = Object.values(sectionData ?? {}).filter(config => + isJumpToSectionConfig(config, excludedSectionKeys) ); // Build a position map by querying the DOM once @@ -95,7 +108,7 @@ export function IssueDetailsJumpTo() { ); } -function JumpToLink({config}: {config: SectionConfig}) { +function JumpToLink({config}: {config: JumpToSectionConfig}) { const theme = useTheme(); const [_isCollapsed, setIsCollapsed] = useSyncedLocalStorageState( getFoldSectionKey(config.key), diff --git a/static/app/views/issueDetails/streamline/sidebar/attributeComparisonSection.tsx b/static/app/views/issueDetails/streamline/sidebar/attributeComparisonSection.tsx index 86d77a42d845..a06ff80097d9 100644 --- a/static/app/views/issueDetails/streamline/sidebar/attributeComparisonSection.tsx +++ b/static/app/views/issueDetails/streamline/sidebar/attributeComparisonSection.tsx @@ -19,7 +19,7 @@ import {useFilteredRankedAttributes} from 'sentry/views/explore/hooks/useFiltere import {Mode} from 'sentry/views/explore/queryParams/mode'; import {getExploreUrl} from 'sentry/views/explore/utils'; import {ChartType} from 'sentry/views/insights/common/components/chart'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; const BASELINE_DAYS = 7; const CHARTS_PER_PAGE = 9; // 3 rows × 3 columns max @@ -122,9 +122,9 @@ export function AttributeComparisonSection({ ]); return ( - {t('View All')} @@ -183,7 +183,7 @@ export function AttributeComparisonSection({ )} - + ); } diff --git a/static/app/views/issueDetails/streamline/sidebar/metricDetectorTriggeredSection.tsx b/static/app/views/issueDetails/streamline/sidebar/metricDetectorTriggeredSection.tsx index 76881cd9d22a..21276bf7fc6a 100644 --- a/static/app/views/issueDetails/streamline/sidebar/metricDetectorTriggeredSection.tsx +++ b/static/app/views/issueDetails/streamline/sidebar/metricDetectorTriggeredSection.tsx @@ -48,7 +48,7 @@ import {DetectorDataset} from 'sentry/views/detectors/datasetConfig/types'; import {useEventOpenPeriod} from 'sentry/views/detectors/hooks/useOpenPeriods'; import {getMetricDetectorSuffix} from 'sentry/views/detectors/utils/metricDetectorSuffix'; import {makeDiscoverPathname} from 'sentry/views/discover/pathnames'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {AttributeComparisonSection} from './attributeComparisonSection'; import {OpenPeriodTimelineSection} from './openPeriodTimelineSection'; @@ -282,9 +282,9 @@ function ContributingIssues({ }; return ( - )} - + ); } @@ -404,9 +404,9 @@ function TriggeredConditionDetails({ openPeriodEnd={endDate} /> )} - - + {detectorDataset === DetectorDataset.SPANS && openPeriod && ( + - + ) : ( {message && ( - + - + )} + {children} - + ); } diff --git a/static/app/views/issueDetails/streamline/sidebar/sizeAnalysisTriggeredSection.tsx b/static/app/views/issueDetails/streamline/sidebar/sizeAnalysisTriggeredSection.tsx index cf68dcef8719..808ead7f0aeb 100644 --- a/static/app/views/issueDetails/streamline/sidebar/sizeAnalysisTriggeredSection.tsx +++ b/static/app/views/issueDetails/streamline/sidebar/sizeAnalysisTriggeredSection.tsx @@ -8,7 +8,7 @@ import type {Group} from 'sentry/types/group'; import type {MetricCondition} from 'sentry/types/workflowEngine/detectors'; import {defined} from 'sentry/utils'; import {useOrganization} from 'sentry/utils/useOrganization'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {getCompareBuildPath} from 'sentry/views/preprod/utils/buildLinkUtils'; import { bytesToMB, @@ -120,9 +120,9 @@ export function SizeAnalysisTriggeredSection({event}: SizeAnalysisTriggeredSecti : null; return ( - @@ -182,6 +182,6 @@ export function SizeAnalysisTriggeredSection({event}: SizeAnalysisTriggeredSecti }, ]} /> - + ); } diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/profiling/profilePreview.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/profiling/profilePreview.tsx index 1c9ccd31f2fb..cb7ebf27c7b0 100644 --- a/static/app/views/performance/newTraceDetails/traceDrawer/details/profiling/profilePreview.tsx +++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/profiling/profilePreview.tsx @@ -30,7 +30,7 @@ import {useOrganization} from 'sentry/utils/useOrganization'; import {useProfileGroup} from 'sentry/views/explore/profiling/profileGroupProvider'; import {useProfiles} from 'sentry/views/explore/profiling/profilesProvider'; import {SectionDivider} from 'sentry/views/issueDetails/streamline/foldSection'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import type {NoInstrumentationNode} from 'sentry/views/performance/newTraceDetails/traceModels/traceTreeNode/noInstrumentationNode'; interface SpanProfileProps { @@ -169,9 +169,9 @@ export function ProfilePreview({ {message} - @@ -195,7 +195,7 @@ export function ProfilePreview({ )} - + ); } diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/span/components/profileDetails.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/span/components/profileDetails.tsx index 8d02a4f950a3..954be20b9b48 100644 --- a/static/app/views/performance/newTraceDetails/traceDrawer/details/span/components/profileDetails.tsx +++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/span/components/profileDetails.tsx @@ -10,7 +10,7 @@ import type {EventTransaction} from 'sentry/types/event'; import type {Organization} from 'sentry/types/organization'; import type {Project} from 'sentry/types/project'; import {defined} from 'sentry/utils'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; export function ProfileDetails({ organization, @@ -30,15 +30,15 @@ export function ProfileDetails({ } return ( - - + ); } diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/span/index.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/span/index.tsx index e5fe989f66b2..d49092a39e0c 100644 --- a/static/app/views/performance/newTraceDetails/traceDrawer/details/span/index.tsx +++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/span/index.tsx @@ -37,7 +37,7 @@ import {useSpansDataset} from 'sentry/views/explore/spans/spansQueryParams'; import {TraceItemDataset} from 'sentry/views/explore/types'; import {useSpansQueryWithoutPageFilters} from 'sentry/views/insights/common/queries/useSpansQuery'; import {getIsAiGenerationNode} from 'sentry/views/insights/pages/agents/utils/aiTraceNodes'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {traceAnalytics} from 'sentry/views/performance/newTraceDetails/traceAnalytics'; import {useTransaction} from 'sentry/views/performance/newTraceDetails/traceApi/useTransaction'; import {IssueList} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/issues/issues'; @@ -98,9 +98,9 @@ function SpanSections({ onParentClick={onParentClick} /> {hasSpanSpecificData ? ( - @@ -111,7 +111,7 @@ function SpanSections({ ) : null} - + ) : null} ); diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/span/sections/generalInfo.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/span/sections/generalInfo.tsx index e56137c1dda3..3bf6be588649 100644 --- a/static/app/views/performance/newTraceDetails/traceDrawer/details/span/sections/generalInfo.tsx +++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/span/sections/generalInfo.tsx @@ -15,7 +15,7 @@ import {FullSpanDescription} from 'sentry/views/insights/common/components/fullS import {WiderHovercard} from 'sentry/views/insights/common/components/tableCells/spanDescriptionCell'; import {resolveSpanModule} from 'sentry/views/insights/common/utils/resolveSpanModule'; import {ModuleName, SpanFields} from 'sentry/views/insights/types'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import { TraceDrawerComponents, type SectionCardKeyValueList, @@ -226,17 +226,13 @@ export function GeneralInfo(props: GeneralnfoProps) { items = [...items, ...ancestryAndGroupingItems]; return ( - + {items.map(item => ( ))} - + ); } diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/index.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/index.tsx index 839f40ff23b5..26d07c16b8a6 100644 --- a/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/index.tsx +++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/index.tsx @@ -19,7 +19,7 @@ import {useLocation} from 'sentry/utils/useLocation'; import {useProjects} from 'sentry/utils/useProjects'; import {useSpans} from 'sentry/views/insights/common/queries/useDiscover'; import type {SpanQueryFilters, SpanResponse} from 'sentry/views/insights/types'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; import {Referrer} from 'sentry/views/performance/newTraceDetails/referrers'; import {traceAnalytics} from 'sentry/views/performance/newTraceDetails/traceAnalytics'; import {useTransaction} from 'sentry/views/performance/newTraceDetails/traceApi/useTransaction'; @@ -251,9 +251,9 @@ function TransactionSpecificSections(props: TransactionSpecificSectionsProps) { location={location} cacheMetrics={cacheMetrics} /> - @@ -269,7 +269,7 @@ function TransactionSpecificSections(props: TransactionSpecificSectionsProps) { ) : null} - + ); } diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/breadCrumbs.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/breadCrumbs.tsx index 4507f2aefc5b..1a081c6c961f 100644 --- a/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/breadCrumbs.tsx +++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/breadCrumbs.tsx @@ -23,7 +23,7 @@ import {IconFilter, IconSearch, IconSort} from 'sentry/icons'; import {t} from 'sentry/locale'; import type {EventTransaction} from 'sentry/types/event'; import {useLocalStorageState} from 'sentry/utils/useLocalStorageState'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; const MAX_BREADCRUMBS_HEIGHT = 400; @@ -128,9 +128,9 @@ export function BreadCrumbs({event}: {event: EventTransaction}) { return ( - @@ -147,7 +147,7 @@ export function BreadCrumbs({event}: {event: EventTransaction}) { /> )} - + ); } diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/entries.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/entries.tsx index 93d0b5c5c62e..85ab60d064c8 100644 --- a/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/entries.tsx +++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/entries.tsx @@ -16,7 +16,7 @@ import { type EventTransaction, } from 'sentry/types/event'; import type {Project} from 'sentry/types/project'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; type EventEntryContentProps = { entry: Entry; @@ -112,9 +112,9 @@ export function Entries({ ( - +

{t('There was an error rendering this data.')}

- + )} > + {items.map(item => ( ))} - + ); } diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/replayPreview.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/replayPreview.tsx index 1b414a820fa1..ffab36066fbc 100644 --- a/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/replayPreview.tsx +++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/replayPreview.tsx @@ -9,7 +9,7 @@ import type {EventTransaction} from 'sentry/types/event'; import type {Organization} from 'sentry/types/organization'; import {getAnalyticsDataForEvent} from 'sentry/utils/events'; import {getReplayIdFromEvent} from 'sentry/utils/replays/getReplayIdFromEvent'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; +import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection'; const REPLAY_CLIP_OFFSETS = { durationAfterMs: 5_000, @@ -68,13 +68,13 @@ export function ReplayPreview({ return ( - - + ); } From ec56a626f188d10f085650e5964e143242e200a0 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Mon, 11 May 2026 20:21:25 -0700 Subject: [PATCH 2/7] ref(issues): Remove unused highlights docs link InterimSection was the last consumer of this exported link after the section cleanup. Drop it so knip stays quiet. Co-authored-by: Codex GPT-5 --- static/app/components/events/highlights/util.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/static/app/components/events/highlights/util.tsx b/static/app/components/events/highlights/util.tsx index 327186719a83..0b757e250237 100644 --- a/static/app/components/events/highlights/util.tsx +++ b/static/app/components/events/highlights/util.tsx @@ -25,8 +25,6 @@ interface ContextData extends ContextItem { } export const EMPTY_HIGHLIGHT_DEFAULT = '--'; -export const HIGHLIGHT_DOCS_LINK = - 'https://docs.sentry.io/product/issues/issue-details/#event-highlights'; /** * Helper function to use try HighlightContext saved values on multiple fields improve match rate. From 96836f179ba4c1a60acd07a14713af66f2a992b9 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Tue, 12 May 2026 09:40:31 -0700 Subject: [PATCH 3/7] fix(issues): Fix highlights loading state Highlights rendered the empty state while the detailed project request was still pending, then kept the loading spinner around after the request settled. That left issue details stuck with a loading indicator and knocked over the acceptance shards. Render loading only while the request is pending, and keep the now-local prop types unexported so knip stays quiet. Co-Authored-By: Codex --- .../components/events/eventDataSection.tsx | 2 +- .../highlights/highlightsDataSection.tsx | 32 +++++++++---------- .../issueDetails/streamline/foldSection.tsx | 2 +- 3 files changed, 17 insertions(+), 19 deletions(-) diff --git a/static/app/components/events/eventDataSection.tsx b/static/app/components/events/eventDataSection.tsx index 46a5e2eaf225..192e5b8a83e0 100644 --- a/static/app/components/events/eventDataSection.tsx +++ b/static/app/components/events/eventDataSection.tsx @@ -6,7 +6,7 @@ import {DataSection} from 'sentry/components/events/styles'; import {QuestionTooltip} from 'sentry/components/questionTooltip'; import {IconLink} from 'sentry/icons'; -export interface EventDataSectionProps { +interface EventDataSectionProps { children: React.ReactNode; /** * The title of the section diff --git a/static/app/components/events/highlights/highlightsDataSection.tsx b/static/app/components/events/highlights/highlightsDataSection.tsx index a4bacd87d4d4..c1afff5d5db6 100644 --- a/static/app/components/events/highlights/highlightsDataSection.tsx +++ b/static/app/components/events/highlights/highlightsDataSection.tsx @@ -224,26 +224,24 @@ function HighlightsData({ return ( {isPending ? ( - hasDisabledHighlights ? ( - - - {t("There's nothing here...")} - - {t('Add Highlights')} - - - - ) : ( - columns - ) - ) : ( + ) : hasDisabledHighlights ? ( + + + {t("There's nothing here...")} + + {t('Add Highlights')} + + + + ) : ( + columns )} ); diff --git a/static/app/views/issueDetails/streamline/foldSection.tsx b/static/app/views/issueDetails/streamline/foldSection.tsx index 4b1258333329..c94340676a2a 100644 --- a/static/app/views/issueDetails/streamline/foldSection.tsx +++ b/static/app/views/issueDetails/streamline/foldSection.tsx @@ -33,7 +33,7 @@ export function getFoldSectionKey(key: FoldSectionKey) { return `issue-details-fold-section-collapse:${key}`; } -export interface FoldSectionProps { +interface FoldSectionProps { children: React.ReactNode; sectionKey: FoldSectionKey; /** From 479103cc63c27b4b43193ea08e653a9c97d74260 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Tue, 12 May 2026 10:24:28 -0700 Subject: [PATCH 4/7] add jump to comment --- static/app/views/issueDetails/streamline/issueDetailsJumpTo.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/static/app/views/issueDetails/streamline/issueDetailsJumpTo.tsx b/static/app/views/issueDetails/streamline/issueDetailsJumpTo.tsx index b631ca8a6968..a1df2b128e49 100644 --- a/static/app/views/issueDetails/streamline/issueDetailsJumpTo.tsx +++ b/static/app/views/issueDetails/streamline/issueDetailsJumpTo.tsx @@ -33,6 +33,8 @@ const sectionLabels: Partial> = { type JumpToSectionConfig = SectionConfig & {key: SectionKey}; +// FoldSection is also used outside issue details with arbitrary string keys. +// Jump To only supports issue-detail sections that have known SectionKey labels. function isJumpToSectionConfig( config: SectionConfig | undefined, excludedSectionKeys: SectionKey[] From 98ff5fbe2ca1aa74f3b9d2b89096355759f1c0ac Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Tue, 12 May 2026 10:28:00 -0700 Subject: [PATCH 5/7] attempt to reduce changes --- .../events/traceEventDataSection.tsx | 201 ++++++++++-------- 1 file changed, 111 insertions(+), 90 deletions(-) diff --git a/static/app/components/events/traceEventDataSection.tsx b/static/app/components/events/traceEventDataSection.tsx index 76af22d8d9b4..b76c44fe43a2 100644 --- a/static/app/components/events/traceEventDataSection.tsx +++ b/static/app/components/events/traceEventDataSection.tsx @@ -425,108 +425,129 @@ export function TraceEventDataSection({ : undefined : t('Not available on stack trace with single frame'); + const SectionComponent = isNestedSection ? InlineThreadSection : FoldTraceSection; + const optionsToShow = getDisplayOptions(); const displayValues = displayOptions.filter(value => optionsToShow.some(opt => opt.value === value && !opt.disabled) ); - const actions = !stackTraceNotFound && ( - - {!displayOptions.includes('raw-stack-trace') && ( - - - {t('Most Relevant')} - - - {t('Full Stack Trace')} - - - )} - {displayOptions.includes('raw-stack-trace') && nativePlatform && ( - { - trackAnalytics('stack-trace.download_clicked', { - organization, - project_slug: projectSlug, - platform, - is_mobile: isMobile, - }); - }} - > - {t('Download')} - - )} - ( - } - size="xs" - tooltipProps={{title: sortByTooltip}} - /> - )} - disabled={!!sortByTooltip} - position="bottom-end" - onChange={selectedOption => { - handleSortByChange(selectedOption.value); - }} - value={isNewestFramesFirst ? 'recent-first' : 'recent-last'} - options={Object.entries(sortByOptions).map(([value, label]) => ({ - label, - value: value as keyof typeof sortByOptions, - }))} - /> - ( - } - aria-label={t('Display as')} - > - {t('Display as')} - - )} - multiple - position="bottom-end" - value={displayValues} - onChange={opts => handleDisplayChange(opts.map(opt => opt.value))} - options={[{label: t('Display'), options: optionsToShow}]} - /> - - - + return ( + + {!displayOptions.includes('raw-stack-trace') && ( + + + {t('Most Relevant')} + + + {t('Full Stack Trace')} + + + )} + {displayOptions.includes('raw-stack-trace') && nativePlatform && ( + { + trackAnalytics('stack-trace.download_clicked', { + organization, + project_slug: projectSlug, + platform, + is_mobile: isMobile, + }); + }} + > + {t('Download')} + + )} + ( + } + size="xs" + tooltipProps={{title: sortByTooltip}} + /> + )} + disabled={!!sortByTooltip} + position="bottom-end" + onChange={selectedOption => { + handleSortByChange(selectedOption.value); + }} + value={isNewestFramesFirst ? 'recent-first' : 'recent-last'} + options={Object.entries(sortByOptions).map(([value, label]) => ({ + label, + value: value as keyof typeof sortByOptions, + }))} + /> + ( + } + aria-label={t('Display as')} + > + {t('Display as')} + + )} + multiple + position="bottom-end" + value={displayValues} + onChange={opts => handleDisplayChange(opts.map(opt => opt.value))} + options={[{label: t('Display'), options: optionsToShow}]} + /> + + + + ) + } + > + {children} + ); +} - if (isNestedSection) { - return ( - - {children} - - ); - } - +function FoldTraceSection({ + children, + title, + actions, + type, + disableCollapsePersistence, +}: { + actions: React.ReactNode; + children: React.ReactNode; + title: React.ReactNode; + type: string; + disableCollapsePersistence?: boolean; + showPermalink?: boolean; +}) { return ( {children} From 459e45ce843a3fa39f06ff9a1987d48296ffecd5 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Tue, 12 May 2026 10:52:01 -0700 Subject: [PATCH 6/7] just render fold or not --- .../events/traceEventDataSection.tsx | 201 ++++++++---------- 1 file changed, 90 insertions(+), 111 deletions(-) diff --git a/static/app/components/events/traceEventDataSection.tsx b/static/app/components/events/traceEventDataSection.tsx index b76c44fe43a2..76af22d8d9b4 100644 --- a/static/app/components/events/traceEventDataSection.tsx +++ b/static/app/components/events/traceEventDataSection.tsx @@ -425,129 +425,108 @@ export function TraceEventDataSection({ : undefined : t('Not available on stack trace with single frame'); - const SectionComponent = isNestedSection ? InlineThreadSection : FoldTraceSection; - const optionsToShow = getDisplayOptions(); const displayValues = displayOptions.filter(value => optionsToShow.some(opt => opt.value === value && !opt.disabled) ); - return ( - - {!displayOptions.includes('raw-stack-trace') && ( - - - {t('Most Relevant')} - - - {t('Full Stack Trace')} - - - )} - {displayOptions.includes('raw-stack-trace') && nativePlatform && ( - { - trackAnalytics('stack-trace.download_clicked', { - organization, - project_slug: projectSlug, - platform, - is_mobile: isMobile, - }); - }} - > - {t('Download')} - - )} - ( - } - size="xs" - tooltipProps={{title: sortByTooltip}} - /> - )} - disabled={!!sortByTooltip} - position="bottom-end" - onChange={selectedOption => { - handleSortByChange(selectedOption.value); - }} - value={isNewestFramesFirst ? 'recent-first' : 'recent-last'} - options={Object.entries(sortByOptions).map(([value, label]) => ({ - label, - value: value as keyof typeof sortByOptions, - }))} - /> - ( - } - aria-label={t('Display as')} - > - {t('Display as')} - - )} - multiple - position="bottom-end" - value={displayValues} - onChange={opts => handleDisplayChange(opts.map(opt => opt.value))} - options={[{label: t('Display'), options: optionsToShow}]} - /> - - - - ) - } - > - {children} - + const actions = !stackTraceNotFound && ( + + {!displayOptions.includes('raw-stack-trace') && ( + + + {t('Most Relevant')} + + + {t('Full Stack Trace')} + + + )} + {displayOptions.includes('raw-stack-trace') && nativePlatform && ( + { + trackAnalytics('stack-trace.download_clicked', { + organization, + project_slug: projectSlug, + platform, + is_mobile: isMobile, + }); + }} + > + {t('Download')} + + )} + ( + } + size="xs" + tooltipProps={{title: sortByTooltip}} + /> + )} + disabled={!!sortByTooltip} + position="bottom-end" + onChange={selectedOption => { + handleSortByChange(selectedOption.value); + }} + value={isNewestFramesFirst ? 'recent-first' : 'recent-last'} + options={Object.entries(sortByOptions).map(([value, label]) => ({ + label, + value: value as keyof typeof sortByOptions, + }))} + /> + ( + } + aria-label={t('Display as')} + > + {t('Display as')} + + )} + multiple + position="bottom-end" + value={displayValues} + onChange={opts => handleDisplayChange(opts.map(opt => opt.value))} + options={[{label: t('Display'), options: optionsToShow}]} + /> + + + ); -} -function FoldTraceSection({ - children, - title, - actions, - type, - disableCollapsePersistence, -}: { - actions: React.ReactNode; - children: React.ReactNode; - title: React.ReactNode; - type: string; - disableCollapsePersistence?: boolean; - showPermalink?: boolean; -}) { + if (isNestedSection) { + return ( + + {children} + + ); + } + return ( {children} From a803e939d67b560cd8373bc44a3b2e1660cb3a80 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Tue, 12 May 2026 11:07:15 -0700 Subject: [PATCH 7/7] persist disableCollapsePersistence --- .../traceDrawer/details/span/sections/generalInfo.tsx | 6 +++++- .../details/transaction/sections/generalInfo.tsx | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/span/sections/generalInfo.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/span/sections/generalInfo.tsx index 3bf6be588649..0b9be9fea432 100644 --- a/static/app/views/performance/newTraceDetails/traceDrawer/details/span/sections/generalInfo.tsx +++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/span/sections/generalInfo.tsx @@ -226,7 +226,11 @@ export function GeneralInfo(props: GeneralnfoProps) { items = [...items, ...ancestryAndGroupingItems]; return ( - + {items.map(item => ( diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/generalInfo.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/generalInfo.tsx index 1ac1a056fd5c..ae983b5138b4 100644 --- a/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/generalInfo.tsx +++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/generalInfo.tsx @@ -97,7 +97,11 @@ export function GeneralInfo(props: GeneralInfoProps) { } return ( - + {items.map(item => (