feat(issues): Switch back from drawers to routes (#79731)

Author: scttcper

static/app/views/issueDetails/groupDetails.tsx

@@ -57,15 +57,11 @@ import useRouter from 'sentry/utils/useRouter';
 import {useUser} from 'sentry/utils/useUser';
 import GroupHeader from 'sentry/views/issueDetails//header';
 import {ERROR_TYPES} from 'sentry/views/issueDetails/constants';
-import {useGroupEventAttachmentsDrawer} from 'sentry/views/issueDetails/groupEventAttachments/useGroupEventAttachmentsDrawer';
-import GroupEventDetails from 'sentry/views/issueDetails/groupEventDetails';
 import {useGroupTagsDrawer} from 'sentry/views/issueDetails/groupTags/useGroupTagsDrawer';
 import SampleEventAlert from 'sentry/views/issueDetails/sampleEventAlert';
-import StreamlinedGroupHeader from 'sentry/views/issueDetails/streamline/header';
+import {GroupDetailsLayout} from 'sentry/views/issueDetails/streamline/groupDetailsLayout';
 import {useMergedIssuesDrawer} from 'sentry/views/issueDetails/streamline/useMergedIssuesDrawer';
-import {useReplaysDrawer} from 'sentry/views/issueDetails/streamline/useReplaysDrawer';
 import {useSimilarIssuesDrawer} from 'sentry/views/issueDetails/streamline/useSimilarIssuesDrawer';
-import {useUserFeedbackDrawer} from 'sentry/views/issueDetails/streamline/useUserFeedbackDrawer';
 import {Tab} from 'sentry/views/issueDetails/types';
 import {makeFetchGroupQueryKey, useGroup} from 'sentry/views/issueDetails/useGroup';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
@@ -622,14 +618,7 @@ function GroupDetailsContent({
   refetchData,
 }: GroupDetailsContentProps) {
   const organization = useOrganization();
-  const router = useRouter();
-  const {openAttachmentDrawer} = useGroupEventAttachmentsDrawer({
-    group,
-    project,
-  });
   const {openTagsDrawer} = useGroupTagsDrawer({group});
-  const {openUserFeedbackDrawer} = useUserFeedbackDrawer({group, project});
-  const {openReplaysDrawer} = useReplaysDrawer({group, project});
   const {openSimilarIssuesDrawer} = useSimilarIssuesDrawer({group, project});
   const {openMergedIssuesDrawer} = useMergedIssuesDrawer({group, project});
   const {isDrawerOpen} = useDrawer();
@@ -645,14 +634,8 @@ function GroupDetailsContent({
       return;
     }
 
-    if (currentTab === Tab.ATTACHMENTS) {
-      openAttachmentDrawer();
-    } else if (currentTab === Tab.TAGS) {
+    if (currentTab === Tab.TAGS) {
       openTagsDrawer();
-    } else if (currentTab === Tab.USER_FEEDBACK) {
-      openUserFeedbackDrawer();
-    } else if (currentTab === Tab.REPLAYS) {
-      openReplaysDrawer();
     } else if (currentTab === Tab.SIMILAR_ISSUES) {
       openSimilarIssuesDrawer();
     } else if (currentTab === Tab.MERGED) {
@@ -662,10 +645,7 @@ function GroupDetailsContent({
     currentTab,
     hasStreamlinedUI,
     isDrawerOpen,
-    openAttachmentDrawer,
     openTagsDrawer,
-    openUserFeedbackDrawer,
-    openReplaysDrawer,
     openSimilarIssuesDrawer,
     openMergedIssuesDrawer,
   ]);
@@ -685,30 +665,14 @@ function GroupDetailsContent({
   };
 
   return hasStreamlinedUI ? (
-    <div>
-      <StreamlinedGroupHeader
-        event={event}
-        group={group}
-        project={project}
-        groupReprocessingStatus={groupReprocessingStatus}
-      />
-      <GroupEventDetails
-        location={router.location}
-        route={router.routes.at(-1)!}
-        router={router}
-        routes={router.routes}
-        routeParams={router.params}
-        params={router.params}
-        organization={organization}
-        event={event!}
-        group={group}
-        project={project}
-        loadingEvent={loadingEvent}
-        eventError={eventError}
-        groupReprocessingStatus={groupReprocessingStatus}
-        onRetry={refetchData}
-      />
-    </div>
+    <GroupDetailsLayout
+      group={group}
+      event={event ?? undefined}
+      project={project}
+      groupReprocessingStatus={groupReprocessingStatus}
+    >
+      {isValidElement(children) ? cloneElement(children, childProps) : children}
+    </GroupDetailsLayout>
   ) : (
     <Tabs
       value={currentTab}

static/app/views/issueDetails/groupEventDetails/groupEventDetails.tsx

@@ -3,18 +3,14 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import isEqual from 'lodash/isEqual';
 
-import Feature from 'sentry/components/acl/feature';
 import ArchivedBox from 'sentry/components/archivedBox';
-import ErrorBoundary from 'sentry/components/errorBoundary';
 import GroupEventDetailsLoadingError from 'sentry/components/errors/groupEventDetailsLoadingError';
 import {withMeta} from 'sentry/components/events/meta/metaProxy';
-import {GroupSummary} from 'sentry/components/group/groupSummary';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {TransactionProfileIdProvider} from 'sentry/components/profiling/transactionProfileIdProvider';
 import ResolutionBox from 'sentry/components/resolutionBox';
-import {t} from 'sentry/locale';
 import useSentryAppComponentsData from 'sentry/stores/useSentryAppComponentsData';
 import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
@@ -28,14 +24,9 @@ import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
 import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import usePrevious from 'sentry/utils/usePrevious';
-import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState';
 import GroupEventDetailsContent from 'sentry/views/issueDetails/groupEventDetails/groupEventDetailsContent';
 import GroupEventHeader from 'sentry/views/issueDetails/groupEventHeader';
 import GroupSidebar from 'sentry/views/issueDetails/groupSidebar';
-import {EventDetailsHeader} from 'sentry/views/issueDetails/streamline/eventDetailsHeader';
-import {IssueEventNavigation} from 'sentry/views/issueDetails/streamline/eventNavigation';
-import {useEventQuery} from 'sentry/views/issueDetails/streamline/eventSearch';
-import StreamlinedSidebar from 'sentry/views/issueDetails/streamline/sidebar';
 
 import ReprocessingProgress from '../reprocessingProgress';
 import {
@@ -80,9 +71,6 @@ function GroupEventDetails(props: GroupEventDetailsProps) {
   const prevEnvironment = usePrevious(environments);
   const prevEvent = usePrevious(event);
   const hasStreamlinedUI = useHasStreamlinedUI();
-  const searchQuery = useEventQuery({group});
-
-  const [sidebarOpen, _] = useSyncedLocalStorageState('issue-details-sidebar-open', true);
 
   // load the data
   useSentryAppComponentsData({projectId});
@@ -168,6 +156,7 @@ function GroupEventDetails(props: GroupEventDetailsProps) {
 
   const eventWithMeta = withMeta(event);
   const issueTypeConfig = getConfigForIssueType(group, project);
+  const LayoutBody = hasStreamlinedUI ? 'div' : StyledLayoutBody;
   const MainLayoutComponent = hasStreamlinedUI ? 'div' : StyledLayoutMain;
 
   return (
@@ -181,11 +170,7 @@ function GroupEventDetails(props: GroupEventDetailsProps) {
         hasData={!loadingEvent && !eventError && defined(eventWithMeta)}
         isLoading={loadingEvent}
       >
-        <StyledLayoutBody
-          data-test-id="group-event-details"
-          hasStreamlinedUi={hasStreamlinedUI}
-          sidebarOpen={sidebarOpen}
-        >
+        <LayoutBody data-test-id="group-event-details">
           {groupReprocessingStatus === ReprocessingStatus.REPROCESSING ? (
             <ReprocessingProgress
               totalEvents={
@@ -208,42 +193,9 @@ function GroupEventDetails(props: GroupEventDetailsProps) {
                     project={project}
                   />
                 )}
-                {hasStreamlinedUI ? (
-                  <EventDetailsHeader event={event} group={group} />
-                ) : null}
-                {hasStreamlinedUI ? (
-                  <GroupContent>
-                    <PageErrorBoundary
-                      mini
-                      message={t('There was an error loading the issue summary')}
-                    >
-                      <Feature features={['organizations:ai-summary']}>
-                        <GroupSummary
-                          groupId={group.id}
-                          groupCategory={group.issueCategory}
-                        />
-                      </Feature>
-                    </PageErrorBoundary>
-                    <div>
-                      <IssueEventNavigation
-                        event={event}
-                        group={group}
-                        query={searchQuery}
-                      />
-                      {renderContent()}
-                    </div>
-                  </GroupContent>
-                ) : (
-                  <GroupContent>{renderContent()}</GroupContent>
-                )}
+                {renderContent()}
               </MainLayoutComponent>
-              {hasStreamlinedUI ? (
-                sidebarOpen ? (
-                  <StyledLayoutSide hasStreamlinedUi={hasStreamlinedUI}>
-                    <StreamlinedSidebar group={group} event={event} project={project} />
-                  </StyledLayoutSide>
-                ) : null
-              ) : (
+              {hasStreamlinedUI ? null : (
                 <StyledLayoutSide hasStreamlinedUi={hasStreamlinedUI}>
                   <GroupSidebar
                     organization={organization}
@@ -256,31 +208,18 @@ function GroupEventDetails(props: GroupEventDetailsProps) {
               )}
             </Fragment>
           )}
-        </StyledLayoutBody>
+        </LayoutBody>
       </VisuallyCompleteWithData>
     </TransactionProfileIdProvider>
   );
 }
 
-const StyledLayoutBody = styled(Layout.Body)<{
-  hasStreamlinedUi: boolean;
-  sidebarOpen: boolean;
-}>`
+const StyledLayoutBody = styled(Layout.Body)`
   /* Makes the borders align correctly */
   padding: 0 !important;
   @media (min-width: ${p => p.theme.breakpoints.large}) {
     align-content: stretch;
   }
-
-  ${p =>
-    p.hasStreamlinedUi &&
-    css`
-      min-height: 100vh;
-      @media (min-width: ${p.theme.breakpoints.large}) {
-        gap: ${space(1.5)};
-        display: ${p.sidebarOpen ? 'grid' : 'block'};
-      }
-    `}
 `;
 
 const GroupStatusBannerWrapper = styled('div')`
@@ -300,20 +239,6 @@ const StyledLayoutMain = styled(Layout.Main)`
   }
 `;
 
-const GroupContent = styled(Layout.Main)`
-  background: ${p => p.theme.backgroundSecondary};
-  display: flex;
-  flex-direction: column;
-  padding: ${space(1.5)};
-  gap: ${space(1.5)};
-  @media (min-width: ${p => p.theme.breakpoints.large}) {
-    border-right: 1px solid ${p => p.theme.translucentBorder};
-  }
-  @media (max-width: ${p => p.theme.breakpoints.large}) {
-    border-bottom-width: 1px solid ${p => p.theme.translucentBorder};
-  }
-`;
-
 const StyledLayoutSide = styled(Layout.Side)<{hasStreamlinedUi: boolean}>`
   ${p =>
     p.hasStreamlinedUi
@@ -333,9 +258,4 @@ const StyledLayoutSide = styled(Layout.Side)<{hasStreamlinedUi: boolean}>`
   }
 `;
 
-const PageErrorBoundary = styled(ErrorBoundary)`
-  margin: 0;
-  border: 1px solid ${p => p.theme.translucentBorder};
-`;
-
 export default GroupEventDetails;