feat(issues): Hide event details headers for cron issues (#80568)

getsentry · Nov 12, 2024 · 151bb36 · 151bb36
1 parent acde7b0
commit 151bb36
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 68 deletions.
diff --git a/static/app/utils/issueTypeConfig/cronConfig.tsx b/static/app/utils/issueTypeConfig/cronConfig.tsx
@@ -30,6 +30,7 @@ const cronConfig: IssueCategoryConfigMapping = {
     userFeedback: {enabled: false},
     usesIssuePlatform: true,
     issueSummary: {enabled: false},
+    filterAndSearchHeader: {enabled: false},
   },
 };
 

diff --git a/static/app/utils/issueTypeConfig/index.tsx b/static/app/utils/issueTypeConfig/index.tsx
@@ -39,6 +39,7 @@ const BASE_CONFIG: IssueTypeConfig = {
   aiSuggestedSolution: false,
   events: {enabled: true},
   mergedIssues: {enabled: false},
+  filterAndSearchHeader: {enabled: true},
   performanceDurationRegression: {enabled: false},
   profilingDurationRegression: {enabled: false},
   regression: {enabled: false},
@@ -109,7 +110,7 @@ export const getIssueCategoryAndTypeFromOccurrenceType = (
 export const getConfigForIssueType = (
   params: GetConfigForIssueTypeParams,
   project: Project
-) => {
+): IssueTypeConfig => {
   const {issueCategory, issueType, title} =
     'eventOccurrenceType' in params
       ? getIssueCategoryAndTypeFromOccurrenceType(params.eventOccurrenceType as number)

diff --git a/static/app/utils/issueTypeConfig/types.tsx b/static/app/utils/issueTypeConfig/types.tsx
@@ -51,6 +51,7 @@ export type IssueTypeConfig = {
     title: string;
     helpText?: string;
   } | null;
+  filterAndSearchHeader: DisabledWithReasonConfig;
   /**
    * Is the Issue Summary available for this issue
    */

diff --git a/static/app/views/issueDetails/streamline/eventDetailsHeader.spec.tsx b/static/app/views/issueDetails/streamline/eventDetailsHeader.spec.tsx
@@ -26,7 +26,7 @@ describe('EventDetailsHeader', () => {
   });
   const group = GroupFixture();
   const event = EventFixture({id: 'event-id'});
-  const defaultProps = {group, event};
+  const defaultProps = {group, event, project};
   const router = RouterFixture({
     location: LocationFixture({query: {streamline: '1'}}),
   });

diff --git a/static/app/views/issueDetails/streamline/eventDetailsHeader.tsx b/static/app/views/issueDetails/streamline/eventDetailsHeader.tsx
@@ -1,44 +1,48 @@
 import styled from '@emotion/styled';
 
-import {Button, LinkButton} from 'sentry/components/button';
+import {LinkButton} from 'sentry/components/button';
 import {Flex} from 'sentry/components/container/flex';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
-import {IconChevron} from 'sentry/icons/iconChevron';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
+import type {Project} from 'sentry/types/project';
+import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
-import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState';
 import {EventGraph} from 'sentry/views/issueDetails/streamline/eventGraph';
 import {
   EventSearch,
   useEventQuery,
 } from 'sentry/views/issueDetails/streamline/eventSearch';
+import {ToggleSidebar} from 'sentry/views/issueDetails/streamline/toggleSidebar';
 import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
 import {useEnvironmentsFromUrl} from 'sentry/views/issueDetails/utils';
 
 export function EventDetailsHeader({
   group,
   event,
+  project,
 }: {
   event: Event | undefined;
   group: Group;
+  project: Project;
 }) {
   const navigate = useNavigate();
   const location = useLocation();
   const environments = useEnvironmentsFromUrl();
   const searchQuery = useEventQuery({group});
   const {baseUrl} = useGroupDetailsRoute();
-  const [sidebarOpen, setSidebarOpen] = useSyncedLocalStorageState(
-    'issue-details-sidebar-open',
-    true
-  );
-  const direction = sidebarOpen ? 'right' : 'left';
+
+  const issueTypeConfig = getConfigForIssueType(group, project);
+
+  if (!issueTypeConfig.filterAndSearchHeader.enabled) {
+    return null;
+  }
 
   return (
     <PageErrorBoundary mini message={t('There was an error loading the event filters')}>
@@ -71,20 +75,7 @@ export function EventDetailsHeader({
               disallowFreeText: true,
             }}
           />
-          <ToggleContainer sidebarOpen={sidebarOpen}>
-            <ToggleButton
-              onClick={() => setSidebarOpen(!sidebarOpen)}
-              aria-label={sidebarOpen ? t('Close Sidebar') : t('Open Sidebar')}
-              analyticsEventKey="issue_details.sidebar_toggle"
-              analyticsEventName="Issue Details: Sidebar Toggle"
-              analyticsParams={{
-                sidebar_open: !sidebarOpen,
-              }}
-            >
-              <LeftChevron direction={direction} />
-              <RightChevron direction={direction} />
-            </ToggleButton>
-          </ToggleContainer>
+          <ToggleSidebar />
         </Flex>
         <GraphSection>
           <EventGraph event={event} group={group} style={{flex: 1}} />
@@ -149,41 +140,6 @@ const DateFilter = styled(DatePageFilter)`
   }
 `;
 
-const ToggleContainer = styled('div')<{sidebarOpen: boolean}>`
-  width: ${p => (p.sidebarOpen ? '30px' : '50px')};
-  position: relative;
-  padding: ${space(0.5)} 0;
-  @media (max-width: ${p => p.theme.breakpoints.large}) {
-    display: none;
-  }
-`;
-
-// The extra 1px on width is to display above the sidebar border
-const ToggleButton = styled(Button)`
-  border-radius: ${p => p.theme.borderRadiusLeft};
-  border-right-color: ${p => p.theme.background} !important;
-  box-shadow: none;
-  position: absolute;
-  padding: 0;
-  left: ${space(0.5)};
-  width: calc(100% - ${space(0.5)} + 1px);
-  outline: 0;
-  height: 30px;
-  min-height: unset;
-`;
-
-const LeftChevron = styled(IconChevron)`
-  position: absolute;
-  color: ${p => p.theme.subText};
-  height: 10px;
-  width: 10px;
-  left: ${space(0.75)};
-`;
-
-const RightChevron = styled(LeftChevron)`
-  left: ${space(1.5)};
-`;
-
 const GraphSection = styled('div')`
   grid-area: graph;
   display: flex;

diff --git a/static/app/views/issueDetails/streamline/eventGraph.spec.tsx b/static/app/views/issueDetails/streamline/eventGraph.spec.tsx
@@ -23,7 +23,7 @@ describe('EventGraph', () => {
   const group = GroupFixture();
   const event = EventFixture({id: 'event-id'});
   const persistantQuery = `issue:${group.shortId}`;
-  const defaultProps = {group, event};
+  const defaultProps = {group, event, project};
 
   let mockEventStats: jest.Mock;
 

diff --git a/static/app/views/issueDetails/streamline/eventNavigation.tsx b/static/app/views/issueDetails/streamline/eventNavigation.tsx
@@ -399,6 +399,7 @@ const NavigationLabel = styled('div')`
   font-size: ${p => p.theme.fontSizeLarge};
   font-weight: ${p => p.theme.fontWeightBold};
   padding-right: ${space(0.25)};
+  padding-left: ${space(1.5)};
 `;
 
 const LargeInThisIssueText = styled('div')`
@@ -408,11 +409,11 @@ const LargeInThisIssueText = styled('div')`
 `;
 
 const EventNavigationWrapper = styled('div')`
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   font-size: ${p => p.theme.fontSizeSmall};
-  padding: 0 0 ${space(0.5)} ${space(0.25)};
 
   @media (min-width: ${p => p.theme.breakpoints.xsmall}) {
     flex-direction: row;

diff --git a/static/app/views/issueDetails/streamline/groupDetailsLayout.tsx b/static/app/views/issueDetails/streamline/groupDetailsLayout.tsx
@@ -6,6 +6,7 @@ import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
+import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
 import theme from 'sentry/utils/theme';
 import useMedia from 'sentry/utils/useMedia';
 import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState';
@@ -14,6 +15,7 @@ import {IssueEventNavigation} from 'sentry/views/issueDetails/streamline/eventNa
 import {useEventQuery} from 'sentry/views/issueDetails/streamline/eventSearch';
 import StreamlinedGroupHeader from 'sentry/views/issueDetails/streamline/header';
 import StreamlinedSidebar from 'sentry/views/issueDetails/streamline/sidebar';
+import {ToggleSidebar} from 'sentry/views/issueDetails/streamline/toggleSidebar';
 import type {ReprocessingStatus} from 'sentry/views/issueDetails/utils';
 
 interface GroupDetailsLayoutProps {
@@ -35,6 +37,8 @@ export function GroupDetailsLayout({
   const [sidebarOpen] = useSyncedLocalStorageState('issue-details-sidebar-open', true);
   const isScreenSmall = useMedia(`(max-width: ${theme.breakpoints.large})`);
   const shouldDisplaySidebar = sidebarOpen || isScreenSmall;
+  const issueTypeConfig = getConfigForIssueType(group, group.project);
+
   return (
     <Fragment>
       <StreamlinedGroupHeader
@@ -45,12 +49,18 @@ export function GroupDetailsLayout({
       />
       <StyledLayoutBody data-test-id="group-event-details" sidebarOpen={sidebarOpen}>
         <div>
-          <EventDetailsHeader event={event} group={group} />
+          <EventDetailsHeader event={event} group={group} project={project} />
           <GroupContent>
-            <div>
+            <NavigationSidebarWrapper
+              hasToggleSidebar={!issueTypeConfig.filterAndSearchHeader.enabled}
+            >
               <IssueEventNavigation event={event} group={group} query={searchQuery} />
-              {children}
-            </div>
+              {/* Since the event details header is disabled, display the sidebar toggle here */}
+              {!issueTypeConfig.filterAndSearchHeader.enabled && (
+                <ToggleSidebar size="sm" />
+              )}
+            </NavigationSidebarWrapper>
+            <ContentPadding>{children}</ContentPadding>
           </GroupContent>
         </div>
         {shouldDisplaySidebar ? (
@@ -72,10 +82,8 @@ const StyledLayoutBody = styled(Layout.Body)<{
   }
 `;
 
-const GroupContent = styled(Layout.Main)`
+const GroupContent = styled('section')`
   background: ${p => p.theme.backgroundSecondary};
-  min-height: 100vh;
-  padding: 10px ${space(1.5)} ${space(1.5)};
   display: flex;
   flex-direction: column;
   @media (min-width: ${p => p.theme.breakpoints.large}) {
@@ -85,3 +93,19 @@ const GroupContent = styled(Layout.Main)`
     border-bottom-width: 1px solid ${p => p.theme.translucentBorder};
   }
 `;
+
+const NavigationSidebarWrapper = styled('div')<{
+  hasToggleSidebar: boolean;
+}>`
+  position: relative;
+  display: flex;
+  padding: ${p =>
+    p.hasToggleSidebar
+      ? `${space(1)} 0 ${space(0.5)} ${space(1.5)}`
+      : `10px ${space(1.5)} ${space(0.25)} ${space(1.5)}`};
+`;
+
+const ContentPadding = styled('div')`
+  min-height: 100vh;
+  padding: 0 ${space(1.5)} ${space(1.5)} ${space(1.5)};
+`;
diff --git a/static/app/views/issueDetails/streamline/toggleSidebar.tsx b/static/app/views/issueDetails/streamline/toggleSidebar.tsx
@@ -0,0 +1,68 @@
+import styled from '@emotion/styled';
+
+import {Button} from 'sentry/components/button';
+import {IconChevron} from 'sentry/icons/iconChevron';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState';
+
+export function ToggleSidebar({size = 'lg'}: {size?: 'lg' | 'sm'}) {
+  const [sidebarOpen, setSidebarOpen] = useSyncedLocalStorageState(
+    'issue-details-sidebar-open',
+    true
+  );
+  const direction = sidebarOpen ? 'right' : 'left';
+  return (
+    <ToggleContainer
+      sidebarOpen={sidebarOpen}
+      style={{paddingTop: size === 'lg' ? '4px' : '0px'}}
+    >
+      <ToggleButton
+        onClick={() => setSidebarOpen(!sidebarOpen)}
+        aria-label={sidebarOpen ? t('Close Sidebar') : t('Open Sidebar')}
+        style={{height: size === 'lg' ? '30px' : '26px'}}
+        analyticsEventKey="issue_details.sidebar_toggle"
+        analyticsEventName="Issue Details: Sidebar Toggle"
+        analyticsParams={{
+          sidebar_open: !sidebarOpen,
+        }}
+      >
+        <LeftChevron direction={direction} />
+        <RightChevron direction={direction} />
+      </ToggleButton>
+    </ToggleContainer>
+  );
+}
+
+const ToggleContainer = styled('div')<{sidebarOpen: boolean}>`
+  width: ${p => (p.sidebarOpen ? '30px' : '50px')};
+  position: relative;
+  @media (max-width: ${p => p.theme.breakpoints.large}) {
+    display: none;
+  }
+`;
+
+// The extra 1px on width is to display above the sidebar border
+const ToggleButton = styled(Button)`
+  border-radius: ${p => p.theme.borderRadiusLeft};
+  border-right-color: ${p => p.theme.background} !important;
+  box-shadow: none;
+  position: absolute;
+  padding: 0;
+  left: ${space(0.5)};
+  width: calc(100% - ${space(0.5)} + 1px);
+  outline: 0;
+  min-height: unset;
+`;
+
+const LeftChevron = styled(IconChevron)`
+  position: absolute;
+  color: ${p => p.theme.subText};
+  height: 10px;
+  width: 10px;
+  left: ${space(0.75)};
+`;
+
+const RightChevron = styled(LeftChevron)`
+  left: ${space(1.5)};
+`;