Skip to content

fix(issues): Clean up tags drawer header #117777

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
scttcper merged 2 commits into from
Jun 16, 2026
Merged

fix(issues): Clean up tags drawer header #117777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2369886
fix(issues): Clean up tags drawer header
scttcper Jun 16, 2026
7c325a6
ref(issues): Remove unused drawer sticky controls
scttcper Jun 16, 2026
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
21 changes: 5 additions & 16 deletions static/app/components/events/eventDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFea

export const Header = styled('h3')`
display: block;
min-width: 0;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: ${p => p.theme.font.size.xl};
font-weight: ${p => p.theme.font.weight.sans.medium};
margin: 0;
Expand Down Expand Up @@ -103,22 +108,6 @@ export const EventNavigator = styled('div')`
);
`;

export const EventStickyControls = styled('div')`
display: flex;
justify-content: space-between;
gap: ${p => p.theme.space.md};
position: sticky;
top: -${p => p.theme.space.xl};
margin-block: -${p => p.theme.space.xl};
padding-block: ${p => p.theme.space.xl};
background: ${p => p.theme.tokens.background.primary};
z-index: 1; /* Just below EventNavigator */

/* Make this full-width inside DrawerBody */
margin-inline: -24px;
padding-inline: 24px;
`;

export const EventDrawerBody = styled(DrawerBody)`
overflow: auto;
overscroll-behavior: contain;
Expand Down
71 changes: 33 additions & 38 deletions static/app/views/issueDetails/groupDistributions/flagsDistributionDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,16 @@ import {AnalyticsArea} from 'sentry/components/analyticsArea';
import {
EventDrawerBody,
EventNavigator,
EventStickyControls,
Header,
} from 'sentry/components/events/eventDrawer';
import {FeatureFlagSort} from 'sentry/components/events/featureFlags/featureFlagSort';
import {OrderBy} from 'sentry/components/events/featureFlags/utils';
import {t} from 'sentry/locale';
import {t, tct} from 'sentry/locale';
import type {Group} from 'sentry/types/group';
import type {Organization} from 'sentry/types/organization';
import {trackAnalytics} from 'sentry/utils/analytics';
import {useParams} from 'sentry/utils/useParams';
import {GroupDistributionsSearchInput} from 'sentry/views/issueDetails/groupDistributions/groupDistributionsSearchInput';
import {HeaderTitle} from 'sentry/views/issueDetails/groupDistributions/headerTitle';
import {TagFlagPicker} from 'sentry/views/issueDetails/groupDistributions/tagFlagPicker';
import {DrawerTab} from 'sentry/views/issueDetails/groupDistributions/types';
import {FlagDetailsDrawerContent} from 'sentry/views/issueDetails/groupFeatureFlags/details/flagDetailsDrawerContent';
Expand Down Expand Up @@ -50,45 +49,41 @@ export function FlagsDistributionDrawer({group, organization, setTab}: Props) {
return (
<Fragment>
<EventNavigator>
<HeaderTitle
tagKey={tagKey}
tab={DrawerTab.FEATURE_FLAGS}
includeFeatureFlagsTab
/>
</EventNavigator>
<EventDrawerBody>
<Header>
{tagKey
? tct('Feature Flag Details - [tagKey]', {tagKey})
: t('Tags & Feature Flags')}
</Header>
{tagKey ? null : (
<EventStickyControls>
<Grid flow="column" align="center" gap="md" marginLeft="auto">
<TagFlagPicker setTab={setTab} tab={DrawerTab.FEATURE_FLAGS} />
<GroupDistributionsSearchInput
includeFeatureFlagsTab
search={search}
onChange={value => {
setSearch(value);
trackAnalytics('tags.drawer.action', {
control: 'search',
organization,
});
}}
/>

<Grid flow="column" align="center" gap="md">
<GroupDistributionsSearchInput
includeFeatureFlagsTab
search={search}
onChange={value => {
setSearch(value);
trackAnalytics('tags.drawer.action', {
control: 'search',
organization,
});
}}
/>

<FeatureFlagSort
orderBy={orderBy}
setOrderBy={value => {
setOrderBy(value);
trackAnalytics('flags.sort_flags', {
organization,
sortMethod: value as string,
});
}}
orderByOptions={orderByOptions}
/>
</Grid>
</EventStickyControls>
<FeatureFlagSort
orderBy={orderBy}
setOrderBy={value => {
setOrderBy(value);
trackAnalytics('flags.sort_flags', {
organization,
sortMethod: value as string,
});
}}
orderByOptions={orderByOptions}
/>
</Grid>
)}

</EventNavigator>
<EventDrawerBody>
{tagKey ? (
<AnalyticsArea name="feature_flag_details">
<FlagDetailsDrawerContent group={group} />
Expand Down
39 changes: 0 additions & 39 deletions static/app/views/issueDetails/groupDistributions/headerTitle.tsx
View file
Open in desktop

This file was deleted.

69 changes: 31 additions & 38 deletions static/app/views/issueDetails/groupDistributions/tagsDistributionDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ import {Tooltip} from '@sentry/scraps/tooltip';
import {
EventDrawerBody,
EventNavigator,
EventStickyControls,
Header,
} from 'sentry/components/events/eventDrawer';
import {IconSort} from 'sentry/icons';
import {t, tct} from 'sentry/locale';
import type {Group} from 'sentry/types/group';
import type {Organization} from 'sentry/types/organization';
import type {Project} from 'sentry/types/project';
import {trackAnalytics} from 'sentry/utils/analytics';
import {useParams} from 'sentry/utils/useParams';
import {GroupDistributionsSearchInput} from 'sentry/views/issueDetails/groupDistributions/groupDistributionsSearchInput';
import {HeaderTitle} from 'sentry/views/issueDetails/groupDistributions/headerTitle';
import {TagExportDropdown} from 'sentry/views/issueDetails/groupDistributions/tagExportDropdown';
import {TagFlagPicker} from 'sentry/views/issueDetails/groupDistributions/tagFlagPicker';
import {DrawerTab} from 'sentry/views/issueDetails/groupDistributions/types';
Expand Down Expand Up @@ -47,11 +47,13 @@ export function TagsDistributionDrawer({
return (
<Fragment>
<EventNavigator>
<HeaderTitle
tagKey={tagKey}
tab={DrawerTab.TAGS}
includeFeatureFlagsTab={includeFeatureFlagsTab}
/>
<Header>
{tagKey
? tct('Tag Details - [tagKey]', {tagKey})
: includeFeatureFlagsTab
? t('Tags & Feature Flags')
: t('All Tags')}
</Header>

{tagKey ? (
<TagExportDropdown
Expand All @@ -60,40 +62,31 @@ export function TagsDistributionDrawer({
group={group}
tagKey={tagKey}
/>
) : null}
</EventNavigator>
<EventDrawerBody>
{tagKey ? null : (
<EventStickyControls>
) : (
<Grid flow="column" align="center" gap="md" marginLeft="auto">
{includeFeatureFlagsTab ? (
<TagFlagPicker setTab={setTab} tab={DrawerTab.TAGS} />
) : (
<div />
)}

<Grid flow="column" align="center" gap="md">
<GroupDistributionsSearchInput
includeFeatureFlagsTab={includeFeatureFlagsTab}
search={search}
onChange={value => {
setSearch(value);
trackAnalytics('tags.drawer.action', {
control: 'search',
organization,
});
}}
/>
{includeFeatureFlagsTab ? (
<Fragment>
<Tooltip title="Highlighted tags are shown first">
<Button aria-label="" disabled size="xs" icon={<IconSort />} />
</Tooltip>
</Fragment>
) : null}
</Grid>
</EventStickyControls>
) : null}
<GroupDistributionsSearchInput
includeFeatureFlagsTab={includeFeatureFlagsTab}
search={search}
onChange={value => {
setSearch(value);
trackAnalytics('tags.drawer.action', {
control: 'search',
organization,
});
}}
/>
{includeFeatureFlagsTab ? (
<Tooltip title="Highlighted tags are shown first">
<Button aria-label="" disabled size="xs" icon={<IconSort />} />
</Tooltip>
) : null}
</Grid>
)}

</EventNavigator>
<EventDrawerBody>
{tagKey ? (
<TagDetailsDrawerContent group={group} />
) : (
Expand Down
4 changes: 2 additions & 2 deletions static/app/views/issueDetails/groupTags/tagDetailsDrawerContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -395,10 +395,10 @@ const Header = styled(Body)`

const Row = styled(Body)`
&:nth-child(even) {
background: ${p => p.theme.tokens.background.secondary};
background: ${p => p.theme.tokens.background.tertiary};
}
align-items: center;
border-radius: 4px;
border-radius: ${p => p.theme.radius.md};
padding: ${p => p.theme.space['2xs']} ${p => p.theme.space.md};

.invisible {
Expand Down
11 changes: 7 additions & 4 deletions static/app/views/issueDetails/groupTags/tagDistribution.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,17 +147,20 @@ const TagValueContent = styled('div')`
grid-template-columns: 4fr auto ${progressBarWidth};
color: ${p => p.theme.tokens.content.secondary};
grid-column-gap: ${p => p.theme.space.md};

& > :nth-child(2n) {
background-color: ${p => p.theme.tokens.background.secondary};
}
`;

const TagValueRow = styled('div')`
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
padding: 0 ${p => p.theme.space.sm};
margin: 0 -${p => p.theme.space.sm};
border-radius: ${p => p.theme.radius.md};

&:hover {
background-color: ${p => p.theme.tokens.background.tertiary};
}
`;

const TagValue = styled('div')`
Expand Down
Loading