From 518f59c824884459b18b815b5f40da70e095a5c0 Mon Sep 17 00:00:00 2001 From: Leander Rodrigues Date: Wed, 14 Aug 2024 14:12:02 -0400 Subject: [PATCH 1/8] =?UTF-8?q?=F0=9F=92=84=20v1=20sticky=20breadcrumbs=20?= =?UTF-8?q?header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../events/breadcrumbs/breadcrumbsDrawer.tsx | 29 +++++++++++++++---- .../issueDetails/streamline/foldSection.tsx | 1 - 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx b/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx index 3d71b22c605125..ee740d714d4334 100644 --- a/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx +++ b/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx @@ -1,4 +1,4 @@ -import {Fragment, useCallback, useMemo, useState} from 'react'; +import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {useTheme} from '@emotion/react'; import styled from '@emotion/styled'; @@ -72,6 +72,11 @@ export function BreadcrumbsDrawer({ }: BreadcrumbsDrawerProps) { const organization = useOrganization(); const theme = useTheme(); + const headerRef = useRef(null); + const [headerOffset, setHeaderOffset] = useState(0); + useEffect(() => { + setHeaderOffset(headerRef?.current?.offsetHeight ?? 0); + }, [headerRef]); const [search, setSearch] = useState(''); const [filters, setFilters] = useState([]); @@ -206,7 +211,7 @@ export function BreadcrumbsDrawer({ return ( - + - +
{t('Breadcrumbs')}
{actions} @@ -262,12 +267,26 @@ const VisibleFocusButton = styled(Button)` 0 0 1px; `; -const HeaderGrid = styled('div')` +const HeaderGrid = styled('div')<{offset: number}>` + position: sticky; + top: ${p => p.offset}px; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: ${space(1)}; - margin: ${space(1)} 0 ${space(2)}; + padding: ${space(0.75)} 0; + margin-bottom: ${space(2)}; + background: ${p => p.theme.background}; + z-index: 1; + &:after { + content: ''; + position: absolute; + top: 100%; + left: 0; + right: 0; + height: ${space(2)}; + background-image: linear-gradient(0deg, transparent, ${p => p.theme.background}); + } `; const Header = styled('h3')` diff --git a/static/app/views/issueDetails/streamline/foldSection.tsx b/static/app/views/issueDetails/streamline/foldSection.tsx index ec7378468fd532..88f2d63413b6f3 100644 --- a/static/app/views/issueDetails/streamline/foldSection.tsx +++ b/static/app/views/issueDetails/streamline/foldSection.tsx @@ -170,7 +170,6 @@ const Summary = styled('summary')<{preventCollapse: boolean}>` border-radius: ${p => p.theme.borderRadius}; cursor: ${p => (p.preventCollapse ? 'initial' : 'pointer')}; position: relative; - overflow: hidden; &::marker, &::-webkit-details-marker { display: none; From 4b05105a89aa098960e838ace64fffb88d7e8f2c Mon Sep 17 00:00:00 2001 From: Leander Rodrigues Date: Wed, 14 Aug 2024 14:53:55 -0400 Subject: [PATCH 2/8] =?UTF-8?q?=F0=9F=92=84=20Better=20sticky=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../events/breadcrumbs/breadcrumbsDrawer.tsx | 34 +++++++++---------- .../components/globalDrawer/components.tsx | 20 ++++++++--- static/app/components/slideOverPanel.tsx | 3 ++ 3 files changed, 34 insertions(+), 23 deletions(-) diff --git a/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx b/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx index ee740d714d4334..ed88f38b2973b9 100644 --- a/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx +++ b/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx @@ -33,6 +33,7 @@ import {trackAnalytics} from 'sentry/utils/analytics'; import {getShortEventId} from 'sentry/utils/events'; import {useLocalStorageState} from 'sentry/utils/useLocalStorageState'; import useOrganization from 'sentry/utils/useOrganization'; +import {MIN_NAV_HEIGHT} from 'sentry/views/issueDetails/streamline/eventNavigation'; export const enum BreadcrumbControlOptions { SEARCH = 'search', @@ -211,7 +212,7 @@ export function BreadcrumbsDrawer({ return ( - + - + + +
{t('Breadcrumbs')}
+ {actions} + - -
{t('Breadcrumbs')}
- {actions} - {displayCrumbs.length === 0 ? ( @@ -267,26 +268,23 @@ const VisibleFocusButton = styled(Button)` 0 0 1px; `; -const HeaderGrid = styled('div')<{offset: number}>` +const BreadcrumbDrawerHeader = styled(DrawerHeader)` + min-height: ${MIN_NAV_HEIGHT}px; +`; + +const BreadcrumbNavigator = styled('div')<{offset: number}>` position: sticky; - top: ${p => p.offset}px; + top: ${p => p.offset + 1}px; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: ${space(1)}; - padding: ${space(0.75)} 0; + padding: ${space(0.75)} 24px; margin-bottom: ${space(2)}; background: ${p => p.theme.background}; z-index: 1; - &:after { - content: ''; - position: absolute; - top: 100%; - left: 0; - right: 0; - height: ${space(2)}; - background-image: linear-gradient(0deg, transparent, ${p => p.theme.background}); - } + min-height: ${MIN_NAV_HEIGHT}px; + box-shadow: ${p => p.theme.translucentBorder} 0 1px; `; const Header = styled('h3')` diff --git a/static/app/components/globalDrawer/components.tsx b/static/app/components/globalDrawer/components.tsx index 46bec58deeb1a0..97787f8aebfb9d 100644 --- a/static/app/components/globalDrawer/components.tsx +++ b/static/app/components/globalDrawer/components.tsx @@ -37,7 +37,7 @@ export const DrawerPanel = forwardRef(function _DrawerPanel( ) { return ( - {children} - + ); }); interface DrawerHeaderProps { children?: React.ReactNode; + className?: string; /** * If true, hides the spacer bar separating close button from custom header content */ @@ -70,13 +71,18 @@ interface DrawerHeaderProps { } export const DrawerHeader = forwardRef(function _DrawerHeader( - {children = null, hideBar = false, hideCloseButton = false}: DrawerHeaderProps, + { + className, + children = null, + hideBar = false, + hideCloseButton = false, + }: DrawerHeaderProps, ref: React.ForwardedRef ) { const {onClose} = useDrawerContentContext(); return ( -
+
{!hideCloseButton && ( p.theme.border}; + box-shadow: ${p => p.theme.border} 0 1px; padding-left: 24px; `; @@ -133,6 +139,10 @@ const DrawerContainer = styled('div')` pointer-events: none; `; +const DrawerSlidePanel = styled(SlideOverPanel)` + box-shadow: 0 0 0 1px ${p => p.theme.translucentBorder}; +`; + export const DrawerComponents = { DrawerBody, DrawerHeader, diff --git a/static/app/components/slideOverPanel.tsx b/static/app/components/slideOverPanel.tsx index 4ebf71009e6da5..c848b99f5b51ba 100644 --- a/static/app/components/slideOverPanel.tsx +++ b/static/app/components/slideOverPanel.tsx @@ -24,6 +24,7 @@ type SlideOverPanelProps = { children: React.ReactNode; collapsed: boolean; ariaLabel?: string; + className?: string; onOpen?: () => void; slidePosition?: 'right' | 'bottom'; transitionProps?: AnimationProps['transition']; @@ -36,6 +37,7 @@ function SlideOverPanel( ariaLabel, collapsed, children, + className, onOpen, slidePosition, transitionProps = {}, @@ -70,6 +72,7 @@ function SlideOverPanel( role="complementary" aria-hidden={collapsed} aria-label={ariaLabel ?? 'slide out drawer'} + className={className} > {children} From a93c67f888e726a2e20cd7bec83583fd16e0bc70 Mon Sep 17 00:00:00 2001 From: Leander Rodrigues Date: Wed, 14 Aug 2024 14:57:57 -0400 Subject: [PATCH 3/8] =?UTF-8?q?=F0=9F=90=9B=20Hide=20processing=20errors?= =?UTF-8?q?=20when=20empty?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/app/components/events/eventProcessingErrors.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/static/app/components/events/eventProcessingErrors.tsx b/static/app/components/events/eventProcessingErrors.tsx index 6eb246f7883c0b..694d76bd6a7770 100644 --- a/static/app/components/events/eventProcessingErrors.tsx +++ b/static/app/components/events/eventProcessingErrors.tsx @@ -118,6 +118,10 @@ export function EventProcessingErrors({event, project, isShare}: Props) { })) ); + if (!errors.length) { + return null; + } + return ( Date: Wed, 14 Aug 2024 15:12:18 -0400 Subject: [PATCH 4/8] =?UTF-8?q?=F0=9F=92=84=20border-colors=20fixes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../events/breadcrumbs/breadcrumbsDrawer.tsx | 6 ++++-- .../views/issueDetails/streamline/eventDetails.tsx | 2 +- .../issueDetails/streamline/eventNavigation.tsx | 14 ++++++-------- .../issueDetails/streamline/interimSection.tsx | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx b/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx index ed88f38b2973b9..e62bec15ff5ce5 100644 --- a/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx +++ b/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx @@ -269,12 +269,14 @@ const VisibleFocusButton = styled(Button)` `; const BreadcrumbDrawerHeader = styled(DrawerHeader)` - min-height: ${MIN_NAV_HEIGHT}px; + max-height: ${MIN_NAV_HEIGHT}px; + box-shadow: none; + border-bottom: 1px solid ${p => p.theme.border}; `; const BreadcrumbNavigator = styled('div')<{offset: number}>` position: sticky; - top: ${p => p.offset + 1}px; + top: ${p => p.offset}px; display: grid; grid-template-columns: 1fr auto; align-items: center; diff --git a/static/app/views/issueDetails/streamline/eventDetails.tsx b/static/app/views/issueDetails/streamline/eventDetails.tsx index 9080283b02551a..f51444e650fbea 100644 --- a/static/app/views/issueDetails/streamline/eventDetails.tsx +++ b/static/app/views/issueDetails/streamline/eventDetails.tsx @@ -85,7 +85,7 @@ const SearchFilter = styled(EventSearch)` `; const GroupContent = styled('div')<{navHeight?: number}>` - border: 1px solid ${p => p.theme.border}; + border: 1px solid ${p => p.theme.translucentBorder}; background: ${p => p.theme.background}; border-radius: ${p => p.theme.borderRadius}; position: relative; diff --git a/static/app/views/issueDetails/streamline/eventNavigation.tsx b/static/app/views/issueDetails/streamline/eventNavigation.tsx index 55387e1bd47ae1..42821887855d90 100644 --- a/static/app/views/issueDetails/streamline/eventNavigation.tsx +++ b/static/app/views/issueDetails/streamline/eventNavigation.tsx @@ -35,6 +35,8 @@ import {useParams} from 'sentry/utils/useParams'; import {FoldSectionKey} from 'sentry/views/issueDetails/streamline/foldSection'; import {useDefaultIssueEvent} from 'sentry/views/issueDetails/utils'; +export const MIN_NAV_HEIGHT = 44; + type EventNavigationProps = { event: Event; group: Group; @@ -258,7 +260,6 @@ export const EventNavigation = forwardRef( - @@ -354,7 +355,6 @@ export const EventNavigation = forwardRef( - ); } @@ -365,6 +365,8 @@ const EventNavigationWrapper = styled('div')` justify-content: space-between; font-size: ${p => p.theme.fontSizeSmall}; padding: ${space(1)} ${space(1.5)}; + min-height: ${MIN_NAV_HEIGHT}px; + border-bottom: 1px solid ${p => p.theme.border}; `; const NavigationWrapper = styled('div')` @@ -390,10 +392,11 @@ const EventInfoJumpToWrapper = styled('div')` align-items: center; padding: ${space(1)} ${space(2)}; flex-wrap: wrap; - + min-height: ${MIN_NAV_HEIGHT}px; @media (min-width: ${p => p.theme.breakpoints.small}) { flex-wrap: nowrap; } + box-shadow: ${p => p.theme.translucentBorder} 0 1px; `; const EventInfo = styled('div')` @@ -418,11 +421,6 @@ const JumpTo = styled('div')` } `; -const NavigationDivider = styled('hr')` - border-color: ${p => p.theme.border}; - margin: 0; -`; - const EventIdInfo = styled('span')` display: flex; align-items: center; diff --git a/static/app/views/issueDetails/streamline/interimSection.tsx b/static/app/views/issueDetails/streamline/interimSection.tsx index c7f0e094f46b11..37873159c4fa5d 100644 --- a/static/app/views/issueDetails/streamline/interimSection.tsx +++ b/static/app/views/issueDetails/streamline/interimSection.tsx @@ -45,7 +45,7 @@ export const InterimSection = forwardRef( ); export const SectionDivider = styled('hr')` - border-color: ${p => p.theme.border}; + border-color: ${p => p.theme.translucentBorder}; margin: ${space(1)} 0; &:last-child { display: none; From 3d10c7fe2a5af23c97a5f4544549bc00bd9dde28 Mon Sep 17 00:00:00 2001 From: Leander Rodrigues Date: Wed, 14 Aug 2024 15:23:58 -0400 Subject: [PATCH 5/8] =?UTF-8?q?=F0=9F=90=9B=20Fix=20meta=20for=20HTTP/Exce?= =?UTF-8?q?ption=20crumbs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/events/breadcrumbs/breadcrumbItemContent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/app/components/events/breadcrumbs/breadcrumbItemContent.tsx b/static/app/components/events/breadcrumbs/breadcrumbItemContent.tsx index 375e09333a7ba8..06dbf07ce55f3a 100644 --- a/static/app/components/events/breadcrumbs/breadcrumbItemContent.tsx +++ b/static/app/components/events/breadcrumbs/breadcrumbItemContent.tsx @@ -145,7 +145,7 @@ function HTTPCrumbContent({ {Object.keys(otherData).length > 0 ? ( - + ) : null} @@ -201,7 +201,7 @@ function ExceptionCrumbContent({ {children} {Object.keys(otherData).length > 0 ? ( - + ) : null} From 4082370ccab5713dc80a7bb85f93e02439da56b5 Mon Sep 17 00:00:00 2001 From: Leander Rodrigues Date: Wed, 14 Aug 2024 15:30:19 -0400 Subject: [PATCH 6/8] =?UTF-8?q?=F0=9F=92=84=20Wrap=20SQL=20and=20other=20t?= =?UTF-8?q?ext?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../events/breadcrumbs/breadcrumbItemContent.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/static/app/components/events/breadcrumbs/breadcrumbItemContent.tsx b/static/app/components/events/breadcrumbs/breadcrumbItemContent.tsx index 06dbf07ce55f3a..a30cb52650b6bb 100644 --- a/static/app/components/events/breadcrumbs/breadcrumbItemContent.tsx +++ b/static/app/components/events/breadcrumbs/breadcrumbItemContent.tsx @@ -163,7 +163,7 @@ function SQLCrumbContent({ return ( - + {tokens.map((line, i) => (
{line.map((token, j) => ( @@ -173,7 +173,7 @@ function SQLCrumbContent({ ))}
))} - + {children} @@ -215,12 +215,12 @@ const Link = styled('a')` word-break: break-all; `; -const LightenTextColor = styled('pre')` - margin: 0; +const SQLText = styled('pre')` &.language-sql { - color: ${p => p.theme.subText}; + margin: 0; padding: ${space(0.25)} 0; font-size: ${p => p.theme.fontSizeSmall}; + white-space: pre-wrap; } `; From e4bde9a82ab0126bf4e59fdf3ff95805d47f7936 Mon Sep 17 00:00:00 2001 From: Leander Rodrigues Date: Wed, 14 Aug 2024 17:17:49 -0400 Subject: [PATCH 7/8] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Virtualize=20drawer=20?= =?UTF-8?q?and=20breadcrumbs=20list?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../breadcrumbs/breadcrumbsDataSection.tsx | 18 +++++--- .../events/breadcrumbs/breadcrumbsDrawer.tsx | 44 ++++++++++++------- .../breadcrumbs/breadcrumbsTimeline.tsx | 24 +++++++--- 3 files changed, 57 insertions(+), 29 deletions(-) diff --git a/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx b/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx index 527479b1b4f629..5ba47c31d7fced 100644 --- a/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx +++ b/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx @@ -52,6 +52,7 @@ export default function BreadcrumbsDataSection({ project, }: BreadcrumbsDataSectionProps) { const viewAllButtonRef = useRef(null); + const containerRef = useRef(null); const openForm = useFeedbackForm(); const {closeDrawer, isDrawerOpen, openDrawer} = useDrawer(); const organization = useOrganization(); @@ -183,13 +184,16 @@ export default function BreadcrumbsDataSection({ actions={actions} > - +
+ containerRef.current} + /> +
{hasViewAll && ( diff --git a/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx b/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx index e62bec15ff5ce5..cefa264386b8e5 100644 --- a/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx +++ b/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx @@ -1,4 +1,4 @@ -import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react'; +import {useCallback, useMemo, useRef, useState} from 'react'; import {useTheme} from '@emotion/react'; import styled from '@emotion/styled'; @@ -73,11 +73,7 @@ export function BreadcrumbsDrawer({ }: BreadcrumbsDrawerProps) { const organization = useOrganization(); const theme = useTheme(); - const headerRef = useRef(null); - const [headerOffset, setHeaderOffset] = useState(0); - useEffect(() => { - setHeaderOffset(headerRef?.current?.offsetHeight ?? 0); - }, [headerRef]); + const containerRef = useRef(null); const [search, setSearch] = useState(''); const [filters, setFilters] = useState([]); @@ -211,8 +207,8 @@ export function BreadcrumbsDrawer({ ); return ( - - + + - +
{t('Breadcrumbs')}
{actions} - + {displayCrumbs.length === 0 ? ( @@ -255,11 +251,12 @@ export function BreadcrumbsDrawer({ containerRef.current} /> )} - - + + ); } @@ -268,27 +265,42 @@ const VisibleFocusButton = styled(Button)` 0 0 1px; `; +const BreadcrumbDrawerContainer = styled('div')` + height: 100%; + display: grid; + grid-template-rows: auto auto 1fr; +`; + const BreadcrumbDrawerHeader = styled(DrawerHeader)` + position: unset; max-height: ${MIN_NAV_HEIGHT}px; box-shadow: none; border-bottom: 1px solid ${p => p.theme.border}; `; -const BreadcrumbNavigator = styled('div')<{offset: number}>` - position: sticky; - top: ${p => p.offset}px; +const BreadcrumbNavigator = styled('div')` display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: ${space(1)}; padding: ${space(0.75)} 24px; - margin-bottom: ${space(2)}; background: ${p => p.theme.background}; z-index: 1; min-height: ${MIN_NAV_HEIGHT}px; box-shadow: ${p => p.theme.translucentBorder} 0 1px; `; +const BreadcrumbDrawerBody = styled(DrawerBody)` + overflow: auto; + overscroll-behavior: contain; + /* Move the scrollbar to the left edge */ + scroll-margin: 0 ${space(2)}; + direction: rtl; + * { + direction: ltr; + } +`; + const Header = styled('h3')` display: block; font-size: ${p => p.theme.fontSizeExtraLarge}; diff --git a/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx b/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx index b8015564ee6a8a..14d1c160ce4cef 100644 --- a/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx +++ b/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx @@ -1,4 +1,3 @@ -import {useRef} from 'react'; import styled from '@emotion/styled'; import {useVirtualizer} from '@tanstack/react-virtual'; import moment from 'moment-timezone'; @@ -17,6 +16,10 @@ import {shouldUse24Hours} from 'sentry/utils/dates'; interface BreadcrumbsTimelineProps { breadcrumbs: EnhancedCrumb[]; + /** + * Function to get the parent's ref to a DOM element to enable virtualization. + */ + getScrollElement: () => HTMLElement | null; /** * If true, expands the contents of the breadcrumbs' data payload */ @@ -34,14 +37,14 @@ interface BreadcrumbsTimelineProps { export default function BreadcrumbsTimeline({ breadcrumbs, + getScrollElement, startTimeString, fullyExpanded = true, showLastLine = false, }: BreadcrumbsTimelineProps) { - const containerRef = useRef(null); const virtualizer = useVirtualizer({ count: breadcrumbs.length, - getScrollElement: () => containerRef.current, + getScrollElement, estimateSize: () => 35, // Must match rendered item margins. gap: 8, @@ -114,17 +117,26 @@ export default function BreadcrumbsTimeline({ return (
- {items} + + {items} +
); } +const VirtualOffset = styled('div')<{offset: number}>` + position: absolute; + top: 0; + left: 0; + width: 100%; + transform: translateY(${p => p.offset}px); +`; + const Header = styled('div')` display: grid; grid-template-columns: 1fr auto; From a5788ff1262fc87c6d049d66d5e6adb10b37c4fe Mon Sep 17 00:00:00 2001 From: Leander Rodrigues Date: Thu, 15 Aug 2024 11:03:01 -0400 Subject: [PATCH 8/8] =?UTF-8?q?=F0=9F=90=9B=20Fix=20virtualization?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../breadcrumbs/breadcrumbsDataSection.tsx | 8 ++++---- .../events/breadcrumbs/breadcrumbsDrawer.tsx | 8 ++++---- .../breadcrumbs/breadcrumbsTimeline.tsx | 20 +++++++++++++++---- 3 files changed, 24 insertions(+), 12 deletions(-) diff --git a/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx b/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx index 5ba47c31d7fced..ab3cbf1ac3c385 100644 --- a/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx +++ b/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx @@ -1,4 +1,4 @@ -import {useCallback, useMemo, useRef} from 'react'; +import {useCallback, useMemo, useRef, useState} from 'react'; import styled from '@emotion/styled'; import {Button} from 'sentry/components/button'; @@ -52,7 +52,7 @@ export default function BreadcrumbsDataSection({ project, }: BreadcrumbsDataSectionProps) { const viewAllButtonRef = useRef(null); - const containerRef = useRef(null); + const [container, setContainer] = useState(null); const openForm = useFeedbackForm(); const {closeDrawer, isDrawerOpen, openDrawer} = useDrawer(); const organization = useOrganization(); @@ -184,14 +184,14 @@ export default function BreadcrumbsDataSection({ actions={actions} > -
+
containerRef.current} + containerElement={container} />
{hasViewAll && ( diff --git a/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx b/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx index cefa264386b8e5..0b33dd5b68da83 100644 --- a/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx +++ b/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx @@ -1,4 +1,4 @@ -import {useCallback, useMemo, useRef, useState} from 'react'; +import {useCallback, useMemo, useState} from 'react'; import {useTheme} from '@emotion/react'; import styled from '@emotion/styled'; @@ -73,7 +73,7 @@ export function BreadcrumbsDrawer({ }: BreadcrumbsDrawerProps) { const organization = useOrganization(); const theme = useTheme(); - const containerRef = useRef(null); + const [container, setContainer] = useState(null); const [search, setSearch] = useState(''); const [filters, setFilters] = useState([]); @@ -228,7 +228,7 @@ export function BreadcrumbsDrawer({
{t('Breadcrumbs')}
{actions} - + {displayCrumbs.length === 0 ? ( @@ -251,7 +251,7 @@ export function BreadcrumbsDrawer({ containerRef.current} + containerElement={container} /> )} diff --git a/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx b/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx index 14d1c160ce4cef..90acfde5dbfb67 100644 --- a/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx +++ b/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx @@ -17,9 +17,21 @@ import {shouldUse24Hours} from 'sentry/utils/dates'; interface BreadcrumbsTimelineProps { breadcrumbs: EnhancedCrumb[]; /** - * Function to get the parent's ref to a DOM element to enable virtualization. + * Required reference to parent container for virtualization. It's recommended to use state instead + * of useRef since this component will not update when the ref changes, causing it to render empty initially. + * To enable virtualization, set a fixed height on the `containerElement` node. + * + * Example: + * ``` + * const [container, setContainer] = useState(null); + * return ( + *
+ * + *
+ * ) + * ``` */ - getScrollElement: () => HTMLElement | null; + containerElement: HTMLElement | null; /** * If true, expands the contents of the breadcrumbs' data payload */ @@ -37,14 +49,14 @@ interface BreadcrumbsTimelineProps { export default function BreadcrumbsTimeline({ breadcrumbs, - getScrollElement, + containerElement, startTimeString, fullyExpanded = true, showLastLine = false, }: BreadcrumbsTimelineProps) { const virtualizer = useVirtualizer({ count: breadcrumbs.length, - getScrollElement, + getScrollElement: () => containerElement, estimateSize: () => 35, // Must match rendered item margins. gap: 8,