juzhiyuan opened a new issue #444:
URL: https://github.com/apache/apisix-dashboard/issues/444
## Why
As the creation/editing part of the Route module and the related APIs
continue to iterate, for some historical reasons, the data state and variable
naming between those various step pages need to be appropriately adjusted to
enhance its maintainability.
The module currently consists of four-step pages.
- Step1(Setup Request)
- Form: Basic configuration, e.g name, desc, etc.
- List: Advanced Route Match Rules
- Modal Form: Create/Edit the Advanced Route Match Rules
- Step2(Setup Upstream)
- Form：Rewrite Request
- List：Rewrite HTTP Headers
- Step3(Setup Plugin)
- A third-party library(api7-dashboard/plugin) is used, just pass in
the initial data and onChange handler to that library.
- Step4(Preview)
- Just set the first three-step pages to read-only mode.
## How
### Data
From the above, we can see that step page 1 and step page 2 need to be
improved, and each step page (sub-component) should do the following: get the
data from the parent component, process it in the sub-component, and then pass
it to the parent component via the onChange callback function.
For the data in the subcomponent, there are currently three categories of
common forms, lists, and modal forms.
- Common form data is from the API, which can exist in the parent useForm
instance and be passed to the child component via props.
- The list data comes from the API, but exists as an object in the API and
needs to be converted to the array required for the list according to the
rules. This data should not be stored in the useForm instance, but in the
instance of the parent component useState, and passed to the child component
via props.
- The Modal form is a temporary form and is only used to create/edit
children of the list, so the state associated with this type of data should
only be stored inside the child component, e.g. to control whether to display
the Modal or not, but the values passed by the Modal Form callback function
should be present in the useState instance of the parent component.
### Naming
1. The data attribute names returned by the API use snake naming, but the
frontend requires that variables should be named with a camelCase due to the
ESLint rule, so I suggest that the ESLint rule should be modified to support
snake naming and that the frontend should keep the form field names the same as
the API field names. e.g The redirectURI in the transformer should be changed
to the uri field returned by the API.
2. For temporary variables, such as redirectURI (which is a mapping of uri
fields in the frontend), frontend temporary field rules should be unified, and
it is recommended to start with an underscore, such as `_redirectURI`.
### Notes
- preview page, the individual useForm instances, useState instances should
be assembled into data and passed to the API. When editing a route, the data
returned by the API should be converted to the form or state required for each
step page and passed to the sub-component.
## Other
### Maintainer
cc @LiteSun
----------------------------------------------------------------
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.
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
