DSingh0304 opened a new issue, #3315: URL: https://github.com/apache/apisix-dashboard/issues/3315
# GSoC 2026 Proposal: JSON Schema Driven Form Component [APISIX-39] ## 1. Project Information * **Project Name:** JSON Schema to Form UI for APISIX Dashboard (APISIX-39) * **Student Name:** Deep Shekhar Singh * **GitHub:** [@DSingh0304](https://github.com/DSingh0304) * **Timezone:** IST (UTC+5:30) --- ## 2. Why I am the Right Candidate for this Project Over the past few months, I have become deeply involved in the APISIX Dashboard codebase, significantly improving its stability and test coverage. I am intimately familiar with its React 19 + Mantine + `react-hook-form` architecture. **My Key Core Contributions:** 1. **Massive E2E Test Suite Expansion (10+ Merged PRs):** Authored comprehensive E2E tests for almost every major resource, including Services (#3258), Stream Routes (#3255), Consumer Groups (#3250), SSLs (#3249), Global Rules (#3248), Plugin Metadata (#3247), Plugin Configs (#3246), Secrets (#3245), Protos (#3244), and Consumers (#3243). 2. **UI Crash Resolution:** Resolved UI crashes caused by `vars` form component array formatting via `a.trim()` tags input (#3286). 3. **Advanced Search Implementation:** Developed the hybrid routing search form with 9 frontend/backend filter fields (#3222). 4. **CI Pipeline Improvement:** Implemented the strict CI Linting workflow (#3291). ### 3. Working Proof of Concept (Submitted in January, PR #3274) I didn't want to just propose an idea; I wanted to prove it works natively within the dashboard. In early January, I submitted an initial Proof of Concept that addressed the core concerns in the original feature request (#2986). The maintainer (@Baoyuantop) validated this approach and the corresponding PR **[#3274](https://github.com/apache/apisix-dashboard/pull/3274)**. *(Below is a screen recording of the working SchemaForm PoC generating the UI for the `proxy-rewrite` plugin directly from its JSON Schema)* https://github.com/user-attachments/assets/1503ebb7-76ab-436d-b6f9-342c8b1c75d7 Since that initial validation, the PoC has been extended and currently successfully implements rendering of basic types, `oneOf`, `dependencies`, and dynamic array handling without external libraries (using RHF's `useFieldArray` and Mantine's `TagsInput`), all wrapped in an AJV validation pipeline with *zero new heavy external dependencies*. --- ## 4. Project Description & Approach **The Problem:** Currently, configuring APISIX plugins in the Dashboard requires writing raw JSON in a Monaco editor within `PluginEditorDrawer`. With over 150+ plugins, each with unique schema definitions, maintaining hand-coded forms is unsustainable. Relying on raw JSON leads to a steep learning curve, validation errors, and a poor developer experience. **The Solution & Approach:** The Admin API already exposes full JSON Schema at `GET /apisix/admin/schema/plugins/{name}`. We can dynamically auto-generate user-friendly forms directly from these schemas. Instead of relying on heavy third-party JSON-to-Form libraries that are hard to customize, my approach builds exactly upon the Technical Design outlined in [#2988](https://github.com/apache/apisix-dashboard/issues/2988): * **React Hook Form (RHF):** For performant, un-controlled form state management. * **AJV:** For deterministic validation, bridging errors to `react-hook-form` `setError`. * **Mantine UI 8:** Reusing existing widgets from `src/components/form/`. **The Integration Strategy (The "Toggle" Approach):** Replacing a working JSON editor carries a risk if a complex plugin schema has unsupported edge cases. I propose integrating the `SchemaForm` into `PluginEditorDrawer` with a **toggle switch**. Users see the auto-generated UI form by default, but can toggle back to the raw JSON Monaco editor for unrecognized/complex schema portions. This guarantees zero regressions. --- ## 5. Deliverables & Implementation Phases **Must-have (Phase 1 - Early/Mid GSoC)** 1. Reusable `SchemaForm` component that accepts a JSON Schema object and renders a complete form. 2. Widget mapping for basic types: string → `TextInput`, number/integer → `NumberInput`, boolean → `Switch`, object → nested fieldset, array → repeatable field group (`useFieldArray`). 3. `enum` support mapping to `Select` dropdown. 4. Support for `default` values and `required` field enforcement. 5. Basic constraints: `minimum`/`maximum`, `minLength`/`maxLength`, `pattern`, `exclusiveMinimum`, `minItems`/`maxItems`. 6. `oneOf` support (selector to choose a variant, render corresponding fields). 7. `dependencies` / conditional fields (show/hide fields based on other field values). 8. `if/then/else` conditional sub-schema rendering. 9. Validation via AJV against the original JSON Schema, mapping errors inline. 10. `encrypt_fields` meta handling (rendering as `PasswordInput`). **Should-have (Phase 2 - Mid/Late GSoC)** 1. Full `PluginEditorDrawer` integration with Toggle Fallback logic between `SchemaForm` and Monaco JSON editor. 2. `anyOf` support. 3. `patternProperties` support (dynamic key-value editor). 4. Schema-to-widget override registry (e.g., `x-widget` standard for custom widgets). 5. Comprehensive Unit & E2E Testing (Playwright). **Nice-to-have (Phase 3 - End of GSoC / Post-GSoC)** 1. `allOf` merging. 2. `$ref` / `$defs` resolution. 3. Read-only/disabled mode for viewing existing config. --- ## 6. APISIX Plugin Schema Patterns to Support | Pattern | Example Plugins Utilizing Pattern | |---------|-----------------------------------| | `oneOf` | `limit-conn`, `limit-count`, `jwt-auth`, `response-rewrite` | | `dependencies` | `limit-conn`, `jwt-auth` | | `if/then/else` | `response-rewrite`, `limit-conn`, `openid-connect`, `ai-proxy` | | `anyOf` | Core `schema_def.lua`, `ai-proxy-multi` | | `patternProperties` | `ai-proxy`, `labels_def` | | Arrays & Objects | `traffic-split` | --- ## 7. Related Resources * **Admin API schema endpoint:** `apisix/admin/plugins.lua` * **Core schemas:** `apisix/schema_def.lua` * **Dashboard technical design:** [Technical Design of the New Dashboard #2988](https://github.com/apache/apisix-dashboard/issues/2988) *(cc @Baoyuantop @juzhiyuan @nic-chen @LiteSun @liuxiran @bzp2010)* --- ## 8. Other Commitments * I am fully committed to completing this project. I have no other internships or full-time jobs planned for this summer. -- 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]
