Geetanjali-147 opened a new pull request, #3316:
URL: https://github.com/apache/apisix-dashboard/pull/3316
## Summary
Implements a reusable `SchemaForm` component that automatically renders
form fields from a JSON Schema definition, eliminating manual UI work
for APISIX plugin configuration forms.
## Motivation
Closes #2986
APISIX plugins ship JSON Schema definitions for their configuration.
This PR enables the dashboard to render plugin config forms directly
from those schemas, improving developer experience significantly.
## Changes
- Add `SchemaForm` component — renders forms from JSON Schema
- Add `schemaParser.ts` — parses JSON Schema into field definitions
- Add `widgetMapper.ts` — maps field types to existing UI components
- Add unit tests (33 tests passing)
- Add README documentation with developer guide
## Supported Schema Types
- [x] `string` → TextInput
- [x] `number` / `integer` → NumberInput
- [x] `boolean` → Switch
- [x] `enum` → Select dropdown
- [x] `array` → TagsInput
- [x] `object` → JsonInput / nested fieldset
- [x] `oneOf` → Type selector + dynamic fields
- [x] `format: password` → PasswordInput
## Supported Constraints
- [x] `required` fields
- [x] `minimum` / `maximum` for numbers
- [x] `minLength` / `maxLength` for strings
- [x] `pattern` regex validation
- [x] `default` values
## Validation
Two-layer validation pipeline:
1. `react-hook-form` — inline field validation on change
2. `AJV` — full JSON Schema validation on submit
## Tests
33 unit tests covering:
- All basic field type parsing
- Required field detection
- Constraint parsing
- Widget mapping
- Validation rules
- Real APISIX plugin schema (limit-req)
## How to Test
```tsx
import { SchemaForm } from '@/components/schema-form/SchemaForm';
<SchemaForm
schema={{
type: 'object',
properties: {
rate: { type: 'number', minimum: 0 },
burst: { type: 'number', minimum: 0 },
key: {
type: 'string',
enum: ['remote_addr', 'server_addr', 'consumer_name']
}
},
required: ['rate', 'burst', 'key']
}}
onSubmit={(values) => console.log(values)}
/>
```
**Why submit this pull request?**
- [x] New feature provided
- [x] Did you explain what problem does this PR solve?
- [x] Have you added corresponding test cases?
- [x] Have you modified the corresponding document?
- [x] Is this PR backward compatible?
**What changes will this PR take into?**
This PR adds a reusable `SchemaForm` component that automatically
renders form fields from a JSON Schema definition.
### New Files
- `src/components/schema-form/SchemaForm.tsx` — Main component that
renders forms automatically from any JSON Schema
- `src/components/schema-form/schemaParser.ts` — Parses JSON Schema
into a flat list of typed field definitions
- `src/components/schema-form/widgetMapper.ts` — Maps field types to
existing Mantine UI components
- `src/components/schema-form/__tests__/` — 33 unit tests
- `src/components/schema-form/README.md` — Developer guide
### Supported Types
string, number, integer, boolean, enum, array, object, oneOf
### Validation
Two-layer validation using react-hook-form + AJV
fix/resolve #2986
**Checklist:**
- [x] Did you explain what problem does this PR solve? Yes
- [x] Have you added corresponding test cases? Yes — 33 unit tests
- [x] Have you modified the corresponding document? Yes — README.md added
- [x] Is this PR backward compatible? Yes — new files only, no existing code
modified
<img width="1375" height="868" alt="Screenshot 2026-03-04 194036"
src="https://github.com/user-attachments/assets/2d413be6-415b-498c-ad1f-f061e323586f";
/>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
