feat(ui): close confirm when changes not saved

This commit is contained in:
Fu Diwei 2025-01-06 00:44:06 +08:00
parent 6f1a375fee
commit 4ba7237326
22 changed files with 185 additions and 264 deletions

View File

@ -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",
{

View File

@ -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}

View File

@ -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>
);

View File

@ -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>
);
}

View File

@ -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);

View File

@ -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">
<WorkflowProvider>{elements}</WorkflowProvider>
</div>
<div className="flex flex-col items-center overflow-auto">{elements}</div>
</div>
);
};

View File

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

View File

@ -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>
</>
);
};

View File

@ -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>
);

View File

@ -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>) => {

View File

@ -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;

View File

@ -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;

View File

@ -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>
);
};

View File

@ -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",

View File

@ -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"
}

View File

@ -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",

View File

@ -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": "请求错误",

View File

@ -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": "执行历史"
}

View File

@ -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": "请选择触发方式",

View File

@ -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>
);

View File

@ -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 (

View File

@ -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 (