Skip to content

Commit 0bfec14

Browse files
brandon-pereirabrandon-pereira
authored
[HDX-3981] Upgrade Mantine v7 to v9 (#2096)
## 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](https://mantine.dev/changelog/9-0-0/) - [7.x → 8.x Migration Guide](https://mantine.dev/guides/7x-to-8x/) - [8.x → 9.x Migration Guide](https://mantine.dev/guides/8x-to-9x/)
1 parent 4dea362 commit 0bfec14

34 files changed

Lines changed: 401 additions & 360 deletions

‎.changeset/upgrade-mantine-v9.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@hyperdx/app': minor
3+
---
4+
5+
Upgrade Mantine from v7 to v9 and remove react-hook-form-mantine dependency

‎packages/app/package.json‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@
3636
"@hyperdx/browser": "^0.22.0",
3737
"@hyperdx/common-utils": "^0.17.1",
3838
"@hyperdx/node-opentelemetry": "^0.9.0",
39-
"@mantine/core": "^7.17.8",
40-
"@mantine/dates": "^7.17.8",
41-
"@mantine/dropzone": "^7.17.8",
42-
"@mantine/form": "^7.17.8",
43-
"@mantine/hooks": "^7.17.8",
44-
"@mantine/notifications": "^7.17.8",
45-
"@mantine/spotlight": "^7.17.8",
39+
"@mantine/core": "^9.0.0",
40+
"@mantine/dates": "^9.0.0",
41+
"@mantine/dropzone": "^9.0.0",
42+
"@mantine/form": "^9.0.0",
43+
"@mantine/hooks": "^9.0.0",
44+
"@mantine/notifications": "^9.0.0",
45+
"@mantine/spotlight": "^9.0.0",
4646
"@tabler/icons-react": "^3.39.0",
4747
"@tanstack/react-query": "^5.56.2",
4848
"@tanstack/react-query-devtools": "^5.56.2",
@@ -79,7 +79,6 @@
7979
"react-error-boundary": "^3.1.4",
8080
"react-grid-layout": "^1.3.4",
8181
"react-hook-form": "^7.43.8",
82-
"react-hook-form-mantine": "^3.1.3",
8382
"react-hotkeys-hook": "^4.3.7",
8483
"react-json-tree": "^0.20.0",
8584
"react-markdown": "^10.1.0",
@@ -140,7 +139,7 @@
140139
"msw": "^2.3.0",
141140
"msw-storybook-addon": "^2.0.2",
142141
"postcss": "^8.4.38",
143-
"postcss-preset-mantine": "^1.15.0",
142+
"postcss-preset-mantine": "^1.18.0",
144143
"postcss-simple-vars": "^7.0.0",
145144
"prettier": "^3.3.2",
146145
"rimraf": "^4.4.1",

‎packages/app/src/DBChartPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ function AIAssistant({
166166
</Button>
167167
<Pill size="xs">Experimental</Pill>
168168
</Group>
169-
<Collapse in={opened}>
169+
<Collapse expanded={opened}>
170170
{opened && (
171171
// eslint-disable-next-line react-hooks/refs
172172
<form onSubmit={handleSubmit(onSubmit)}>

‎packages/app/src/DBDashboardImportPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ function FileSelection({
173173
{errorDetails ? 'Hide Details' : 'Show Details'}
174174
</Group>
175175
</Button>
176-
<Collapse in={errorDetails}>
176+
<Collapse expanded={errorDetails}>
177177
<Text c="red">{error.details}</Text>
178178
</Collapse>
179179
</>

‎packages/app/src/DBSearchPageAlertModal.tsx‎

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import router from 'next/router';
3-
import { useForm, useWatch } from 'react-hook-form';
4-
import { NativeSelect, NumberInput } from 'react-hook-form-mantine';
3+
import { Controller, useForm, useWatch } from 'react-hook-form';
54
import { z } from 'zod';
65
import { zodResolver } from '@hookform/resolvers/zod';
76
import { tcFromSource } from '@hyperdx/common-utils/dist/core/metadata';
@@ -25,6 +24,8 @@ import {
2524
Group,
2625
LoadingOverlay,
2726
Modal,
27+
NativeSelect,
28+
NumberInput,
2829
Paper,
2930
Stack,
3031
Tabs,
@@ -166,35 +167,51 @@ const AlertForm = ({
166167
<Text size="sm" opacity={0.7}>
167168
Alert when
168169
</Text>
169-
<NativeSelect
170-
data={optionsToSelectData(ALERT_THRESHOLD_TYPE_OPTIONS)}
171-
size="xs"
172-
name={`thresholdType`}
170+
<Controller
173171
control={control}
172+
name="thresholdType"
173+
render={({ field }) => (
174+
<NativeSelect
175+
data={optionsToSelectData(ALERT_THRESHOLD_TYPE_OPTIONS)}
176+
size="xs"
177+
{...field}
178+
/>
179+
)}
174180
/>
175-
<NumberInput
176-
size="xs"
177-
w={80}
181+
<Controller
178182
control={control}
179-
name={`threshold`}
183+
name="threshold"
184+
render={({ field }) => (
185+
<NumberInput size="xs" w={80} {...field} />
186+
)}
180187
/>
181188
<Text size="sm" opacity={0.7}>
182189
lines appear within
183190
</Text>
184-
<NativeSelect
185-
data={optionsToSelectData(ALERT_INTERVAL_OPTIONS)}
186-
size="xs"
187-
name={`interval`}
191+
<Controller
188192
control={control}
193+
name="interval"
194+
render={({ field }) => (
195+
<NativeSelect
196+
data={optionsToSelectData(ALERT_INTERVAL_OPTIONS)}
197+
size="xs"
198+
{...field}
199+
/>
200+
)}
189201
/>
190202
<Text size="sm" opacity={0.7}>
191203
via
192204
</Text>
193-
<NativeSelect
194-
data={optionsToSelectData(ALERT_CHANNEL_OPTIONS)}
195-
size="xs"
196-
name={`channel.type`}
205+
<Controller
197206
control={control}
207+
name="channel.type"
208+
render={({ field }) => (
209+
<NativeSelect
210+
data={optionsToSelectData(ALERT_CHANNEL_OPTIONS)}
211+
size="xs"
212+
{...field}
213+
/>
214+
)}
198215
/>
199216
</Group>
200217
<AlertScheduleFields

‎packages/app/src/NamespaceDetailsSidePanel.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const PodDetailsProperty = React.memo(
3939
if (!value) return null;
4040
return (
4141
<div className="pe-4">
42-
<Text size="xs" color="gray">
42+
<Text size="xs" c="gray">
4343
{label}
4444
</Text>
4545
<Text size="sm">{value}</Text>
@@ -170,7 +170,7 @@ function NamespaceLogs({
170170
passHref
171171
legacyBehavior
172172
>
173-
<Anchor size="xs" color="dimmed">
173+
<Anchor size="xs" c="dimmed">
174174
Search <IconExternalLink size={12} style={{ display: 'inline' }} />
175175
</Anchor>
176176
</Link>

‎packages/app/src/NodeDetailsSidePanel.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const PodDetailsProperty = React.memo(
4040
if (!value) return null;
4141
return (
4242
<div className="pe-4">
43-
<Text size="xs" color="gray">
43+
<Text size="xs" c="gray">
4444
{label}
4545
</Text>
4646
<Text size="sm">{value}</Text>
@@ -183,7 +183,7 @@ function NodeLogs({
183183
passHref
184184
legacyBehavior
185185
>
186-
<Anchor size="xs" color="dimmed">
186+
<Anchor size="xs" c="dimmed">
187187
Search <IconExternalLink size={12} style={{ display: 'inline' }} />
188188
</Anchor>
189189
</Link>

‎packages/app/src/OnboardingChecklist.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ const OnboardingChecklist = ({
178178
</ActionIcon>
179179
</Group>
180180

181-
<Collapse in={!isCollapsed}>
181+
<Collapse expanded={!isCollapsed}>
182182
<Stack gap="xs">
183183
{steps.map((step, index) => {
184184
const StepContent = (

‎packages/app/src/PodDetailsSidePanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const PodDetailsProperty = React.memo(
4141
if (!value) return null;
4242
return (
4343
<div className="pe-4">
44-
<Text size="xs" color="gray">
44+
<Text size="xs" c="gray">
4545
{label}
4646
</Text>
4747
<Text size="sm">{value}</Text>

‎packages/app/src/ServicesDashboardPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -576,7 +576,7 @@ function HttpTab({
576576
}, [source, searchedTimeRange, appliedConfig, expressions, reqChartType]);
577577

578578
return (
579-
<Grid mt="md" grow={false} w="100%" maw="100%" overflow="hidden">
579+
<Grid mt="md" grow={false} w="100%" maw="100%">
580580
<Grid.Col span={6}>
581581
<ChartBox
582582
style={{ height: 350 }}
@@ -1147,7 +1147,7 @@ function DatabaseTab({
11471147
);
11481148

11491149
return (
1150-
<Grid mt="md" grow={false} w="100%" maw="100%" overflow="hidden">
1150+
<Grid mt="md" grow={false} w="100%" maw="100%">
11511151
<Grid.Col span={6}>
11521152
<ChartBox style={{ height: 350 }}>
11531153
{source && totalTimePerQueryConfig && (
@@ -1364,7 +1364,7 @@ function ErrorsTab({
13641364
const { expressions } = useServiceDashboardExpressions({ source });
13651365

13661366
return (
1367-
<Grid mt="md" grow={false} w="100%" maw="100%" overflow="hidden">
1367+
<Grid mt="md" grow={false} w="100%" maw="100%">
13681368
<Grid.Col span={12}>
13691369
<ChartBox style={{ height: 350 }}>
13701370
{source && expressions && (

0 commit comments

Comments
 (0)