fix(issues): Wrap cron timeline in collapsable section (#76757)

getsentry · Aug 29, 2024 · 0b39e91 · 0b39e91
1 parent 14b4c82
commit 0b39e91
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git 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
@@ -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