juzhiyuan commented on code in PR #3008: URL: https://github.com/apache/apisix-dashboard/pull/3008#discussion_r2068035753
########## src/components/form-slice/FormPartRoute/index.tsx: ########## @@ -0,0 +1,161 @@ +import { useFormContext } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; +import { FormItemNumberInput } from '@/components/form/NumberInput'; +import { FormItemSwitch } from '@/components/form/Switch'; +import { FormItemTagsInput } from '@/components/form/TagInput'; +import { FormItemTextarea } from '@/components/form/Textarea'; +import { FormItemTextInput } from '@/components/form/TextInput'; +import { NamePrefixProvider } from '@/utils/useNamePrefix'; +import { FormItemPlugins } from '../FormItemPlugins'; +import { FormPartBasic } from '../FormPartBasic'; +import { FormPartUpstream, FormSectionTimeout } from '../FormPartUpstream'; +import { FormSection } from '../FormSection'; +import { Divider, InputWrapper } from '@mantine/core'; +import type { RoutePostType } from './schema'; +import { FormItemSelect } from '@/components/form/Select'; +import { APISIX } from '@/types/schema/apisix'; + +const FormPartBasicWithPriority = () => { + const { t } = useTranslation(); + const { control } = useFormContext<RoutePostType>(); + return ( + <FormPartBasic> + <FormItemNumberInput + control={control} + name="priority" + label={t('form.route.priority')} Review Comment: default 0 https://github.com/apache/apisix/blob/master/apisix/schema_def.lua#L559 ########## src/components/form-slice/FormPartBasic.tsx: ########## @@ -5,25 +5,32 @@ import { FormItemTextInput } from '../form/TextInput'; import { FormItemTextarea } from '../form/Textarea'; import { useFormContext } from 'react-hook-form'; import type { APISIXType } from '@/types/schema/apisix'; +import { useNamePrefix } from '@/utils/useNamePrefix'; +import type { PropsWithChildren } from 'react'; -export type FormPartBasicProps = Omit<FormSectionProps, 'form'>; +export type FormPartBasicProps = Omit<FormSectionProps, 'form'> & + PropsWithChildren; export const FormPartBasic = (props: FormPartBasicProps) => { + const { children, ...restProps } = props; const { control } = useFormContext<APISIXType['Basic']>(); const { t } = useTranslation(); + const np = useNamePrefix(); + return ( - <FormSection legend={t('form.basic.title')} {...props}> + <FormSection legend={t('form.basic.title')} {...restProps}> <FormItemTextInput - name="name" + name={np('name')} label={t('form.basic.name')} control={control} /> <FormItemTextarea - name="desc" + name={np('desc')} label={t('form.basic.desc')} control={control} /> - <FormItemLabels name="labels" control={control} /> + <FormItemLabels name={np('labels')} control={control} /> Review Comment: <img width="931" alt="image" src="https://github.com/user-attachments/assets/0be69af3-da03-426e-bb86-b6ac172c38a9" /> I just tried it. I can only make it work by inputting `,` or by blurring it. ########## src/components/form-slice/FormPartRoute/index.tsx: ########## @@ -0,0 +1,161 @@ +import { useFormContext } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; +import { FormItemNumberInput } from '@/components/form/NumberInput'; +import { FormItemSwitch } from '@/components/form/Switch'; +import { FormItemTagsInput } from '@/components/form/TagInput'; +import { FormItemTextarea } from '@/components/form/Textarea'; +import { FormItemTextInput } from '@/components/form/TextInput'; +import { NamePrefixProvider } from '@/utils/useNamePrefix'; +import { FormItemPlugins } from '../FormItemPlugins'; +import { FormPartBasic } from '../FormPartBasic'; +import { FormPartUpstream, FormSectionTimeout } from '../FormPartUpstream'; +import { FormSection } from '../FormSection'; +import { Divider, InputWrapper } from '@mantine/core'; +import type { RoutePostType } from './schema'; +import { FormItemSelect } from '@/components/form/Select'; +import { APISIX } from '@/types/schema/apisix'; + +const FormPartBasicWithPriority = () => { + const { t } = useTranslation(); + const { control } = useFormContext<RoutePostType>(); + return ( + <FormPartBasic> + <FormItemNumberInput + control={control} + name="priority" + label={t('form.route.priority')} + /> + <FormItemSelect + control={control} + name="status" + label={t('form.route.status')} + data={APISIX.RouteStatus.options.map((v) => v.value.toString())} Review Comment: I'm okay with this option list, but any plans to add an `info` icon and description for this field? <img width="1107" alt="image" src="https://github.com/user-attachments/assets/e09f0326-2771-43ef-9426-c9052accb0fa" /> ########## src/components/form-slice/FormPartUpstream/index.tsx: ########## @@ -174,37 +182,40 @@ export const FormSectionTimeout = () => { export const FormSectionKeepAlive = () => { const { t } = useTranslation(); const { control } = useFormContext<FormPartUpstreamType>(); + const np = useNamePrefix(); return ( <FormSection legend={t('form.upstream.keepalivePool.title')}> <FormItemNumberInput control={control} - name="keepalive_pool.size" + name={np('keepalive_pool.size')} label={t('form.upstream.keepalivePool.size')} /> <FormItemNumberInput control={control} - name="keepalive_pool.idle_timeout" + name={np('keepalive_pool.idle_timeout')} label={t('form.upstream.keepalivePool.idleTimeout')} suffix="s" /> <FormItemNumberInput control={control} - name="keepalive_pool.requests" + name={np('keepalive_pool.requests')} label={t('form.upstream.keepalivePool.requests')} allowDecimal={false} /> </FormSection> ); }; + export const FormPartUpstream = () => { const { t } = useTranslation(); + const np = useNamePrefix(); return ( <> <FormPartBasic /> <FormSection legend={t('form.upstream.findUpstreamFrom')}> <FormSection legend={t('form.upstream.nodes.title')}> <FormItemNodes - name="nodes" + name={np('nodes')} Review Comment: I can only delete this by clicking delete twice. <img width="748" alt="image" src="https://github.com/user-attachments/assets/a8a43dde-9f67-4cef-a9da-7351cb07cc64" /> -- 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-unsubscr...@apisix.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org