From 1f6a1468c41f3bda50b189912effb58c75522be4 Mon Sep 17 00:00:00 2001
From: Bucky Schwarz <d.w.schwarz@gmail.com>
Date: Mon, 9 Nov 2026 10:22:16 -0500
Subject: [PATCH] refactor(team settings): replace mantine divider with
 click-ui separator

---
 .changeset/team-settings-separator-click-ui.md             | 6 ++++++
 .../app/src/components/TeamSettings/ApiKeysSection.tsx     | 5 +++--
 .../app/src/components/TeamSettings/ConnectionsSection.tsx | 7 ++++---
 .../src/components/TeamSettings/IacMigrationSection.tsx    | 5 ++---
 .../src/components/TeamSettings/IntegrationsSection.tsx    | 5 +++--
 .../app/src/components/TeamSettings/McpServerSection.tsx   | 7 ++++---
 .../components/TeamSettings/SecurityPoliciesSection.tsx    | 5 +++--
 .../app/src/components/TeamSettings/SourcesSection.tsx     | 5 +++--
 .../app/src/components/TeamSettings/TeamMembersSection.tsx | 5 ++---
 .../src/components/TeamSettings/TeamQueryConfigSection.tsx | 4 ++--
 .../app/src/components/TeamSettings/WebhooksSection.tsx    | 5 +++--
 11 files changed, 35 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/team-settings-separator-click-ui.md

diff --git a/.changeset/team-settings-separator-click-ui.md b/.changeset/team-settings-separator-click-ui.md
new file mode 100644
index 0000000000..a857d9b53c
--- /dev/null
+++ b/.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.
diff --git a/packages/app/src/components/TeamSettings/ApiKeysSection.tsx b/packages/app/src/components/TeamSettings/ApiKeysSection.tsx
index 03f4d9b29e..8348622a98 100644
--- a/packages/app/src/components/TeamSettings/ApiKeysSection.tsx
+++ b/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">
diff --git a/packages/app/src/components/TeamSettings/ConnectionsSection.tsx b/packages/app/src/components/TeamSettings/ConnectionsSection.tsx
index c336d7c593..5c6d7db9d9 100644
--- a/packages/app/src/components/TeamSettings/ConnectionsSection.tsx
+++ b/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>
diff --git a/packages/app/src/components/TeamSettings/IacMigrationSection.tsx b/packages/app/src/components/TeamSettings/IacMigrationSection.tsx
index 9b10138bc8..57ffb400aa 100644
--- a/packages/app/src/components/TeamSettings/IacMigrationSection.tsx
+++ b/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
diff --git a/packages/app/src/components/TeamSettings/IntegrationsSection.tsx b/packages/app/src/components/TeamSettings/IntegrationsSection.tsx
index e5156da36a..8a64c0497e 100644
--- a/packages/app/src/components/TeamSettings/IntegrationsSection.tsx
+++ b/packages/app/src/components/TeamSettings/IntegrationsSection.tsx
@@ -1,4 +1,5 @@
-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';
 
@@ -6,7 +7,7 @@ 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 />
diff --git a/packages/app/src/components/TeamSettings/McpServerSection.tsx b/packages/app/src/components/TeamSettings/McpServerSection.tsx
index cda1251305..741f839081 100644
--- a/packages/app/src/components/TeamSettings/McpServerSection.tsx
+++ b/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>
diff --git a/packages/app/src/components/TeamSettings/SecurityPoliciesSection.tsx b/packages/app/src/components/TeamSettings/SecurityPoliciesSection.tsx
index d3a22727d5..7fa77a3be4 100644
--- a/packages/app/src/components/TeamSettings/SecurityPoliciesSection.tsx
+++ b/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{' '}
diff --git a/packages/app/src/components/TeamSettings/SourcesSection.tsx b/packages/app/src/components/TeamSettings/SourcesSection.tsx
index 4e4ca37018..a7e7fdc259 100644
--- a/packages/app/src/components/TeamSettings/SourcesSection.tsx
+++ b/packages/app/src/components/TeamSettings/SourcesSection.tsx
@@ -1,4 +1,5 @@
-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';
 
@@ -6,7 +7,7 @@ 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"
diff --git a/packages/app/src/components/TeamSettings/TeamMembersSection.tsx b/packages/app/src/components/TeamSettings/TeamMembersSection.tsx
index 3e045c34dc..dfa4b93981 100644
--- a/packages/app/src/components/TeamSettings/TeamMembersSection.tsx
+++ b/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">
diff --git a/packages/app/src/components/TeamSettings/TeamQueryConfigSection.tsx b/packages/app/src/components/TeamSettings/TeamQueryConfigSection.tsx
index e8ab77770e..e271ec8fd0 100644
--- a/packages/app/src/components/TeamSettings/TeamQueryConfigSection.tsx
+++ b/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
diff --git a/packages/app/src/components/TeamSettings/WebhooksSection.tsx b/packages/app/src/components/TeamSettings/WebhooksSection.tsx
index 20b6fdd15c..2c9b0bd6b9 100644
--- a/packages/app/src/components/TeamSettings/WebhooksSection.tsx
+++ b/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>