From 0b39e91cc5aaa3eafb60db94647296994c46ca3b Mon Sep 17 00:00:00 2001
From: Scott Cooper <scttcper@gmail.com>
Date: Thu, 29 Aug 2024 13:00:21 -0700
Subject: [PATCH] fix(issues): Wrap cron timeline in collapsable section
 (#76757)

---
 .../events/interfaces/crons/cronTimelineSection.tsx | 13 ++++++++-----
 .../app/views/issueDetails/streamline/context.tsx   |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/static/app/components/events/interfaces/crons/cronTimelineSection.tsx b/static/app/components/events/interfaces/crons/cronTimelineSection.tsx
index ae4e1a5962540..49941fb00ec25 100644
--- a/static/app/components/events/interfaces/crons/cronTimelineSection.tsx
+++ b/static/app/components/events/interfaces/crons/cronTimelineSection.tsx
@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 
 import {LinkButton} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
-import {EventDataSection} from 'sentry/components/events/eventDataSection';
 import {Overlay} from 'sentry/components/overlay';
 import Panel from 'sentry/components/panels/panel';
 import {IconOpen} from 'sentry/icons';
@@ -16,6 +15,8 @@ import type {Project} from 'sentry/types/project';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import {useDimensions} from 'sentry/utils/useDimensions';
 import useRouter from 'sentry/utils/useRouter';
+import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
+import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
 import {ResolutionSelector} from 'sentry/views/monitors/components/overviewTimeline/resolutionSelector';
 import {CheckInPlaceholder} from 'sentry/views/monitors/components/timeline/checkInPlaceholder';
 import {CheckInTimeline} from 'sentry/views/monitors/components/timeline/checkInTimeline';
@@ -97,9 +98,9 @@ export function CronTimelineSection({event, organization, project}: Props) {
   );
 
   return (
-    <EventDataSection
+    <InterimSection
       title={t('Check-ins')}
-      type="check-ins"
+      type={SectionKey.CRON_TIMELINE}
       help={t('A timeline of check-ins that happened before and after this event')}
       actions={actions}
     >
@@ -129,7 +130,7 @@ export function CronTimelineSection({event, organization, project}: Props) {
           <CheckInPlaceholder />
         )}
       </TimelineContainer>
-    </EventDataSection>
+    </InterimSection>
   );
 }
 
@@ -162,7 +163,9 @@ const EventLineTick = styled('div')<{left: number}>`
   transform: translateX(-2px);
 `;
 
-const EventLineLabel = styled(Overlay)<{left: number; timelineWidth: number}>`
+const EventLineLabel = styled(Overlay, {
+  shouldForwardProp: prop => prop !== 'left' && prop !== 'timelineWidth',
+})<{left: number; timelineWidth: number}>`
   width: max-content;
   padding: ${space(0.75)} ${space(1)};
   color: ${p => p.theme.textColor};
diff --git a/static/app/views/issueDetails/streamline/context.tsx b/static/app/views/issueDetails/streamline/context.tsx
index c69d5f629d80a..0d9ad96152220 100644
--- a/static/app/views/issueDetails/streamline/context.tsx
+++ b/static/app/views/issueDetails/streamline/context.tsx
@@ -14,7 +14,7 @@ export const enum SectionKey {
   LLM_MONITORING = 'llm-monitoring',
 
   UPTIME = 'uptime', // Only Uptime issues
-  CRON = 'cron-timeline', // Only Cron issues
+  CRON_TIMELINE = 'cron-timeline', // Only Cron issues
 
   HIGHLIGHTS = 'highlights',
   RESOURCES = 'resources', // Position controlled by flag