feat(ui): new WorkflowApplyNodeForm using antd

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

@@ -1,14 +1,13 @@
-import { memo, useEffect, useState } from "react";
+import { memo, useEffect } 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 { useAntdForm, useZustandShallowSelector } from "@/hooks";
 import { notifyChannelsMap } from "@/domain/settings";
 import { type WorkflowNode, type WorkflowNodeConfig } from "@/domain/workflow";
 import { useNotifyChannelStore } from "@/stores/notify";
@@ -20,8 +19,8 @@ export type NotifyNodeFormProps = {
 
 const initFormModel = (): WorkflowNodeConfig => {
   return {
-    subject: "",
-    message: "",
+    subject: "Completed!",
+    message: "Your workflow has been completed on Certimate.",
   };
 };
 
@@ -48,40 +47,30 @@ const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
     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 {
+  const {
+    form: formInst,
+    formPending,
+    formProps,
+  } = useAntdForm<z.infer<typeof formSchema>>({
+    initialValues: data?.config ?? initFormModel(),
+    onSubmit: async (values) => {
       await updateNode({ ...data, config: { ...values }, validated: true });
-
       hidePanel();
-    } finally {
-      setFormPending(false);
-    }
-  };
+    },
+  });
 
   return (
-    <Form form={formInst} disabled={formPending} initialValues={initialValues} layout="vertical" onFinish={handleFormFinish}>
+    <Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
       <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")} />
+        <Input.TextArea autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t("workflow.nodes.notify.form.message.placeholder")} />
       </Form.Item>
 
-      <Form.Item name="channel" rules={[formRule]}>
-        <label className="block mb-1">
+      <Form.Item>
+        <label className="block mb-[2px]">
           <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">
@@ -94,16 +83,18 @@ const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
             </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 name="channel" rules={[formRule]}>
+          <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>
 
       <Form.Item>