From 6bd3b4998ebf68d1407a7d46f72f7f46f0429955 Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Wed, 25 Dec 2024 20:57:09 +0800
Subject: [PATCH] feat(ui): new WorkflowNotifyNodeForm using antd

---
 internal/certificate/service.go               |   4 +-
 internal/domain/setting.go                    |   8 +-
 .../workflow/node-processor/notify_node.go    |   4 +-
 .../access/AccessEditFormKubernetesConfig.tsx |   2 +-
 .../access/AccessEditFormSSHConfig.tsx        |   2 +-
 ui/src/components/workflow/NotifyForm.tsx     | 174 ------------------
 ui/src/components/workflow/PanelBody.tsx      |   4 +-
 .../workflow/node/NotifyNodeForm.tsx          | 118 ++++++++++++
 .../workflow/node/StartNodeForm.tsx           |   6 +-
 ui/src/i18n/locales/en/nls.workflow.json      |  17 +-
 ui/src/i18n/locales/zh/nls.workflow.json      |  17 +-
 ui/src/pages/settings/SettingsSSLProvider.tsx |   4 +-
 ui/src/pages/workflows/WorkflowDetail.tsx     |  43 ++---
 13 files changed, 168 insertions(+), 235 deletions(-)
 delete mode 100644 ui/src/components/workflow/NotifyForm.tsx
 create mode 100644 ui/src/components/workflow/node/NotifyNodeForm.tsx

diff --git a/internal/certificate/service.go b/internal/certificate/service.go
index 2b29b9f5..08f485b2 100644
--- a/internal/certificate/service.go
+++ b/internal/certificate/service.go
@@ -73,8 +73,8 @@ func buildMsg(records []domain.Certificate) *domain.NotifyMessage {
 		json.Unmarshal([]byte(setting.Content), &templates)
 
 		if templates != nil && len(templates.NotifyTemplates) > 0 {
-			subject = templates.NotifyTemplates[0].Title
-			message = templates.NotifyTemplates[0].Content
+			subject = templates.NotifyTemplates[0].Subject
+			message = templates.NotifyTemplates[0].Message
 		}
 	}
 
diff --git a/internal/domain/setting.go b/internal/domain/setting.go
index da368566..813b6aa4 100644
--- a/internal/domain/setting.go
+++ b/internal/domain/setting.go
@@ -35,11 +35,11 @@ type NotifyTemplates struct {
 }
 
 type NotifyTemplate struct {
-	Title   string `json:"title"`
-	Content string `json:"content"`
+	Subject string `json:"subject"`
+	Message string `json:"message"`
 }
 
 type NotifyMessage struct {
-	Subject string
-	Message string
+	Subject string `json:"subject"`
+	Message string `json:"message"`
 }
diff --git a/internal/workflow/node-processor/notify_node.go b/internal/workflow/node-processor/notify_node.go
index 7fd92ec0..7ef60a61 100644
--- a/internal/workflow/node-processor/notify_node.go
+++ b/internal/workflow/node-processor/notify_node.go
@@ -41,8 +41,8 @@ func (n *notifyNode) Run(ctx context.Context) error {
 		return err
 	}
 
