Conversation
…se bugs Bug 1: Clicking an event in the session replay event list opened the sub-panel on the Session Replay tab (instead of the default tab) because both panels shared the same 'sidePanelTab' URL query parameter. Setting isNestedPanel=true makes the sub-panel use local state for its tab, defaulting to the appropriate tab for the source kind. Bug 2: Switching tabs in the sub-panel (e.g., to Overview) modified the shared sidePanelTab query param, causing the parent panel to switch away from Session Replay. This unmounted SessionSubpanel, leaving the subDrawerOpen state stuck at true, which disabled both ESC and overlay-click closing. With isNestedPanel=true, the sub-panel no longer affects the parent's tab state. Also adds a cleanup effect to reset setDrawerOpen(false) on unmount as a safety measure. Co-authored-by: Mike Shi <mike@hyperdx.io>
|
Cursor Agent can help with this pull request. Just |
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
E2E Test Results✅ All tests passed • 88 passed • 3 skipped • 896s
Tests ran across 4 shards in parallel. |
…ub-panel The isNestedPanel flag bundles two behaviors: (1) using local tab state and (2) disabling the overlay. For the session replay sub-panel, we need local tab state (to avoid conflicts with the parent's sidePanelTab query param) but ALSO need the overlay for proper close behavior. Without the overlay: - Users can't click outside the sub-panel to close it - Mantine's modal stacking doesn't properly track the sub-panel, causing ESC to close all drawers instead of just the topmost one The new withOverlay prop overrides the default (!isNestedPanel) behavior, allowing isNestedPanel=true with withOverlay=true. Co-authored-by: Mike Shi <mike@hyperdx.io>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
✅ No critical issues found.
The fix is minimal, targeted, and correctly addresses both described bugs:
isNestedPanel={true}properly isolates the nested panel's tab state touseStateinstead of URL query params (line 165-174 ofDBRowSidePanel.tsx), preventing thesidePanelTabconflict with the parent panel.withOverlay ?? !isNestedPanelmaintains backward compatibility for all existing callers while allowing the new explicitwithOverlay={true}override fromSessionSubpanel.- Cleanup
useEffectcorrectly resets the parent'ssubDrawerOpenstate on unmount, preventing the stuck-unclosable state. The[setDrawerOpen]dependency is stable (it's auseStatesetter passed as a prop), so this is correct.
One minor observation: withOverlay is a new prop added to DBRowSidePanel solely for this one call site. If this pattern recurs, it may be worth documenting when to use it, but it's not a blocking concern.
2 participants
Fixes two bugs in session replay event inspection by making the event detail panel a nested panel, preventing URL query parameter conflicts.
The
DBRowSidePanelfor event details was missingisNestedPanel={true}, causing it to share thesidePanelTabURL query parameter with the parent panel. This led to the event panel opening on the wrong tab (Bug 1) and becoming unclosable after tab switching because the parent panel would unmount the sub-panel, leaving itssubDrawerOpenstate stuck (Bug 2). SettingisNestedPanel={true}isolates the nested panel's tab state, resolving both issues. A cleanup effect was also added to ensuresubDrawerOpenis reset on unmount.Linear Issue: HDX-3481