refactor: Create TileAlertEditor component

[pulpdrew]

Summary

This PR extracts a TileAlertEditor component for future re-use in the Raw-SQL Alert UI. The UI has been updated to make the alert section collapsible and co-locate the "Remove Alert" button within the alert section. The collapsibility will be more important in the Raw SQL case, since the Raw SQL Editor is already pretty vertically tall.

Screenshots or video

Screen.Recording.2026-04-09.at.12.48.42.PM.mov

How to test locally or on Vercel

This must be tested locally, since alerts are not supported in local mode.

References

• Linear Issue: Related to HDX-1605
• Related PRs:

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Apr 9, 2026 4:50pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 595ea44

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

[github-actions]

🟡 Tier 3 — Standard

Introduces new logic, modifies core functionality, or touches areas with non-trivial risk.

Why this tier:

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

Review process: Full human review — logic, architecture, edge cases.
SLA: First-pass feedback within 1 business day.

Stats

• Files changed: 8
• Lines changed: 357 (+ 28 in test files, excluded from tier calculation)
• Branch: drew/tile-alert-editor
• Author: pulpdrew

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

[github-actions]

PR Review

Clean refactor overall. One functional change slipped in beyond the stated scope:

• ⚠️ DisplayType.StackedBar added to alert-supported display types in ChartEditorControls.tsx:246 — this is a new feature beyond "create TileAlertEditor component". Intentional? If so, worth calling out in the PR description and adding test coverage for it.

• ℹ️ Unit test uses expect(addAlertButton).not.toBeVisible() after the button is conditionally not rendered (!alert removes it from DOM) — not.toBeInTheDocument() would be more accurate semantically, though not.toBeVisible() passes for detached elements in testing-library too. Not a bug, just slightly misleading.

✅ No critical issues found.

[pulpdrew]

Also slightly adjusted the layout here to reduce the height of the Raw SQL editor.

[github-actions]

E2E Test Results

✅ All tests passed • 132 passed • 3 skipped • 1030s

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

Tests ran across 4 shards in parallel.

View full report →

[knudtty]

LGTM