feat(ui): new WorkflowNotifyNodeForm using antd

ui/src/components/workflow/NotifyForm.tsx

@@ -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;

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:

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;

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")}