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

Reply via email to