Files
supabase/apps/studio/components/interfaces/LogDrains/LogDrains.utils.ts
Danny White 16308ad286 chore(studio): reuse key-value field array for log drains (#44060)
## What kind of change does this PR introduce?

Chore that resolves FE-2785.

## What is the current behavior?

The Log Drains headers section still uses a bespoke add-header mini form
and stores headers directly as a record in form state.

That makes it inconsistent with the shared `KeyValueFieldArray` pattern
already adopted elsewhere in Studio.

## What is the new behavior?

- reuses the shared `KeyValueFieldArray` in the Log Drains destination
sheet
- keeps the external submit contract unchanged by converting between:
  - form-only `headerEntries: { key, value }[]`
  - submitted `headers: Record<string, string>`
- preserves type-specific defaults:
  - webhook starts with `Content-Type: application/json`
  - OTLP starts with `Content-Type: application/x-protobuf`
- moves header validation into standard form errors for:
  - max 20 headers
  - duplicate header names
  - partially filled rows, while still allowing fully empty draft rows
- adds focused utility and sheet tests for the new adapter and
validation behaviour

| Before | After |
| --- | --- |
| <img width="1728" height="997" alt="Log Drains Settings Mallet
Toolshed Supabase-027E4669-8B02-4C43-8771-794E13799FA3"
src="https://github.com/user-attachments/assets/43ed6334-28ef-4d47-9747-dfb3221462ec"
/> | <img width="1728" height="997" alt="Log Drains Settings Mallet
Toolshed Supabase-68477EA1-6F56-4BE2-9355-C121896F11E4"
src="https://github.com/user-attachments/assets/9391bccd-3a50-4468-91e7-05059d41543c"
/> |

## Additional context

This is PR 4 of the DEPR-394 field-array stack.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **Bug Fixes**
* Enhanced header validation with specific error messages for duplicate
headers and missing values.
  * Improved form behavior for edge cases in header entry management.

* **New Features**
* Added destination-specific default headers for clearer initial
configuration.

* **Tests**
* Added comprehensive test suite validating header management and form
submission behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-02 11:14:34 +11:00

138 lines
3.7 KiB
TypeScript

/**
* Utility functions for log drain management
* Extracted for testability
*/
import { z } from 'zod'
import { LogDrainType } from './LogDrains.constants'
import { httpEndpointUrlSchema } from '@/lib/validation/http-url'
export type LogDrainHeaderRow = {
key: string
value: string
}
/**
* Get the description text for the custom headers section based on log drain type
*/
export function getHeadersSectionDescription(type: LogDrainType): string {
if (type === 'webhook') {
return 'Set custom headers when draining logs to the Endpoint URL'
}
if (type === 'loki') {
return 'Set custom headers when draining logs to the Loki HTTP(S) endpoint'
}
if (type === 'otlp') {
return 'Set custom headers for OTLP authentication (e.g., Authorization, X-API-Key)'
}
return ''
}
/**
* Validation errors for header management
*/
export const HEADER_VALIDATION_ERRORS = {
MAX_LIMIT: 'You can only have 20 custom headers',
DUPLICATE: 'Header name already exists',
KEY_REQUIRED: 'Header name is required',
VALUE_REQUIRED: 'Header value is required',
} as const
const DEFAULT_HEADERS_BY_TYPE: Partial<Record<LogDrainType, Record<string, string>>> = {
webhook: { 'Content-Type': 'application/json' },
otlp: { 'Content-Type': 'application/x-protobuf' },
}
export function getDefaultHeadersByType(type: LogDrainType): Record<string, string> {
return DEFAULT_HEADERS_BY_TYPE[type] ?? {}
}
export function headerRecordToRows(headers: Record<string, string> = {}): LogDrainHeaderRow[] {
return Object.entries(headers).map(([key, value]) => ({ key, value }))
}
export function headerRowsToRecord(rows: LogDrainHeaderRow[] = []): Record<string, string> {
return rows.reduce<Record<string, string>>((acc, row) => {
const key = row.key.trim()
const value = row.value.trim()
if (key && value) {
acc[key] = value
}
return acc
}, {})
}
export const logDrainHeaderEntriesSchema = z
.array(
z.object({
key: z.string().trim(),
value: z.string().trim(),
})
)
.max(20, HEADER_VALIDATION_ERRORS.MAX_LIMIT)
.superRefine((rows, ctx) => {
const rowIndexesByKey = new Map<string, number[]>()
rows.forEach((row, index) => {
const key = row.key.trim()
const value = row.value.trim()
if (!key && !value) return
if (key && !value) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: HEADER_VALIDATION_ERRORS.VALUE_REQUIRED,
path: [index, 'value'],
})
return
}
if (!key && value) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: HEADER_VALIDATION_ERRORS.KEY_REQUIRED,
path: [index, 'key'],
})
return
}
const existingIndexes = rowIndexesByKey.get(key) ?? []
existingIndexes.push(index)
rowIndexesByKey.set(key, existingIndexes)
})
rowIndexesByKey.forEach((indexes) => {
if (indexes.length < 2) return
indexes.forEach((index) => {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: HEADER_VALIDATION_ERRORS.DUPLICATE,
path: [index, 'key'],
})
})
})
})
/**
* Zod schema for OTLP log drain configuration
* Extracted for testing purposes
*/
export const otlpConfigSchema = z.object({
type: z.literal('otlp'),
endpoint: httpEndpointUrlSchema({
requiredMessage: 'OTLP endpoint is required',
invalidMessage: 'OTLP endpoint must be a valid URL',
prefixMessage: 'OTLP endpoint must start with http:// or https://',
}),
protocol: z.string().optional().default('http/protobuf'),
gzip: z.boolean().optional().default(true),
headers: z.record(z.string(), z.string()).optional(),
})
export type OtlpConfig = z.infer<typeof otlpConfigSchema>