feat(ui): new WorkflowElements using antd

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

@@ -0,0 +1,72 @@
+import {
+  CloudUploadOutlined as CloudUploadOutlinedIcon,
+  PlusOutlined as PlusOutlinedIcon,
+  SendOutlined as SendOutlinedIcon,
+  SisternodeOutlined as SisternodeOutlinedIcon,
+  SolutionOutlined as SolutionOutlinedIcon,
+} from "@ant-design/icons";
+import { Dropdown } from "antd";
+
+import { WorkflowNodeType, newNode, workflowNodeTypeDefaultNames } from "@/domain/workflow";
+import { useZustandShallowSelector } from "@/hooks";
+import { useWorkflowStore } from "@/stores/workflow";
+
+import { type BrandNodeProps, type NodeProps } from "../types";
+
+const dropdownMenus = [
+  {
+    type: WorkflowNodeType.Apply,
+    label: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Apply),
+    icon: <SolutionOutlinedIcon />,
+  },
+  {
+    type: WorkflowNodeType.Deploy,
+    label: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Deploy),
+    icon: <CloudUploadOutlinedIcon />,
+  },
+  {
+    type: WorkflowNodeType.Branch,
+    label: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Branch),
+    icon: <SisternodeOutlinedIcon />,
+  },
+  {
+    type: WorkflowNodeType.Notify,
+    label: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Notify),
+    icon: <SendOutlinedIcon />,
+  },
+];
+
+const AddNode = ({ node: supnode }: NodeProps | BrandNodeProps) => {
+  const { addNode } = useWorkflowStore(useZustandShallowSelector(["addNode"]));
+
+  const handleNodeTypeSelect = (type: WorkflowNodeType) => {
+    const node = newNode(type);
+    addNode(node, supnode.id);
+  };
+
+  return (
+    <div className="relative py-6 before:content-[''] before:absolute before:w-[2px] before:h-full before:left-[50%] before:-translate-x-[50%] before:top-0 before:bg-stone-200">
+      <Dropdown
+        menu={{
+          items: dropdownMenus.map((item) => {
+            return {
+              key: item.type,
+              label: item.label,
+              icon: item.icon,
+              onClick: () => {
+                handleNodeTypeSelect(item.type);
+              },
+            };
+          }),
+        }}
+        trigger={["click"]}
+      >
+        <div className="bg-stone-400 hover:bg-stone-500 rounded-full size-5 z-[1] relative flex items-center justify-center cursor-pointer">
+          <PlusOutlinedIcon className="text-white" />
+        </div>
+      </Dropdown>
+    </div>
+  );
+};
+
+export default AddNode;

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

@@ -7,10 +7,10 @@ import { createSchemaFieldRule } from "antd-zod";
 import { produce } from "immer";
 import { z } from "zod";
 
+import ModalForm from "@/components/ModalForm";
+import MultipleInput from "@/components/MultipleInput";
 import AccessEditModal from "@/components/access/AccessEditModal";
 import AccessSelect from "@/components/access/AccessSelect";
-import ModalForm from "@/components/core/ModalForm";
-import MultipleInput from "@/components/core/MultipleInput";
 import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider";
 import { type WorkflowNode } from "@/domain/workflow";
 import { useAntdForm, useZustandShallowSelector } from "@/hooks";
@@ -20,7 +20,7 @@ import { validDomainName, validIPv4Address, validIPv6Address } from "@/utils/val
 import { usePanel } from "../PanelProvider";
 
 export type ApplyNodeFormProps = {
-  data: WorkflowNode;
+  node: WorkflowNode;
 };
 
 const MULTIPLE_INPUT_DELIMITER = ";";
@@ -35,7 +35,7 @@ const initFormModel = () => {
   };
 };
 
