mirror of
https://github.com/supabase/supabase.git
synced 2026-05-11 19:26:38 +08:00
3a72b128de
## What kind of change does this PR introduce? Design system and validation consistency update. ## What is the current behaviour? `KeyValueFieldArray` already renders per-cell form messages, but each consumer still decides its own validation rules. At the moment, some consumers allow partially filled rows to submit silently, while Log Drains now treats them as inline validation errors. ## What is the new behaviour? This PR standardises the recommended partial-row behaviour for the current `KeyValueFieldArray` consumers by introducing a shared validation helper and using it from each form schema. - adds `getKeyValueFieldArrayValidationIssues` alongside `KeyValueFieldArray` - keeps `KeyValueFieldArray` presentation-only and leaves validation in consumer schemas - shows inline errors when one side of a key/value row is filled and the other is empty - keeps fully empty rows as draft rows - keeps duplicate-key validation in Log Drains, where it already applies - updates the design-system docs and examples to describe the validation pattern explicitly <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added reusable key/value validation utilities and public export; forms now trim header/key/value inputs, show inline errors for partially filled rows, and remove fully empty draft rows on submit. * **Documentation** * Clarified the field-array is rendering-only and added guidance for placing validation in form schemas and handling draft rows. * **Tests** * Added unit and integration tests covering validation rules, duplicate keys, trimming, draft-row stripping, and payload behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
76 lines
2.4 KiB
Plaintext
76 lines
2.4 KiB
Plaintext
---
|
|
title: Key/Value Field Array
|
|
description: A shared form fragment for repeated text key/value pairs.
|
|
component: true
|
|
fragment: true
|
|
---
|
|
|
|
<ComponentPreview
|
|
name="key-value-field-array-demo"
|
|
description="A shared form fragment for repeated text key/value pairs."
|
|
peekCode
|
|
showDottedGrid
|
|
wide
|
|
/>
|
|
|
|
## Usage
|
|
|
|
Use `KeyValueFieldArray` when each row is two text inputs backed by `react-hook-form`, such as HTTP headers, query parameters, or configuration parameters.
|
|
|
|
```tsx
|
|
import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
|
|
import { getKeyValueFieldArrayValidationIssues } from 'ui-patterns/form/KeyValueFieldArray/validation'
|
|
```
|
|
|
|
```tsx
|
|
<KeyValueFieldArray
|
|
control={form.control}
|
|
name="headers"
|
|
keyFieldName="name"
|
|
valueFieldName="value"
|
|
createEmptyRow={() => ({ name: '', value: '' })}
|
|
keyPlaceholder="Header name"
|
|
valuePlaceholder="Header value"
|
|
addLabel="Add header"
|
|
/>
|
|
```
|
|
|
|
`KeyValueFieldArray` owns the row add/remove behavior and renders the per-input form messages for you. Compose it inside `FormItemLayout` when you want the standard label, description, and message treatment around the entire section.
|
|
|
|
## Validation
|
|
|
|
`KeyValueFieldArray` is rendering-only. Keep validation in the consumer schema and use the shared validation helper when you want the standard draft-row behaviour:
|
|
|
|
- fully empty rows may remain drafts
|
|
- partially filled rows should show inline errors on the missing cell
|
|
|
|
If you persist the array rows directly, strip fully empty draft rows before saving them.
|
|
|
|
```tsx
|
|
const formSchema = z
|
|
.object({
|
|
headers: z.array(z.object({ name: z.string().trim(), value: z.string().trim() })),
|
|
})
|
|
.superRefine((data, ctx) => {
|
|
getKeyValueFieldArrayValidationIssues({
|
|
rows: data.headers,
|
|
keyFieldName: 'name',
|
|
valueFieldName: 'value',
|
|
keyRequiredMessage: 'Header name is required',
|
|
valueRequiredMessage: 'Header value is required',
|
|
}).forEach((issue) => {
|
|
ctx.addIssue({
|
|
code: z.ZodIssueCode.custom,
|
|
message: issue.message,
|
|
path: ['headers', ...issue.path],
|
|
})
|
|
})
|
|
})
|
|
```
|
|
|
|
## When to use it
|
|
|
|
- Use [Single Value Field Array](./single-value-field-array) for repeated single values such as redirect URIs.
|
|
- Use `KeyValueFieldArray` for repeated text/text pairs such as headers, parameters, and config entries.
|
|
- Build a custom row UI instead when each row mixes different controls, such as a text input paired with a `Select`.
|