refactor: clean code

ui/src/components/access/AccessEditForm.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
+import { forwardRef, useImperativeHandle, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Form, type FormInstance, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
@@ -64,11 +64,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
     initialValues: initialValues,
   });
 
-  const [fieldProvider, setFieldProvider] = useState(initialValues?.provider);
-  useEffect(() => {
-    setFieldProvider(initialValues?.provider);
-  }, [initialValues?.provider]);
-
+  const configProvider = Form.useWatch("provider", formInst);
   const [configFormInst] = Form.useForm();
   const configFormName = useAntdFormName({ form: configFormInst, name: "accessEditConfigForm" });
   const configFormComponent = useMemo(() => {
@@ -77,7 +73,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
       NOTICE: If you add new child component, please keep ASCII order.
      */
     const configFormProps = { form: configFormInst, formName: configFormName, disabled: disabled, initialValues: initialValues?.config };
-    switch (fieldProvider) {
+    switch (configProvider) {
       case ACCESS_PROVIDERS.ACMEHTTPREQ:
         return <AccessEditFormACMEHttpReqConfig {...configFormProps} />;
       case ACCESS_PROVIDERS.ALIYUN:
@@ -117,7 +113,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
       case ACCESS_PROVIDERS.WEBHOOK:
         return <AccessEditFormWebhookConfig {...configFormProps} />;
     }
-  }, [disabled, initialValues, fieldProvider, configFormInst, configFormName]);
+  }, [disabled, initialValues, configProvider, configFormInst, configFormName]);
 
   const handleFormProviderChange = (name: string) => {
     if (name === configFormName) {
@@ -127,8 +123,8 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
   };
 
   const handleFormChange = (_: unknown, values: AccessEditFormFieldValues) => {
-    if (values.provider !== fieldProvider) {
-      setFieldProvider(values.provider);
+    if (values.provider !== configProvider) {
+      formInst.setFieldValue("provider", values.provider);
     }
 
     onValuesChange?.(values);
@@ -153,7 +149,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
   return (
     <Form.Provider onFormChange={handleFormProviderChange}>
       <div className={className} style={style}>
-        <Form {...formProps} disabled={disabled} layout="vertical" onValuesChange={handleFormChange}>
+        <Form {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
           <Form.Item name="name" label={t("access.form.name.label")} rules={[formRule]}>
             <Input placeholder={t("access.form.name.placeholder")} />
           </Form.Item>

ui/src/components/access/AccessEditFormKubernetesConfig.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { flushSync } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { UploadOutlined as UploadOutlinedIcon } from "@ant-design/icons";
 import { useDeepCompareEffect } from "ahooks";
@@ -55,7 +54,7 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValue
       setFieldKubeFileList([]);
     }
 
-    flushSync(() => onValuesChange?.(form.getFieldsValue(true)));
+    onValuesChange?.(form.getFieldsValue(true));
   };
 
   return (

ui/src/components/access/AccessEditFormSSHConfig.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { flushSync } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { UploadOutlined as UploadOutlinedIcon } from "@ant-design/icons";
 import { useDeepCompareEffect } from "ahooks";
@@ -33,8 +32,14 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
   const { t } = useTranslation();
 
   const formSchema = z.object({
-    host: z.string().refine((v) => validDomainName(v) || validIPv4Address(v) || validIPv6Address(v), t("common.errmsg.host_invalid")),
-    port: z.number().int().gte(1, t("common.errmsg.port_invalid")).lte(65535, t("common.errmsg.port_invalid")),
+    host: z
+      .string({ message: t("access.form.ssh_host.placeholder") })
+      .refine((v) => validDomainName(v) || validIPv4Address(v) || validIPv6Address(v), t("common.errmsg.host_invalid")),
+    port: z
+      .number({ message: t("access.form.ssh_port.placeholder") })
+      .int()
+      .gte(1, t("common.errmsg.port_invalid"))
+      .lte(65535, t("common.errmsg.port_invalid")),
     username: z
       .string()
       .min(1, "access.form.ssh_username.placeholder")
@@ -74,7 +79,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
       setFieldKeyFileList([]);
     }
 
-    flushSync(() => onValuesChange?.(form.getFieldsValue(true)));
+    onValuesChange?.(form.getFieldsValue(true));
   };
 
   return (

ui/src/components/access/AccessEditModal.tsx

@@ -34,7 +34,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, onSubmit, ...props }:
     trigger: "onOpenChange",
   });
 
-  const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
+  const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
 
   const formRef = useRef<AccessEditFormInstance>(null);
   const [formPending, setFormPending] = useState(false);
@@ -86,7 +86,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, onSubmit, ...props }:
     <>
       {NotificationContextHolder}
 
-      {triggerDom}
+      {triggerEl}
 
       <Modal
         afterClose={() => setOpen(false)}