[HDX-3981] Upgrade Mantine v7 to v9

[brandon-pereira]

Summary

Upgrade all @mantine/* packages from v7.17.8 to v9.0.0 (skipping the v8 intermediate step since the breaking changes were manageable in a single pass). This improves React 19 compatibility and keeps the UI library current.

Breaking changes resolved

v7 → v8 changes:

• DateTimePicker/DateInput onChange now returns a date string instead of a Date object — updated handlers in AlertScheduleFields.tsx and SourceForm.tsx
• Updated postcss-preset-mantine to ^1.18.0

v8 → v9 changes:

• Collapse: renamed in prop to expanded (11 instances across 10 files)
• Grid: removed deprecated overflow="hidden" prop (5 instances, 3 files) — v9 uses native CSS gap instead of negative margins
• Text/Anchor: renamed color prop to c style prop (7 instances, 5 files)
• SourceSchemaPreview: replaced removed TextProps color key with React.CSSProperties
• Theme: set defaultRadius: 'sm' in both theme configs to preserve existing visual appearance (v9 changed default from sm to md)
• Updated test for Collapse visibility behavior change in jsdom

Not affected (verified)

• No @mantine/carousel or @mantine/tiptap usage — embla and Tiptap migrations not needed
• No TypographyStylesProvider, Spoiler, positionDependencies, useFullscreen, useMouse, useMutationObserver, or zodResolver from @mantine/form usage
• All useLocalStorage calls from @mantine/hooks already provide defaultValue
• react-hook-form-mantine has a peer dep mismatch (expects @mantine/core ^7.0.0) but its thin wrappers are compatible at runtime

How to test locally or on Vercel

1. Start the dev stack with yarn dev
2. Navigate through key pages: search, dashboards, alerts, services dashboard, Kubernetes pages
3. Verify Collapse animations work correctly (alert details, nav sub-menus, advanced settings)
4. Verify Grid layouts render properly on services dashboard side panels
5. Verify no visual regressions in border-radius, spacing, or color across components

References

• Linear Issue: https://linear.app/clickhouse/issue/HDX-3981/upgrade-mantine-v7-v9
• Mantine v9 Changelog
• 7.x → 8.x Migration Guide
• 8.x → 9.x Migration Guide

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Apr 13, 2026 3:58pm

[changeset-bot]

🦋 Changeset detected

Latest commit: ae88f5b

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	Minor
@hyperdx/api	Minor
@hyperdx/otel-collector	Minor

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]

E2E Test Results

✅ All tests passed • 129 passed • 3 skipped • 1107s

Status	Count
✅ Passed	129
❌ Failed	0
⚠️ Flaky	4
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →

[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: 34
• Lines changed: 739 (+ 22 in test files, excluded from tier calculation)
• Branch: branclon/HDX-3981-upgrade-mantine-v9
• Author: brandon-pereira

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

Well-executed migration. All documented breaking changes (Collapse in→expanded, Grid overflow, color→c, DateInput onChange, theme radius) are handled consistently. A few items worth checking:

• ⚠️ SourceForm.tsx DateInput value inconsistency → value={field.value ? new Date(field.value) : undefined} passes a Date object to Mantine v9 DateInput. TimePicker.tsx's DateInputCmp wrapper explicitly converts Date→string (value instanceof Date ? value.toISOString() : ...) before passing to DateInput, suggesting v9 expects strings. SourceForm.tsx skips this conversion; verify the date field renders correctly, or apply the same toISOString() pattern used in DateInputCmp.

• ⚠️ NumberInput + Controller field spread → <NumberInput {...field} /> passes field.onChange (react-hook-form signature) as NumberInput's onChange. Mantine v9's NumberInput calls onChange(value: string | number), not a React event. This works at runtime (Controller accepts any value) but may generate TypeScript errors. Consider wrapping: onChange={(val) => field.onChange(val)}.

• ℹ️ WebhookChannelForm name prop type → typed as string but asserted as Path<T> internally (name! as Path<T>). Pre-existing pattern, not a regression, but callers lose type safety on the name field.

✅ Collapse/Grid/color migrations, theme defaults, test updates, and react-hook-form-mantine Controller replacements all look correct.