hyperdxio · kodiakhq · Apr 13, 2026 · Apr 10, 2026 · Apr 10, 2026 · Apr 10, 2026
diff --git a/.changeset/upgrade-mantine-v9.md b/.changeset/upgrade-mantine-v9.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': minor
+---
+
+Upgrade Mantine from v7 to v9 and remove react-hook-form-mantine dependency
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -36,13 +36,13 @@
     "@hyperdx/browser": "^0.22.0",
     "@hyperdx/common-utils": "^0.17.1",
     "@hyperdx/node-opentelemetry": "^0.9.0",
-    "@mantine/core": "^7.17.8",
-    "@mantine/dates": "^7.17.8",
-    "@mantine/dropzone": "^7.17.8",
-    "@mantine/form": "^7.17.8",
-    "@mantine/hooks": "^7.17.8",
-    "@mantine/notifications": "^7.17.8",
-    "@mantine/spotlight": "^7.17.8",
+    "@mantine/core": "^9.0.0",
+    "@mantine/dates": "^9.0.0",
+    "@mantine/dropzone": "^9.0.0",
+    "@mantine/form": "^9.0.0",
+    "@mantine/hooks": "^9.0.0",
+    "@mantine/notifications": "^9.0.0",
+    "@mantine/spotlight": "^9.0.0",
     "@tabler/icons-react": "^3.39.0",
     "@tanstack/react-query": "^5.56.2",
     "@tanstack/react-query-devtools": "^5.56.2",
@@ -79,7 +79,6 @@
     "react-error-boundary": "^3.1.4",
     "react-grid-layout": "^1.3.4",
     "react-hook-form": "^7.43.8",
-    "react-hook-form-mantine": "^3.1.3",
     "react-hotkeys-hook": "^4.3.7",
     "react-json-tree": "^0.20.0",
     "react-markdown": "^10.1.0",
@@ -140,7 +139,7 @@
     "msw": "^2.3.0",
     "msw-storybook-addon": "^2.0.2",
     "postcss": "^8.4.38",
-    "postcss-preset-mantine": "^1.15.0",
+    "postcss-preset-mantine": "^1.18.0",
     "postcss-simple-vars": "^7.0.0",
     "prettier": "^3.3.2",
     "rimraf": "^4.4.1",