-const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => {
+const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
   const { t } = useTranslation();
 
   const { addEmail } = useContactEmailsStore(useZustandShallowSelector("addEmail"));
@@ -74,12 +74,12 @@ const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => {
     formPending,
     formProps,
   } = useAntdForm<z.infer<typeof formSchema>>({
-    initialValues: data?.config ?? initFormModel(),
+    initialValues: node?.config ?? initFormModel(),
     onSubmit: async (values) => {
       await formInst.validateFields();
       await addEmail(values.email);
       await updateNode(
-        produce(data, (draft) => {
+        produce(node, (draft) => {
           draft.config = { ...values };
           draft.validated = true;
         })
@@ -88,8 +88,8 @@ const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => {
     },
   });
 
-  const [fieldDomains, setFieldDomains] = useState(data?.config?.domain as string);
-  const [fieldNameservers, setFieldNameservers] = useState(data?.config?.nameservers as string);
+  const [fieldDomains, setFieldDomains] = useState(node?.config?.domain as string);
+  const [fieldNameservers, setFieldNameservers] = useState(node?.config?.nameservers as string);
 
   const handleFieldDomainsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;

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

@@ -0,0 +1,63 @@
+import { memo } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "antd";
+
+import { type WorkflowNode } from "@/domain/workflow";
+import { useZustandShallowSelector } from "@/hooks";
+import { useWorkflowStore } from "@/stores/workflow";
+
+import NodeRender from "../NodeRender";
+import AddNode from "./AddNode";
+
+export type BrandNodeProps = {
+  node: WorkflowNode;
+};
+
+const BranchNode = ({ node }: BrandNodeProps) => {
+  const { t } = useTranslation();
+
+  const { addBranch } = useWorkflowStore(useZustandShallowSelector(["addBranch"]));
+
+  const renderNodes = (node: WorkflowNode, branchNodeId?: string, branchIndex?: number) => {
+    const elements: JSX.Element[] = [];
+
+    let current = node as WorkflowNode | undefined;
+    while (current) {
+      elements.push(<NodeRender key={current.id} node={current} branchId={branchNodeId} branchIndex={branchIndex} />);
+      current = current.next;
+    }
+
+    return elements;
+  };
+
+  return (
+    <>
+      <div className="relative flex gap-x-16 before:content-[''] before:absolute before:h-[2px] before:left-[128px] before:right-[128px] before:top-0 before:bg-stone-200">
+        <Button
+          className="text-xs absolute left-[50%] -translate-x-1/2 -translate-y-1/2 z-[1]"
+          size="small"
+          shape="round"
+          variant="outlined"
+          onClick={() => {
+            addBranch(node.id);
+          }}
+        >
+          {t("workflow_node.action.add_branch")}
+        </Button>
+
+        {node.branches!.map((branch, index) => (
+          <div
+            key={branch.id}
+            className="relative flex flex-col items-center before:content-['']  before:w-[2px] before:bg-stone-200 before:absolute before:h-full before:left-[50%] before:-translate-x-[50%] before:top-0"
+          >
+            <div className="relative flex flex-col items-center">{renderNodes(branch, node.id, index)}</div>
+          </div>
+        ))}
+      </div>
+
+      <AddNode node={node} />
+    </>
+  );
+};
+
+export default memo(BranchNode);

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

@@ -0,0 +1,78 @@
+import { useTranslation } from "react-i18next";
+import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
+import { Button, Card, Dropdown, Popover } from "antd";
+import { produce } from "immer";
+
+import { useZustandShallowSelector } from "@/hooks";
+import { useWorkflowStore } from "@/stores/workflow";
+
+import AddNode from "./AddNode";
+import { type NodeProps } from "../types";
+
+const ConditionNode = ({ node, branchId, branchIndex }: NodeProps) => {
+  const { t } = useTranslation();
+
+  const { updateNode, removeBranch } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeBranch"]));
+
+  const handleNodeNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+    const oldName = node.name;
+    const newName = e.target.innerText.trim();
+    if (oldName === newName) {
+      return;
+    }
+
+    updateNode(
+      produce(node, (draft) => {
+        draft.name = newName;
+      })
+    );
+  };
+
+  return (
+    <>
+      <Popover
+        arrow={false}
+        content={
+          <Dropdown
+            menu={{
+              items: [
+                {
+                  key: "delete",
+                  label: t("workflow_node.action.delete_branch"),
+                  icon: <CloseCircleOutlinedIcon />,
+                  danger: true,
+                  onClick: () => {
+                    removeBranch(branchId ?? "", branchIndex ?? 0);
+                  },
+                },
+              ],
+            }}
+            trigger={["click"]}
+          >
+            <Button color="primary" icon={<EllipsisOutlinedIcon />} variant="text" />
+          </Dropdown>
+        }
+        overlayClassName="shadow-md"
+        overlayInnerStyle={{ padding: 0 }}
+        placement="rightTop"
+      >
+        <Card className="relative w-[256px] shadow-md mt-10 z-[1]" styles={{ body: { padding: 0 } }} hoverable>
+          <div className="h-[48px] px-4 py-2 flex flex-col justify-center items-center truncate">
+            <div
+              className="w-full text-center outline-slate-200 overflow-hidden focus:bg-background focus:text-foreground focus:rounded-sm"
+              contentEditable
+              suppressContentEditableWarning
+              onBlur={handleNodeNameBlur}
+            >
+              {node.name}
+            </div>
+          </div>
+        </Card>
+      </Popover>
+
+      <AddNode node={node} />
+    </>
+  );
+};
+
+export default ConditionNode;

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

@@ -1,13 +1,16 @@
-import { memo, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { PlusOutlined as PlusOutlinedIcon, QuestionCircleOutlined as QuestionCircleOutlinedIcon } from "@ant-design/icons";
-import { Avatar, Button, Divider, Form, Select, Space, Tooltip, Typography } from "antd";
+import { Button, Divider, Form, Select, Tooltip, Typography } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { produce } from "immer";
 import { z } from "zod";
 
+import Show from "@/components/Show";
 import AccessEditModal from "@/components/access/AccessEditModal";
 import AccessSelect from "@/components/access/AccessSelect";
+import DeployProviderPicker from "@/components/provider/DeployProviderPicker";
+import DeployProviderSelect from "@/components/provider/DeployProviderSelect";
 import { ACCESS_USAGES, DEPLOY_PROVIDERS, accessProvidersMap, deployProvidersMap } from "@/domain/provider";
 import { type WorkflowNode } from "@/domain/workflow";
 import { useAntdForm, useZustandShallowSelector } from "@/hooks";
@@ -38,15 +41,14 @@ import DeployNodeFormVolcEngineLiveFields from "./DeployNodeFormVolcEngineLiveFi
 import DeployNodeFormWebhookFields from "./DeployNodeFormWebhookFields";
 
 export type DeployFormProps = {
-  data: WorkflowNode;
-  defaultProivderType?: string;
+  node: WorkflowNode;
 };
 
 const initFormModel = () => {
   return {};
 };
 
-const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
+const DeployNodeForm = ({ node }: DeployFormProps) => {
   const { t } = useTranslation();
 
   const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
@@ -67,11 +69,11 @@ const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
     formPending,
     formProps,
   } = useAntdForm<z.infer<typeof formSchema>>({
-    initialValues: data?.config ?? initFormModel(),
+    initialValues: node?.config ?? initFormModel(),
     onSubmit: async (values) => {
       await formInst.validateFields();
       await updateNode(
-        produce(data, (draft) => {
+        produce(node, (draft) => {
           draft.config = { ...values };
           draft.validated = true;
         })
@@ -82,12 +84,11 @@ const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
 
   const [previousOutput, setPreviousOutput] = useState<WorkflowNode[]>([]);
   useEffect(() => {
-    const rs = getWorkflowOuptutBeforeId(data.id, "certificate");
+    const rs = getWorkflowOuptutBeforeId(node.id, "certificate");
     setPreviousOutput(rs);
-  }, [data, getWorkflowOuptutBeforeId]);
+  }, [node, getWorkflowOuptutBeforeId]);
 
-  const fieldProviderType = Form.useWatch("providerType", formInst);
-  // const fieldAccess = Form.useWatch("access", formInst);
+  const fieldProviderType = Form.useWatch("providerType", { form: formInst, preserve: true });
 
   const formFieldsComponent = useMemo(() => {
     /*
@@ -144,11 +145,18 @@ const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
     }
   }, [fieldProviderType]);
 
+  const handleProviderTypePick = useCallback(
+    (value: string) => {
+      formInst.setFieldValue("providerType", value);
+    },
+    [formInst]
+  );
+
   const handleProviderTypeSelect = (value: string) => {
     if (fieldProviderType === value) return;
 
     // 切换部署目标时重置表单，避免其他部署目标的配置字段影响当前部署目标
-    if (data.config?.providerType === value) {
+    if (node.config?.providerType === value) {
       formInst.resetFields();
     } else {
       const oldValues = formInst.getFieldsValue();
@@ -161,119 +169,107 @@ const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
         }
       }
       formInst.setFieldsValue(newValues);
+
+      if (deployProvidersMap.get(fieldProviderType)?.provider !== deployProvidersMap.get(value)?.provider) {
+        formInst.setFieldValue("access", undefined);
+      }
     }
   };
 
   return (
     <Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
-      <Form.Item name="providerType" label={t("workflow_node.deploy.form.provider_type.label")} rules={[formRule]} initialValue={defaultProivderType}>
-        <Select
-          showSearch
-          placeholder={t("workflow_node.deploy.form.provider_type.placeholder")}
-          filterOption={(searchValue, option) => {
-            const type = String(option?.value ?? "");
-            const target = deployProvidersMap.get(type);
-            const filter = (v?: string) => v?.toLowerCase()?.includes(searchValue.toLowerCase()) ?? false;
-            return filter(type) || filter(t(target?.name ?? ""));
-          }}
-          onSelect={handleProviderTypeSelect}
-        >
-          {Array.from(deployProvidersMap.values()).map((item) => {
-            return (
-              <Select.Option key={item.type} label={t(item.name)} value={item.type} title={t(item.name)}>
-                <Space className="flex-grow max-w-full truncate" size={4}>
-                  <Avatar src={item.icon} size="small" />
-                  <Typography.Text className="leading-loose" ellipsis>
-                    {t(item.name)}
-                  </Typography.Text>
-                </Space>
-              </Select.Option>
-            );
-          })}
-        </Select>
-      </Form.Item>
-
-      <Form.Item className="mb-0">
-        <label className="block mb-1">
-          <div className="flex items-center justify-between gap-4 w-full">
-            <div className="flex-grow max-w-full truncate">
-              <span>{t("workflow_node.deploy.form.provider_access.label")}</span>
-              <Tooltip title={t("workflow_node.deploy.form.provider_access.tooltip")}>
-                <Typography.Text className="ms-1" type="secondary">
-                  <QuestionCircleOutlinedIcon />
-                </Typography.Text>
-              </Tooltip>
-            </div>
-            <div className="text-right">
-              <AccessEditModal
-                data={{ configType: deployProvidersMap.get(defaultProivderType!)?.provider }}
-                preset="add"
-                trigger={
-                  <Button size="small" type="link">
-                    <PlusOutlinedIcon />
-                    {t("workflow_node.deploy.form.provider_access.button")}
-                  </Button>
-                }
-                onSubmit={(record) => {
-                  const provider = accessProvidersMap.get(record.configType);
-                  if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.DEPLOY === provider?.usage) {
-                    formInst.setFieldValue("access", record.id);
-                  }
-                }}
-              />
-            </div>
-          </div>
-        </label>
-        <Form.Item name="access" rules={[formRule]}>
-          <AccessSelect
-            placeholder={t("workflow_node.deploy.form.provider_access.placeholder")}
-            filter={(record) => {
-              if (defaultProivderType) {
-                return deployProvidersMap.get(defaultProivderType)?.provider === record.configType;
-              }
-
-              const provider = accessProvidersMap.get(record.configType);
-              return ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage;
-            }}
+      <Show when={!!fieldProviderType} fallback={<DeployProviderPicker onSelect={handleProviderTypePick} />}>
+        <Form.Item name="providerType" label={t("workflow_node.deploy.form.provider_type.label")} rules={[formRule]}>
+          <DeployProviderSelect
+            allowClear
+            placeholder={t("workflow_node.deploy.form.provider_type.placeholder")}
+            showSearch
+            onSelect={handleProviderTypeSelect}
           />
         </Form.Item>
-      </Form.Item>
 
-      <Form.Item
-        name="certificate"
-        label={t("workflow_node.deploy.form.certificate.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.certificate.tooltip") }}></span>}
-      >
-        <Select
-          options={previousOutput.map((item) => {
-            return {
-              label: item.name,
-              options: item.output?.map((output) => {
-                return {
-                  label: `${item.name} - ${output.label}`,
-                  value: `${item.id}#${output.name}`,
-                };
-              }),
-            };
-          })}
-          placeholder={t("workflow_node.deploy.form.certificate.placeholder")}
-        />
-      </Form.Item>
+        <Form.Item className="mb-0">
+          <label className="block mb-1">
+            <div className="flex items-center justify-between gap-4 w-full">
+              <div className="flex-grow max-w-full truncate">
+                <span>{t("workflow_node.deploy.form.provider_access.label")}</span>
+                <Tooltip title={t("workflow_node.deploy.form.provider_access.tooltip")}>
+                  <Typography.Text className="ms-1" type="secondary">
+                    <QuestionCircleOutlinedIcon />
+                  </Typography.Text>
+                </Tooltip>
+              </div>
+              <div className="text-right">
+                <AccessEditModal
+                  data={{ configType: deployProvidersMap.get(fieldProviderType!)?.provider }}
+                  preset="add"
+                  trigger={
+                    <Button size="small" type="link">
+                      <PlusOutlinedIcon />
+                      {t("workflow_node.deploy.form.provider_access.button")}
+                    </Button>
+                  }
+                  onSubmit={(record) => {
+                    const provider = accessProvidersMap.get(record.configType);
+                    if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.DEPLOY === provider?.usage) {
+                      formInst.setFieldValue("access", record.id);
+                    }
+                  }}
+                />
+              </div>
+            </div>
+          </label>
+          <Form.Item name="access" rules={[formRule]}>
+            <AccessSelect
+              placeholder={t("workflow_node.deploy.form.provider_access.placeholder")}
+              filter={(record) => {
+                if (fieldProviderType) {
+                  return deployProvidersMap.get(fieldProviderType)?.provider === record.configType;
+                }
 
-      <Divider className="my-1">
-        <Typography.Text className="font-normal text-xs" type="secondary">
-          {t("workflow_node.deploy.form.params_config.label")}
-        </Typography.Text>
-      </Divider>
+                const provider = accessProvidersMap.get(record.configType);
+                return ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage;
+              }}
+            />
+          </Form.Item>
+        </Form.Item>
 
-      {formFieldsComponent}
+        <Form.Item
+          name="certificate"
+          label={t("workflow_node.deploy.form.certificate.label")}
+          rules={[formRule]}
+          tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.certificate.tooltip") }}></span>}
+        >
+          <Select
+            options={previousOutput.map((item) => {
+              return {
+                label: item.name,
+                options: item.output?.map((output) => {
+                  return {
+                    label: `${item.name} - ${output.label}`,
+                    value: `${item.id}#${output.name}`,
+                  };
+                }),
+              };
+            })}
+            placeholder={t("workflow_node.deploy.form.certificate.placeholder")}
+          />
+        </Form.Item>
 
-      <Form.Item>
-        <Button type="primary" htmlType="submit" loading={formPending}>
-          {t("common.button.save")}
-        </Button>
-      </Form.Item>
+        <Divider className="my-1">
+          <Typography.Text className="font-normal text-xs" type="secondary">
+            {t("workflow_node.deploy.form.params_config.label")}
+          </Typography.Text>
+        </Divider>
+
+        {formFieldsComponent}
+
+        <Form.Item>
+          <Button type="primary" htmlType="submit" loading={formPending}>
+            {t("common.button.save")}
+          </Button>
+        </Form.Item>
+      </Show>
     </Form>
   );
 };

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

@@ -0,0 +1,17 @@
+import { useTranslation } from "react-i18next";
+import { Typography } from "antd";
+
+const EndNode = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="size-[20px] rounded-full bg-stone-400"></div>
+      <div className="text-sm mt-2">
+        <Typography.Text type="secondary">{t("workflow_node.end.label")}</Typography.Text>
+      </div>
+    </div>
+  );
+};
+
+export default EndNode;

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

@@ -15,7 +15,7 @@ import { useWorkflowStore } from "@/stores/workflow";
 import { usePanel } from "../PanelProvider";
 
 export type NotifyNodeFormProps = {
-  data: WorkflowNode;
+  node: WorkflowNode;
 };
 
 const initFormModel = () => {
@@ -25,7 +25,7 @@ const initFormModel = () => {
   };
 };
 
-const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
+const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => {
   const { t } = useTranslation();
 
   const {
@@ -57,11 +57,11 @@ const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
     formPending,
     formProps,
   } = useAntdForm<z.infer<typeof formSchema>>({
-    initialValues: data?.config ?? initFormModel(),
+    initialValues: node?.config ?? initFormModel(),
     onSubmit: async (values) => {
       await formInst.validateFields();
       await updateNode(
-        produce(data, (draft) => {
+        produce(node, (draft) => {
           draft.config = { ...values };
           draft.validated = true;
         })

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

@@ -14,7 +14,7 @@ import { getNextCronExecutions, validCronExpression } from "@/utils/cron";
 import { usePanel } from "../PanelProvider";
 
 export type StartNodeFormProps = {
-  data: WorkflowNode;
+  node: WorkflowNode;
 };
 
 const initFormModel = () => {
@@ -24,7 +24,7 @@ const initFormModel = () => {
   };
 };
 
-const StartNodeForm = ({ data }: StartNodeFormProps) => {
+const StartNodeForm = ({ node }: StartNodeFormProps) => {
   const { t } = useTranslation();
 
   const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
@@ -54,11 +54,11 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
     formPending,
     formProps,
   } = useAntdForm<z.infer<typeof formSchema>>({
-    initialValues: data?.config ?? initFormModel(),
+    initialValues: node?.config ?? initFormModel(),
     onSubmit: async (values) => {
       await formInst.validateFields();
       await updateNode(
-        produce(data, (draft) => {
+        produce(node, (draft) => {
           draft.config = { ...values };
           draft.validated = true;
         })
@@ -67,12 +67,12 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
     },
   });
 
-  const [triggerType, setTriggerType] = useState(data?.config?.executionMethod);
+  const [triggerType, setTriggerType] = useState(node?.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]);
+    setTriggerType(node?.config?.executionMethod);
+    setTriggerCronExecutions(getNextCronExecutions(node?.config?.crontab as string, 5));
+  }, [node?.config?.executionMethod, node?.config?.crontab]);
 
   const handleTriggerTypeChange = (value: string) => {
     setTriggerType(value);