You are viewing a plain text version of this content. The canonical link for it is here.

Posted to notifications@apisix.apache.org by GitBox <gi...@apache.org> on 2020/09/06 07:50:16 UTC

[GitHub] [apisix-dashboard] juzhiyuan opened a new issue #444: Proposal: Improve the Route module

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:
users@infra.apache.org