You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by "juzhiyuan (via GitHub)" <gi...@apache.org> on 2025/04/18 04:34:10 UTC
[I] Support JSONSchema to Form UI [apisix-dashboard]
juzhiyuan opened a new issue, #2986:
URL: https://github.com/apache/apisix-dashboard/issues/2986
## Description
APISIX includes a bundle of plugins that are secured with JSON Schema. If the dashboard can render the configurations of these plugins with a form UI, the developer experience would improve significantly.
However, there are some challenges associated with this request:
1. Different APISIX plugins may use different JSON Schema versions, which makes it easy to have incorrect values.
2. Which JSON Schema form library can we trust and use? We need more time to test.
3. ...
--
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: notifications-unsubscribe@apisix.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] Support JSONSchema to Form UI [apisix-dashboard]
Posted by "DSingh0304 (via GitHub)" <gi...@apache.org>.
DSingh0304 commented on issue #2986:
URL: https://github.com/apache/apisix-dashboard/issues/2986#issuecomment-3659212748
Thanks @Baoyuantop Great points about the edge cases.
I agree that `oneOf`/`anyOf` and conditional rendering (dependencies) are the critical challenges for a Custom Adapter. I'll specifically focus the POC on demonstrating:
1. **Complex Schema Handling:**
- `oneOf` scenarios
- `dependencies`
2. **Performance Optimization:**
- Memoization strategies for recursive components
- Testing with deeply nested plugin configurations
I'll find real APISIX plugin schemas that use these patterns (looks like `authz-keycloak` and `openid-connect` have `oneOf`) and build the POC around those.
I'll share the POC demo + performance analysis soon. Thanks for the guidance!
--
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: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] Support JSONSchema to Form UI [apisix-dashboard]
Posted by "DSingh0304 (via GitHub)" <gi...@apache.org>.
DSingh0304 commented on issue #2986:
URL: https://github.com/apache/apisix-dashboard/issues/2986#issuecomment-3940514494
While testing against multiple plugins, I noticed `limit-count` uses `if/then/else` (a draft 07 feature) while simpler plugins only use basic draft 04 patterns. Should the SchemaForm target draft-07 support fully, or handle `if/then/else` as a specific edge case?
--
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: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] Support JSONSchema to Form UI [apisix-dashboard]
Posted by "DSingh0304 (via GitHub)" <gi...@apache.org>.
DSingh0304 commented on issue #2986:
URL: https://github.com/apache/apisix-dashboard/issues/2986#issuecomment-3709078154
Hi @Baoyuantop
I've created a working demo as requested. Here's the PR:
**PR:** #3274
### What's implemented:
1. **SchemaForm component** that renders forms from JSON Schema
2. **`oneOf` support** - Conditional field groups (e.g., OAuth vs API Key)
3. **`dependencies` support** - Conditional fields based on other values (e.g., Redis config when storage=redis)
4. **Demo page** at `/schema_form_demo` to test the functionality
### Key highlights:
- **Zero new dependencies** - Reuses existing `FormItem*` components (TextInput, Select, Switch, NumberInput)
- **Uses React Hook Form's `useWatch`** for conditional rendering (no additional state management)
### How to test:
1. Checkout the PR branch
2. Run `pnpm dev`
3. Visit `http://localhost:5173/ui/schema_form_demo`
4. Try selecting different auth types and storage types to see conditional fields appear/disappear
Looking forward to your feedback!
--
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: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] Support JSONSchema to Form UI [apisix-dashboard]
Posted by "DSingh0304 (via GitHub)" <gi...@apache.org>.
DSingh0304 commented on issue #2986:
URL: https://github.com/apache/apisix-dashboard/issues/2986#issuecomment-3705013303
Thanks @Baoyuantop! I'll build a working demo in my fork and share it once ready.
--
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: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] Support JSONSchema to Form UI [apisix-dashboard]
Posted by "DSingh0304 (via GitHub)" <gi...@apache.org>.
DSingh0304 commented on issue #2986:
URL: https://github.com/apache/apisix-dashboard/issues/2986#issuecomment-3575851742
This looks like a valuable feature, I'd be interested in contributing if the team needs help with this.
--
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: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] Support JSONSchema to Form UI [apisix-dashboard]
Posted by "Baoyuantop (via GitHub)" <gi...@apache.org>.
Baoyuantop commented on issue #2986:
URL: https://github.com/apache/apisix-dashboard/issues/2986#issuecomment-3695613785
Hi @DSingh0304, thanks for your contribution. I think we can first complete a working demo in your forked repository.
--
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: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] Support JSONSchema to Form UI [apisix-dashboard]
Posted by "Baoyuantop (via GitHub)" <gi...@apache.org>.
Baoyuantop commented on issue #2986:
URL: https://github.com/apache/apisix-dashboard/issues/2986#issuecomment-3658981048
Hi @DSingh0304, thanks for your detailed analysis. I completely agree with your point of view, but there are some issues that need to be noted.
1. Complex Schema Support: APISIX plugin schemas sometimes use oneOf (select one from multiple options), anyOf, or dependencies (e.g., field B is only displayed if field A is selected). Custom Adapters need to implement this logic, which is more complicated than using existing libraries.
2. Recursive component performance: For deeply nested configurations, attention needs to be paid to React rendering performance to avoid unnecessary repainting of the entire form.
If possible, I think we can perform POC validation, especially for complex schema scenarios such as oneOf/anyOf.
--
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: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] Support JSONSchema to Form UI [apisix-dashboard]
Posted by "DSingh0304 (via GitHub)" <gi...@apache.org>.
DSingh0304 commented on issue #2986:
URL: https://github.com/apache/apisix-dashboard/issues/2986#issuecomment-3656971549
Hi @baoyuan, thanks for the guidance via the mailing list.
I have conducted a technical evaluation of potential solutions for auto-generating plugin forms, focusing on **Bundle Size**, **Integration** (React Hook Form + Mantine/AntD), and **Schema Compatibility**.
Here are my findings and recommendation:
### 1. Landscape Analysis
The current `apisix-dashboard` stack relies on:
- **State Management:** `react-hook-form` (v7)
- **UI Components:** `antd` (v5) + `@mantine/core` (v7)
- **Validation:** `zod`
Any new solution should ideally leverage these existing dependencies rather than introducing a second form state manager.
### 2. Candidate Comparison
| Metric | **A. react-jsonschema-form** (RJSF) | **B. Formily** | **C. Custom RHF Adapter** (Recommended) |
| :--- | :--- | :--- | :--- |
| **Bundle Size (Min+Gzip)** | **~69.4 kB** (Core + Validator) | **~67 kB** (Core + React) | **~15-20 kB** (AJV + Adapter logic) |
| **State Manager** | Internal (Redux-like) | Internal (Observable) | **react-hook-form` (Native)** |
| **UI Integration** | Good (Official AntD theme) | Complex (Requires adapter) | **Perfect** (Direct usage of Mantine/AntD) |
| **Customization** | Hard (requires wrapper widgets) | Medium | **Easy** (Standard React components) |
#### Analysis of Options
**Option A: react-jsonschema-form (RJSF)**
* *Pros:* Battle-tested, supports Draft 7 standard out-of-the-box.
* *Cons:* **Heavy.** It introduces its own state management system, creating a "black box" inside our existing RHF forms. The bundle size impact (~70kB) contradicts the goal of a lightweight dashboard.
**Option B: Formily**
* *Pros:* Very powerful for complex enterprise forms.
* *Cons:* **Overkill.** High learning curve and heavy bundle size. It duplicates the functionality of `react-hook-form`, which we already use.
**Option C: Custom Adapter (JSON Schema -> React Hook Form)**
* *Concept:* Build a dedicated `PluginForm` component that maps JSON Schema types directly to our existing `Mantine/AntD` components, controlled by `react-hook-form`.
* *Pros:*
* **Zero Logic Duplication:** Reuses `react-hook-form` for state/validation.
* **Tiny Footprint:** Only requires a schema validator (likely `ajv`, ~20kB) and mapping logic.
* **Consistent UI:** We render *our* actual components, complete with our specific classes/styles, not a 3rd party's abstraction of them.
* *Cons:* Initial setup requires writing the mapping logic (Schema Type -> Component).
### 3. Recommendation
I strongly recommend **Option C (Custom RHF Adapter)**.
Since the dashboard already pays the cost for `react-hook-form`, `antd`, and `mantine`, we can build a lightweight generator that simply "glues" them together based on the schema.
**Proposed Architecture:**
1. **Validator:** Use `ajv` (Draft 7 compatible) to validate the form state against the plugin schema.
2. **Mapper:** Create a `SchemaField` component that recursively renders the correct UI widget:
* `type: string` -> `<TextInput />` (Mantine)
* `type: boolean` -> `<Switch />` (Mantine)
* `enum: [...]` -> `<Select />` (AntD/Mantine)
3. **State:** Connects directly to the parent `useForm` context.
I am happy to proceed with creating a **Proof of Concept (POC)** for Option C to demonstrate how it handles a complex plugin schema (e.g., `limit-count`) if this direction aligns with the team's vision.
--
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: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] Support JSONSchema to Form UI [apisix-dashboard]
Posted by "DSingh0304 (via GitHub)" <gi...@apache.org>.
DSingh0304 commented on issue #2986:
URL: https://github.com/apache/apisix-dashboard/issues/2986#issuecomment-3576487275
Regarding the challenge of selecting a form library, I'd compare popular options such as **react json schema form** or **Formily**.
I am evaluating them based on:
Bundle size impact.
Support for the specific JSON Schema drafts used by APISIX plugins.
Ease of customization to match the existing UI.
--
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: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] Support JSONSchema to Form UI [apisix-dashboard]
Posted by "DSingh0304 (via GitHub)" <gi...@apache.org>.
DSingh0304 commented on issue #2986:
URL: https://github.com/apache/apisix-dashboard/issues/2986#issuecomment-3694046053
Thanks @Baoyuantop! You're absolutely right that `oneOf`/`anyOf` and dependencies are the critical challenges.
I've created a proof-of-concept to demonstrate how a Custom Adapter can handle these cases efficiently:
**POC Structure:**
- Sample schema with `oneOf` (OAuth vs API Key authentication)
- Sample schema with `dependencies` (Redis config only shows if storage_type=redis)
- Core adapter logic showing JSON Schema → Mantine component mapping
**Key Finding:**
Both `oneOf` and `dependencies` can be handled cleanly using React Hook Form's `watch()` function for conditional rendering:
```typescript
// oneOf example
const authType = watch('auth_type');
{authType === 'oauth' && <OAuthFieldsGroup />}
{authType === 'api_key' && <APIKeyFieldsGroup />}
// dependencies example
const storageType = watch('storage_type');
{storageType === 'redis' && <RedisConfigFields />}
```
**Bundle Impact:**
- Custom adapter logic: ~2-3 kB
- AJV (validation): ~20 kB
- **Total: ~23 kB** (vs react-jsonschema-form's 69 kB)
**Performance Strategy:**
- Use React.memo for recursive components
- Lazy render complex nested schemas
- Memoize schema parsing results
I can share the POC files if helpful, or proceed with building a live demo using an actual APISIX plugin schema. What would be most useful?
--
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: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org