feat: route list, add page #3008
Conversation
…reams-detail-edit
SkyeYoung
requested review from
juzhiyuan,
bzp2010,
Baoyuantop,
LiteSun and
Copilot
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new feature to support a route list and an add page by updating API types, adding new components, and integrating a naming prefix utility for consistent form field naming. Key changes include:
- New utility (useNamePrefix) for dynamic name prefixing across form components.
- Extension of API types for routes and upstreams.
- Updates to route management components (list and add page) with improved pagination and UI elements.
Reviewed Changes
Copilot reviewed 17 out of 18 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/useNamePrefix.ts | Adds a naming prefix hook to facilitate consistent form field naming. |
| src/types/schema/apisix/* | Extends API types for routes, upstreams, and common HTTP methods. |
| src/routes/routes/index.tsx | Refactors the route list page with updated pagination, table columns, and provider usage. |
| src/routes/routes/add.tsx | Updates the add page with form integration using react-hook-form and notifications. |
| Other form-related components | Integrates useNamePrefix for consistent naming across various form slices. |
| src/apis/upstreams.ts & src/apis/routes.ts | Adjust API response types and add endpoints for route operations. |
Files not reviewed (1)
- src/locales/en/common.json: Language not supported
| control={control} | ||
| name="status" | ||
| label={t('form.route.status')} | ||
| data={APISIX.RouteStatus.options.map((v) => v.value.toString())} |
There was a problem hiding this comment.
I'm okay with this option list, but any plans to add an info icon and description for this field?
There was a problem hiding this comment.
After all pages are completed...
There was a problem hiding this comment.
After all, it's strictly aligned with the API now.
| control={control} | ||
| /> | ||
| <FormItemLabels name="labels" control={control} /> | ||
| <FormItemLabels name={np('labels')} control={control} /> |
There was a problem hiding this comment.
I just tried it. I can only make it work by inputting , or by blurring it.
There was a problem hiding this comment.
enter should be able to work 🤔
| <FormSection legend={t('form.upstream.nodes.title')}> | ||
| <FormItemNodes | ||
| name="nodes" | ||
| name={np('nodes')} |
There was a problem hiding this comment.
I can only delete this by clicking delete twice.
There was a problem hiding this comment.
Found that the focus didn't automatically shift to the form, trying to solve it.
| const { control } = useFormContext<FormPartUpstreamType>(); | ||
| return <FormItemSwitch control={control} name="__checksPassiveEnabled" />; | ||
| }; | ||
| const FormSectionChecksPassiveCore = () => { |
There was a problem hiding this comment.
https://github.com/apache/apisix/blob/master/apisix/schema_def.lua#L289
Passive can only be enabled when Active is enabled
There was a problem hiding this comment.
Let's not consider this issue for this version.
Please answer these questions before submitting a pull request, or your PR will get closed.
Why submit this pull request?
What changes will this PR take into?
add route list and add page.