Skip to content

Commit

Permalink
feat(issues): Switch back from drawers to routes (#79731)
Browse files Browse the repository at this point in the history
  • Loading branch information
@scttcper
scttcper authored Oct 25, 2024
1 parent 7cfcaf3 commit 15f0d52
Show file tree
Hide file tree
Showing 8 changed files with 236 additions and 260 deletions.
56 changes: 10 additions & 46 deletions static/app/views/issueDetails/groupDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();
Expand All @@ -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) {
Expand All @@ -662,10 +645,7 @@ function GroupDetailsContent({
currentTab,
hasStreamlinedUI,
isDrawerOpen,
openAttachmentDrawer,
openTagsDrawer,
openUserFeedbackDrawer,
openReplaysDrawer,
openSimilarIssuesDrawer,
openMergedIssuesDrawer,
]);
Expand All @@ -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}
Expand Down
92 changes: 6 additions & 86 deletions static/app/views/issueDetails/groupEventDetails/groupEventDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 {
Expand Down Expand Up @@ -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});
Expand Down Expand Up @@ -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 (
Expand All @@ -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={
Expand All @@ -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}
Expand All @@ -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')`
Expand All @@ -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
Expand All @@ -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;
94 changes: 0 additions & 94 deletions static/app/views/issueDetails/streamline/eventDetails.spec.tsx
View file

This file was deleted.

Loading

0 comments on commit 15f0d52

Please sign in to comment.