feat(ui): new WorkflowStartNodeForm using antd

2024-12-25 00:36:02 +08:00
parent 401fa3dcdd
commit c9024c5611
13 changed files with 262 additions and 179 deletions
--- a/ui/src/components/workflow/node/StartNodeForm.tsx
+++ b/ui/src/components/workflow/node/StartNodeForm.tsx
@@ -0,0 +1,139 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useDeepCompareEffect } from "ahooks";
+import { Alert, Button, Form, Input, Radio } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import dayjs from "dayjs";
+import { z } from "zod";
+
+import { usePanel } from "../PanelProvider";
+import { useZustandShallowSelector } from "@/hooks";
+import { type WorkflowNode, type WorkflowNodeConfig } from "@/domain/workflow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { validCronExpression, getNextCronExecutions } from "@/utils/cron";
+
+export type StartNodeFormProps = {
+  data: WorkflowNode;
+};
+
+const initModel = () => {
+  return {
+    executionMethod: "auto",
+    crontab: "0 0 * * *",
+  } as WorkflowNodeConfig;
+};
+
+const StartNodeForm = ({ data }: StartNodeFormProps) => {
+  const { t } = useTranslation();
+
+  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
+  const { hidePanel } = usePanel();
+
+  const formSchema = z
+    .object({
+      executionMethod: z.string({ message: t("workflow.nodes.start.form.trigger.placeholder") }).min(1, t("workflow.nodes.start.form.trigger.placeholder")),
+      crontab: z.string().nullish(),
+    })
+    .superRefine((data, ctx) => {
+      if (data.executionMethod !== "auto") {
+        return;
+      }
+
+      if (!validCronExpression(data.crontab!)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t("workflow.nodes.start.form.trigger_cron.errmsg.invalid"),
+          path: ["crontab"],
+        });
+      }
+    });
+  const formRule = createSchemaFieldRule(formSchema);
+  const [form] = 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>>) ?? initModel());
+  useDeepCompareEffect(() => {
+    setInitialValues((data?.config as Partial<z.infer<typeof formSchema>>) ?? initModel());
+  }, [data?.config]);
+
+  const [triggerType, setTriggerType] = useState(data?.config?.executionMethod);
+  const [triggerCronLastExecutions, setTriggerCronExecutions] = useState<Date[]>([]);
+  useEffect(() => {
+    setTriggerType(data?.config?.executionMethod);
+    setTriggerCronExecutions(getNextCronExecutions(data?.config?.crontab as string, 5));
+  }, [data?.config?.executionMethod, data?.config?.crontab]);
+
+  const handleTriggerTypeChange = (value: string) => {
+    setTriggerType(value);
+
+    if (value === "auto") {
+      form.setFieldValue("crontab", form.getFieldValue("crontab") || initModel().crontab);
+    }
+  };
+
+  const handleTriggerCronChange = (value: string) => {
+    setTriggerCronExecutions(getNextCronExecutions(value, 5));
+  };
+
+  const handleFormFinish = async (fields: z.infer<typeof formSchema>) => {
+    setFormPending(true);
+
+    try {
+      await updateNode({ ...data, config: { ...fields }, validated: true });
+
+      hidePanel();
+    } finally {
+      setFormPending(false);
+    }
+  };
+
+  return (
+    <Form form={form} disabled={formPending} initialValues={initialValues} layout="vertical" onFinish={handleFormFinish}>
+      <Form.Item
+        name="executionMethod"
+        label={t("workflow.nodes.start.form.trigger.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow.nodes.start.form.trigger.tooltip") }}></span>}
+      >
+        <Radio.Group value={triggerType} onChange={(e) => handleTriggerTypeChange(e.target.value)}>
+          <Radio value="auto">{t("workflow.nodes.start.form.trigger.option.auto.label")}</Radio>
+          <Radio value="manual">{t("workflow.nodes.start.form.trigger.option.manual.label")}</Radio>
+        </Radio.Group>
+      </Form.Item>
+
+      <Form.Item
+        name="crontab"
+        label={t("workflow.nodes.start.form.trigger_cron.label")}
+        hidden={triggerType !== "auto"}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow.nodes.start.form.trigger_cron.tooltip") }}></span>}
+        extra={
+          <span>
+            {t("workflow.nodes.start.form.trigger_cron.extra")}
+            <br />
+            {triggerCronLastExecutions.map((d) => (
+              <>
+                {dayjs(d).format("YYYY-MM-DD HH:mm:ss")}
+                <br />
+              </>
+            ))}
+          </span>
+        }
+      >
+        <Input placeholder={t("workflow.nodes.start.form.trigger_cron.placeholder")} onChange={(e) => handleTriggerCronChange(e.target.value)} />
+      </Form.Item>
+
+      <Form.Item hidden={triggerType !== "auto"}>
+        <Alert type="info" message={<span dangerouslySetInnerHTML={{ __html: t("workflow.nodes.start.form.trigger_cron_alert.content") }}></span>} />
+      </Form.Item>
+
+      <Form.Item>
+        <Button type="primary" htmlType="submit" loading={formPending}>
+          {t("common.button.save")}
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default StartNodeForm;