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 {...cancelButtonProps} onClick={handleCancelClick}>
-            <Button type="primary" loading={formPending} onClick={handleOkClick}>
+              {cancelText || t("common.button.cancel")}
-              2
+            </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 = ({
+const FormFieldNameserversModalForm = ({ data, trigger, onFinish }: { data: string; trigger?: React.ReactNode; onFinish?: (data: string) => void }) => {
-  data,
-  disabled,
-  trigger,
-  onFinish,
-}: {
-  data: string;
-  disabled?: boolean;
-  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}

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Button, Card, Dropdown, Form, Input, message, Modal, notification, Tabs, Typography } from "antd";
@@ -8,11 +8,12 @@ import { DeleteOutlined as DeleteOutlinedIcon, EllipsisOutlined as EllipsisOutli
 import { z } from "zod";
 
 import Show from "@/components/Show";
+import ModalForm from "@/components/core/ModalForm";
 import End from "@/components/workflow/End";
 import NodeRender from "@/components/workflow/NodeRender";
 import WorkflowRuns from "@/components/workflow/run/WorkflowRuns";
 import WorkflowProvider from "@/components/workflow/WorkflowProvider";
-import { useAntdForm, useTriggerElement, useZustandShallowSelector } from "@/hooks";
+import { useAntdForm, useZustandShallowSelector } from "@/hooks";
 import { allNodesValidated, type WorkflowModel, type WorkflowNode } from "@/domain/workflow";
 import { useWorkflowStore } from "@/stores/workflow";
 import { remove as removeWorkflow } from "@/repository/workflow";
@@ -125,7 +126,7 @@ const WorkflowDetail = () => {
           title={workflow.name}
           extra={[
             <Button.Group key="actions">
-              <WorkflowBaseInfoModalForm initialValues={workflow} trigger={<Button>{t("common.button.edit")}</Button>} onFinish={handleBaseInfoFormFinish} />
+              <WorkflowBaseInfoModalForm data={workflow} trigger={<Button>{t("common.button.edit")}</Button>} onFinish={handleBaseInfoFormFinish} />
 
               <Button onClick={handleEnableChange}>{workflow.enabled ? t("common.button.disable") : t("common.button.enable")}</Button>
 
@@ -182,93 +183,70 @@ const WorkflowDetail = () => {
   );
 };
 
-const WorkflowBaseInfoModalForm = memo(
+const WorkflowBaseInfoModalForm = ({
-  ({
+  data,
-    initialValues,
+  trigger,
-    trigger,
+  onFinish,
-    onFinish,
+}: {
-  }: {
+  data: Pick<WorkflowModel, "name" | "description">;
-    initialValues: Pick<WorkflowModel, "name" | "description">;
+  trigger?: React.ReactNode;
-    trigger?: React.ReactNode;
+  onFinish?: (values: Pick<WorkflowModel, "name" | "description">) => Promise<void | boolean>;
-    onFinish?: (values: Pick<WorkflowModel, "name" | "description">) => Promise<void | boolean>;
+}) => {
-  }) => {
+  const { t } = useTranslation();
-    const { t } = useTranslation();
 
-    const [open, setOpen] = useState(false);
+  const formSchema = z.object({
+    name: z
+      .string({ message: t("workflow.baseinfo.form.name.placeholder") })
+      .trim()
+      .min(1, t("workflow.baseinfo.form.name.placeholder"))
+      .max(64, t("common.errmsg.string_max", { max: 64 })),
+    description: z
+      .string({ message: t("workflow.baseinfo.form.description.placeholder") })
+      .trim()
+      .min(0, t("workflow.baseinfo.form.description.placeholder"))
+      .max(256, t("common.errmsg.string_max", { max: 256 }))
+      .nullish(),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const {
+    form: formInst,
+    formPending,
+    formProps,
+    ...formApi
+  } = useAntdForm<z.infer<typeof formSchema>>({
+    initialValues: data,
+    onSubmit: async () => {
+      const ret = await onFinish?.(formInst.getFieldsValue(true));
+      if (ret != null && !ret) return false;
+      return true;
+    },
+  });
 
-    const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
+  const handleFinish = async () => {
+    return formApi.submit();
+  };
 
-    const formSchema = z.object({
+  return (
-      name: z
+    <ModalForm
-        .string({ message: t("workflow.baseinfo.form.name.placeholder") })
+      disabled={formPending}
-        .trim()
+      layout="vertical"
-        .min(1, t("workflow.baseinfo.form.name.placeholder"))
+      form={formInst}
-        .max(64, t("common.errmsg.string_max", { max: 64 })),
+      modalProps={{ destroyOnClose: true }}
-      description: z
+      okText={t("common.button.save")}
-        .string({ message: t("workflow.baseinfo.form.description.placeholder") })
+      title={t(`workflow.baseinfo.modal.title`)}
-        .trim()
+      trigger={trigger}
-        .min(0, t("workflow.baseinfo.form.description.placeholder"))
+      width={480}
-        .max(256, t("common.errmsg.string_max", { max: 256 }))
+      {...formProps}
-        .nullish(),
+      onFinish={handleFinish}
-    });
+    >
-    const formRule = createSchemaFieldRule(formSchema);
+      <Form.Item name="name" label={t("workflow.baseinfo.form.name.label")} rules={[formRule]}>
-    const {
+        <Input placeholder={t("workflow.baseinfo.form.name.placeholder")} />
-      form: formInst,
+      </Form.Item>
-      formPending,
-      formProps,
-      ...formApi
-    } = useAntdForm<z.infer<typeof formSchema>>({
-      initialValues: initialValues,
-      onSubmit: async () => {
-        const ret = await onFinish?.(formInst.getFieldsValue(true));
-        if (ret != null && !ret) return;
-
-        setOpen(false);
-      },
-    });
-
-    const handleClickOk = async () => {
-      formApi.submit();
-    };
-
-    const handleClickCancel = () => {
-      if (formPending) return Promise.reject();
-
-      setOpen(false);
-    };
-
-    return (
-      <>
-        {triggerDom}
-
-        <Modal
-          afterClose={() => setOpen(false)}
-          cancelButtonProps={{ disabled: formPending }}
-          closable
-          confirmLoading={formPending}
-          destroyOnClose
-          okText={t("common.button.save")}
-          open={open}
-          title={t(`workflow.baseinfo.modal.title`)}
-          width={480}
-          onOk={handleClickOk}
-          onCancel={handleClickCancel}
-        >
-          <div className="pt-4 pb-2">
-            <Form {...formProps} form={formInst} layout="vertical">
-              <Form.Item name="name" label={t("workflow.baseinfo.form.name.label")} rules={[formRule]}>
-                <Input placeholder={t("workflow.baseinfo.form.name.placeholder")} />
-              </Form.Item>
-
-              <Form.Item name="description" label={t("workflow.baseinfo.form.description.label")} rules={[formRule]}>
-                <Input placeholder={t("workflow.baseinfo.form.description.placeholder")} />
-              </Form.Item>
-            </Form>
-          </div>
-        </Modal>
-      </>
-    );
-  }
-);
 
+      <Form.Item name="description" label={t("workflow.baseinfo.form.description.label")} rules={[formRule]}>
+        <Input placeholder={t("workflow.baseinfo.form.description.placeholder")} />
+      </Form.Item>
+    </ModalForm>
+  );
+};
 export default WorkflowDetail;