mirror of https://github.com/supabase/supabase.git synced 2026-05-15 23:31:24 +08:00

Files

Danny White b23c6a7fed chore(studio): share key-value field array editor (#43938 )

## What kind of change does this PR introduce?

Chore that references DEPR-394.

## What is the current behavior?

Key/value editors for headers are implemented separately in multiple
places.

## What is the new behavior?

DEPR-394 is consolidating repeated RHF field-array UIs across Studio and
the design system.

- adds a shared `KeyValueFieldArray` component in `ui-patterns`
- adds a shared `httpHeaderAddActions` helper for preset header rows
- migrates the key/value header editors in:
  - Platform Webhooks
  - Cron Jobs HTTP headers
  - Database Webhooks HTTP headers
- documents the key/value pattern in the design system with:
  - a dedicated fragment page
  - updated forms guidance
  - updated form pattern demos

| Preview |
| --- |
| <img width="1102" height="420" alt="CleanShot 2026-03-23 at 12 22
18@2x"
src="https://github.com/user-attachments/assets/f8d23ff9-7063-462f-8074-b400561f77e9"
/> |

## Additional context

This is PR 1 of a 3-PR stack for DEPR-394.

2026-03-24 16:16:03 +11:00

scripts

chore: Migrate studio to use ui-patterns/shimmeringLoader (#41405 )

2025-12-17 14:54:07 +01:00

src

chore(studio): share key-value field array editor (#43938 )

2026-03-24 16:16:03 +11:00

index.tsx

feat(design-system): status code component (#42064 )

2026-03-12 10:57:46 +00:00

package.json

chore(studio): share key-value field array editor (#43938 )

2026-03-24 16:16:03 +11:00

README.md

…

tailwind.config.js

…

tsconfig.json

…

vitest.config.ts

…

vitest.setup.ts

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610 )

2026-02-05 13:54:10 +01:00

README.md

Supabase UI Patterns

This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example), which make no sense to be included in all apps. It should also be used for components which are constructed using various components from the ui package.

This package does not have a barrel file - each component has to be imported from its index (ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in 1 or 2 apps doesn't burden the rest of the apps.