From 5aa1632011a8ca326dcc24784d700d8cf7d68e00 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Fri, 24 Jul 2026 20:11:59 -0700
Subject: [PATCH] test(data-drains): cover the migrated detail and create
 surfaces
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Executes the two new views rather than reasoning about them, and locks the
behaviours this migration could silently drop:

- the detail carries every column the table used to show (source,
  destination, cadence, last run) and never renders credentials
- run sizes report sub-kilobyte writes instead of flooring to '0 Bytes', and
  a multi-gigabyte run stays in GB
- Run now stays disabled while a drain is disabled, as the row menu did
- delete leaves only after the request resolves, and stays put on failure
- create gates on name plus a complete destination, sends the right
  destination branch, and toasts on failure
- every labelled field in all seven destination forms resolves to a real
  control id, and every select carries an accessible name

The first run caught a defect: dropping toLowerCase from humanizeConfigKey
left keys rendering Title Case ('Force Path Style') while the TSDoc still
promised sentence case. Now sentence case with initialisms preserved —
'Access key ID', 'Service account JSON'.
---
 .../components/data-drain-create.test.tsx     | 315 ++++++++++++++++
 .../components/data-drain-detail.test.tsx     | 351 ++++++++++++++++++
 .../components/data-drain-detail.tsx          |  24 +-
 3 files changed, 687 insertions(+), 3 deletions(-)
 create mode 100644 apps/sim/ee/data-drains/components/data-drain-create.test.tsx
 create mode 100644 apps/sim/ee/data-drains/components/data-drain-detail.test.tsx

