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,22 +183,17 @@ const WorkflowDetail = () => {
   );
 };
 
-const WorkflowBaseInfoModalForm = memo(
+const WorkflowBaseInfoModalForm = ({
-  ({
+  data,
-    initialValues,
   trigger,
   onFinish,
-  }: {
+}: {
-    initialValues: Pick<WorkflowModel, "name" | "description">;
+  data: Pick<WorkflowModel, "name" | "description">;
   trigger?: React.ReactNode;
   onFinish?: (values: Pick<WorkflowModel, "name" | "description">) => Promise<void | boolean>;
-  }) => {
+}) => {
   const { t } = useTranslation();
 
-    const [open, setOpen] = useState(false);
-
-    const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
-
   const formSchema = z.object({
     name: z
       .string({ message: t("workflow.baseinfo.form.name.placeholder") })
@@ -218,44 +214,31 @@ const WorkflowBaseInfoModalForm = memo(
     formProps,
     ...formApi
   } = useAntdForm<z.infer<typeof formSchema>>({
-      initialValues: initialValues,
+    initialValues: data,
     onSubmit: async () => {
       const ret = await onFinish?.(formInst.getFieldsValue(true));
-        if (ret != null && !ret) return;
+      if (ret != null && !ret) return false;
-
+      return true;
-        setOpen(false);
     },
   });
 
-    const handleClickOk = async () => {
+  const handleFinish = async () => {
-      formApi.submit();
+    return formApi.submit();
-    };
-
-    const handleClickCancel = () => {
-      if (formPending) return Promise.reject();
-
-      setOpen(false);
   };
 
   return (
-      <>
+    <ModalForm
-        {triggerDom}
+      disabled={formPending}
-
+      layout="vertical"
-        <Modal
+      form={formInst}
-          afterClose={() => setOpen(false)}
+      modalProps={{ destroyOnClose: true }}
-          cancelButtonProps={{ disabled: formPending }}
-          closable
-          confirmLoading={formPending}
-          destroyOnClose
       okText={t("common.button.save")}
-          open={open}
       title={t(`workflow.baseinfo.modal.title`)}
+      trigger={trigger}
       width={480}
-          onOk={handleClickOk}
+      {...formProps}
-          onCancel={handleClickCancel}
+      onFinish={handleFinish}
     >
-          <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>
@@ -263,12 +246,7 @@ const WorkflowBaseInfoModalForm = memo(
       <Form.Item name="description" label={t("workflow.baseinfo.form.description.label")} rules={[formRule]}>
         <Input placeholder={t("workflow.baseinfo.form.description.placeholder")} />
       </Form.Item>
-            </Form>
+    </ModalForm>
-          </div>
-        </Modal>
-      </>
   );
-  }
+};
-);
-
 export default WorkflowDetail;