feat(ui): close confirm when changes not saved

ui/.eslintrc.cjs

@@ -22,6 +22,12 @@ module.exports = {
   plugins: ["react-refresh"],
   rules: {
     "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/no-empty-object-type": [
+      "error",
+      {
+        allowInterfaces: "with-single-extends",
+      },
+    ],
     "@typescript-eslint/no-explicit-any": [
       "warn",
       {

ui/src/components/DrawerForm.tsx

@@ -71,6 +71,12 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
     ...props,
   };
 
+  const handleClose = () => {
+    if (formPending) return;
+
+    setOpen(false);
+  };
+
   const handleOkClick = async () => {
     const ret = await submit();
     if (ret != null && !ret) return;
@@ -99,10 +105,10 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
         footer={
           <Space className="w-full justify-end">
             <Button {...cancelButtonProps} onClick={handleCancelClick}>
-              {cancelText || t("common.button.cancel")}
+              {cancelText ?? t("common.button.cancel")}
             </Button>
             <Button type="primary" loading={formPending} {...okButtonProps} onClick={handleOkClick}>
-              {okText || t("common.button.ok")}
+              {okText ?? t("common.button.ok")}
             </Button>
           </Space>
         }
@@ -110,7 +116,7 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
         title={title}
         width={width}
         {...drawerProps}
-        onClose={() => setOpen(false)}
+        onClose={handleClose}
       >
         <Form className={className} style={style} form={formInst} {...mergedFormProps}>
           {children}

ui/src/components/access/AccessEditForm.tsx

@@ -67,7 +67,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
   const configProvider = Form.useWatch("provider", formInst);
   const [configFormInst] = Form.useForm();
   const configFormName = useAntdFormName({ form: configFormInst, name: "accessEditConfigForm" });
-  const configFormComponent = useMemo(() => {
+  const configFormEl = useMemo(() => {
     /*
       注意：如果追加新的子组件，请保持以 ASCII 排序。
       NOTICE: If you add new child component, please keep ASCII order.
@@ -164,7 +164,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
           </Form.Item>
         </Form>
 
-        {configFormComponent}
+        {configFormEl}
       </div>
     </Form.Provider>
   );

ui/src/components/notification/NotifyChannelEditForm.tsx

@@ -36,7 +36,7 @@ const NotifyChannelEditForm = forwardRef<NotifyChannelEditFormInstance, NotifyCh
       initialValues: initialValues,
       name: "notifyChannelEditForm",
     });
-    const formFieldsComponent = useMemo(() => {
+    const formFieldsEl = useMemo(() => {
       /*
         注意：如果追加新的子组件，请保持以 ASCII 排序。
         NOTICE: If you add new child component, please keep ASCII order.
@@ -90,7 +90,7 @@ const NotifyChannelEditForm = forwardRef<NotifyChannelEditFormInstance, NotifyCh
         scrollToFirstError
         onValuesChange={handleFormChange}
       >
-        {formFieldsComponent}
+        {formFieldsEl}
       </Form>
     );
   }

ui/src/components/workflow/WorkflowElement.tsx

@@ -15,7 +15,7 @@ export type WorkflowElementProps = {
 };
 
 const WorkflowElement = ({ node, disabled, ...props }: WorkflowElementProps) => {
-  const nodeComponent = useMemo(() => {
+  const workflowNodeEl = useMemo(() => {
     switch (node.type) {
       case WorkflowNodeType.Start:
       case WorkflowNodeType.Apply:
@@ -38,7 +38,7 @@ const WorkflowElement = ({ node, disabled, ...props }: WorkflowElementProps) =>
     }
   }, [node, disabled, props]);
 
-  return <>{nodeComponent}</>;
+  return <>{workflowNodeEl}</>;
 };
 
 export default memo(WorkflowElement);

ui/src/components/workflow/WorkflowElements.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from "react";
 
 import WorkflowElement from "@/components/workflow/WorkflowElement";
-import WorkflowProvider from "@/components/workflow/WorkflowProvider";
 import { type WorkflowNode, WorkflowNodeType, newNode } from "@/domain/workflow";
 import { useZustandShallowSelector } from "@/hooks";
 import { useWorkflowStore } from "@/stores/workflow";
@@ -31,9 +30,7 @@ const WorkflowElements = ({ className, style, disabled }: WorkflowElementsProps)
 
   return (
     <div className={className} style={style}>
-      <div className="flex flex-col items-center overflow-auto">
+      <div className="flex flex-col items-center overflow-auto">{elements}</div>
-        <WorkflowProvider>{elements}</WorkflowProvider>
-      </div>
     </div>
   );
 };

ui/src/components/workflow/WorkflowProvider.tsx

@@ -1,7 +0,0 @@
-import { PanelProvider } from "./panel/PanelProvider";
-
-const WorkflowProvider = ({ children }: { children: React.ReactNode }) => {
-  return <PanelProvider>{children}</PanelProvider>;
-};
-
-export default WorkflowProvider;

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

@@ -1,8 +1,10 @@
-import { memo, useMemo } from "react";
+import { memo, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
-import { Avatar, Button, Card, Dropdown, Popover, Space, Typography } from "antd";
+import { useControllableValue } from "ahooks";
+import { Avatar, Button, Card, Drawer, Dropdown, Modal, Popover, Space, Typography } from "antd";
 import { produce } from "immer";
+import { isEqual } from "radash";
 
 import Show from "@/components/Show";
 import { deployProvidersMap } from "@/domain/provider";
@@ -26,7 +28,6 @@ import ApplyNodeForm from "./ApplyNodeForm";
 import DeployNodeForm from "./DeployNodeForm";
 import NotifyNodeForm from "./NotifyNodeForm";
 import StartNodeForm from "./StartNodeForm";
-import { usePanelContext } from "../panel/PanelContext";
 
 export type CommonNodeProps = {
   node: WorkflowNode;
@@ -36,42 +37,11 @@ export type CommonNodeProps = {
 const CommonNode = ({ node, disabled }: CommonNodeProps) => {
   const { t } = useTranslation();
 
-  const { accesses } = useAccessesStore(useZustandShallowSelector("accesses"));
-  const { addEmail } = useContactEmailsStore(useZustandShallowSelector(["addEmail"]));
   const { updateNode, removeNode } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeNode"]));
-  const { confirm: confirmPanel } = usePanelContext();
 
-  const {
+  const [drawerOpen, setDrawerOpen] = useState(false);
-    form: formInst,
-    formPending,
-    formProps,
-    submit: submitForm,
-  } = useAntdForm({
-    name: "workflowNodeForm",
-    onSubmit: async (values) => {
-      if (node.type === WorkflowNodeType.Apply) {
-        await addEmail(values.contactEmail);
-        await updateNode(
-          produce(node, (draft) => {
-            draft.config = {
-              provider: accesses.find((e) => e.id === values.providerAccessId)?.provider,
-              ...values,
-            };
-            draft.validated = true;
-          })
-        );
-      } else {
-        await updateNode(
-          produce(node, (draft) => {
-            draft.config = { ...values };
-            draft.validated = true;
-          })
-        );
-      }
-    },
-  });
 
-  const nodeContentComponent = useMemo(() => {
+  const workflowNodeEl = useMemo(() => {
     if (!node.validated) {
       return <Typography.Link>{t("workflow_node.action.configure_node")}</Typography.Link>;
     }
@@ -131,38 +101,8 @@ const CommonNode = ({ node, disabled }: CommonNodeProps) => {
     }
   }, [node]);
 
-  const panelBodyComponent = useMemo(() => {
-    const nodeFormProps = {
-      form: formInst,
-      formName: formProps.name,
-      disabled: disabled || formPending,
-      workflowNode: node,
-    };
-
-    switch (node.type) {
-      case WorkflowNodeType.Start:
-        return <StartNodeForm {...nodeFormProps} />;
-      case WorkflowNodeType.Apply:
-        return <ApplyNodeForm {...nodeFormProps} />;
-      case WorkflowNodeType.Deploy:
-        return <DeployNodeForm {...nodeFormProps} />;
-      case WorkflowNodeType.Notify:
-        return <NotifyNodeForm {...nodeFormProps} />;
-      default:
-        console.warn(`[certimate] unsupported workflow node type: ${node.type}`);
-        return <> </>;
-    }
-  }, [node, disabled, formInst, formPending, formProps]);
-
   const handleNodeClick = () => {
-    confirmPanel({
+    setDrawerOpen(true);
-      title: node.name,
-      children: panelBodyComponent,
-      okText: t("common.button.save"),
-      onOk: () => {
-        return submitForm();
-      },
-    });
   };
 
   const handleNodeNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
@@ -226,13 +166,150 @@ const CommonNode = ({ node, disabled }: CommonNodeProps) => {
 
           <div className="flex flex-col justify-center px-4 py-2">
             <div className="cursor-pointer text-sm" onClick={handleNodeClick}>
-              {nodeContentComponent}
+              {workflowNodeEl}
             </div>
           </div>
         </Card>
       </Popover>
 
       <AddNode node={node} disabled={disabled} />
+
+      <CommonNodeEditDrawer node={node} disabled={disabled} open={drawerOpen} onOpenChange={(open) => setDrawerOpen(open)} />
+    </>
+  );
+};
+
+type CommonNodeEditDrawerProps = CommonNodeProps & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+const CommonNodeEditDrawer = ({ node, disabled, ...props }: CommonNodeEditDrawerProps) => {
+  const { t } = useTranslation();
+
+  const [modalApi, ModelContextHolder] = Modal.useModal();
+
+  const [open, setOpen] = useControllableValue<boolean>(props, {
+    valuePropName: "open",
+    defaultValuePropName: "defaultOpen",
+    trigger: "onOpenChange",
+  });
+
+  const { accesses } = useAccessesStore(useZustandShallowSelector("accesses"));
+  const { addEmail } = useContactEmailsStore(useZustandShallowSelector(["addEmail"]));
+  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
+
+  const {
+    form: formInst,
+    formPending,
+    formProps,
+    submit: submitForm,
+  } = useAntdForm({
+    name: "workflowNodeForm",
+    onSubmit: async (values) => {
+      await sleep(5000);
+      if (node.type === WorkflowNodeType.Apply) {
+        await addEmail(values.contactEmail);
+        await updateNode(
+          produce(node, (draft) => {
+            draft.config = {
+              provider: accesses.find((e) => e.id === values.providerAccessId)?.provider,
+              ...values,
+            };
+            draft.validated = true;
+          })
+        );
+      } else {
+        await updateNode(
+          produce(node, (draft) => {
+            draft.config = { ...values };
+            draft.validated = true;
+          })
+        );
+      }
+    },
+  });
+
+  const formEl = useMemo(() => {
+    const nodeFormProps = {
+      form: formInst,
+      formName: formProps.name,
+      disabled: disabled || formPending,
+      workflowNode: node,
+    };
+
+    switch (node.type) {
+      case WorkflowNodeType.Start:
+        return <StartNodeForm {...nodeFormProps} />;
+      case WorkflowNodeType.Apply:
+        return <ApplyNodeForm {...nodeFormProps} />;
+      case WorkflowNodeType.Deploy:
+        return <DeployNodeForm {...nodeFormProps} />;
+      case WorkflowNodeType.Notify:
+        return <NotifyNodeForm {...nodeFormProps} />;
+      default:
+        console.warn(`[certimate] unsupported workflow node type: ${node.type}`);
+        return <> </>;
+    }
+  }, [node, disabled, formInst, formPending, formProps]);
+
+  const handleClose = () => {
+    if (formPending) return;
+
+    const oldValues = Object.fromEntries(Object.entries(node.config ?? {}).filter(([_, value]) => value !== null && value !== undefined));
+    const newValues = Object.fromEntries(Object.entries(formInst.getFieldsValue(true)).filter(([_, value]) => value !== null && value !== undefined));
+    const changed = !isEqual(oldValues, newValues);
+
+    const { promise, resolve, reject } = Promise.withResolvers();
+    if (changed) {
+      modalApi.confirm({
+        title: t("common.text.operation_confirm"),
+        content: t("workflow_node.unsaved_changes.confirm"),
+        onOk: () => resolve(void 0),
+        onCancel: () => reject(),
+      });
+    } else {
+      resolve(void 0);
+    }
+
+    promise.then(() => {
+      setOpen(false);
+    });
+  };
+
+  const handleCancelClick = () => {
+    if (formPending) return;
+
+    setOpen(false);
+  };
+
+  const handleOkClick = async () => {
+    await submitForm();
+    setOpen(false);
+  };
+
+  return (
+    <>
+      {ModelContextHolder}
+
+      <Drawer
+        destroyOnClose
+        footer={
+          <Space className="w-full justify-end">
+            <Button onClick={handleCancelClick}>{t("common.button.cancel")}</Button>
+            <Button loading={formPending} type="primary" onClick={handleOkClick}>
+              {t("common.button.ok")}
+            </Button>
+          </Space>
+        }
+        open={open}
+        title={node.name}
+        width={640}
+        onClose={handleClose}
+      >
+        {formEl}
+      </Drawer>
     </>
   );
 };

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

@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import { PlusOutlined as PlusOutlinedIcon, QuestionCircleOutlined as QuestionCircleOutlinedIcon } from "@ant-design/icons";
 import { Button, Divider, Form, type FormInstance, Select, Tooltip, Typography } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
-import { init } from "i18next";
 import { z } from "zod";
 
 import Show from "@/components/Show";
@@ -78,7 +77,7 @@ const DeployNodeForm = ({ form, formName, disabled, workflowNode, onValuesChange
 
   const fieldProvider = Form.useWatch("provider", { form: form, preserve: true });
 
-  const formFieldsComponent = useMemo(() => {
+  const formFieldsEl = useMemo(() => {
     /*
       注意：如果追加新的子组件，请保持以 ASCII 排序。
       NOTICE: If you add new child component, please keep ASCII order.
@@ -265,7 +264,7 @@ const DeployNodeForm = ({ form, formName, disabled, workflowNode, onValuesChange
           </Typography.Text>
         </Divider>
 
-        {formFieldsComponent}
+        {formFieldsEl}
       </Show>
     </Form>
   );

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

@@ -64,6 +64,8 @@ const StartNodeForm = ({ form, formName, disabled, workflowNode, onValuesChange
     } else {
       form.setFieldValue("triggerCron", undefined);
     }
+
+    onValuesChange?.(form.getFieldsValue(true));
   };
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {

ui/src/components/workflow/panel/Panel.tsx

@@ -1,41 +0,0 @@
-import React, { useEffect } from "react";
-import { useControllableValue } from "ahooks";
-import { Drawer } from "antd";
-
-export type PanelProps = {
-  children: React.ReactNode;
-  defaultOpen?: boolean;
-  extra?: React.ReactNode;
-  footer?: React.ReactNode;
-  open?: boolean;
-  title?: React.ReactNode;
-  onClose?: () => void | Promise<unknown>;
-  onOpenChange?: (open: boolean) => void;
-};
-
-const Panel = ({ children, extra, footer, title, onClose, ...props }: PanelProps) => {
-  const [open, setOpen] = useControllableValue<boolean>(props, {
-    valuePropName: "open",
-    defaultValuePropName: "defaultOpen",
-    trigger: "onOpenChange",
-  });
-
-  const handleClose = async () => {
-    try {
-      const ret = await onClose?.();
-      if (ret != null && !ret) return;
-
-      setOpen(false);
-    } catch {
-      return;
-    }
-  };
-
-  return (
-    <Drawer destroyOnClose extra={extra} footer={footer} open={open} title={title} width={640} onClose={handleClose}>
-      {children}
-    </Drawer>
-  );
-};
-
-export default Panel;

ui/src/components/workflow/panel/PanelContext.ts

@@ -1,34 +0,0 @@
-import { createContext, useContext } from "react";
-import { type ButtonProps } from "antd";
-
-import { type PanelProps } from "./Panel";
-
-export type ShowPanelOptions = Omit<PanelProps, "defaultOpen" | "open" | "onOpenChange">;
-export type ShowPanelWithConfirmOptions = Omit<ShowPanelOptions, "footer" | "onClose"> & {
-  cancelButtonProps?: ButtonProps;
-  cancelText?: React.ReactNode;
-  okButtonProps?: ButtonProps;
-  okText?: React.ReactNode;
-  onCancel?: () => void;
-  onOk?: () => void | Promise<unknown>;
-};
-
-export type PanelContextProps = {
-  open: boolean;
-  show: (options: ShowPanelOptions) => void;
-  confirm: (options: ShowPanelWithConfirmOptions) => void;
-  hide: () => void;
-};
-
-const PanelContext = createContext<PanelContextProps | undefined>(undefined);
-
-export const usePanelContext = () => {
-  const context = useContext(PanelContext);
-  if (!context) {
-    throw new Error("`usePanelContext` must be used within `PanelProvider`");
-  }
-
-  return context;
-};
-
-export default PanelContext;

ui/src/components/workflow/panel/PanelProvider.tsx

@@ -1,90 +0,0 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Button, Space } from "antd";
-
-import Panel from "./Panel";
-import PanelContext, { type ShowPanelOptions, type ShowPanelWithConfirmOptions } from "./PanelContext";
-
-export const PanelProvider = ({ children }: { children: React.ReactNode }) => {
-  const { t } = useTranslation();
-
-  const [open, setOpen] = useState(false);
-  const [options, setOptions] = useState<ShowPanelOptions>();
-
-  const showPanel = (options: ShowPanelOptions) => {
-    setOpen(true);
-    setOptions(options);
-  };
-
-  const showPanelWithConfirm = (options: ShowPanelWithConfirmOptions) => {
-    const updateOptionsFooter = (confirmLoading: boolean) => {
-      setOptions({
-        ...options,
-        footer: (
-          <Space className="w-full justify-end">
-            <Button
-              {...options.cancelButtonProps}
-              onClick={() => {
-                if (confirmLoading) return;
-
-                options.onCancel?.();
-
-                hidePanel();
-              }}
-            >
-              {options.cancelText ?? t("common.button.cancel")}
-            </Button>
-            <Button
-              loading={confirmLoading}
-              type={options.okButtonProps?.type ?? "primary"}
-              {...options.okButtonProps}
-              onClick={async () => {
-                updateOptionsFooter(true);
-
-                try {
-                  const ret = await options.onOk?.();
-                  if (ret != null && !ret) return;
-                } catch {
-                  return;
-                } finally {
-                  updateOptionsFooter(false);
-                }
-
-                hidePanel();
-              }}
-            >
-              {options.okText ?? t("common.button.ok")}
-            </Button>
-          </Space>
-        ),
-        onClose: () => Promise.resolve(!confirmLoading),
-      });
-    };
-
-    showPanel(options);
-    updateOptionsFooter(false);
-  };
-
-  const hidePanel = () => {
-    setOpen(false);
-    setOptions(undefined);
-  };
-
-  const handleOpenChange = (open: boolean) => {
-    setOpen(open);
-
-    if (!open) {
-      setOptions(undefined);
-    }
-  };
-
-  return (
-    <PanelContext.Provider value={{ open, show: showPanel, confirm: showPanelWithConfirm, hide: hidePanel }}>
-      {children}
-
-      <Panel open={open} {...options} onOpenChange={handleOpenChange}>
-        {options?.children}
-      </Panel>
-    </PanelContext.Provider>
-  );
-};

ui/src/i18n/locales/en/nls.common.json

@@ -12,6 +12,7 @@
 
   "common.text.copied": "Copied",
   "common.text.nodata": "No data available",
+  "common.text.operation_confirm": "Operation confirm",
   "common.text.operation_succeeded": "Operation succeeded",
   "common.text.operation_failed": "Operation failed",
   "common.text.request_error": "Request error",

ui/src/i18n/locales/en/nls.workflow.json

@@ -49,6 +49,6 @@
   "workflow.detail.orchestration.action.release.confirm": "Are you sure to release your changes?",
   "workflow.detail.orchestration.action.release.failed.uncompleted": "Please complete the orchestration first",
   "workflow.detail.orchestration.action.run": "Run",
-  "workflow.detail.orchestration.action.run.confirm": "There are unreleased changes, are you sure to run this workflow based on the latest released version?",
+  "workflow.detail.orchestration.action.run.confirm": "You have unreleased changes. Do you really want to run this workflow based on the latest released version?",
   "workflow.detail.runs.tab": "History runs"
 }

ui/src/i18n/locales/en/nls.workflow.nodes.json

@@ -5,6 +5,8 @@
   "workflow_node.action.add_branch": "Add branch",
   "workflow_node.action.delete_branch": "Delete branch",
 
+  "workflow_node.unsaved_changes.confirm": "You have unsaved changes. Do you really want to close the panel and drop those changes?",
+
   "workflow_node.start.label": "Start",
   "workflow_node.start.form.trigger.label": "Trigger",
   "workflow_node.start.form.trigger.placeholder": "Please select trigger",

ui/src/i18n/locales/zh/nls.common.json

@@ -12,6 +12,7 @@
 
   "common.text.copied": "已复制",
   "common.text.nodata": "暂无数据",
+  "common.text.operation_confirm": "操作确认",
   "common.text.operation_succeeded": "操作成功",
   "common.text.operation_failed": "操作失败",
   "common.text.request_error": "请求错误",

ui/src/i18n/locales/zh/nls.workflow.json

@@ -49,6 +49,6 @@
   "workflow.detail.orchestration.action.release.confirm": "确定要发布更改吗？",
   "workflow.detail.orchestration.action.release.failed.uncompleted": "流程编排未完成，请检查是否有节点未配置",
   "workflow.detail.orchestration.action.run": "执行",
-  "workflow.detail.orchestration.action.run.confirm": "此工作流存在未发布的更改，将以最近一次发布的版本为准，确定要继续执行吗？",
+  "workflow.detail.orchestration.action.run.confirm": "你有尚未发布的更改。你确定要以最近一次发布的版本继续执行吗？",
   "workflow.detail.runs.tab": "执行历史"
 }

ui/src/i18n/locales/zh/nls.workflow.nodes.json

@@ -5,6 +5,8 @@
   "workflow_node.action.add_branch": "添加分支",
   "workflow_node.action.delete_branch": "删除分支",
 
+  "workflow_node.unsaved_changes.confirm": "你有尚未保存的更改。你确定要关闭面板吗？",
+
   "workflow_node.start.label": "开始",
   "workflow_node.start.form.trigger.label": "触发方式",
   "workflow_node.start.form.trigger.placeholder": "请选择触发方式",

ui/src/pages/settings/SettingsSSLProvider.tsx

@@ -227,7 +227,7 @@ const SettingsSSLProvider = () => {
   }, []);
 
   const [providerType, setProviderType] = useState<SSLProviders>(SSLPROVIDERS.LETS_ENCRYPT);
-  const providerFormComponent = useMemo(() => {
+  const providerFormEl = useMemo(() => {
     switch (providerType) {
       case SSLPROVIDERS.LETS_ENCRYPT:
         return <SSLProviderEditFormLetsEncryptConfig />;
@@ -286,7 +286,7 @@ const SettingsSSLProvider = () => {
           </Form.Item>
         </Form>
 
-        <div className="md:max-w-[40rem]">{providerFormComponent}</div>
+        <div className="md:max-w-[40rem]">{providerFormEl}</div>
       </Show>
     </SSLProviderContext.Provider>
   );

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -309,7 +309,7 @@ const WorkflowBaseInfoModal = ({ trigger }: { trigger?: React.ReactNode }) => {
     form: formInst,
     formPending,
     formProps,
-    ...formApi
+    submit: submitForm,
   } = useAntdForm<z.infer<typeof formSchema>>({
     initialValues: { name: workflow.name, description: workflow.description },
     onSubmit: async (values) => {
@@ -324,7 +324,7 @@ const WorkflowBaseInfoModal = ({ trigger }: { trigger?: React.ReactNode }) => {
   });
 
   const handleFormFinish = async () => {
-    return formApi.submit();
+    return submitForm();
   };
 
   return (

ui/src/pages/workflows/WorkflowNew.tsx

@@ -49,7 +49,7 @@ const WorkflowNew = () => {
     form: formInst,
     formPending,
     formProps,
-    ...formApi
+    submit: submitForm,
   } = useAntdForm<z.infer<typeof formSchema>>({
     onSubmit: async (values) => {
       try {
@@ -97,7 +97,7 @@ const WorkflowNew = () => {
   };
 
   const handleModalFormFinish = () => {
-    return formApi.submit();
+    return submitForm();
   };
 
   return (