From 3deef9f068057429a65834ced3239504eee310c2 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Thu, 17 Oct 2024 16:16:18 -0700 Subject: [PATCH 1/4] feat(issues): Add anchor links back to issue sections --- .../streamline/eventNavigation.tsx | 8 ++++-- .../issueDetails/streamline/foldSection.tsx | 26 ++++++++++++++++--- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/static/app/views/issueDetails/streamline/eventNavigation.tsx b/static/app/views/issueDetails/streamline/eventNavigation.tsx index 1bf953d2c2608b..85afd65f69e884 100644 --- a/static/app/views/issueDetails/streamline/eventNavigation.tsx +++ b/static/app/views/issueDetails/streamline/eventNavigation.tsx @@ -342,7 +342,11 @@ function EventNavigationLink({ config?.initialCollapse ?? false ); return ( - + ); } diff --git a/static/app/views/issueDetails/streamline/foldSection.tsx b/static/app/views/issueDetails/streamline/foldSection.tsx index f9a32f70291596..b32de91344a366 100644 --- a/static/app/views/issueDetails/streamline/foldSection.tsx +++ b/static/app/views/issueDetails/streamline/foldSection.tsx @@ -4,6 +4,7 @@ import { Fragment, useCallback, useLayoutEffect, + useRef, useState, } from 'react'; import styled from '@emotion/styled'; @@ -13,6 +14,7 @@ import InteractionStateLayer from 'sentry/components/interactionStateLayer'; import {IconChevron} from 'sentry/icons'; import {space} from 'sentry/styles/space'; import {trackAnalytics} from 'sentry/utils/analytics'; +import mergeRefs from 'sentry/utils/mergeRefs'; import useOrganization from 'sentry/utils/useOrganization'; import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState'; import type {SectionKey} from 'sentry/views/issueDetails/streamline/context'; @@ -53,7 +55,6 @@ export const FoldSection = forwardRef(function Fo sectionKey, initialCollapse = false, preventCollapse = false, - ...props }, forwardedRef ) { @@ -64,6 +65,26 @@ export const FoldSection = forwardRef(function Fo getFoldSectionKey(sectionKey), initialCollapse ); + const hasAttemptedScroll = useRef(false); + + const scrollToSection = useCallback( + (element: HTMLElement | null) => { + if (!element || !navScrollMargin || hasAttemptedScroll.current) { + return; + } + // Prevent scrolling to element on rerenders + hasAttemptedScroll.current = true; + + // scroll to element if it's the current section on page load + if (window.location.hash) { + const [, hash] = window.location.hash.split('#'); + if (hash === sectionKey) { + element.scrollIntoView(); + } + } + }, + [sectionKey, navScrollMargin] + ); useLayoutEffect(() => { if (!sectionData.hasOwnProperty(sectionKey)) { @@ -92,8 +113,7 @@ export const FoldSection = forwardRef(function Fo return (
From df4ddf1ae0ad5a55d759219b002e7c94a56a1153 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Fri, 18 Oct 2024 13:01:23 -0700 Subject: [PATCH 2/4] uncollapse on focus --- static/app/views/issueDetails/streamline/foldSection.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/static/app/views/issueDetails/streamline/foldSection.tsx b/static/app/views/issueDetails/streamline/foldSection.tsx index b32de91344a366..e46e85ca89e418 100644 --- a/static/app/views/issueDetails/streamline/foldSection.tsx +++ b/static/app/views/issueDetails/streamline/foldSection.tsx @@ -79,11 +79,16 @@ export const FoldSection = forwardRef(function Fo if (window.location.hash) { const [, hash] = window.location.hash.split('#'); if (hash === sectionKey) { - element.scrollIntoView(); + if (isCollapsed) { + setIsCollapsed(false); + } + + // Delay scrollIntoView to allow for layout changes to take place + setTimeout(() => element?.scrollIntoView(), 100); } } }, - [sectionKey, navScrollMargin] + [sectionKey, navScrollMargin, isCollapsed, setIsCollapsed] ); useLayoutEffect(() => { From 6870696ad693da00a20908d5cabf6ea05334cd39 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Fri, 18 Oct 2024 14:12:48 -0700 Subject: [PATCH 3/4] replace url --- static/app/views/issueDetails/streamline/eventNavigation.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/static/app/views/issueDetails/streamline/eventNavigation.tsx b/static/app/views/issueDetails/streamline/eventNavigation.tsx index 85afd65f69e884..4910b1ddf398e4 100644 --- a/static/app/views/issueDetails/streamline/eventNavigation.tsx +++ b/static/app/views/issueDetails/streamline/eventNavigation.tsx @@ -346,8 +346,10 @@ function EventNavigationLink({ to={{ ...location, hash: `#${config.key}`, + replace: true, }} - onClick={() => { + onClick={event => { + event.preventDefault(); setIsCollapsed(false); document .getElementById(config.key) From ad041e30f30f0ef247d9d744ec8fa7b1835e9a4f Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Fri, 18 Oct 2024 14:43:43 -0700 Subject: [PATCH 4/4] remove replace --- static/app/views/issueDetails/streamline/eventNavigation.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/static/app/views/issueDetails/streamline/eventNavigation.tsx b/static/app/views/issueDetails/streamline/eventNavigation.tsx index 4910b1ddf398e4..f756a91737a2f9 100644 --- a/static/app/views/issueDetails/streamline/eventNavigation.tsx +++ b/static/app/views/issueDetails/streamline/eventNavigation.tsx @@ -346,7 +346,6 @@ function EventNavigationLink({ to={{ ...location, hash: `#${config.key}`, - replace: true, }} onClick={event => { event.preventDefault();