From 6658357dae9517cce936b2415cb3864ac920a59c Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Wed, 28 Aug 2024 08:35:34 +0200 Subject: [PATCH] ref(grouping-title-ui): Remove title tree label code (#76589) --- .../components/eventOrGroupHeader.spec.tsx | 1 - static/app/components/eventOrGroupHeader.tsx | 5 -- .../app/components/eventOrGroupTitle.spec.tsx | 1 - static/app/components/eventOrGroupTitle.tsx | 18 +--- static/app/components/eventTitleTreeLabel.tsx | 82 ------------------- .../events/interfaces/analyzeFrames.spec.tsx | 5 -- .../performance/anrRootCause.spec.tsx | 5 -- .../events/interfaces/threads.spec.tsx | 14 ---- static/app/utils/events.tsx | 73 +---------------- .../views/discover/eventDetails/content.tsx | 2 +- static/app/views/discover/results.tsx | 3 +- static/app/views/discover/utils.tsx | 12 +-- .../app/views/issueDetails/groupDetails.tsx | 2 +- .../teamInsights/teamIssuesAge.tsx | 2 +- .../details/issues/issueSummary.tsx | 1 - 15 files changed, 10 insertions(+), 216 deletions(-) delete mode 100644 static/app/components/eventTitleTreeLabel.tsx diff --git a/static/app/components/eventOrGroupHeader.spec.tsx b/static/app/components/eventOrGroupHeader.spec.tsx index da99699f24c6e..4c319ffae3cee 100644 --- a/static/app/components/eventOrGroupHeader.spec.tsx +++ b/static/app/components/eventOrGroupHeader.spec.tsx @@ -243,7 +243,6 @@ describe('EventOrGroupHeader', function () { type: 'ReferenceError', filename: 'webpack-internal:///./app/components/tabs/tabList.tsx', function: 'useOverflowTabs', - display_title_with_tree_label: false, }, actor: UserFixture(), isTombstone: true, diff --git a/static/app/components/eventOrGroupHeader.tsx b/static/app/components/eventOrGroupHeader.tsx index 44786477a2083..8e5a88f9aa417 100644 --- a/static/app/components/eventOrGroupHeader.tsx +++ b/static/app/components/eventOrGroupHeader.tsx @@ -22,8 +22,6 @@ interface EventOrGroupHeaderProps { data: Event | Group | GroupTombstoneHelper; organization: Organization; eventId?: string; - /* is issue breakdown? */ - grouping?: boolean; hideIcons?: boolean; hideLevel?: boolean; index?: number; @@ -44,7 +42,6 @@ function EventOrGroupHeader({ onClick, hideIcons, eventId, - grouping = false, source, }: EventOrGroupHeaderProps) { const location = useLocation(); @@ -61,11 +58,9 @@ function EventOrGroupHeader({ } mini> diff --git a/static/app/components/eventOrGroupTitle.spec.tsx b/static/app/components/eventOrGroupTitle.spec.tsx index 92a75e3234f23..98ce497e67618 100644 --- a/static/app/components/eventOrGroupTitle.spec.tsx +++ b/static/app/components/eventOrGroupTitle.spec.tsx @@ -114,7 +114,6 @@ describe('EventOrGroupTitle', function () { type: 'ReferenceError', filename: 'webpack-internal:///./app/components/tabs/tabList.tsx', function: 'useOverflowTabs', - display_title_with_tree_label: false, }, actor: UserFixture(), isTombstone: true, diff --git a/static/app/components/eventOrGroupTitle.tsx b/static/app/components/eventOrGroupTitle.tsx index 8495736bc95f6..22bb487b7098b 100644 --- a/static/app/components/eventOrGroupTitle.tsx +++ b/static/app/components/eventOrGroupTitle.tsx @@ -3,39 +3,27 @@ import styled from '@emotion/styled'; import type {Event} from 'sentry/types/event'; import type {BaseGroup, GroupTombstoneHelper} from 'sentry/types/group'; -import type {Organization} from 'sentry/types/organization'; import {getTitle, isTombstone} from 'sentry/utils/events'; -import withOrganization from 'sentry/utils/withOrganization'; -import EventTitleTreeLabel from './eventTitleTreeLabel'; import GroupPreviewTooltip from './groupPreviewTooltip'; interface EventOrGroupTitleProps { data: Event | BaseGroup | GroupTombstoneHelper; - organization: Organization; className?: string; - /* is issue breakdown? */ - grouping?: boolean; query?: string; withStackTracePreview?: boolean; } function EventOrGroupTitle({ - organization, data, withStackTracePreview, - grouping = false, className, query, }: EventOrGroupTitleProps) { const {id, groupID} = data as Event; - const {title, subtitle, treeLabel} = getTitle(data, organization?.features, grouping); - const titleLabel = treeLabel ? ( - - ) : ( - title ?? '' - ); + const {title, subtitle} = getTitle(data); + const titleLabel = title ?? ''; return ( @@ -62,7 +50,7 @@ function EventOrGroupTitle({ ); } -export default withOrganization(EventOrGroupTitle); +export default EventOrGroupTitle; /** *   is used instead of margin/padding to split title and subtitle diff --git a/static/app/components/eventTitleTreeLabel.tsx b/static/app/components/eventTitleTreeLabel.tsx deleted file mode 100644 index 554815a826238..0000000000000 --- a/static/app/components/eventTitleTreeLabel.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import {Fragment} from 'react'; -import styled from '@emotion/styled'; - -import {space} from 'sentry/styles/space'; -import type {TreeLabelPart} from 'sentry/types/event'; -import {getTreeLabelPartDetails} from 'sentry/utils/events'; - -type Props = { - treeLabel: TreeLabelPart[]; -}; - -function EventTitleTreeLabel({treeLabel}: Props) { - const firstFourParts = treeLabel.slice(0, 4); - const remainingParts = treeLabel.slice(firstFourParts.length); - - return ( - - - {firstFourParts.map((part, index) => { - const label = getTreeLabelPartDetails(part); - if (index !== firstFourParts.length - 1) { - return ( - - {label} - {'|'} - - ); - } - return {label}; - })} - - {!!remainingParts.length && ( - - {remainingParts.map((part, index) => { - const label = getTreeLabelPartDetails(part); - return ( - - {'|'} - - - ); - })} - - )} - - ); -} - -export default EventTitleTreeLabel; - -const Wrapper = styled('div')` - display: inline-grid; - grid-template-columns: auto 1fr; - align-items: center; -`; - -const FirstFourParts = styled('div')` - display: inline-grid; - grid-auto-flow: column; - align-items: center; -`; - -const Label = styled('div')` - display: inline-block; -`; - -const PriorityLabel = styled(Label)` - ${p => p.theme.overflowEllipsis} - display: inline-block; -`; - -const RemainingLabels = styled('div')` - ${p => p.theme.overflowEllipsis} - display: inline-block; - min-width: 50px; -`; - -export const Divider = styled('div')` - color: ${p => p.theme.gray200}; - display: inline-block; - padding: 0 ${space(1)}; -`; diff --git a/static/app/components/events/interfaces/analyzeFrames.spec.tsx b/static/app/components/events/interfaces/analyzeFrames.spec.tsx index 8a1a0fc92cae7..3b4845adf0931 100644 --- a/static/app/components/events/interfaces/analyzeFrames.spec.tsx +++ b/static/app/components/events/interfaces/analyzeFrames.spec.tsx @@ -88,12 +88,7 @@ const makeEventWithFrames = (frames: Frame[]): Event => { packages: {}, type: EventOrGroupType.ERROR, metadata: { - display_title_with_tree_label: false, filename: 'sentry/controllers/welcome_controller.rb', - finest_tree_label: [ - {filebase: 'welcome_controller.rb', function: '/'}, - {filebase: 'welcome_controller.rb', function: 'index'}, - ], function: '/', type: 'ZeroDivisionError', value: 'divided by 0', diff --git a/static/app/components/events/interfaces/performance/anrRootCause.spec.tsx b/static/app/components/events/interfaces/performance/anrRootCause.spec.tsx index c77ec4dc3ac19..30ad7e60148fc 100644 --- a/static/app/components/events/interfaces/performance/anrRootCause.spec.tsx +++ b/static/app/components/events/interfaces/performance/anrRootCause.spec.tsx @@ -124,12 +124,7 @@ const makeEventWithThreads = (threads: Thread[]): Event => { packages: {}, type: EventOrGroupType.ERROR, metadata: { - display_title_with_tree_label: false, filename: 'sentry/controllers/welcome_controller.rb', - finest_tree_label: [ - {filebase: 'welcome_controller.rb', function: '/'}, - {filebase: 'welcome_controller.rb', function: 'index'}, - ], function: '/', type: 'ZeroDivisionError', value: 'divided by 0', diff --git a/static/app/components/events/interfaces/threads.spec.tsx b/static/app/components/events/interfaces/threads.spec.tsx index 451d993290f41..db8abf010676d 100644 --- a/static/app/components/events/interfaces/threads.spec.tsx +++ b/static/app/components/events/interfaces/threads.spec.tsx @@ -188,12 +188,7 @@ describe('Threads', function () { packages: {}, type: EventOrGroupType.ERROR, metadata: { - display_title_with_tree_label: false, filename: 'sentry/controllers/welcome_controller.rb', - finest_tree_label: [ - {filebase: 'welcome_controller.rb', function: '/'}, - {filebase: 'welcome_controller.rb', function: 'index'}, - ], function: '/', type: 'ZeroDivisionError', value: 'divided by 0', @@ -828,15 +823,6 @@ describe('Threads', function () { }, type: EventOrGroupType.ERROR, metadata: { - display_title_with_tree_label: true, - finest_tree_label: [ - { - function: 'ViewController.causeCrash', - }, - { - function: 'main', - }, - ], function: 'ViewController.causeCrash', value: 'Attempted to dereference null pointer.\nOriginated at or in a subcall of ViewController.causeCrash(Any) -> ()', diff --git a/static/app/utils/events.tsx b/static/app/utils/events.tsx index d2e25065ea2b5..3e9256edc2b23 100644 --- a/static/app/utils/events.tsx +++ b/static/app/utils/events.tsx @@ -5,11 +5,9 @@ import type { EntryRequest, EntryThreads, Event, - EventMetadata, ExceptionValue, Frame, Thread, - TreeLabelPart, } from 'sentry/types/event'; import {EntryType, EventOrGroupType} from 'sentry/types/event'; import type { @@ -76,55 +74,7 @@ export function getLocation(event: Event | BaseGroup | GroupTombstoneHelper) { return undefined; } -export function getTreeLabelPartDetails(part: TreeLabelPart) { - // Note: This function also exists in Python in eventtypes/base.py, to make - // porting efforts simpler it's recommended to keep both variants - // structurally similar. - if (typeof part === 'string') { - return part; - } - - const label = part?.function || part?.package || part?.filebase || part?.type; - const classbase = part?.classbase; - - if (classbase) { - return label ? `${classbase}.${label}` : classbase; - } - - return label || ''; -} - -function computeTitleWithTreeLabel(metadata: EventMetadata) { - const {type, current_tree_label, finest_tree_label} = metadata; - - const treeLabel = current_tree_label || finest_tree_label; - - const formattedTreeLabel = treeLabel - ? treeLabel.map(labelPart => getTreeLabelPartDetails(labelPart)).join(' | ') - : undefined; - - if (!type) { - return { - title: formattedTreeLabel || metadata.function || '', - treeLabel, - }; - } - - if (!formattedTreeLabel) { - return {title: type, treeLabel: undefined}; - } - - return { - title: `${type} | ${formattedTreeLabel}`, - treeLabel: [{type}, ...(treeLabel ?? [])], - }; -} - -export function getTitle( - event: Event | BaseGroup | GroupTombstoneHelper, - features: string[] = [], - grouping = false -) { +export function getTitle(event: Event | BaseGroup | GroupTombstoneHelper) { const {metadata, type, culprit, title} = event; const customTitle = metadata?.title; @@ -134,28 +84,12 @@ export function getTitle( return { title: customTitle, subtitle: culprit, - treeLabel: undefined, - }; - } - - const displayTitleWithTreeLabel = - !isTombstone(event) && - features.includes('grouping-title-ui') && - (grouping || - isNativePlatform(event.platform) || - isMobilePlatform(event.platform)); - - if (displayTitleWithTreeLabel) { - return { - subtitle: culprit, - ...computeTitleWithTreeLabel(metadata), }; } return { subtitle: culprit, title: metadata.type || metadata.function || '', - treeLabel: undefined, }; } case EventOrGroupType.CSP: @@ -163,7 +97,6 @@ export function getTitle( return { title: customTitle ?? metadata.directive ?? '', subtitle: metadata.uri ?? '', - treeLabel: undefined, }; case EventOrGroupType.EXPECTCT: case EventOrGroupType.EXPECTSTAPLE: @@ -174,13 +107,11 @@ export function getTitle( return { title: customTitle ?? (metadata.message || title), subtitle: metadata.origin ?? '', - treeLabel: undefined, }; case EventOrGroupType.DEFAULT: return { title: customTitle ?? title, subtitle: '', - treeLabel: undefined, }; case EventOrGroupType.TRANSACTION: case EventOrGroupType.GENERIC: @@ -188,13 +119,11 @@ export function getTitle( return { title: customTitle ?? title, subtitle: isIssue ? culprit : '', - treeLabel: undefined, }; default: return { title: customTitle ?? title, subtitle: '', - treeLabel: undefined, }; } } diff --git a/static/app/views/discover/eventDetails/content.tsx b/static/app/views/discover/eventDetails/content.tsx index e65a1e99f708b..13b886472e184 100644 --- a/static/app/views/discover/eventDetails/content.tsx +++ b/static/app/views/discover/eventDetails/content.tsx @@ -356,7 +356,7 @@ function EventDetailsContent(props: Props) { const eventSlug = getEventSlug(); const projectSlug = eventSlug.split(':')[0]; - const title = generateTitle({eventView, event, organization}); + const title = generateTitle({eventView, event}); return ( { }; getDocumentTitle(): string { - const {organization} = this.props; const {eventView} = this.state; if (!eventView) { return ''; } - return generateTitle({eventView, organization}); + return generateTitle({eventView}); } renderTagsTable() { diff --git a/static/app/views/discover/utils.tsx b/static/app/views/discover/utils.tsx index a5ebb9a0aae55..04e5c7f1f9dd6 100644 --- a/static/app/views/discover/utils.tsx +++ b/static/app/views/discover/utils.tsx @@ -141,15 +141,7 @@ export function pushEventViewToLocation(props: { }); } -export function generateTitle({ - eventView, - event, - organization, -}: { - eventView: EventView; - event?: Event; - organization?: Organization; -}) { +export function generateTitle({eventView, event}: {eventView: EventView; event?: Event}) { const titles = [t('Discover')]; const eventViewName = eventView.name; @@ -157,7 +149,7 @@ export function generateTitle({ titles.push(String(eventViewName).trim()); } - const eventTitle = event ? getTitle(event, organization?.features).title : undefined; + const eventTitle = event ? getTitle(event).title : undefined; if (eventTitle) { titles.push(eventTitle); diff --git a/static/app/views/issueDetails/groupDetails.tsx b/static/app/views/issueDetails/groupDetails.tsx index d8f69e7381993..34a8a0a4ae8be 100644 --- a/static/app/views/issueDetails/groupDetails.tsx +++ b/static/app/views/issueDetails/groupDetails.tsx @@ -841,7 +841,7 @@ function GroupDetails(props: GroupDetailsProps) { return defaultTitle; } - const {title} = getTitle(group, organization?.features); + const {title} = getTitle(group); const message = getMessage(group); const eventDetails = `${organization.slug} — ${group.project.slug}`; diff --git a/static/app/views/organizationStats/teamInsights/teamIssuesAge.tsx b/static/app/views/organizationStats/teamInsights/teamIssuesAge.tsx index 1da517f7185dc..189e5c8777c4d 100644 --- a/static/app/views/organizationStats/teamInsights/teamIssuesAge.tsx +++ b/static/app/views/organizationStats/teamInsights/teamIssuesAge.tsx @@ -143,7 +143,7 @@ function TeamIssuesAge({organization, teamSlug}: TeamIssuesAgeProps) { isLoading={isLoading} > {oldestIssues?.map(issue => { - const {title} = getTitle(issue, organization?.features, false); + const {title} = getTitle(issue); return ( diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/issues/issueSummary.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/issues/issueSummary.tsx index 047b65b2d45fd..321c9aa89ec31 100644 --- a/static/app/views/performance/newTraceDetails/traceDrawer/details/issues/issueSummary.tsx +++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/issues/issueSummary.tsx @@ -40,7 +40,6 @@ function IssueTitleChildren(props: IssueTitleChildrenProps) { } mini>