refactor(ui): clean code

ui/src/components/core/DrawerForm.tsx

@@ -1,4 +1,5 @@
-import { useControllableValue } from "ahooks";
+import { useTranslation } from "react-i18next";
+import { useControllableValue } from "ahooks";
 import { Button, Drawer, Form, Space, type DrawerProps, type FormProps, type ModalProps } from "antd";
 
 import { useAntdForm, useTriggerElement } from "@/hooks";
@@ -25,14 +26,20 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
   className,
   style,
   children,
+  cancelText,
+  cancelButtonProps,
   form,
   drawerProps,
+  okText,
+  okButtonProps,
   title,
   trigger,
   width,
   onFinish,
   ...props
 }: DrawerFormProps<T>) => {
+  const { t } = useTranslation();
+
   const [open, setOpen] = useControllableValue<boolean>(props, {
     valuePropName: "open",
     defaultValuePropName: "defaultOpen",
@@ -76,9 +83,11 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
       <Drawer
         footer={
           <Space>
-            <Button onClick={handleCancelClick}>1</Button>
-            <Button type="primary" loading={formPending} onClick={handleOkClick}>
-              2
+            <Button {...cancelButtonProps} onClick={handleCancelClick}>
+              {cancelText || t("common.button.cancel")}
+            </Button>
+            <Button type="primary" loading={formPending} {...okButtonProps} onClick={handleOkClick}>
+              {okText || t("common.button.ok")}
             </Button>
           </Space>
         }

ui/src/components/workflow/node/ApplyNodeForm.tsx

@@ -119,9 +119,8 @@ const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => {
           />
           <FormFieldDomainsModalForm
             data={fieldDomains}
-            disabled={formPending}
             trigger={
-              <Button>
+              <Button disabled={formPending}>
                 <FormOutlinedIcon />
               </Button>
             }
@@ -215,9 +214,8 @@ const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => {
           />
           <FormFieldNameserversModalForm
             data={fieldNameservers}
-            disabled={formPending}
             trigger={
-              <Button>
+              <Button disabled={formPending}>
                 <FormOutlinedIcon />
               </Button>
             }
@@ -330,7 +328,6 @@ const FormFieldEmailSelect = ({
 
 const FormFieldDomainsModalForm = ({
   data,
-  disabled,
   trigger,
   onFinish,
 }: {
@@ -371,7 +368,6 @@ const FormFieldDomainsModalForm = ({
 
   return (
     <ModalForm
-      disabled={disabled}
       layout="vertical"
       form={formInst}
       initialValues={model}
@@ -389,17 +385,7 @@ const FormFieldDomainsModalForm = ({
   );
 };
 
-const FormFieldNameserversModalForm = ({
-  data,
-  disabled,
-  trigger,
-  onFinish,
-}: {
-  data: string;
-  disabled?: boolean;
-  trigger?: React.ReactNode;
-  onFinish?: (data: string) => void;
-}) => {
+const FormFieldNameserversModalForm = ({ data, trigger, onFinish }: { data: string; trigger?: React.ReactNode; onFinish?: (data: string) => void }) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -432,7 +418,6 @@ const FormFieldNameserversModalForm = ({
 
   return (
     <ModalForm
-      disabled={disabled}
       layout="vertical"
       form={formInst}
       initialValues={model}