refactor(team settings): replace mantine divider with click-ui separator

.changeset/team-settings-separator-click-ui.md

@@ -0,0 +1,6 @@
+---
+'@hyperdx/app': patch
+---
+
+refactor: use the click-ui `Separator` instead of the Mantine `Divider` in the
+Team Settings sections.

packages/app/src/components/TeamSettings/ApiKeysSection.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, Card, Divider, Group, Text } from '@mantine/core';
+import { Separator } from '@clickhouse/click-ui';
+import { Box, Button, Card, Group, Text } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 
 import api from '@/api';
@@ -109,7 +110,7 @@ export default function ApiKeysSection() {
   return (
     <Box id="api_keys" data-testid="api-keys-section">
       <Text size="md">API keys</Text>
-      <Divider my="md" />
+      <Separator size="lg" />
       <Card mb="md">
         <Text mb="md">Ingestion API key</Text>
         <Group gap="xs" align="flex-start" wrap="nowrap">

packages/app/src/components/TeamSettings/ConnectionsSection.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Box, Button, Card, Divider, Flex, Stack, Text } from '@mantine/core';
+import { Separator } from '@clickhouse/click-ui';
+import { Box, Button, Card, Flex, Stack, Text } from '@mantine/core';
 import { IconPencil, IconX } from '@tabler/icons-react';
 
 import { ConnectionForm } from '@/components/ConnectionForm';
@@ -16,7 +17,7 @@ export default function ConnectionsSection() {
   return (
     <Box id="connections" data-testid="connections-section">
       <Text size="md">Connections</Text>
-      <Divider my="md" />
+      <Separator size="lg" />
       <Card>
         <Stack mb="md">
           {connections?.map(connection => (
@@ -65,7 +66,7 @@ export default function ConnectionsSection() {
                   showDeleteButton
                 />
               )}
-              <Divider my="md" />
+              <Separator size="lg" />
             </Box>
           ))}
         </Stack>

packages/app/src/components/TeamSettings/IacMigrationSection.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Badge } from '@clickhouse/click-ui';
+import { Badge, Separator } from '@clickhouse/click-ui';
 import {
   buildImportFile,
   collectImportableResources,
@@ -14,7 +14,6 @@ import {
   Button,
   Card,
   Checkbox,
-  Divider,
   Group,
   Stack,
   Text,
@@ -233,7 +232,7 @@ export default function IacMigrationSection({
         <Text size="md">Export to Terraform</Text>
         <Badge size="sm" text="Experimental" state="info" />
       </Group>
-      <Divider my="md" />
+      <Separator size="lg" />
       <Card>
         <Text size="sm" style={{ color: 'var(--color-text-muted)' }} mb="md">
           Download a Terraform import file for this team&apos;s resources. Add

packages/app/src/components/TeamSettings/IntegrationsSection.tsx

@@ -1,12 +1,13 @@
-import { Box, Card, Divider, Stack, Text } from '@mantine/core';
+import { Separator } from '@clickhouse/click-ui';
+import { Box, Card, Stack, Text } from '@mantine/core';
 
 import WebhooksSection from './WebhooksSection';
 
 export default function IntegrationsSection() {
   return (
     <Box id="integrations" data-testid="integrations-section">
       <Text size="md">Integrations</Text>
-      <Divider my="md" />
+      <Separator size="lg" />
       <Card>
         <Stack gap="md">
           <WebhooksSection />

packages/app/src/components/TeamSettings/McpServerSection.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Box, Card, Divider, Text } from '@mantine/core';
+import { Separator } from '@clickhouse/click-ui';
+import { Box, Card, Text } from '@mantine/core';
 
 import api from '@/api';
 import { type DeploymentShape } from '@/components/ClickStackOnboarding/installSnippets';
@@ -15,7 +16,7 @@ import McpInstallPanel from '@/components/ClickStackOnboarding/McpInstallPanel';
  *
  * Structure mirrors `IntegrationsSection.tsx` and
  * `ApiKeysSection.tsx`: outer `<Box>` with a `<Text size="md">`
- * header and `<Divider />`, then a single `<Card>` wrapping the
+ * header and `<Separator />`, then a single `<Card>` wrapping the
  * install panel. No subtitle below the header so the visual
  * rhythm matches the rest of the Integrations tab.
  *
@@ -45,7 +46,7 @@ export default function McpServerSection() {
   return (
     <Box id="mcp_server" data-testid="mcp-server-section">
       <Text size="md">Connect your AI Agents</Text>
-      <Divider my="md" />
+      <Separator size="lg" />
       <Card>
         <McpInstallPanel deployment={deployment} />
       </Card>

packages/app/src/components/TeamSettings/SecurityPoliciesSection.tsx

@@ -1,4 +1,5 @@
-import { Box, Card, Divider, Text } from '@mantine/core';
+import { Separator } from '@clickhouse/click-ui';
+import { Box, Card, Text } from '@mantine/core';
 
 export default function SecurityPoliciesSection({
   allowedAuthMethods,
@@ -8,7 +9,7 @@ export default function SecurityPoliciesSection({
   return (
     <Box id="security-policies">
       <Text size="md">Security Policies</Text>
-      <Divider my="md" />
+      <Separator size="lg" />
       <Card>
         <Text size="sm" c="dimmed">
           Team members can only authenticate via{' '}

packages/app/src/components/TeamSettings/SourcesSection.tsx

@@ -1,12 +1,13 @@
-import { Box, Divider, Text } from '@mantine/core';
+import { Separator } from '@clickhouse/click-ui';
+import { Box, Text } from '@mantine/core';
 
 import { SourcesList } from '@/components/Sources/SourcesList';
 
 export default function SourcesSection() {
   return (
     <Box id="sources" data-testid="sources-section">
       <Text size="md">Sources</Text>
-      <Divider my="md" />
+      <Separator size="lg" />
       <SourcesList
         withBorder={false}
         variant="default"

packages/app/src/components/TeamSettings/TeamMembersSection.tsx

@@ -1,12 +1,11 @@
 import { useState } from 'react';
 import { HTTPError } from 'ky';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { Badge } from '@clickhouse/click-ui';
+import { Badge, Separator } from '@clickhouse/click-ui';
 import {
   Box,
   Button,
   Card,
-  Divider,
   Group,
   Modal,
   Stack,
@@ -218,7 +217,7 @@ export default function TeamMembersSection() {
   return (
     <Box id="team_members" data-testid="team-members-section">
       <Text size="md">Team Members</Text>
-      <Divider my="md" />
+      <Separator size="lg" />
       <Card>
         <Card.Section withBorder py="sm" px="lg">
           <Group align="center" justify="space-between">

packages/app/src/components/TeamSettings/TeamQueryConfigSection.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
+import { Separator } from '@clickhouse/click-ui';
 import { DEFAULT_METADATA_MAX_ROWS_TO_READ } from '@hyperdx/common-utils/dist/core/metadata';
 import { type TeamClickHouseSettings } from '@hyperdx/common-utils/dist/types';
 import {
   Box,
   Button,
   Card,
-  Divider,
   Group,
   InputLabel,
   Stack,
@@ -282,7 +282,7 @@ export default function TeamQueryConfigSection() {
   return (
     <Box id="team_query_config">
       <Text size="md">ClickHouse Client Settings</Text>
-      <Divider my="md" />
+      <Separator size="lg" />
       <Card>
         <Stack>
           <ClickhouseSettingForm

packages/app/src/components/TeamSettings/WebhooksSection.tsx

@@ -1,10 +1,11 @@
 import { Fragment, useMemo, useState } from 'react';
 import { HTTPError } from 'ky';
+import { Separator } from '@clickhouse/click-ui';
 import {
   WebhookApiData,
   WebhookService,
 } from '@hyperdx/common-utils/dist/types';
-import { Button, Divider, Group, Stack, Text, Title } from '@mantine/core';
+import { Button, Group, Stack, Text, Title } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 import { IconPencil, IconX } from '@tabler/icons-react';
@@ -185,7 +186,7 @@ export default function WebhooksSection() {
                           }}
                         />
                       )}
-                      <Divider />
+                      <Separator size="xs" />
                     </Fragment>
                   ))}
                 </Stack>