diff --git a/apps/sim/ee/data-drains/components/data-drain-create.test.tsx b/apps/sim/ee/data-drains/components/data-drain-create.test.tsx
new file mode 100644
index 00000000000..d235c93bd21
--- /dev/null
+++ b/apps/sim/ee/data-drains/components/data-drain-create.test.tsx
@@ -0,0 +1,315 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { DESTINATION_TYPES } from '@/lib/data-drains/types'
+
+const { mockToastError, mockToastSuccess, mockUseCreateDataDrain, mockGuardBack } = vi.hoisted(
+  () => ({
+    mockToastError: vi.fn(),
+    mockToastSuccess: vi.fn(),
+    mockUseCreateDataDrain: vi.fn(),
+    mockGuardBack: vi.fn((onLeave: () => void) => onLeave()),
+  })
+)
+
+interface SelectProps {
+  value?: string
+  onChange?: (value: string) => void
+  options?: { value: string; label: string }[]
+  'aria-label'?: string
+}
+
+vi.mock('@sim/emcn', () => ({
+  // A real <label for> so the wiring assertions below mean something.
+  Label: ({ htmlFor, children }: { htmlFor?: string; children?: ReactNode }) => (
+    <label htmlFor={htmlFor}>{children}</label>
+  ),
+  Info: ({ children }: { children?: ReactNode }) => <span>{children}</span>,
+  ChipInput: ({
+    id,
+    value,
+    onChange,
+  }: {
+    id?: string
+    value?: string
+    onChange?: (event: { target: { value: string } }) => void
+  }) => (
+    <input id={id} value={value ?? ''} onChange={(event) => onChange?.({ target: event.target })} />
+  ),
+  ChipTextarea: ({
+    id,
+    value,
+    onChange,
+  }: {
+    id?: string
+    value?: string
+    onChange?: (event: { target: { value: string } }) => void
+  }) => (
+    <textarea
+      id={id}
+      value={value ?? ''}
+      onChange={(event) => onChange?.({ target: event.target })}
+    />
+  ),
+  // Real SecretInput calls onChange with the plain value, not an event.
+  SecretInput: ({
+    id,
+    value,
+    onChange,
+  }: {
+    id?: string
+    value?: string
+    onChange?: (next: string) => void
+  }) => (
+    <input
+      id={id}
+      type='password'
+      value={value ?? ''}
+      onChange={(event) => onChange?.(event.target.value)}
+    />
+  ),
+  ChipSelect: ({ value, onChange, options, ...rest }: SelectProps) => (
+    <select
+      aria-label={rest['aria-label']}
+      value={value ?? ''}
+      onChange={(event) => onChange?.(event.target.value)}
+    >
+      {(options ?? []).map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  ),
+  Switch: ({ id }: { id?: string }) => <input id={id} type='checkbox' />,
+  cn: (...values: unknown[]) => values.filter(Boolean).join(' '),
+  toast: { error: mockToastError, success: mockToastSuccess },
+}))
+
+vi.mock('@sim/emcn/icons', () => ({ ArrowLeft: () => <svg />, Database: () => <svg /> }))
+
+interface SettingsAction {
+  text: string
+  disabled?: boolean
+  onSelect?: () => void
+}
+
+vi.mock('@/app/workspace/[workspaceId]/settings/components/settings-panel', () => ({
+  SettingsPanel: ({ actions, children }: { actions?: SettingsAction[]; children?: ReactNode }) => (
+    <div>
+      {actions?.map((action) => (
+        <button
+          type='button'
+          key={action.text}
+          data-testid='primary-action'
+          disabled={action.disabled}
+          onClick={() => action.onSelect?.()}
+        >
+          {action.text}
+        </button>
+      ))}
+      {children}
+    </div>
+  ),
+}))
+
+vi.mock(
+  '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section',
+  () => ({
+    SettingsSection: ({ label, children }: { label: string; children?: ReactNode }) => (
+      <section>
+        <h2>{label}</h2>
+        {children}
+      </section>
+    ),
+  })
+)
+
+vi.mock('@/app/workspace/[workspaceId]/components', () => ({ ResourceTile: () => <div /> }))
+
+vi.mock('@/app/workspace/[workspaceId]/components/credential-detail', () => ({
+  CredentialDetailHeading: ({ title }: { title?: ReactNode }) => <h1>{title}</h1>,
+  UnsavedChangesModal: () => null,
+}))
+
+vi.mock('@/app/workspace/[workspaceId]/settings/hooks/use-settings-unsaved-guard', () => ({
+  useSettingsUnsavedGuard: () => ({
+    showUnsavedModal: false,
+    setShowUnsavedModal: vi.fn(),
+    guardBack: mockGuardBack,
+    confirmDiscard: vi.fn(),
+  }),
+}))
+
+vi.mock('@/ee/data-drains/hooks/data-drains', () => ({
+  useCreateDataDrain: mockUseCreateDataDrain,
+}))
+
+import { DataDrainCreate } from '@/ee/data-drains/components/data-drain-create'
+import { DESTINATION_FORM_REGISTRY } from '@/ee/data-drains/destinations/registry'
+
+let container: HTMLDivElement
+let root: Root
+const createMutate = vi.fn()
+
+function render(node: ReactNode) {
+  act(() => {
+    root.render(node)
+  })
+}
+
+function primaryAction() {
+  const el = container.querySelector<HTMLButtonElement>('[data-testid="primary-action"]')
+  if (!el) throw new Error('missing primary action')
+  return el
+}
+
+function typeInto(selector: string, value: string) {
+  const el = container.querySelector<HTMLInputElement | HTMLTextAreaElement>(selector)
+  if (!el) throw new Error(`missing ${selector}`)
+  act(() => {
+    const setter = Object.getOwnPropertyDescriptor(
+      el instanceof HTMLTextAreaElement
+        ? HTMLTextAreaElement.prototype
+        : HTMLInputElement.prototype,
+      'value'
+    )?.set
+    setter?.call(el, value)
+    el.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  mockGuardBack.mockImplementation((onLeave: () => void) => onLeave())
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  createMutate.mockResolvedValue({ id: 'drain-new' })
+  mockUseCreateDataDrain.mockReturnValue({
+    mutateAsync: createMutate,
+    isPending: false,
+    error: null,
+  })
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+  container.remove()
+})
+
+describe('DataDrainCreate', () => {
+  it('keeps Create disabled until the name and destination are complete', () => {
+    render(<DataDrainCreate organizationId='org-1' onBack={vi.fn()} onCreated={vi.fn()} />)
+    expect(primaryAction().disabled).toBe(true)
+
+    typeInto('#data-drain-name', 'Workflow logs export')
+    expect(primaryAction().disabled).toBe(true)
+
+    typeInto('#drain-s3-bucket', 'my-logs-bucket')
+    typeInto('#drain-s3-access-key-id', 'AKIA')
+    typeInto('#drain-s3-secret-access-key', 'secret')
+    expect(primaryAction().disabled).toBe(false)
+  })
+
+  it('submits the destination branch and hands the new id back', async () => {
+    const onCreated = vi.fn()
+    render(<DataDrainCreate organizationId='org-1' onBack={vi.fn()} onCreated={onCreated} />)
+
+    typeInto('#data-drain-name', '  Workflow logs export  ')
+    typeInto('#drain-s3-bucket', 'my-logs-bucket')
+    typeInto('#drain-s3-access-key-id', 'AKIA')
+    typeInto('#drain-s3-secret-access-key', 'secret')
+    act(() => {
+      primaryAction().click()
+    })
+    await act(async () => {})
+
+    expect(createMutate).toHaveBeenCalledTimes(1)
+    const body = createMutate.mock.calls[0][0].body
+    expect(body.name).toBe('Workflow logs export')
+    expect(body.source).toBe('workflow_logs')
+    expect(body.scheduleCadence).toBe('daily')
+    expect(body.destinationType).toBe('s3')
+    expect(body.destinationConfig.bucket).toBe('my-logs-bucket')
+    expect(body.destinationCredentials.accessKeyId).toBe('AKIA')
+    expect(mockToastSuccess).toHaveBeenCalledWith('Drain created')
+    expect(onCreated).toHaveBeenCalledWith('drain-new')
+  })
+
+  it('announces a failed create instead of only rendering it below the fold', async () => {
+    createMutate.mockRejectedValue(new Error('bucket name is invalid'))
+    const onCreated = vi.fn()
+    render(<DataDrainCreate organizationId='org-1' onBack={vi.fn()} onCreated={onCreated} />)
+
+    typeInto('#data-drain-name', 'Workflow logs export')
+    typeInto('#drain-s3-bucket', 'nope')
+    typeInto('#drain-s3-access-key-id', 'AKIA')
+    typeInto('#drain-s3-secret-access-key', 'secret')
+    act(() => {
+      primaryAction().click()
+    })
+    await act(async () => {})
+
+    expect(mockToastError).toHaveBeenCalledWith("Couldn't create drain", {
+      description: 'bucket name is invalid',
+    })
+    expect(onCreated).not.toHaveBeenCalled()
+  })
+
+  it('swaps the destination fields when the type changes', () => {
+    render(<DataDrainCreate organizationId='org-1' onBack={vi.fn()} onCreated={vi.fn()} />)
+    expect(container.querySelector('#drain-s3-bucket')).not.toBeNull()
+
+    const typeSelect = container.querySelector<HTMLSelectElement>(
+      'select[aria-label="Destination type"]'
+    )
+    if (!typeSelect) throw new Error('missing destination select')
+    act(() => {
+      const setter = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value')?.set as (
+        v: string
+      ) => void
+      setter.call(typeSelect, 'datadog')
+      typeSelect.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+
+    expect(container.querySelector('#drain-s3-bucket')).toBeNull()
+    expect(container.querySelector('#drain-datadog-api-key')).not.toBeNull()
+  })
+
+  it('names every select for assistive tech', () => {
+    render(<DataDrainCreate organizationId='org-1' onBack={vi.fn()} onCreated={vi.fn()} />)
+    const labels = Array.from(container.querySelectorAll('select')).map((el) =>
+      el.getAttribute('aria-label')
+    )
+    expect(labels).toEqual(['Source', 'Cadence', 'Destination type'])
+  })
+})
+
+describe('destination form registry', () => {
+  it('wires every labelled field to its control across all destinations', () => {
+    for (const destination of DESTINATION_TYPES) {
+      const spec = DESTINATION_FORM_REGISTRY[destination]
+      render(<spec.FormFields state={spec.initialState} setState={vi.fn()} />)
+
+      const labelled = Array.from(container.querySelectorAll('label[for]'))
+      for (const label of labelled) {
+        const id = label.getAttribute('for') as string
+        expect(
+          container.querySelector(`#${id}`),
+          `${destination}: label "${label.textContent}" points at missing #${id}`
+        ).not.toBeNull()
+      }
+
+      const controls = container.querySelectorAll('input, textarea')
+      // Every text-ish control is reachable by its label, so none announces unnamed.
+      expect(controls.length, `${destination} renders no controls`).toBeGreaterThan(0)
+      expect(labelled.length, `${destination} has unlabelled controls`).toBe(controls.length)
+    }
+  })
+})
diff --git a/apps/sim/ee/data-drains/components/data-drain-detail.test.tsx b/apps/sim/ee/data-drains/components/data-drain-detail.test.tsx
new file mode 100644
index 00000000000..d46e5b554ae
--- /dev/null
+++ b/apps/sim/ee/data-drains/components/data-drain-detail.test.tsx
@@ -0,0 +1,351 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { DataDrain, DataDrainRun } from '@/lib/api/contracts/data-drains'
+
+const {
+  mockToastError,
+  mockToastSuccess,
+  mockUseDataDrainRuns,
+  mockUseDeleteDataDrain,
+  mockUseRunDataDrainNow,
+  mockUseTestDataDrain,
+  mockUseUpdateDataDrain,
+} = vi.hoisted(() => ({
+  mockToastError: vi.fn(),
+  mockToastSuccess: vi.fn(),
+  mockUseDataDrainRuns: vi.fn(),
+  mockUseDeleteDataDrain: vi.fn(),
+  mockUseRunDataDrainNow: vi.fn(),
+  mockUseTestDataDrain: vi.fn(),
+  mockUseUpdateDataDrain: vi.fn(),
+}))
+
+interface ConfirmModalProps {
+  open?: boolean
+  confirm?: { label?: string; onClick?: () => void }
+}
+
+vi.mock('@sim/emcn', () => ({
+  Badge: ({ children }: { children?: ReactNode }) => <span data-testid='badge'>{children}</span>,
+  ChipConfirmModal: ({ open, confirm }: ConfirmModalProps) =>
+    open ? (
+      <button type='button' data-testid='confirm-delete' onClick={() => confirm?.onClick?.()}>
+        {confirm?.label}
+      </button>
+    ) : null,
+  Label: ({ children }: { children?: ReactNode }) => <span>{children}</span>,
+  Switch: ({ checked, onCheckedChange }: { checked?: boolean; onCheckedChange?: () => void }) => (
+    <button
+      type='button'
+      data-testid='enabled-toggle'
+      aria-pressed={checked}
+      onClick={() => onCheckedChange?.()}
+    >
+      toggle
+    </button>
+  ),
+  cn: (...values: unknown[]) => values.filter(Boolean).join(' '),
+  toast: { error: mockToastError, success: mockToastSuccess },
+}))
+
+vi.mock('@sim/emcn/icons', () => ({ ArrowLeft: () => <svg />, Database: () => <svg /> }))
+
+interface SettingsAction {
+  text: string
+  disabled?: boolean
+  onSelect?: () => void
+}
+
+vi.mock('@/app/workspace/[workspaceId]/settings/components/settings-panel', () => ({
+  SettingsPanel: ({ actions, children }: { actions?: SettingsAction[]; children?: ReactNode }) => (
+    <div>
+      {actions?.map((action) => (
+        <button
+          type='button'
+          key={action.text}
+          data-testid={`action-${action.text}`}
+          disabled={action.disabled}
+          onClick={() => action.onSelect?.()}
+        >
+          {action.text}
+        </button>
+      ))}
+      {children}
+    </div>
+  ),
+}))
+
+vi.mock(
+  '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section',
+  () => ({
+    SettingsSection: ({ label, children }: { label: string; children?: ReactNode }) => (
+      <section>
+        <h2>{label}</h2>
+        {children}
+      </section>
+    ),
+  })
+)
+
+vi.mock('@/app/workspace/[workspaceId]/settings/components/settings-empty-state', () => ({
+  SettingsEmptyState: ({ children }: { children?: ReactNode }) => <p>{children}</p>,
+}))
+
+vi.mock('@/app/workspace/[workspaceId]/components', () => ({ ResourceTile: () => <div /> }))
+
+vi.mock('@/app/workspace/[workspaceId]/components/credential-detail', () => ({
+  CredentialDetailHeading: ({ title, subtitle }: { title?: ReactNode; subtitle?: ReactNode }) => (
+    <header>
+      <h1>{title}</h1>
+      <p data-testid='subtitle'>{subtitle}</p>
+    </header>
+  ),
+}))
+
+vi.mock('@/ee/data-drains/hooks/data-drains', () => ({
+  useDataDrainRuns: mockUseDataDrainRuns,
+  useDeleteDataDrain: mockUseDeleteDataDrain,
+  useRunDataDrainNow: mockUseRunDataDrainNow,
+  useTestDataDrain: mockUseTestDataDrain,
+  useUpdateDataDrain: mockUseUpdateDataDrain,
+}))
+
+import { DataDrainDetail } from '@/ee/data-drains/components/data-drain-detail'
+
+const drain = {
+  id: 'drain-1',
+  organizationId: 'org-1',
+  name: 'Workflow logs export',
+  source: 'workflow_logs',
+  scheduleCadence: 'daily',
+  enabled: true,
+  cursor: null,
+  lastRunAt: null,
+  lastSuccessAt: null,
+  createdBy: 'user-1',
+  createdAt: '2026-07-01T00:00:00.000Z',
+  updatedAt: '2026-07-01T00:00:00.000Z',
+  destinationType: 's3',
+  destinationConfig: {
+    bucket: 'my-logs',
+    region: 'us-east-1',
+    prefix: '',
+    forcePathStyle: true,
+  },
+} as unknown as DataDrain
+
+function makeRun(overrides: Partial<DataDrainRun> = {}): DataDrainRun {
+  return {
+    id: 'run-1',
+    drainId: 'drain-1',
+    status: 'success',
+    trigger: 'cron',
+    startedAt: '2026-07-24T18:00:00.000Z',
+    finishedAt: '2026-07-24T18:01:00.000Z',
+    rowsExported: 1204,
+    bytesWritten: 512,
+    cursorBefore: null,
+    cursorAfter: null,
+    error: null,
+    locators: [],
+    ...overrides,
+  }
+}
+
+let container: HTMLDivElement
+let root: Root
+const mutateAsync = {
+  update: vi.fn(),
+  del: vi.fn(),
+  run: vi.fn(),
+  test: vi.fn(),
+}
+
+function render(node: ReactNode) {
+  act(() => {
+    root.render(node)
+  })
+}
+
+function click(testId: string) {
+  const el = container.querySelector<HTMLButtonElement>(`[data-testid="${testId}"]`)
+  if (!el) throw new Error(`missing ${testId}`)
+  act(() => {
+    el.click()
+  })
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  mutateAsync.update.mockResolvedValue(undefined)
+  mutateAsync.del.mockResolvedValue(undefined)
+  mutateAsync.run.mockResolvedValue(undefined)
+  mutateAsync.test.mockResolvedValue(undefined)
+  mockUseUpdateDataDrain.mockReturnValue({ mutateAsync: mutateAsync.update, isPending: false })
+  mockUseDeleteDataDrain.mockReturnValue({ mutateAsync: mutateAsync.del, isPending: false })
+  mockUseRunDataDrainNow.mockReturnValue({ mutateAsync: mutateAsync.run, isPending: false })
+  mockUseTestDataDrain.mockReturnValue({ mutateAsync: mutateAsync.test, isPending: false })
+  mockUseDataDrainRuns.mockReturnValue({ data: [], isPending: false, isPlaceholderData: false })
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+  container.remove()
+})
+
+describe('DataDrainDetail', () => {
+  it('surfaces the metadata the list table used to show in columns', () => {
+    render(<DataDrainDetail organizationId='org-1' drain={drain} onBack={vi.fn()} />)
+
+    expect(container.textContent).toContain('Workflow logs export')
+    expect(container.querySelector('[data-testid="subtitle"]')?.textContent).toBe(
+      'Workflow logs → Amazon S3 · Every day'
+    )
+    expect(container.textContent).toContain('Every day')
+    expect(container.textContent).toContain('Never')
+  })
+
+  it('renders destination config generically, including booleans and blanks', () => {
+    render(<DataDrainDetail organizationId='org-1' drain={drain} onBack={vi.fn()} />)
+
+    expect(container.textContent).toContain('Bucket')
+    expect(container.textContent).toContain('my-logs')
+    expect(container.textContent).toContain('Force path style')
+    expect(container.textContent).not.toContain('Force Path Style')
+    expect(container.textContent).toContain('Yes')
+    expect(container.textContent).toContain('—')
+  })
+
+  it('labels config keys in sentence case, keeping initialisms upper', () => {
+    render(
+      <DataDrainDetail
+        organizationId='org-1'
+        drain={
+          {
+            ...drain,
+            destinationConfig: { accessKeyId: 'AKIA', serviceAccountJson: '{}', url: 'https://x' },
+          } as unknown as DataDrain
+        }
+        onBack={vi.fn()}
+      />
+    )
+
+    expect(container.textContent).toContain('Access key ID')
+    expect(container.textContent).toContain('Service account JSON')
+    expect(container.textContent).toContain('URL')
+  })
+
+  it('never exposes destination credentials', () => {
+    render(<DataDrainDetail organizationId='org-1' drain={drain} onBack={vi.fn()} />)
+    expect(container.textContent?.toLowerCase()).not.toContain('secret')
+    expect(container.textContent?.toLowerCase()).not.toContain('credential')
+  })
+
+  it('reports a sub-kilobyte run size instead of flooring it to zero', () => {
+    mockUseDataDrainRuns.mockReturnValue({
+      data: [makeRun({ bytesWritten: 512 })],
+      isPending: false,
+      isPlaceholderData: false,
+    })
+    render(<DataDrainDetail organizationId='org-1' drain={drain} onBack={vi.fn()} />)
+
+    expect(container.textContent).toContain('512 Bytes')
+    expect(container.textContent).not.toContain('0 Bytes')
+    expect(container.textContent).toContain('1,204 rows')
+  })
+
+  it('formats a multi-gigabyte run without inflating the unit', () => {
+    mockUseDataDrainRuns.mockReturnValue({
+      data: [makeRun({ bytesWritten: 5 * 1024 ** 3 })],
+      isPending: false,
+      isPlaceholderData: false,
+    })
+    render(<DataDrainDetail organizationId='org-1' drain={drain} onBack={vi.fn()} />)
+
+    expect(container.textContent).toContain('5 GB')
+    expect(container.textContent).not.toContain('KB')
+  })
+
+  it('keeps Run now disabled while the drain is disabled, as the row menu did', () => {
+    render(
+      <DataDrainDetail
+        organizationId='org-1'
+        drain={{ ...drain, enabled: false }}
+        onBack={vi.fn()}
+      />
+    )
+    const runNow = container.querySelector<HTMLButtonElement>('[data-testid="action-Run now"]')
+    expect(runNow?.disabled).toBe(true)
+  })
+
+  it('toggles enabled through the update mutation', async () => {
+    render(<DataDrainDetail organizationId='org-1' drain={drain} onBack={vi.fn()} />)
+    click('enabled-toggle')
+    await act(async () => {})
+
+    expect(mutateAsync.update).toHaveBeenCalledWith({
+      organizationId: 'org-1',
+      drainId: 'drain-1',
+      body: { enabled: false },
+    })
+    expect(mockToastSuccess).toHaveBeenCalledWith('Drain disabled')
+  })
+
+  it('runs and tests the drain on demand', async () => {
+    render(<DataDrainDetail organizationId='org-1' drain={drain} onBack={vi.fn()} />)
+
+    click('action-Run now')
+    await act(async () => {})
+    expect(mutateAsync.run).toHaveBeenCalledWith({ organizationId: 'org-1', drainId: 'drain-1' })
+
+    click('action-Test connection')
+    await act(async () => {})
+    expect(mutateAsync.test).toHaveBeenCalledWith({ organizationId: 'org-1', drainId: 'drain-1' })
+  })
+
+  it('leaves the detail only after the delete resolves', async () => {
+    const onBack = vi.fn()
+    render(<DataDrainDetail organizationId='org-1' drain={drain} onBack={onBack} />)
+
+    click('action-Delete')
+    click('confirm-delete')
+    await act(async () => {})
+
+    expect(mutateAsync.del).toHaveBeenCalledWith({ organizationId: 'org-1', drainId: 'drain-1' })
+    expect(onBack).toHaveBeenCalledTimes(1)
+  })
+
+  it('stays put and reports the failure when a delete fails', async () => {
+    mutateAsync.del.mockRejectedValue(new Error('drain is locked'))
+    const onBack = vi.fn()
+    render(<DataDrainDetail organizationId='org-1' drain={drain} onBack={onBack} />)
+
+    click('action-Delete')
+    click('confirm-delete')
+    await act(async () => {})
+
+    expect(onBack).not.toHaveBeenCalled()
+    expect(mockToastError).toHaveBeenCalledWith('drain is locked')
+  })
+
+  it('treats placeholder run data as loading', () => {
+    mockUseDataDrainRuns.mockReturnValue({
+      data: [makeRun()],
+      isPending: false,
+      isPlaceholderData: true,
+    })
+    render(<DataDrainDetail organizationId='org-1' drain={drain} onBack={vi.fn()} />)
+
+    expect(container.textContent).toContain('Loading runs...')
+    expect(container.textContent).not.toContain('1,204 rows')
+  })
+})
diff --git a/apps/sim/ee/data-drains/components/data-drain-detail.tsx b/apps/sim/ee/data-drains/components/data-drain-detail.tsx
index 5ebbcdbe17b..dc7c65c291d 100644
--- a/apps/sim/ee/data-drains/components/data-drain-detail.tsx
+++ b/apps/sim/ee/data-drains/components/data-drain-detail.tsx
@@ -30,10 +30,28 @@ function formatConfigValue(value: unknown): string {
   return String(value)
 }
 
-/** `forcePathStyle` → `Force path style`, so a new destination field needs no map. */
+/** Config keys carrying these read as initialisms, not words. */
+const CONFIG_KEY_ACRONYMS: Record<string, string> = {
+  id: 'ID',
+  url: 'URL',
+  json: 'JSON',
+  api: 'API',
+}
+
+/**
+ * `forcePathStyle` → `Force path style`, `accessKeyId` → `Access key ID`. Sentence
+ * case so a new destination field needs no per-key label map.
+ */
 function humanizeConfigKey(key: string): string {
-  const spaced = key.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ')
-  return spaced.charAt(0).toUpperCase() + spaced.slice(1)
+  const words = key
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .toLowerCase()
+    .split(' ')
+    .filter(Boolean)
+    .map((word) => CONFIG_KEY_ACRONYMS[word] ?? word)
+  const [first = '', ...rest] = words
+  return [first.charAt(0).toUpperCase() + first.slice(1), ...rest].join(' ')
 }
 
 interface DetailRowProps {