feat(ui): new WorkflowStartNodeForm using antd

2025-06-08 13:39:53 +00:00 · 2024-12-25 00:36:02 +08:00 · 2024-12-25 00:36:02 +08:00 · c9024c5611
commit c9024c5611
parent 401fa3dcdd
13 changed files with 262 additions and 179 deletions
--- a/ui/src/components/workflow/Node.tsx
+++ b/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"}>
--- a/ui/src/components/workflow/PanelBody.tsx
+++ b/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:
--- a/ui/src/components/workflow/StartForm.tsx
+++ b/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;
--- 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;
--- a/ui/src/components/workflow/run/WorkflowRunDetailDrawer.tsx
+++ b/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">
--- a/ui/src/components/workflow/run/WorkflowRuns.tsx
+++ b/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";
      },
    },
--- a/ui/src/i18n/locales/en/nls.certificate.json
+++ b/ui/src/i18n/locales/en/nls.certificate.json
@ -4,6 +4,7 @@
  "certificate.nodata": "No certificates. Please create a workflow to generate certificates! 😀",

  "certificate.action.view": "View Certificate",
+  "certificate.action.delete": "Delete Certificate",
  "certificate.action.download": "Download Certificate",

  "certificate.props.san": "Name",
--- a/ui/src/i18n/locales/en/nls.workflow.json
+++ b/ui/src/i18n/locales/en/nls.workflow.json
@ -21,7 +21,7 @@
  "workflow.props.updated_at": "Updated At",

  "workflow.detail.orchestration.tab": "Orchestration",
-  "workflow.detail.runs.tab": "Workflow Runs",
+  "workflow.detail.runs.tab": "History Runs",

  "workflow.baseinfo.modal.title": "Workflow Base Information",
  "workflow.baseinfo.form.name.label": "Name",
@ -29,6 +29,18 @@
  "workflow.baseinfo.form.description.label": "Description",
  "workflow.baseinfo.form.description.placeholder": "Please enter description",

+  "workflow.nodes.start.form.trigger.label": "Trigger",
+  "workflow.nodes.start.form.trigger.placeholder": "Please select trigger",
+  "workflow.nodes.start.form.trigger.tooltip": "Auto: Time triggered based on cron expression.<br>Manual: Manually triggered.",
+  "workflow.nodes.start.form.trigger.option.auto.label": "Auto",
+  "workflow.nodes.start.form.trigger.option.manual.label": "Manual",
+  "workflow.nodes.start.form.trigger_cron.label": "Cron Expression",
+  "workflow.nodes.start.form.trigger_cron.placeholder": "Please enter cron expression",
+  "workflow.nodes.start.form.trigger_cron.errmsg.invalid": "Please enter a valid cron expression",
+  "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_run.props.id": "ID",
  "workflow_run.props.status": "Status",
  "workflow_run.props.status.succeeded": "Succeeded",
@ -60,13 +72,6 @@
  "workflow.node.addBranch.label": "Add Branch",
  "workflow.node.selectNodeType.label": "Select Node Type",

-  "workflow.node.start.form.executionMethod.label": "Execution Method",
-  "workflow.node.start.form.executionMethod.placeholder": "Please select execution method",
-  "workflow.node.start.form.executionMethod.options.manual": "Manual",
-  "workflow.node.start.form.executionMethod.options.auto": "Auto",
-  "workflow.node.start.form.crontab.label": "Crontab",
-  "workflow.node.start.form.crontab.placeholder": "Please enter crontab",
-
  "workflow.node.notify.form.title.label": "Title",
  "workflow.node.notify.form.title.placeholder": "Please enter title",
  "workflow.node.notify.form.content.label": "Content",
--- a/ui/src/i18n/locales/zh/nls.certificate.json
+++ b/ui/src/i18n/locales/zh/nls.certificate.json
@ -4,6 +4,7 @@
  "certificate.nodata": "暂无证书，新建一个工作流去生成证书吧～ 😀",

  "certificate.action.view": "查看证书",
+  "certificate.action.delete": "删除证书",
  "certificate.action.download": "下载证书",

  "certificate.props.san": "名称",
