AryanVBW opened a new pull request, #3312: URL: https://github.com/apache/apisix-dashboard/pull/3312
## Summary This PR implements a reusable `SchemaForm` component that renders APISIX plugin configuration forms directly from JSON Schema definitions, eliminating manual UI maintenance per plugin. Resolves #3311 ## What this PR does ### Core Infrastructure - **`types.ts`**: TypeScript types for JSON Schema subset used by APISIX plugins (oneOf, anyOf, if/then/else, dependencies, patternProperties, encrypt_fields) - **`utils.ts`**: 16 helper functions for schema introspection, defaults resolution, conditional evaluation, and human-readable label generation - **`validation.ts`**: AJV draft-07 validation pipeline with ajv-formats, strips APISIX-specific fields, maps errors to react-hook-form field paths ### Field Components - **StringField**: TextInput / PasswordInput (for encrypt_fields) / Textarea (for long strings) - **NumberField**: NumberInput with min/max/step, integer vs decimal - **BooleanField**: Switch toggle - **EnumField**: Select dropdown with type-preserving values - **ObjectField**: Recursive Fieldset with if/then/else conditional rendering and dependency-based field visibility - **ArrayField**: TagsInput for string arrays, repeatable Fieldset for object arrays - **OneOfField**: SegmentedControl variant selector (limit-conn, limit-count patterns) - **AnyOfField**: SegmentedControl for anyOf schemas (ai-proxy-multi) - **PatternPropertiesField**: Dynamic key-value editor (ai-proxy auth, labels) - **SchemaField**: Central dispatcher routing schemas to correct widget ### Entry Point - **SchemaForm.tsx**: Wraps react-hook-form FormProvider, resolves defaults, runs AJV validation on submit, maps errors to fields - **index.ts**: Barrel exports for all public APIs ### Tests (60 passing) - `utils.test.ts` (41 tests): All utility functions - `validation.test.ts` (9 tests): AJV validation pipeline - `SchemaForm.test.tsx` (10 tests): Component rendering with real-world schemas ### Documentation - `schema-form-developer-guide.md`: Architecture, supported features, how to extend - `github-issue-schema-form.md`: Issue template reference ### Dependencies Added - `[email protected]`, `[email protected]`: JSON Schema validation - `vitest`, `@testing-library/react`, `@testing-library/jest-dom`, `jsdom`: Test infrastructure ## APISIX Schema Patterns Supported | Pattern | Example Plugins | Component | |---|---|---| | `oneOf` (required alternatives) | limit-conn, limit-count | OneOfField | | `oneOf` (type union) | limit-conn (conn) | SchemaField auto-resolves | | `dependencies` + `oneOf` | jwt-auth consumer | ObjectField.DependencyProperties | | `dependencies` + `not` | response-rewrite | AJV validation | | `if/then/else` | limit-conn, openid-connect, ai-proxy | ObjectField.ConditionalProperties | | `anyOf` | schema_def id, ai-proxy-multi | AnyOfField | | `enum` | Ubiquitous | EnumField | | `patternProperties` | ai-proxy auth, labels | PatternPropertiesField | | `encrypt_fields` | openid-connect, jwt-auth | StringField → PasswordInput | ## How to test ```bash pnpm install pnpm test # runs all 60 tests pnpm test:watch # watch mode ``` ## Commits 1. `feat(plugin): add JSON Schema types, utilities, and AJV validation pipeline` 2. `feat(plugin): add field components for basic and complex schema types` 3. `feat(plugin): add oneOf, anyOf, and patternProperties field components` 4. `feat(plugin): add SchemaForm entry component and barrel exports` 5. `test(plugin): add unit and integration tests for SchemaForm (60 tests)` 6. `build(plugin): add ajv, vitest, testing-library dependencies and test scripts` 7. `docs(plugin): add SchemaForm developer guide and GitHub issue template` -- 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]
