feat(ui): new WorkflowStartNodeForm using antd

ui/src/components/workflow/Node.tsx

@@ -44,8 +44,8 @@ const Node = ({ data }: NodeProps) => {
         return (
           <div className="flex space-x-2 items-baseline">
             <div className="text-stone-700">
-              <Show when={data.config?.executionMethod == "auto"} fallback={<>{t(`workflow.node.start.form.executionMethod.options.manual`)}</>}>
-                {t(`workflow.node.start.form.executionMethod.options.auto`) + ":"}
+              <Show when={data.config?.executionMethod == "auto"} fallback={<>{t(`workflow.props.trigger.manual`)}</>}>
+                {t(`workflow.props.trigger.auto`) + ":"}
               </Show>
             </div>
             <Show when={data.config?.executionMethod == "auto"}>

ui/src/components/workflow/PanelBody.tsx

@@ -1,5 +1,5 @@
 import { WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
-import StartForm from "./StartForm";
+import StartNodeForm from "./node/StartNodeForm";
 import DeployPanelBody from "./DeployPanelBody";
 import ApplyForm from "./ApplyForm";
 import NotifyForm from "./NotifyForm";
@@ -11,7 +11,7 @@ const PanelBody = ({ data }: PanelBodyProps) => {
   const getBody = () => {
     switch (data.type) {
       case WorkflowNodeType.Start:
-        return <StartForm data={data} />;
+        return <StartNodeForm data={data} />;
       case WorkflowNodeType.Apply:
         return <ApplyForm data={data} />;
       case WorkflowNodeType.Deploy:

ui/src/components/workflow/StartForm.tsx

@@ -1,138 +0,0 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Radio } from "antd";
-import { parseExpression } from "cron-parser";
-import { z } from "zod";
-
-import { Button } from "../ui/button";
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
-import { Input } from "../ui/input";
-import { useZustandShallowSelector } from "@/hooks";
-import { useWorkflowStore } from "@/stores/workflow";
-import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { usePanel } from "./PanelProvider";
-import { RadioChangeEvent } from "antd/lib";
-
-const formSchema = z
-  .object({
-    executionMethod: z.string().min(1, "executionMethod is required"),
-    crontab: z.string(),
-  })
-  .superRefine((data, ctx) => {
-    if (data.executionMethod != "auto") {
-      return;
-    }
-    try {
-      parseExpression(data.crontab);
-    } catch (e) {
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        message: "crontab is invalid",
-        path: ["crontab"],
-      });
-    }
-  });
-
-type StartFormProps = {
-  data: WorkflowNode;
-};
-
-const i18nPrefix = "workflow.node.start.form";
-
-const StartForm = ({ data }: StartFormProps) => {
-  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
-  const { hidePanel } = usePanel();
-
-  const { t } = useTranslation();
-
-  const [method, setMethod] = useState("auto");
-
-  useEffect(() => {
-    if (data.config && data.config.executionMethod) {
-      setMethod(data.config.executionMethod as string);
-    } else {
-      setMethod("auto");
-    }
-  }, [data]);
-
-  let config: WorkflowNodeConfig = {
-    executionMethod: "auto",
-    crontab: "0 0 * * *",
-  };
-  if (data) config = data.config ?? config;
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      executionMethod: config.executionMethod as string,
-      crontab: config.crontab as string,
-    },
-  });
-
-  const onSubmit = async (config: z.infer<typeof formSchema>) => {
-    updateNode({ ...data, config: { ...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="executionMethod"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t(`${i18nPrefix}.executionMethod.label`)}</FormLabel>
-                <FormControl>
-                  <Radio.Group
-                    {...field}
-                    value={method}
-                    onChange={(e: RadioChangeEvent) => {
-                      setMethod(e.target.value);
-                    }}
-                    className="flex space-x-3"
-                  >
-                    <Radio value="auto">{t(`${i18nPrefix}.executionMethod.options.auto`)}</Radio>
-                    <Radio value="manual">{t(`${i18nPrefix}.executionMethod.options.manual`)}</Radio>
-                  </Radio.Group>
-                </FormControl>
-
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="crontab"
-            render={({ field }) => (
-              <FormItem hidden={method == "manual"}>
-                <FormLabel>{t(`${i18nPrefix}.crontab.label`)}</FormLabel>
-                <FormControl>
-                  <Input {...field} placeholder={t(`${i18nPrefix}.crontab.placeholder`)} />
-                </FormControl>
-
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <div className="flex justify-end">
-            <Button type="submit">{t("common.button.save")}</Button>
-          </div>
-        </form>
-      </Form>
-    </>
-  );
-};
-
-export default StartForm;

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;

ui/src/components/workflow/run/WorkflowRunDetailDrawer.tsx

@@ -2,6 +2,7 @@ import { cloneElement, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useControllableValue } from "ahooks";
 import { Alert, Drawer } from "antd";
+import { CircleCheck as CircleCheckIcon, CircleX as CircleXIcon } from "lucide-react";
 
 import Show from "@/components/Show";
 import { type WorkflowRunModel } from "@/domain/workflowRun";
@@ -9,6 +10,7 @@ import { type WorkflowRunModel } from "@/domain/workflowRun";
 export type WorkflowRunDetailDrawerProps = {
   data?: WorkflowRunModel;
   loading?: boolean;
+  open?: boolean;
   trigger?: React.ReactElement;
   onOpenChange?: (open: boolean) => void;
 };
@@ -43,11 +45,11 @@ const WorkflowRunDetailDrawer = ({ data, loading, trigger, ...props }: WorkflowR
       <Drawer closable destroyOnClose open={open} loading={loading} placement="right" title={data?.id} width={640} onClose={() => setOpen(false)}>
         <Show when={!!data}>
           <Show when={data!.succeed}>
-            <Alert showIcon type="success" message={t("workflow_run.props.status.succeeded")} />
+            <Alert showIcon type="success" message={t("workflow_run.props.status.succeeded")} icon={<CircleCheckIcon size={16} />} />
           </Show>
 
-          <Show when={!data!.succeed}>
-            <Alert showIcon type="error" message={t("workflow_run.props.status.failed")} description={data!.error} />
+          <Show when={!!data!.error}>
+            <Alert showIcon type="error" message={t("workflow_run.props.status.failed")} description={data!.error} icon={<CircleXIcon size={16} />} />
           </Show>
 
           <div className="mt-4 p-4 bg-black text-stone-200 rounded-md">

ui/src/components/workflow/run/WorkflowRuns.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 import { useRequest } from "ahooks";
 import { Button, Empty, notification, Space, Table, theme, Tooltip, Typography, type TableProps } from "antd";
 import { CircleCheck as CircleCheckIcon, CircleX as CircleXIcon, Eye as EyeIcon } from "lucide-react";
-import dayjs from "dayjs";
 import { ClientResponseError } from "pocketbase";
 
 import WorkflowRunDetailDrawer from "./WorkflowRunDetailDrawer";
@@ -64,7 +63,7 @@ const WorkflowRuns = ({ className, style }: WorkflowRunsProps) => {
       key: "startedAt",
       title: t("workflow_run.props.started_at"),
       ellipsis: true,
-      render: (_, record) => {
+      render: () => {
         return "TODO";
       },
     },
@@ -72,7 +71,7 @@ const WorkflowRuns = ({ className, style }: WorkflowRunsProps) => {
       key: "completedAt",
       title: t("workflow_run.props.completed_at"),
       ellipsis: true,
-      render: (_, record) => {
+      render: () => {
         return "TODO";
       },
     },