Skip to content

feat(issues): Add context tooltips for issue header status #92081

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 22, 2025
+22 −6
Merged

feat(issues): Add context tooltips for issue header status #92081

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c198374
feat(issues): add context tooltips for issue hader
JoshFerge May 21, 2025
b739ef5
Merge branch 'master' into jferg/learn-more
JoshFerge May 22, 2025
371c105
add more status tooltip messages, and remove other tooltips
JoshFerge May 22, 2025
5495fff
update copy for escalating
JoshFerge May 22, 2025
f54ad18
fix test
JoshFerge May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 36 additions & 9 deletions static/app/views/issueDetails/streamline/header/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@ import ErrorBoundary from 'sentry/components/errorBoundary';
import EventMessage from 'sentry/components/events/eventMessage';
import {getBadgeProperties} from 'sentry/components/group/inboxBadges/statusBadge';
import UnhandledTag from 'sentry/components/group/inboxBadges/unhandledTag';
import ExternalLink from 'sentry/components/links/externalLink';
import Link from 'sentry/components/links/link';
import {TourElement} from 'sentry/components/tours/components';
import {MAX_PICKABLE_DAYS} from 'sentry/constants';
import {IconInfo} from 'sentry/icons';
import {t} from 'sentry/locale';
import {t, tct} from 'sentry/locale';
import HookStore from 'sentry/stores/hookStore';
import {space} from 'sentry/styles/space';
import type {Event} from 'sentry/types/event';
Expand Down Expand Up @@ -156,12 +157,19 @@ export default function StreamlinedGroupHeader({
</StatLink>
))}
</StatTitle>
<EventMessage
data={group}
level={group.level}
message={secondaryTitle}
type={group.type}
/>
<Tooltip
title={t(
'The main message summarizing the event. Typically the error message or log string that triggered this issue.'
)}
isHoverable
>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use skipWrapper where possible which basically just doesn't render an extra span. If you're wrapping a div or an existing span you don't need another span.

Suggested change
<Tooltip
title={t(
'The main message summarizing the event. Typically the error message or log string that triggered this issue.'
)}
isHoverable
>
<Tooltip
title={t(
'The main message summarizing the event. Typically the error message or log string that triggered this issue.'
)}
isHoverable
skipWrapper
>

<EventMessage
data={group}
level={group.level}
message={secondaryTitle}
type={group.type}
/>
</Tooltip>
{issueTypeConfig.eventAndUserCounts.enabled && (
<Fragment>
<StatCount value={eventCount} aria-label={t('Event count')} />
Expand All @@ -178,15 +186,34 @@ export default function StreamlinedGroupHeader({
{statusProps?.status ? (
<Fragment>
<Tooltip title={statusProps?.tooltip}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

double tooltips

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah i did not notice this. when does status show a from this?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like here

sentry/static/app/components/group/inboxBadges/statusBadge.tsx

Lines 51 to 57 in 4525724

tooltip:
substatus === GroupSubstatus.ARCHIVED_FOREVER
? t('Archived forever')
: substatus === GroupSubstatus.ARCHIVED_UNTIL_ESCALATING
? t('Archived until escalating')
: t('Archived until condition met'),
};

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you could add your tooltips there or fallback to a default tooltip or something

<Subtext>{statusProps?.status}</Subtext>
<Subtext>
<Tooltip
isHoverable
title={tct('The status of the issue. [link:Learn more]', {
link: (
<ExternalLink href="https://docs.sentry.io/product/issues/states-triage/" />
),
})}
>
{statusProps?.status}
</Tooltip>
</Subtext>
</Tooltip>
</Fragment>
) : null}
{subtitle && (
<Fragment>
<Divider />
<Subtitle title={subtitle} isHoverable showOnlyOnOverflow delay={1000}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

subtitle here is also a tooltip

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how should we handle this then? render the info tooltip on these only if the overflow tooltip isn't showing?

<Subtext>{subtitle}</Subtext>
<Subtext>
<Tooltip
title={
'Some extra context (function, route, query, etc.) to help you spot where the error happened.'
}
>
{subtitle}
</Tooltip>
</Subtext>
</Subtitle>
</Fragment>
)}
Expand Down
Loading