Browse Source

fix(issue-details): Style function evidence and hydration diff sections (#80202)

These sections were not updated to the new styles for the streamlined
UI. This fixes that.

**Before**
<img width="1192" alt="image"
src="https://github.com/user-attachments/assets/2a2d4948-0f5a-45bb-a78d-38cda2081a6d">
<img width="1181" alt="image"
src="https://github.com/user-attachments/assets/2ccc4313-7ce6-463d-b74b-ddfb70a68a2f">


**After**
<img width="1176" alt="image"
src="https://github.com/user-attachments/assets/5f33af29-cc93-4df9-a304-2726ceae0612">
<img width="895" alt="image"
src="https://github.com/user-attachments/assets/c4272dde-492a-4d42-93a6-1df2a47646b8">
Leander Rodrigues 4 months ago
parent
commit
c2a720a774

+ 5 - 5
static/app/components/events/eventHydrationDiff/replayDiffContent.tsx

@@ -1,5 +1,4 @@
 import ErrorBoundary from 'sentry/components/errorBoundary';
-import {EventDataSection} from 'sentry/components/events/eventDataSection';
 import Placeholder from 'sentry/components/placeholder';
 import {OpenReplayComparisonButton} from 'sentry/components/replays/breadcrumbs/openReplayComparisonButton';
 import {ReplaySliderDiff} from 'sentry/components/replays/diff/replaySliderDiff';
@@ -9,6 +8,8 @@ import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import {getReplayDiffOffsetsFromEvent} from 'sentry/utils/replays/getDiffTimestamps';
 import useReplayReader from 'sentry/utils/replays/hooks/useReplayReader';
+import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
+import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
 
 interface Props {
   event: Event;
@@ -33,10 +34,9 @@ export default function ReplayDiffContent({event, group, orgSlug, replaySlug}: P
   }
 
   const {leftOffsetMs, rightOffsetMs} = getReplayDiffOffsetsFromEvent(replay, event);
-
   return (
-    <EventDataSection
-      type="hydration-diff"
+    <InterimSection
+      type={SectionKey.HYDRATION_DIFF}
       title={t('Hydration Error Diff')}
       actions={
         <OpenReplayComparisonButton
@@ -61,6 +61,6 @@ export default function ReplayDiffContent({event, group, orgSlug, replaySlug}: P
           />
         </ReplayGroupContextProvider>
       </ErrorBoundary>
-    </EventDataSection>
+    </InterimSection>
   );
 }

+ 3 - 0
static/app/components/events/eventHydrationDiff/replayDiffSection.tsx

@@ -13,6 +13,7 @@ import type {Event} from 'sentry/types/event';
 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';
 
 interface Props {
@@ -47,6 +48,8 @@ export function ReplayDiffSection({event, group, replayId}: Props) {
           }
         />
       </ReactLazyLoad>
+      {/* We have to manually add a section divider since LazyLoad puts the section in a wrapper */}
+      <SectionDivider />
     </ErrorBoundary>
   );
 }

+ 4 - 3
static/app/components/events/eventStatisticalDetector/eventFunctionRegressionEvidence.tsx

@@ -1,10 +1,11 @@
-import {EventDataSection} from 'sentry/components/events/eventDataSection';
 import KeyValueList from 'sentry/components/events/interfaces/keyValueList';
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
 import type {KeyValueListData} from 'sentry/types/group';
 import {defined} from 'sentry/utils';
 import {getFormattedDate} from 'sentry/utils/dates';
+import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
+import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
 
 interface EventFunctionRegressionEvidenceProps {
   event: Event;
@@ -48,8 +49,8 @@ export function EventFunctionRegressionEvidence({
   ];
 
   return (
-    <EventDataSection title="Function Evidence" type="evidence">
+    <InterimSection title={t('Function Evidence')} type={SectionKey.EVIDENCE}>
       <KeyValueList data={data} shouldSort={false} />
-    </EventDataSection>
+    </InterimSection>
   );
 }

+ 4 - 3
static/app/components/events/profileEventEvidence.tsx

@@ -1,5 +1,4 @@
 import {LinkButton} from 'sentry/components/button';
-import {EventDataSection} from 'sentry/components/events/eventDataSection';
 import KeyValueList from 'sentry/components/events/interfaces/keyValueList';
 import {IconProfiling} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -8,6 +7,8 @@ import {generateLinkToEventInTraceView} from 'sentry/utils/discover/urls';
 import {generateProfileFlamechartRouteWithHighlightFrame} from 'sentry/utils/profiling/routes';
 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';
 
 type ProfileEvidenceProps = {event: Event; projectSlug: string};
 
@@ -78,8 +79,8 @@ export function ProfileEventEvidence({event, projectSlug}: ProfileEvidenceProps)
   ];
 
   return (
-    <EventDataSection title="Function Evidence" type="evidence">
+    <InterimSection title={t('Function Evidence')} type={SectionKey.EVIDENCE}>
       <KeyValueList data={keyValueListData} shouldSort={false} />
-    </EventDataSection>
+    </InterimSection>
   );
 }