diff --git a/packages/app/src/DBChartPage.tsx b/packages/app/src/DBChartPage.tsx
@@ -166,7 +166,7 @@ function AIAssistant({
         </Button>
         <Pill size="xs">Experimental</Pill>
       </Group>
-      <Collapse in={opened}>
+      <Collapse expanded={opened}>
         {opened && (
           // eslint-disable-next-line react-hooks/refs
           <form onSubmit={handleSubmit(onSubmit)}>

diff --git a/packages/app/src/DBDashboardImportPage.tsx b/packages/app/src/DBDashboardImportPage.tsx
@@ -173,7 +173,7 @@ function FileSelection({
                     {errorDetails ? 'Hide Details' : 'Show Details'}
                   </Group>
                 </Button>
-                <Collapse in={errorDetails}>
+                <Collapse expanded={errorDetails}>
                   <Text c="red">{error.details}</Text>
                 </Collapse>
               </>

diff --git a/packages/app/src/DBSearchPageAlertModal.tsx b/packages/app/src/DBSearchPageAlertModal.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import router from 'next/router';
-import { useForm, useWatch } from 'react-hook-form';
-import { NativeSelect, NumberInput } from 'react-hook-form-mantine';
+import { Controller, useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { tcFromSource } from '@hyperdx/common-utils/dist/core/metadata';
@@ -25,6 +24,8 @@ import {
   Group,
   LoadingOverlay,
   Modal,
+  NativeSelect,
+  NumberInput,
   Paper,
   Stack,
   Tabs,
@@ -166,35 +167,51 @@ const AlertForm = ({
             <Text size="sm" opacity={0.7}>
               Alert when
             </Text>
-            <NativeSelect
-              data={optionsToSelectData(ALERT_THRESHOLD_TYPE_OPTIONS)}
-              size="xs"
-              name={`thresholdType`}
+            <Controller
               control={control}
+              name="thresholdType"
+              render={({ field }) => (
+                <NativeSelect
+                  data={optionsToSelectData(ALERT_THRESHOLD_TYPE_OPTIONS)}
+                  size="xs"
+                  {...field}
+                />
+              )}
             />
-            <NumberInput
-              size="xs"
-              w={80}
+            <Controller
               control={control}
-              name={`threshold`}
+              name="threshold"
+              render={({ field }) => (
+                <NumberInput size="xs" w={80} {...field} />
+              )}
             />
             <Text size="sm" opacity={0.7}>
               lines appear within
             </Text>
-            <NativeSelect
-              data={optionsToSelectData(ALERT_INTERVAL_OPTIONS)}
-              size="xs"
-              name={`interval`}
+            <Controller
               control={control}
+              name="interval"
+              render={({ field }) => (
+                <NativeSelect
+                  data={optionsToSelectData(ALERT_INTERVAL_OPTIONS)}
+                  size="xs"
+                  {...field}
+                />
+              )}
             />
             <Text size="sm" opacity={0.7}>
               via
             </Text>
-            <NativeSelect
-              data={optionsToSelectData(ALERT_CHANNEL_OPTIONS)}
-              size="xs"
-              name={`channel.type`}
+            <Controller
               control={control}
+              name="channel.type"
+              render={({ field }) => (
+                <NativeSelect
+                  data={optionsToSelectData(ALERT_CHANNEL_OPTIONS)}
+                  size="xs"
+                  {...field}
+                />
+              )}
             />
           </Group>
           <AlertScheduleFields

diff --git a/packages/app/src/NamespaceDetailsSidePanel.tsx b/packages/app/src/NamespaceDetailsSidePanel.tsx
@@ -39,7 +39,7 @@ const PodDetailsProperty = React.memo(
     if (!value) return null;
     return (
       <div className="pe-4">
-        <Text size="xs" color="gray">
+        <Text size="xs" c="gray">
           {label}
         </Text>
         <Text size="sm">{value}</Text>
@@ -170,7 +170,7 @@ function NamespaceLogs({
                 passHref
                 legacyBehavior
               >
-                <Anchor size="xs" color="dimmed">
+                <Anchor size="xs" c="dimmed">
                   Search <IconExternalLink size={12} style={{ display: 'inline' }} />
                 </Anchor>
               </Link> 

diff --git a/packages/app/src/NodeDetailsSidePanel.tsx b/packages/app/src/NodeDetailsSidePanel.tsx
@@ -40,7 +40,7 @@ const PodDetailsProperty = React.memo(
     if (!value) return null;
     return (
       <div className="pe-4">
-        <Text size="xs" color="gray">
+        <Text size="xs" c="gray">
           {label}
         </Text>
         <Text size="sm">{value}</Text>
@@ -183,7 +183,7 @@ function NodeLogs({
                 passHref
                 legacyBehavior
               >
-                <Anchor size="xs" color="dimmed">
+                <Anchor size="xs" c="dimmed">
                   Search <IconExternalLink size={12} style={{ display: 'inline' }} />
                 </Anchor>
               </Link> 

diff --git a/packages/app/src/OnboardingChecklist.tsx b/packages/app/src/OnboardingChecklist.tsx
@@ -178,7 +178,7 @@ const OnboardingChecklist = ({
         </ActionIcon>
       </Group>
 
-      <Collapse in={!isCollapsed}>
+      <Collapse expanded={!isCollapsed}>
         <Stack gap="xs">
           {steps.map((step, index) => {
             const StepContent = (

diff --git a/packages/app/src/PodDetailsSidePanel.tsx b/packages/app/src/PodDetailsSidePanel.tsx
@@ -41,7 +41,7 @@ const PodDetailsProperty = React.memo(
     if (!value) return null;
     return (
       <div className="pe-4">
-        <Text size="xs" color="gray">
+        <Text size="xs" c="gray">
           {label}
         </Text>
         <Text size="sm">{value}</Text>

diff --git a/packages/app/src/ServicesDashboardPage.tsx b/packages/app/src/ServicesDashboardPage.tsx
@@ -576,7 +576,7 @@ function HttpTab({
     }, [source, searchedTimeRange, appliedConfig, expressions, reqChartType]);
 
   return (
-    <Grid mt="md" grow={false} w="100%" maw="100%" overflow="hidden">
+    <Grid mt="md" grow={false} w="100%" maw="100%">
       <Grid.Col span={6}>
         <ChartBox
           style={{ height: 350 }}
@@ -1147,7 +1147,7 @@ function DatabaseTab({
   );
 
   return (
-    <Grid mt="md" grow={false} w="100%" maw="100%" overflow="hidden">
+    <Grid mt="md" grow={false} w="100%" maw="100%">
       <Grid.Col span={6}>
         <ChartBox style={{ height: 350 }}>
           {source && totalTimePerQueryConfig && (
@@ -1364,7 +1364,7 @@ function ErrorsTab({
   const { expressions } = useServiceDashboardExpressions({ source });
 
   return (
-    <Grid mt="md" grow={false} w="100%" maw="100%" overflow="hidden">
+    <Grid mt="md" grow={false} w="100%" maw="100%">
       <Grid.Col span={12}>
         <ChartBox style={{ height: 350 }}>
           {source && expressions && (

diff --git a/packages/app/src/__tests__/localStore.test.ts b/packages/app/src/__tests__/localStore.test.ts
@@ -324,7 +324,6 @@ describe('localSources', () => {
     const envDefaults = [{ id: 'env-src', name: 'Env Source' }];
     mockedConfig.HDX_LOCAL_DEFAULT_SOURCES = JSON.stringify(envDefaults);
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
     const stored = localSources.create({ name: 'My Source' } as Omit<
       TSource,
       'id'

diff --git a/packages/app/src/components/AlertScheduleFields.tsx b/packages/app/src/components/AlertScheduleFields.tsx
@@ -8,11 +8,11 @@ import {
   UseFormSetValue,
   useWatch,
 } from 'react-hook-form';
-import { NumberInput } from 'react-hook-form-mantine';
 import {
   Box,
   Collapse,
   Group,
+  NumberInput,
   Text,
   Tooltip,
   UnstyledButton,
@@ -96,7 +96,7 @@ export function AlertScheduleFields<T extends FieldValues>({
           </Text>
         </Group>
       </UnstyledButton>
-      <Collapse in={opened}>
+      <Collapse expanded={opened}>
         <Box data-testid="alert-advanced-settings-panel">
           <Text size="xs" c="dimmed" mt="xs">
             Optional schedule controls for aligning alert windows.
@@ -120,15 +120,20 @@ export function AlertScheduleFields<T extends FieldValues>({
                     </Box>
                   </Tooltip>
                 </Group>
-                <NumberInput
-                  min={0}
-                  max={maxScheduleOffsetMinutes}
-                  step={1}
-                  size="xs"
-                  w={100}
+                <Controller
                   control={control}
                   name={scheduleOffsetName}
-                  disabled={hasScheduleStartAtAnchor}
+                  render={({ field }) => (
+                    <NumberInput
+                      min={0}
+                      max={maxScheduleOffsetMinutes}
+                      step={1}
+                      size="xs"
+                      w={100}
+                      disabled={hasScheduleStartAtAnchor}
+                      {...field}
+                    />
+                  )}
                 />
                 <Text size="sm" opacity={0.7}>
                   {offsetWindowLabel}
@@ -174,7 +179,7 @@ export function AlertScheduleFields<T extends FieldValues>({
                     field.value as string | null | undefined,
                   )}
                   onChange={value =>
-                    field.onChange(value?.toISOString() ?? null)
+                    field.onChange(value ? new Date(value).toISOString() : null)
                   }
                   error={error?.message}
                 />