Apisix-dashboard: Integrate with code-mirror to have a fallback to plugins' render issue

[juzhiyuan]

Background

As shown in the figure, on the left side is the current plugin page and an example diagram of the interaction of editing a plugin.

After the user finds the target plugin,

1. View the data saved by the plugin via the View Raw button
2. Invoke the Plugin Form, which is a library of react-jsonschema-form, built from the plugin's jsonschema, via the Setting button.
3. Determine whether to enable the plugin via the Enable/Disable button.

Problem

The problem we are currently experiencing is that many plugins cannot properly render forms via react-jsonschema-form because the library supports most of the features of the jsonschema, but some of them are not supported. In addition, plugin developers only need to focus on the jsonschema, and building interfaces that are supported by the library requires higher development costs.

Over the past few months, we tried to update the plugin schema to match the library, but it was inefficient and users could not edit the plugin data properly.

Solution

Temporarily disables react-jsonschema-form building forms, and only supports manual data entry by the user via the Plugin Data Editor (View Raw) interface.

Disadvantages

1. This approach would sacrifice user experience and require the user to enter the configuration manually, based on the documentation examples.

Advantages

1. Solves the problem that all plugins are not rendering the form properly.
2. Plugin developers only need to care about writing the correct jsonschema.

As for the feature that allows users to enter plugin data via a form (instead of manually entering JSON), this will remain a concern, and we will resubmit the proposal to resolve the issue when a suitable solution is available to cover all plugins.

Reference

• CodeMirror

[juzhiyuan]

Please take a look at this proposal, though it's not very friendly for users to input JSON, it works for all the plugins.

cc @liuxiran @LiteSun @moonming @membphis @ShiningRush @idbeta @tokers

[juzhiyuan]

We will use CodeMirror to highlight the json data.

[idbeta]

Agree, need to provide users with JSONschema examples of each plugin, you can add a link next to the plugin to make it easier for users to find these examples.

[juzhiyuan]

Agree, need to provide users with JSONschema examples of each plugin, you can add a link next to the plugin to make it easier for users to find these examples.

Ya, a quick way is adding a link to that plugin's doc 😂

[liuxiran]

I think this proposal is a good compromise.
We can improve the documentation to increase the experience, we can try to provide some configuration template for common scenarios, then users can use our plugin by copying the template and modifying some configuration parameters.

[juzhiyuan]

I think this proposal is a good compromise.
We can improve the documentation to increase the experience, we can try to provide some configuration template for common scenarios, then users can use our plugin by copying the template and modifying some configuration parameters.

That's it!!

[liuxiran]

I think this proposal is a good compromise.
We can improve the documentation to increase the experience, we can try to provide some configuration template for common scenarios, then users can use our plugin by copying the template and modifying some configuration parameters.

That's it!!

and this may be easier to use than visual forms :)

[tokers]

I have just one question, is the plugin data editor friendly enough? say user puts some unexpected characters accidently (like adding extra commas)
will the editor highlights the error to help user to rectify it?

[juzhiyuan]

will the editor highlights the error to help the user to rectify it?

Not sure, if CodeMirror supports it, we will add this feature.
BTW, the frontend will validate the data according to schema before sending APIs.

[tokers]

will the editor highlights the error to help the user to rectify it?

Not sure, if CodeMirror supports it, we will add this feature.
BTW, the frontend will validate the data according to schema before sending APIs.

I think the feeling of interaction is important, some low level syntax errors are not so easy to found especially when the plugin data is fairly long.

[juzhiyuan]

will the editor highlights the error to help the user to rectify it?

Not sure, if CodeMirror supports it, we will add this feature.
BTW, the frontend will validate the data according to schema before sending APIs.

I think the feeling of interaction is important, some low level syntax errors are not so easy to found especially when the plugin data is fairly long.

Got it, we support validating with jsonschema, errors will show up if there has something incompatible with schema.

[juzhiyuan]

ok, then I'm going to do this week.

[juzhiyuan]

This issue is related to those issues.

764

802

812

814

790

788

762

[juzhiyuan]

After some research and trying, I find that we should add a Format button instead of auto-formatting because auto-formatting will make the input Textarea lost focus.

cc @liuxiran @moonming @membphis

[juzhiyuan]

When users input or paste some JSON codes here, they could click the format button to achieve code format, easy to implement.

[juzhiyuan]

Snapshot

[membphis]

After some research and trying, I find that we should add a Format button instead of auto-formatting because auto-formatting will make the input Textarea lost focus.

agree ^_^

[juzhiyuan]

ping @membphis

[membphis]

got it