Skip to content

fix(superuser): improve banner ux #115168

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
priscilawebdev merged 5 commits into from
May 12, 2026
Merged

fix(superuser): improve banner ux #115168

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2a5b0f6
fix(superuser): improve banner ux
priscilawebdev May 8, 2026
cbba820
fix(superuser): clarify banner hover hint copy
priscilawebdev May 8, 2026
c95b106
Update static/gsApp/components/superuser/superuserWarning.tsx
priscilawebdev May 12, 2026
56200f4
ref(superuser): use useResizeObserver hook
priscilawebdev May 12, 2026
11b9b8f
fix(superuser): refine banner hover hint copy
priscilawebdev May 12, 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
41 changes: 34 additions & 7 deletions static/gsApp/components/superuser/superuserWarning.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {Fragment, useEffect} from 'react';
import {Fragment, useEffect, useRef, useState} from 'react';
import {keyframes} from '@emotion/react';
import {useTheme} from '@emotion/react';
import styled from '@emotion/styled';
import {useResizeObserver} from '@react-aria/utils';

import {Badge} from '@sentry/scraps/badge';
import {Button} from '@sentry/scraps/button';
Expand All @@ -19,7 +20,7 @@ import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFea
const POLICY_URL =
'https://www.notion.so/sentry/Sentry-Rules-for-Handling-Customer-Data-9612532c37e14eeb943a6a584abbac99';

const SUPERUSER_MESSAGE = 'You are in superuser mode';
const SUPERUSER_MESSAGE = 'You are in superuser mode / Hover to exit or learn more';
const SUPERUSER_SEPARATOR = ' ///// ';
const WARNING_MESSAGE = (
<Fragment>
Expand Down Expand Up @@ -73,6 +74,29 @@ export function SuperuserWarning({organization, className}: Props) {
const hasPageFrame = useHasPageFrameFeature();
const isExcludedOrg = shouldExcludeOrg(organization);

const stripRef = useRef<HTMLDivElement>(null);
const textRef = useRef<HTMLSpanElement>(null);
const [marqueeCount, setMarqueeCount] = useState(8);

useResizeObserver({
ref: stripRef,
onResize() {
const strip = stripRef.current;
const text = textRef.current;
if (!strip || !text) {
return;
}
const stripWidth = strip.clientWidth;
if (!stripWidth || !text.offsetWidth) {
return;
}
setMarqueeCount(currentCount => {
const repWidth = text.offsetWidth / currentCount;
Comment thread
sentry[bot] marked this conversation as resolved.
return repWidth ? Math.ceil(stripWidth / repWidth) + 2 : currentCount;
});
Comment on lines +93 to +96
Copy link
Copy Markdown
Contributor

@sentry sentry Bot May 12, 2026

Choose a reason for hiding this comment

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

Bug: Reading text.offsetWidth inside the setMarqueeCount functional updater can cause a race condition during rapid resizes, as the DOM may not reflect the pending state.
Severity: LOW

Suggested Fix

Capture the text.offsetWidth value before calling setMarqueeCount. Pass this measurement into the state updater or use it to calculate the new count outside the updater. This ensures that the DOM measurement corresponds to the state that was rendered when the measurement was taken, avoiding reliance on currentCount inside the updater for this calculation.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.

Location: static/gsApp/components/superuser/superuserWarning.tsx#L93-L96

Potential issue: The `setMarqueeCount` functional updater reads `text.offsetWidth`
directly from the DOM. During rapid viewport resizing, multiple `ResizeObserver`
callbacks can queue state updates before React commits any DOM changes. This creates a
race condition where the updater's `currentCount` argument reflects a pending state, but
`text.offsetWidth` reflects the older, committed DOM state. As a result, the calculation
`repWidth = text.offsetWidth / currentCount` is incorrect, leading to a miscalculation
of the required repetitions and causing visible gaps or unnecessary DOM nodes in the
marquee.

},
});

useEffect(() => {
if (!isExcludedOrg) {
AlertStore.addAlert({
Expand Down Expand Up @@ -109,16 +133,18 @@ export function SuperuserWarning({organization, className}: Props) {
>
<Tooltip
isHoverable
position="top-start"
position="bottom-start"
containerDisplayMode="block"
title={
<TooltipContent>
<Content>{WARNING_MESSAGE}</Content>
<ExitSuperuserButton />
</TooltipContent>
}
>
<MarqueeStrip align="baseline" overflow="hidden">
<MarqueeStrip ref={stripRef} align="baseline" overflow="hidden">
<MarqueeText
ref={textRef}
wrap="nowrap"
monospace
bold
Expand All @@ -129,9 +155,7 @@ export function SuperuserWarning({organization, className}: Props) {
} as React.CSSProperties
}
>
{Array.from({length: 8}, () => SUPERUSER_MESSAGE).join(
SUPERUSER_SEPARATOR
)}
{`${SUPERUSER_MESSAGE}${SUPERUSER_SEPARATOR}`.repeat(marqueeCount)}
</MarqueeText>
</MarqueeStrip>
</Tooltip>
Expand Down Expand Up @@ -187,6 +211,8 @@ const Frame = styled(Container)`
/* Ensures it stays on top of all content */
z-index: 9999;
border-width: ${p => p.theme.border.xl};
/* Keep the marquee strip pinned to the top so the tooltip anchors there too */
align-items: flex-start;
`;

const MarqueeStrip = styled(Flex)`
Expand All @@ -197,6 +223,7 @@ const MarqueeStrip = styled(Flex)`
flex-shrink: 0;
/* Re-enable pointer events so the tooltip is hoverable */
pointer-events: auto;
cursor: help;
`;

const MarqueeText = styled(Text)`
Expand Down
Loading