-	if err := notify.SendToChannel(n.node.GetConfigString("title"),
-		n.node.GetConfigString("content"),
+	if err := notify.SendToChannel(n.node.GetConfigString("subject"),
+		n.node.GetConfigString("message"),
 		n.node.GetConfigString("channel"),
 		channelConfig,
 	); err != nil {
diff --git a/ui/src/components/access/AccessEditFormKubernetesConfig.tsx b/ui/src/components/access/AccessEditFormKubernetesConfig.tsx
index a00e734a..e96e6c2c 100644
--- a/ui/src/components/access/AccessEditFormKubernetesConfig.tsx
+++ b/ui/src/components/access/AccessEditFormKubernetesConfig.tsx
@@ -53,7 +53,7 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onMod
 
   const handleKubeFileChange: UploadProps["onChange"] = async ({ file }) => {
     if (file && file.status !== "removed") {
-      formInst.setFieldValue("kubeConfig", (await readFileContent(file.originFileObj ?? (file as unknown as File))).trim());
+      formInst.setFieldValue("kubeConfig", await readFileContent(file.originFileObj ?? (file as unknown as File)));
       setKubeFileList([file]);
     } else {
       formInst.setFieldValue("kubeConfig", "");
diff --git a/ui/src/components/access/AccessEditFormSSHConfig.tsx b/ui/src/components/access/AccessEditFormSSHConfig.tsx
index ec0d5ba9..2b209204 100644
--- a/ui/src/components/access/AccessEditFormSSHConfig.tsx
+++ b/ui/src/components/access/AccessEditFormSSHConfig.tsx
@@ -88,7 +88,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
 
   const handleKeyFileChange: UploadProps["onChange"] = async ({ file }) => {
     if (file && file.status !== "removed") {
-      formInst.setFieldValue("key", (await readFileContent(file.originFileObj ?? (file as unknown as File))).trim());
+      formInst.setFieldValue("key", await readFileContent(file.originFileObj ?? (file as unknown as File)));
       setKeyFileList([file]);
     } else {
       formInst.setFieldValue("key", "");
diff --git a/ui/src/components/workflow/NotifyForm.tsx b/ui/src/components/workflow/NotifyForm.tsx
deleted file mode 100644
index 75d87643..00000000
--- a/ui/src/components/workflow/NotifyForm.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger } from "../ui/select";
-import { Input } from "../ui/input";
-import { useWorkflowStore } from "@/stores/workflow";
-import { useZustandShallowSelector } from "@/hooks";
-import { usePanel } from "./PanelProvider";
-import { useTranslation } from "react-i18next";
-import { Button } from "../ui/button";
-import { useNotifyChannelStore } from "@/stores/notify";
-import { useEffect, useState } from "react";
-import { notifyChannelsMap } from "@/domain/settings";
-import { SelectValue } from "@radix-ui/react-select";
-import { Textarea } from "../ui/textarea";
-import { RefreshCw, Settings } from "lucide-react";
-
-type NotifyFormProps = {
-  data: WorkflowNode;
-};
-
-type ChannelName = {
-  key: string;
-  label: string;
-};
-
-const i18nPrefix = "workflow.node.notify.form";
-const NotifyForm = ({ data }: NotifyFormProps) => {
-  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
-  const { hidePanel } = usePanel();
-  const { t } = useTranslation();
-  const { channels: supportedChannels, fetchChannels } = useNotifyChannelStore();
-
-  const [channels, setChannels] = useState<ChannelName[]>([]);
-
-  useEffect(() => {
-    fetchChannels();
-  }, [fetchChannels]);
-
-  useEffect(() => {
-    const rs: ChannelName[] = [];
-    for (const channel of notifyChannelsMap.values()) {
-      if (supportedChannels[channel.type]?.enabled) {
-        rs.push({ key: channel.type, label: channel.name });
-      }
-    }
-    setChannels(rs);
-  }, [supportedChannels]);
-
-  const formSchema = z.object({
-    channel: z.string(),
-    title: z.string().min(1),
-    content: z.string().min(1),
-  });
-
-  let config: WorkflowNodeConfig = {
-    channel: "",
-    title: "",
-    content: "",
-  };
-
-  if (data) config = data.config ?? config;
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      channel: config.channel as string,
-      title: config.title as string,
-      content: config.content as string,
-    },
-  });
-
-  const onSubmit = (config: z.infer<typeof formSchema>) => {
-    updateNode({ ...data, config, validated: true });
-    hidePanel();
-  };
-
-  return (
-    <>
-      <Form {...form}>
-        <form
-          onSubmit={(e) => {
-            e.stopPropagation();
-            form.handleSubmit(onSubmit)(e);
-          }}
-          className="space-y-8 dark:text-stone-200"
-        >
-          <FormField
-            control={form.control}
-            name="channel"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className="flex justify-between items-center">
-                  <div className="flex space-x-2 items-center">
-                    <div>{t(`${i18nPrefix}.channel.label`)}</div>
-                    <RefreshCw size={16} className="cursor-pointer" onClick={() => fetchChannels()} />
-                  </div>
-                  <a
-                    href="#/settings/notification"
-                    target="_blank"
-                    className="flex justify-between items-center space-x-1 font-normal text-primary hover:underline cursor-pointer"
-                  >
-                    <Settings size={16} /> <div>{t(`${i18nPrefix}.settingChannel.label`)}</div>
-                  </a>
-                </FormLabel>
-                <FormControl>
-                  <Select
-                    {...field}
-                    value={field.value}
-                    onValueChange={(value) => {
-                      form.setValue("channel", value);
-                    }}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder={t(`${i18nPrefix}.channel.placeholder`)} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        {channels.map((item) => (
-                          <SelectItem key={item.key} value={item.key}>
-                            <div>{t(item.label)}</div>
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </FormControl>
-
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="title"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t(`${i18nPrefix}.title.label`)}</FormLabel>
-                <FormControl>
-                  <Input placeholder={t(`${i18nPrefix}.title.placeholder`)} {...field} />
-                </FormControl>
-
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="content"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t(`${i18nPrefix}.content.label`)}</FormLabel>
-                <FormControl>
-                  <Textarea placeholder={t(`${i18nPrefix}.content.placeholder`)} {...field} />
-                </FormControl>
-
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <div className="flex justify-end">
-            <Button type="submit">{t("common.button.save")}</Button>
-          </div>
-        </form>
-      </Form>
-    </>
-  );
-};
-
-export default NotifyForm;
diff --git a/ui/src/components/workflow/PanelBody.tsx b/ui/src/components/workflow/PanelBody.tsx
index 2c38e87f..50029ff2 100644
--- a/ui/src/components/workflow/PanelBody.tsx
+++ b/ui/src/components/workflow/PanelBody.tsx
@@ -2,7 +2,7 @@ import { WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
 import StartNodeForm from "./node/StartNodeForm";
 import DeployPanelBody from "./DeployPanelBody";
 import ApplyForm from "./ApplyForm";
-import NotifyForm from "./NotifyForm";
+import NotifyNodeForm from "./node/NotifyNodeForm";
 
 type PanelBodyProps = {
   data: WorkflowNode;
@@ -17,7 +17,7 @@ const PanelBody = ({ data }: PanelBodyProps) => {
       case WorkflowNodeType.Deploy:
         return <DeployPanelBody data={data} />;
       case WorkflowNodeType.Notify:
-        return <NotifyForm data={data} />;
+        return <NotifyNodeForm data={data} />;
       case WorkflowNodeType.Branch:
         return <div>分支节点</div>;
       case WorkflowNodeType.Condition:
diff --git a/ui/src/components/workflow/node/NotifyNodeForm.tsx b/ui/src/components/workflow/node/NotifyNodeForm.tsx
new file mode 100644
index 00000000..b37b421e
--- /dev/null
+++ b/ui/src/components/workflow/node/NotifyNodeForm.tsx
@@ -0,0 +1,118 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router";
+import { useTranslation } from "react-i18next";
+import { useDeepCompareEffect } from "ahooks";
+import { Button, Form, Input, Select } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+import { ChevronRight as ChevronRightIcon } from "lucide-react";
+
+import { usePanel } from "../PanelProvider";
+import { useZustandShallowSelector } from "@/hooks";
+import { notifyChannelsMap } from "@/domain/settings";
+import { type WorkflowNode, type WorkflowNodeConfig } from "@/domain/workflow";
+import { useNotifyChannelStore } from "@/stores/notify";
+import { useWorkflowStore } from "@/stores/workflow";
+
+export type NotifyNodeFormProps = {
+  data: WorkflowNode;
+};
+
+const initFormModel = () => {
+  return {
+    subject: "",
+    message: "",
+  } as WorkflowNodeConfig;
+};
+
+const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
+  const { t } = useTranslation();
+
+  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
+  const { hidePanel } = usePanel();
+
+  const { channels, loadedAtOnce: channelsLoadedAtOnce, fetchChannels } = useNotifyChannelStore();
+  useEffect(() => {
+    fetchChannels();
+  }, [fetchChannels]);
+
+  const formSchema = z.object({
+    subject: z
+      .string({ message: t("workflow.nodes.notify.form.subject.placeholder") })
+      .min(1, t("workflow.nodes.notify.form.subject.placeholder"))
+      .max(1000, t("common.errmsg.string_max", { max: 1000 })),
+    message: z
+      .string({ message: t("workflow.nodes.notify.form.message.placeholder") })
+      .min(1, t("workflow.nodes.notify.form.message.placeholder"))
+      .max(1000, t("common.errmsg.string_max", { max: 1000 })),
+    channel: z.string({ message: t("workflow.nodes.notify.form.channel.placeholder") }).min(1, t("workflow.nodes.notify.form.channel.placeholder")),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const [formInst] = Form.useForm<z.infer<typeof formSchema>>();
+  const [formPending, setFormPending] = useState(false);
+
+  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(
+    (data?.config as Partial<z.infer<typeof formSchema>>) ?? initFormModel()
+  );
+  useDeepCompareEffect(() => {
+    setInitialValues((data?.config as Partial<z.infer<typeof formSchema>>) ?? initFormModel());
+  }, [data?.config]);
+
+  const handleFormFinish = async (values: z.infer<typeof formSchema>) => {
+    setFormPending(true);
+
+    try {
+      await updateNode({ ...data, config: { ...values }, validated: true });
+
+      hidePanel();
+    } finally {
+      setFormPending(false);
+    }
+  };
+
+  return (
+    <Form form={formInst} disabled={formPending} initialValues={initialValues} layout="vertical" onFinish={handleFormFinish}>
+      <Form.Item name="subject" label={t("workflow.nodes.notify.form.subject.label")} rules={[formRule]}>
+        <Input placeholder={t("workflow.nodes.notify.form.subject.placeholder")} />
+      </Form.Item>
+
+      <Form.Item name="message" label={t("workflow.nodes.notify.form.message.label")} rules={[formRule]}>
+        <Input.TextArea autoSize={{ minRows: 3, maxRows: 5 }} placeholder={t("workflow.nodes.notify.form.message.placeholder")} />
+      </Form.Item>
+
+      <Form.Item name="channel" rules={[formRule]}>
+        <label className="block mb-1">
+          <div className="flex items-center justify-between gap-4 w-full overflow-hidden">
+            <div className="flex-grow max-w-full truncate">{t("workflow.nodes.notify.form.channel.label")}</div>
+            <div className="text-right">
+              <Link className="ant-typography" to="/settings/notification" target="_blank">
+                <Button className="p-0" type="link">
+                  {t("workflow.nodes.notify.form.channel.button")}
+                  <ChevronRightIcon size={14} />
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </label>
+        <Select
+          loading={!channelsLoadedAtOnce}
+          options={Object.entries(channels)
+            .filter(([_, v]) => v?.enabled)
+            .map(([k, _]) => ({
+              label: t(notifyChannelsMap.get(k)?.name ?? k),
+              value: k,
+            }))}
+          placeholder={t("workflow.nodes.notify.form.channel.placeholder")}
+        />
+      </Form.Item>
+
+      <Form.Item>
+        <Button type="primary" htmlType="submit" loading={formPending}>
+          {t("common.button.save")}
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default NotifyNodeForm;
diff --git a/ui/src/components/workflow/node/StartNodeForm.tsx b/ui/src/components/workflow/node/StartNodeForm.tsx
index 80bdfad1..ab4d1c5b 100644
--- a/ui/src/components/workflow/node/StartNodeForm.tsx
+++ b/ui/src/components/workflow/node/StartNodeForm.tsx
@@ -48,7 +48,7 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
       }
     });
   const formRule = createSchemaFieldRule(formSchema);
-  const [form] = Form.useForm<z.infer<typeof formSchema>>();
+  const [formInst] = Form.useForm<z.infer<typeof formSchema>>();
   const [formPending, setFormPending] = useState(false);
 
   const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(
@@ -69,7 +69,7 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
     setTriggerType(value);
 
     if (value === "auto") {
-      form.setFieldValue("crontab", form.getFieldValue("crontab") || initFormModel().crontab);
+      formInst.setFieldValue("crontab", formInst.getFieldValue("crontab") || initFormModel().crontab);
     }
   };
 
@@ -90,7 +90,7 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
   };
 
   return (
-    <Form form={form} disabled={formPending} initialValues={initialValues} layout="vertical" onFinish={handleFormFinish}>
+    <Form form={formInst} disabled={formPending} initialValues={initialValues} layout="vertical" onFinish={handleFormFinish}>
       <Form.Item
         name="executionMethod"
         label={t("workflow.nodes.start.form.trigger.label")}
diff --git a/ui/src/i18n/locales/en/nls.workflow.json b/ui/src/i18n/locales/en/nls.workflow.json
index 2fdb4002..6fe4c2bb 100644
--- a/ui/src/i18n/locales/en/nls.workflow.json
+++ b/ui/src/i18n/locales/en/nls.workflow.json
@@ -40,6 +40,13 @@
   "workflow.nodes.start.form.trigger_cron.tooltip": "Time zone is based on the server.",
   "workflow.nodes.start.form.trigger_cron.extra": "Expected execution time for the last 5 times:",
   "workflow.nodes.start.form.trigger_cron_alert.content": "Tips: If you have multiple workflows, it is recommended to set them to run at multiple times of the day instead of always running at specific times.<br><br>Reference links:<br>1. <a href=\"https://letsencrypt.org/docs/rate-limits/\" target=\"_blank\">Let’s Encrypt rate limits</a><br>2. <a href=\"https://letsencrypt.org/docs/faq/#why-should-my-let-s-encrypt-acme-client-run-at-a-random-time\" target=\"_blank\">Why should my Let’s Encrypt (ACME) client run at a random time?</a>",
+  "workflow.nodes.notify.form.subject.label": "Subject",
+  "workflow.nodes.notify.form.subject.placeholder": "Please enter subject",
+  "workflow.nodes.notify.form.message.label": "Message",
+  "workflow.nodes.notify.form.message.placeholder": "Please enter message",
+  "workflow.nodes.notify.form.channel.label": "Channel",
+  "workflow.nodes.notify.form.channel.placeholder": "Please select channel",
+  "workflow.nodes.notify.form.channel.button": "Configure",
 
   "workflow_run.props.id": "ID",
   "workflow_run.props.status": "Status",
@@ -70,13 +77,5 @@
   "workflow.node.setting.label": "Setting Node",
   "workflow.node.delete.label": "Delete Node",
   "workflow.node.addBranch.label": "Add Branch",
-  "workflow.node.selectNodeType.label": "Select Node Type",
-
-  "workflow.node.notify.form.title.label": "Title",
-  "workflow.node.notify.form.title.placeholder": "Please enter title",
-  "workflow.node.notify.form.content.label": "Content",
-  "workflow.node.notify.form.content.placeholder": "Please enter content",
-  "workflow.node.notify.form.channel.label": "Channel",
-  "workflow.node.notify.form.channel.placeholder": "Please select channel",
-  "workflow.node.notify.form.settingChannel.label": "Configure Channels"
+  "workflow.node.selectNodeType.label": "Select Node Type"
 }
diff --git a/ui/src/i18n/locales/zh/nls.workflow.json b/ui/src/i18n/locales/zh/nls.workflow.json
index 0d75ce85..5848840c 100644
--- a/ui/src/i18n/locales/zh/nls.workflow.json
+++ b/ui/src/i18n/locales/zh/nls.workflow.json
@@ -40,6 +40,13 @@
   "workflow.nodes.start.form.trigger_cron.tooltip": "时区以服务器设置为准。",
   "workflow.nodes.start.form.trigger_cron.extra": "预计最近 5 次执行时间：",
   "workflow.nodes.start.form.trigger_cron_alert.content": "小贴士：如果你有多个工作流，建议将它们设置为在一天中的多个时间段运行，而非总是在相同的特定时间。<br><br>参考链接：<br>1. <a href=\"https://letsencrypt.org/zh-cn/docs/rate-limits/\" target=\"_blank\">Let’s Encrypt 速率限制</a><br>2. <a href=\"https://letsencrypt.org/zh-cn/docs/faq/#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%88%91%E7%9A%84-let-s-encrypt-acme-%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%90%AF%E5%8A%A8%E6%97%B6%E9%97%B4%E5%BA%94%E5%BD%93%E9%9A%8F%E6%9C%BA\" target=\"_blank\">为什么我的 Let’s Encrypt (ACME) 客户端启动时间应当随机？</a>",
+  "workflow.nodes.notify.form.subject.label": "通知主题",
+  "workflow.nodes.notify.form.subject.placeholder": "请输入通知主题",
+  "workflow.nodes.notify.form.message.label": "通知内容",
+  "workflow.nodes.notify.form.message.placeholder": "请输入通知内容",
+  "workflow.nodes.notify.form.channel.label": "通知渠道",
+  "workflow.nodes.notify.form.channel.placeholder": "请选择通知渠道",
+  "workflow.nodes.notify.form.channel.button": "去配置",
 
   "workflow_run.props.id": "ID",
   "workflow_run.props.status": "状态",
@@ -70,13 +77,5 @@
   "workflow.node.setting.label": "设置节点",
   "workflow.node.delete.label": "删除节点",
   "workflow.node.addBranch.label": "添加分支",
-  "workflow.node.selectNodeType.label": "选择节点类型",
-
-  "workflow.node.notify.form.title.label": "标题",
-  "workflow.node.notify.form.title.placeholder": "请输入标题",
-  "workflow.node.notify.form.content.label": "内容",
-  "workflow.node.notify.form.content.placeholder": "请输入内容",
-  "workflow.node.notify.form.channel.label": "推送渠道",
-  "workflow.node.notify.form.channel.placeholder": "请选择推送渠道",
-  "workflow.node.notify.form.settingChannel.label": "设置推送渠道"
+  "workflow.node.selectNodeType.label": "选择节点类型"
 }
diff --git a/ui/src/pages/settings/SettingsSSLProvider.tsx b/ui/src/pages/settings/SettingsSSLProvider.tsx
index a4cfed09..bd088fe8 100644
--- a/ui/src/pages/settings/SettingsSSLProvider.tsx
+++ b/ui/src/pages/settings/SettingsSSLProvider.tsx
@@ -208,7 +208,7 @@ const SettingsSSLProvider = () => {
   const [messageApi, MessageContextHolder] = message.useMessage();
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
-  const [form] = Form.useForm<{ provider?: string }>();
+  const [formInst] = Form.useForm<{ provider?: string }>();
   const [formPending, setFormPending] = useState(false);
 
   const [settings, setSettings] = useState<SettingsModel<SSLProviderSettingsContent>>();
@@ -267,7 +267,7 @@ const SettingsSSLProvider = () => {
       {NotificationContextHolder}
 
       <Show when={!loading} fallback={<Skeleton active />}>
-        <Form form={form} disabled={formPending} layout="vertical" initialValues={{ provider: providerType }}>
+        <Form form={formInst} disabled={formPending} layout="vertical" initialValues={{ provider: providerType }}>
           <Form.Item className="mb-2" name="provider" label={t("settings.sslprovider.form.provider.label")}>
             <CheckCard.Group className="w-full" onChange={(value) => setFormProviderType(value as SSLProviders)}>
               <CheckCard
diff --git a/ui/src/pages/workflows/WorkflowDetail.tsx b/ui/src/pages/workflows/WorkflowDetail.tsx
index 3ffc7330..8ef90a5b 100644
--- a/ui/src/pages/workflows/WorkflowDetail.tsx
+++ b/ui/src/pages/workflows/WorkflowDetail.tsx
@@ -1,8 +1,7 @@
 import { cloneElement, memo, useEffect, useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
-import { Button, Card, Dropdown, Form, Input, message, Modal, notification, Tabs, Typography, type FormInstance } from "antd";
+import { Button, Card, Dropdown, Form, Input, message, Modal, notification, Tabs, Typography } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { PageHeader } from "@ant-design/pro-components";
 import { z } from "zod";
@@ -13,7 +12,7 @@ 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 { 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";
@@ -227,31 +226,23 @@ const WorkflowBaseInfoModalForm = memo(
         .nullish(),
     });
     const formRule = createSchemaFieldRule(formSchema);
-    const [form] = Form.useForm<FormInstance<z.infer<typeof formSchema>>>();
-    const [formPending, setFormPending] = useState(false);
-
-    const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model as Partial<z.infer<typeof formSchema>>);
-    useDeepCompareEffect(() => {
-      setInitialValues(model as Partial<z.infer<typeof formSchema>>);
-    }, [model]);
-
-    const handleClickOk = async () => {
-      setFormPending(true);
-      try {
-        await form.validateFields();
-      } catch (err) {
-        setFormPending(false);
-        return Promise.reject();
-      }
-
-      try {
-        const ret = await onFinish?.(form.getFieldsValue(true));
+    const {
+      form: formInst,
+      formPending,
+      formProps,
+      ...formApi
+    } = useAntdForm<z.infer<typeof formSchema>>({
+      initialValues: model,
+      onSubmit: async () => {
+        const ret = await onFinish?.(formInst.getFieldsValue(true));
         if (ret != null && !ret) return;
 
         setOpen(false);
-      } finally {
-        setFormPending(false);
-      }
+      },
+    });
+
+    const handleClickOk = async () => {
+      formApi.submit();
     };
 
     const handleClickCancel = () => {
@@ -278,7 +269,7 @@ const WorkflowBaseInfoModalForm = memo(
           onCancel={handleClickCancel}
         >
           <div className="pt-4 pb-2">
-            <Form form={form} initialValues={initialValues} layout="vertical">
+            <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>