feat(ui): close confirm when changes not saved

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 {
-    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 [drawerOpen, setDrawerOpen] = useState(false);
 
-  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({
-      title: node.name,
-      children: panelBodyComponent,
-      okText: t("common.button.save"),
-      onOk: () => {
-        return submitForm();
-      },
-    });
+    setDrawerOpen(true);
   };
 
   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>) => {