--- a/ui/src/i18n/locales/zh/nls.workflow.json
+++ b/ui/src/i18n/locales/zh/nls.workflow.json
@ -29,6 +29,18 @@
  "workflow.baseinfo.form.description.label": "描述",
  "workflow.baseinfo.form.description.placeholder": "请输入工作流描述",

+  "workflow.nodes.start.form.trigger.label": "触发方式",
+  "workflow.nodes.start.form.trigger.placeholder": "请选择触发方式",
+  "workflow.nodes.start.form.trigger.tooltip": "自动触发：基于 Cron 表达式定时触发。<br>手动触发：手动点击执行触发。",
+  "workflow.nodes.start.form.trigger.option.auto.label": "自动触发",
+  "workflow.nodes.start.form.trigger.option.manual.label": "手动触发",
+  "workflow.nodes.start.form.trigger_cron.label": "Cron 表达式",
+  "workflow.nodes.start.form.trigger_cron.placeholder": "请输入 Cron 表达式",
+  "workflow.nodes.start.form.trigger_cron.errmsg.invalid": "请输入正确的 Cron 表达式",
+  "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_run.props.id": "ID",
  "workflow_run.props.status": "状态",
  "workflow_run.props.status.succeeded": "成功",
@ -60,13 +72,6 @@
  "workflow.node.addBranch.label": "添加分支",
  "workflow.node.selectNodeType.label": "选择节点类型",

-  "workflow.node.start.form.executionMethod.label": "执行方式",
-  "workflow.node.start.form.executionMethod.placeholder": "请选择执行方式",
-  "workflow.node.start.form.executionMethod.options.manual": "手动",
-  "workflow.node.start.form.executionMethod.options.auto": "自动",
-  "workflow.node.start.form.crontab.label": "定时表达式",
-  "workflow.node.start.form.crontab.placeholder": "请输入定时表达式",
-
  "workflow.node.notify.form.title.label": "标题",
  "workflow.node.notify.form.title.placeholder": "请输入标题",
  "workflow.node.notify.form.content.label": "内容",
--- a/ui/src/pages/certificates/CertificateList.tsx
+++ b/ui/src/pages/certificates/CertificateList.tsx
@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useRequest } from "ahooks";
 import { Button, Divider, Empty, Menu, notification, Radio, Space, Table, theme, Tooltip, Typography, type MenuProps, type TableProps } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
-import { Eye as EyeIcon, Filter as FilterIcon } from "lucide-react";
+import { Eye as EyeIcon, Filter as FilterIcon, Trash2 as Trash2Icon } from "lucide-react";
 import dayjs from "dayjs";
 import { ClientResponseError } from "pocketbase";

@ -162,6 +162,17 @@ const CertificateList = () => {
              </Tooltip>
            }
          />
+
+          <Tooltip title={t("certificate.action.delete")}>
+            <Button
+              color="danger"
+              icon={<Trash2Icon size={16} />}
+              variant="text"
+              onClick={() => {
+                alert("TODO");
+              }}
+            />
+          </Tooltip>
        </Button.Group>
      ),
    },
--- a/ui/src/pages/workflows/WorkflowDetail.tsx
+++ b/ui/src/pages/workflows/WorkflowDetail.tsx
@ -1,11 +1,12 @@
 import { cloneElement, memo, useEffect, useMemo, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useDeepCompareEffect } from "ahooks";
