fix: render side panel controls in error state

[pulpdrew]

Summary

When a search-page row triggers a side-panel error ("Error loading row data"), the drawer became difficult to close: there was no close button, clicking outside did nothing (the drawer intentionally disables its overlay). Escape key worked, but was non-obvious.

The root cause is in DBRowSidePanel.tsx (DBRowSidePanelInner): the !isRowSuccess branches rendered only the error/loading body inside a Box, with no header.

This PR renders that same header in both !isRowSuccess branches (the ClickHouseQueryError/Error state and the generic fallback), so the user can always close the panel or navigate back via the breadcrumbs.

Screenshots or video

Before:

After:

References

• Linear Issue: HDX-4774
• Related PRs:

[changeset-bot]

🦋 Changeset detected

Latest commit: 7ce7be9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@hyperdx/app	Patch
@hyperdx/api	Patch
@hyperdx/otel-collector	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Jul 14, 2026 3:05pm
hyperdx-storybook	Ready	Preview, Comment	Jul 14, 2026 3:05pm

[greptile-apps]

Greptile Summary

This PR restores side-panel controls when row data fails to load. The main changes are:

• Reuses a memoized header across side-panel states.
• Shows close, back, and width controls in both row-error branches.
• Adds a patch changeset for @hyperdx/app.

Confidence Score: 5/5

This looks safe to merge.

• The error states now expose the same close and navigation controls as successful states.
• The memoized header tracks the values needed for current callbacks, breadcrumbs, and width state.
• No blocking issues were found in the changed code.

Important Files Changed

Filename	Overview
packages/app/src/components/DBRowSidePanel.tsx	Reuses the side-panel header and renders it in both row-data error states.
.changeset/fix-side-drawer-error-close.md	Adds a patch release note for the side-panel control fix.

_{Reviews (3): Last reviewed commit: "Merge branch 'main' into cursor/fix-side..." | Re-trigger Greptile}

[github-actions]

E2E Test Results

✅ All tests passed • 237 passed • 3 skipped • 1444s

Status	Count
✅ Passed	237
❌ Failed	0
⚠️ Flaky	1
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →

[github-actions]

🔵 Tier 2 — Low Risk

Small, isolated change with no API route or data model modifications.

Why this tier:

• Standard feature/fix — introduces new logic or modifies core functionality

Review process: AI review + quick human skim (target: 5–15 min). Reviewer validates AI assessment and checks for domain-specific concerns.
SLA: Resolve within 4 business hours.

Stats

• Production files changed: 1
• Production lines changed: 58
• Branch: cursor/fix-side-drawer-error-close-a552
• Author: pulpdrew

To override this classification, remove the review/tier-2 label and apply a different review/tier-* label. Manual overrides are preserved on subsequent pushes.

[github-actions]

Deep Review

✅ No critical issues found.

This is a clean, low-risk UI refactor. The header controls (breadcrumbs + close/full-width actions) are extracted into a controls useMemo declared unconditionally before every early return, so there is no React hooks-order violation. Its dependency array [allBreadcrumbs, handlePanelBack, onClose, isFullWidth, onToggleFullWidth] exactly matches the values closed over, and all referenced identifiers are defined earlier in the component. The error-state branches now invoke the same handlers already wired in the success branch, so no new handler paths are introduced. The change is a net de-duplication and the changeset is format-compliant (@hyperdx/app, patch).

🟡 P2 -- recommended

• packages/app/src/components/DBRowSidePanel.tsx:671 -- The new controls rendering in the isRowError/rowError branch and the generic Error loading row data fallback has no test coverage; existing specs only drive the isStackSourceMissing branch and never set the row query to an error state.
  • Fix: Add a test that sets the row-data mock to an error state and, separately, to a non-success/non-error state, asserting the Back/Close/full-width controls render alongside the error body.
  • _{testing, maintainability, correctness, kieran-typescript, julik-frontend-races, project-standards}

---

Reviewers (6): correctness, testing, maintainability, project-standards, kieran-typescript, julik-frontend-races.

Testing gaps:

• No automated test verifies that onClose/handlePanelBack/onToggleFullWidth fire from the header controls in the error branches this PR adds.
• Out of scope but worth noting: the isRowLoading || isResolvingSource branch still renders a bare Loading... with no header, so a stuck-loading panel remains closable only via Escape — this is pre-existing behavior unchanged by the diff.