-import { Button, Card, Form, Input, message, Modal, notification, Tabs, Typography, type FormInstance } from "antd";
+import { Button, Card, Dropdown, Form, Input, message, Modal, notification, Tabs, Typography, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { PageHeader } from "@ant-design/pro-components";
 import { z } from "zod";
+import { Ellipsis as EllipsisIcon, Trash2 as Trash2Icon } from "lucide-react";

 import Show from "@/components/Show";
 import End from "@/components/workflow/End";
@ -15,13 +16,17 @@ import WorkflowProvider from "@/components/workflow/WorkflowProvider";
 import { useZustandShallowSelector } from "@/hooks";
 import { allNodesValidated, type WorkflowModel, type WorkflowNode } from "@/domain/workflow";
 import { useWorkflowStore } from "@/stores/workflow";
+import { remove as removeWorkflow } from "@/repository/workflow";
 import { run as runWorkflow } from "@/api/workflow";
 import { getErrMsg } from "@/utils/error";

 const WorkflowDetail = () => {
+  const navigate = useNavigate();
+
  const { t } = useTranslation();

  const [messageApi, MessageContextHolder] = message.useMessage();
+  const [modalApi, ModalContextHolder] = Modal.useModal();
  const [notificationApi, NotificationContextHolder] = notification.useNotification();

  const { id: workflowId } = useParams();
@ -30,7 +35,7 @@ const WorkflowDetail = () => {
  );
  useEffect(() => {
    init(workflowId);
-  }, [workflowId]);
+  }, [workflowId, init]);

  const [tabValue, setTabValue] = useState<"orchestration" | "runs">("orchestration");

@ -70,6 +75,24 @@ const WorkflowDetail = () => {
    switchEnable();
  };

+  const handleDeleteClick = () => {
+    modalApi.confirm({
+      title: t("workflow.action.delete"),
+      content: t("workflow.action.delete.confirm"),
+      onOk: async () => {
+        try {
+          const resp: boolean = await removeWorkflow(workflow);
+          if (resp) {
+            navigate("/workflows");
+          }
+        } catch (err) {
+          console.error(err);
+          notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
+        }
+      },
+    });
+  };
+
  // const handleWorkflowSaveClick = () => {
  //   if (!allNodesValidated(workflow.draft as WorkflowNode)) {
  //     messageApi.warning(t("workflow.detail.action.save.failed.uncompleted"));
@ -96,6 +119,7 @@ const WorkflowDetail = () => {
  return (
    <div>
      {MessageContextHolder}
+      {ModalContextHolder}
      {NotificationContextHolder}

      <Card styles={{ body: { padding: "0.5rem", paddingBottom: 0 } }}>
@ -104,19 +128,27 @@ const WorkflowDetail = () => {
          title={workflow.name}
          extra={[
            <Button.Group key="actions">
-              <WorkflowBaseInfoModalForm
-                model={workflow}
-                trigger={
-                  <Button ghost type="primary">
-                    {t("common.button.edit")}
-                  </Button>
-                }
-                onFinish={handleBaseInfoFormFinish}
-              />
+              <WorkflowBaseInfoModalForm model={workflow} trigger={<Button>{t("common.button.edit")}</Button>} onFinish={handleBaseInfoFormFinish} />

-              <Button ghost type="primary" onClick={handleEnableChange}>
-                {workflow.enabled ? t("common.button.disable") : t("common.button.enable")}
-              </Button>
+              <Button onClick={handleEnableChange}>{workflow.enabled ? t("common.button.disable") : t("common.button.enable")}</Button>
+
+              <Dropdown
+                menu={{
+                  items: [
+                    {
+                      key: "delete",
+                      label: t("common.button.delete"),
+                      danger: true,
+                      icon: <Trash2Icon size={14} />,
+                      onClick: () => {
+                        handleDeleteClick();
+                      },
+                    },
+                  ],
+                }}
+              >
+                <Button icon={<EllipsisIcon size={14} />} />
+              </Dropdown>
            </Button.Group>,
          ]}
        >
--- a/ui/src/utils/cron.ts
+++ b/ui/src/utils/cron.ts
@ -0,0 +1,26 @@
+import { parseExpression } from "cron-parser";
+
+export const validCronExpression = (expr: string): boolean => {
+  try {
+    parseExpression(expr);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const getNextCronExecutions = (expr: string, times = 1): Date[] => {
+  try {
+    const now = new Date();
+    const cron = parseExpression(expr, { currentDate: now, iterator: true });
+
+    const result: Date[] = [];
+    for (let i = 0; i < times; i++) {
+      const next = cron.next();
+      result.push(next.value.toDate());
+    }
+    return result;
+  } catch {
+    return [];
+  }
+};