GuanM/certimate
1
0
Fork 0
mirror of https://github.com/usual2970/certimate.git synced 2025-09-18 06:04:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(ui): new workflow node panel

Browse Source
This commit is contained in:
Fu Diwei
2025-01-05 22:53:12 +08:00
parent e4c51aece4
commit 350160833b
19 changed files with 601 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
ui/src/components/workflow/Panel.tsx
View File

@@ -1,23 +0,0 @@
import { useEffect } from "react";
import { Drawer } from "antd";
type AddNodePanelProps = {
open: boolean;
onOpenChange: (open: boolean) => void;
children: React.ReactNode;
name: string;
};
const Panel = ({ open, onOpenChange, children, name }: AddNodePanelProps) => {
useEffect(() => {
onOpenChange(open);
}, [open, onOpenChange]);
return (
<Drawer destroyOnClose={true} open={open} title={name} width={640} onClose={() => onOpenChange(false)}>
{children}
</Drawer>
);
};
export default Panel;

31
ui/src/components/workflow/PanelBody.tsx
View File

@@ -1,31 +0,0 @@
import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
import ApplyNodeForm from "./node/ApplyNodeForm";
import DeployNodeForm from "./node/DeployNodeForm";
import NotifyNodeForm from "./node/NotifyNodeForm";
import StartNodeForm from "./node/StartNodeForm";
type PanelBodyProps = {
data: WorkflowNode;
};
const PanelBody = ({ data }: PanelBodyProps) => {
const getBody = () => {
switch (data.type) {
case WorkflowNodeType.Start:
return <StartNodeForm node={data} />;
case WorkflowNodeType.Apply:
return <ApplyNodeForm node={data} />;
case WorkflowNodeType.Deploy:
return <DeployNodeForm node={data} />;
case WorkflowNodeType.Notify:
return <NotifyNodeForm node={data} />;
default:
return <> </>;
}
};
return <>{getBody()}</>;
};
export default PanelBody;

43
ui/src/components/workflow/PanelProvider.tsx
View File

@@ -1,43 +0,0 @@
import { createContext, useContext, useState } from "react";
import Panel from "./Panel";
type PanelContentProps = { name: string; children: React.ReactNode };
type PanelContextProps = {
open: boolean;
showPanel: ({ name, children }: PanelContentProps) => void;
hidePanel: () => void;
};
const PanelContext = createContext<PanelContextProps | undefined>(undefined);
export const PanelProvider = ({ children }: { children: React.ReactNode }) => {
const [open, setOpen] = useState(false);
const [panelContent, setPanelContent] = useState<PanelContentProps | null>(null);
const showPanel = (panelContent: PanelContentProps) => {
setOpen(true);
setPanelContent(panelContent);
};
const hidePanel = () => {
setOpen(false);
setPanelContent(null);
};
return (
<PanelContext.Provider value={{ open, showPanel, hidePanel }}>
{children}
<Panel open={open} onOpenChange={setOpen} children={panelContent?.children} name={panelContent?.name ?? ""} />
</PanelContext.Provider>
);
};
export const usePanel = () => {
const context = useContext(PanelContext);
if (!context) {
throw new Error("`usePanel` must be used within PanelProvider");
}
return context;
};

186
ui/src/components/workflow/WorkflowElement.tsx
View File

@@ -1,176 +1,44 @@
import { useTranslation } from "react-i18next"; import { memo, useMemo } from "react";
import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
import { Avatar, Button, Card, Dropdown, Popover, Space, Typography } from "antd";
import { produce } from "immer";
import Show from "@/components/Show"; import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
import { deployProvidersMap } from "@/domain/provider";
import { notifyChannelsMap } from "@/domain/settings";
import {
WORKFLOW_TRIGGERS,
type WorkflowNode,
type WorkflowNodeConfigForApply,
type WorkflowNodeConfigForDeploy,
type WorkflowNodeConfigForNotify,
type WorkflowNodeConfigForStart,
WorkflowNodeType,
} from "@/domain/workflow";
import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow";
import PanelBody from "./PanelBody"; import BranchNode from "./node/BranchNode";
import { usePanel } from "./PanelProvider"; import CommonNode from "./node/CommonNode";
import AddNode from "./node/AddNode"; import ConditionNode from "./node/ConditionNode";
import EndNode from "./node/EndNode";
export type NodeProps = { export type WorkflowElementProps = {
node: WorkflowNode; node: WorkflowNode;
disabled?: boolean; disabled?: boolean;
branchId?: string;
branchIndex?: number;
}; };
const WorkflowElement = ({ node, disabled }: NodeProps) => { const WorkflowElement = ({ node, disabled, ...props }: WorkflowElementProps) => {
const { t } = useTranslation(); const nodeComponent = useMemo(() => {
const { updateNode, removeNode } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeNode"]));
const { showPanel } = usePanel();
const renderNodeContent = () => {
if (!node.validated) {
return <Typography.Link>{t("workflow_node.action.configure_node")}</Typography.Link>;
}
switch (node.type) { switch (node.type) {
case WorkflowNodeType.Start: { case WorkflowNodeType.Start:
const config = (node.config as WorkflowNodeConfigForStart) ?? {}; case WorkflowNodeType.Apply:
return ( case WorkflowNodeType.Deploy:
<div className="flex items-center justify-between space-x-2"> case WorkflowNodeType.Notify:
<Typography.Text className="truncate"> return <CommonNode node={node} disabled={disabled} />;
{config.trigger === WORKFLOW_TRIGGERS.AUTO
? t("workflow.props.trigger.auto")
: config.trigger === WORKFLOW_TRIGGERS.MANUAL
? t("workflow.props.trigger.manual")
: "　"}
</Typography.Text>
<Typography.Text className="truncate" type="secondary">
{config.trigger === WORKFLOW_TRIGGERS.AUTO ? config.triggerCron : ""}
</Typography.Text>
</div>
);
}
case WorkflowNodeType.Apply: { case WorkflowNodeType.Branch:
const config = (node.config as WorkflowNodeConfigForApply) ?? {}; return <BranchNode node={node} disabled={disabled} />;
return <Typography.Text className="truncate">{config.domains || "　"}</Typography.Text>;
}
case WorkflowNodeType.Deploy: { case WorkflowNodeType.Condition:
const config = (node.config as WorkflowNodeConfigForDeploy) ?? {}; return <ConditionNode node={node} disabled={disabled} branchId={props.branchId!} branchIndex={props.branchIndex!} />;
const provider = deployProvidersMap.get(config.provider);
return (
<Space>
<Avatar src={provider?.icon} size="small" />
<Typography.Text className="truncate">{t(provider?.name ?? "")}</Typography.Text>
</Space>
);
}
case WorkflowNodeType.Notify: { case WorkflowNodeType.End:
const config = (node.config as WorkflowNodeConfigForNotify) ?? {}; return <EndNode />;
const channel = notifyChannelsMap.get(config.channel as string);
return (
<div className="flex items-center justify-between space-x-2">
<Typography.Text className="truncate">{t(channel?.name ?? "　")}</Typography.Text>
<Typography.Text className="truncate" type="secondary">
{config.subject ?? ""}
</Typography.Text>
</div>
);
}
default: { default:
console.warn(`[certimate] unsupported workflow node type: ${node.type}`);
return <></>; return <></>;
}
} }
}; }, [node, disabled, props]);
const handleNodeNameBlur = (e: React.FocusEvent<HTMLDivElement>) => { return <>{nodeComponent}</>;
const oldName = node.name;
const newName = e.target.innerText.trim();
if (oldName === newName) {
return;
}
updateNode(
produce(node, (draft) => {
draft.name = newName;
})
);
};
const handleNodeClick = () => {
if (disabled) return;
showPanel({
name: node.name,
children: <PanelBody data={node} />,
});
};
return (
<>
<Popover
arrow={false}
content={
<Show when={node.type !== WorkflowNodeType.Start}>
<Dropdown
menu={{
items: [
{
key: "delete",
disabled: disabled,
label: t("workflow_node.action.delete_node"),
icon: <CloseCircleOutlinedIcon />,
danger: true,
onClick: () => {
if (disabled) return;
removeNode(node.id);
},
},
],
}}
trigger={["click"]}
>
<Button color="primary" icon={<EllipsisOutlinedIcon />} variant="text" />
</Dropdown>
</Show>
}
overlayClassName="shadow-md"
overlayInnerStyle={{ padding: 0 }}
placement="rightTop"
>
<Card className="relative w-[256px] overflow-hidden shadow-md" styles={{ body: { padding: 0 } }} hoverable>
<div className="bg-primary flex h-[48px] flex-col items-center justify-center truncate px-4 py-2 text-white">
<div
className="focus:bg-background focus:text-foreground w-full overflow-hidden text-center outline-none focus:rounded-sm"
contentEditable
suppressContentEditableWarning
onBlur={handleNodeNameBlur}
>
{node.name}
</div>
</div>
<div className="flex flex-col justify-center px-4 py-2">
<div className="cursor-pointer text-sm" onClick={handleNodeClick}>
{renderNodeContent()}
</div>
</div>
</Card>
</Popover>
<AddNode node={node} disabled={disabled} />
</>
);
}; };
export default WorkflowElement; export default memo(WorkflowElement);

15
ui/src/components/workflow/WorkflowElements.tsx
View File

@@ -1,9 +1,8 @@
import { useMemo } from "react"; import { useMemo } from "react";
import WorkflowElement from "@/components/workflow/WorkflowElement";
import WorkflowProvider from "@/components/workflow/WorkflowProvider"; import WorkflowProvider from "@/components/workflow/WorkflowProvider";
import EndNode from "@/components/workflow/node/EndNode"; import { type WorkflowNode, WorkflowNodeType, newNode } from "@/domain/workflow";
import NodeRender from "@/components/workflow/node/NodeRender";
import { type WorkflowNode } from "@/domain/workflow";
import { useZustandShallowSelector } from "@/hooks"; import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow"; import { useWorkflowStore } from "@/stores/workflow";
@@ -19,16 +18,16 @@ const WorkflowElements = ({ className, style, disabled }: WorkflowElementsProps)
const elements = useMemo(() => { const elements = useMemo(() => {
const nodes: JSX.Element[] = []; const nodes: JSX.Element[] = [];
let current = workflow.draft as WorkflowNode; let current = workflow.draft as WorkflowNode | undefined;
while (current) { while (current) {
nodes.push(<NodeRender key={current.id} node={current} disabled={disabled} />); nodes.push(<WorkflowElement key={current.id} node={current} disabled={disabled} />);
current = current.next as WorkflowNode; current = current.next;
} }
nodes.push(<EndNode key="workflow-end" />); nodes.push(<WorkflowElement key="end" node={newNode(WorkflowNodeType.End)} />);
return nodes; return nodes;
}, [workflow]); }, [workflow, disabled]);
return ( return (
<div className={className} style={style}> <div className={className} style={style}>

4
ui/src/components/workflow/WorkflowProvider.tsx
View File

@@ -1,6 +1,4 @@
import React from "react"; import { PanelProvider } from "./panel/PanelProvider";
import { PanelProvider } from "./PanelProvider";
const WorkflowProvider = ({ children }: { children: React.ReactNode }) => { const WorkflowProvider = ({ children }: { children: React.ReactNode }) => {
return <PanelProvider>{children}</PanelProvider>; return <PanelProvider>{children}</PanelProvider>;

6
ui/src/components/workflow/node/AddNode.tsx
View File

@@ -1,4 +1,4 @@
import { useMemo } from "react"; import { memo, useMemo } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import {
CloudUploadOutlined as CloudUploadOutlinedIcon, CloudUploadOutlined as CloudUploadOutlinedIcon,
@@ -43,7 +43,7 @@ const AddNode = ({ node, disabled }: AddNodeProps) => {
}, },
}; };
}); });
}, []); }, [node.id, disabled]);
return ( return (
<div className="relative py-6 before:absolute before:left-1/2 before:top-0 before:h-full before:w-[2px] before:-translate-x-1/2 before:bg-stone-200 before:content-['']"> <div className="relative py-6 before:absolute before:left-1/2 before:top-0 before:h-full before:w-[2px] before:-translate-x-1/2 before:bg-stone-200 before:content-['']">
@@ -56,4 +56,4 @@ const AddNode = ({ node, disabled }: AddNodeProps) => {
); );
}; };
export default AddNode; export default memo(AddNode);

117
ui/src/components/workflow/node/ApplyNodeForm.tsx
View File

@@ -2,9 +2,8 @@ import { memo, useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { FormOutlined as FormOutlinedIcon, PlusOutlined as PlusOutlinedIcon, QuestionCircleOutlined as QuestionCircleOutlinedIcon } from "@ant-design/icons"; import { FormOutlined as FormOutlinedIcon, PlusOutlined as PlusOutlinedIcon, QuestionCircleOutlined as QuestionCircleOutlinedIcon } from "@ant-design/icons";
import { useControllableValue } from "ahooks"; import { useControllableValue } from "ahooks";
import { AutoComplete, type AutoCompleteProps, Button, Divider, Form, Input, Select, Space, Switch, Tooltip, Typography } from "antd"; import { AutoComplete, type AutoCompleteProps, Button, Divider, Form, type FormInstance, Input, Select, Space, Switch, Tooltip, Typography } from "antd";
import { createSchemaFieldRule } from "antd-zod"; import { createSchemaFieldRule } from "antd-zod";
import { produce } from "immer";
import { z } from "zod"; import { z } from "zod";
import ModalForm from "@/components/ModalForm"; import ModalForm from "@/components/ModalForm";
@@ -13,20 +12,22 @@ import AccessEditModal from "@/components/access/AccessEditModal";
import AccessSelect from "@/components/access/AccessSelect"; import AccessSelect from "@/components/access/AccessSelect";
import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider"; import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider";
import { type WorkflowNode, type WorkflowNodeConfigForApply } from "@/domain/workflow"; import { type WorkflowNode, type WorkflowNodeConfigForApply } from "@/domain/workflow";
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
import { useAccessesStore } from "@/stores/access";
import { useContactEmailsStore } from "@/stores/contact"; import { useContactEmailsStore } from "@/stores/contact";
import { useWorkflowStore } from "@/stores/workflow";
import { validDomainName, validIPv4Address, validIPv6Address } from "@/utils/validators"; import { validDomainName, validIPv4Address, validIPv6Address } from "@/utils/validators";
import { usePanel } from "../PanelProvider";
type ApplyNodeFormFieldValues = Partial<WorkflowNodeConfigForApply>;
export type ApplyNodeFormProps = { export type ApplyNodeFormProps = {
node: WorkflowNode; form: FormInstance;
formName?: string;
disabled?: boolean;
workflowNode: WorkflowNode;
onValuesChange?: (values: ApplyNodeFormFieldValues) => void;
}; };
const MULTIPLE_INPUT_DELIMITER = ";"; const MULTIPLE_INPUT_DELIMITER = ";";
const initFormModel = (): Partial<WorkflowNodeConfigForApply> => { const initFormModel = (): ApplyNodeFormFieldValues => {
return { return {
keyAlgorithm: "RSA2048", keyAlgorithm: "RSA2048",
propagationTimeout: 60, propagationTimeout: 60,
@@ -34,21 +35,16 @@ const initFormModel = (): Partial<WorkflowNodeConfigForApply> => {
}; };
}; };
const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => { const ApplyNodeForm = ({ form, formName, disabled, workflowNode, onValuesChange }: ApplyNodeFormProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { accesses } = useAccessesStore(useZustandShallowSelector("accesses"));
const { addEmail } = useContactEmailsStore(useZustandShallowSelector("addEmail"));
const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
const { hidePanel } = usePanel();
const formSchema = z.object({ const formSchema = z.object({
domains: z.string({ message: t("workflow_node.apply.form.domains.placeholder") }).refine((v) => { domains: z.string({ message: t("workflow_node.apply.form.domains.placeholder") }).refine((v) => {
return String(v) return String(v)
.split(MULTIPLE_INPUT_DELIMITER) .split(MULTIPLE_INPUT_DELIMITER)
.every((e) => validDomainName(e, true)); .every((e) => validDomainName(e, true));
}, t("common.errmsg.domain_invalid")), }, t("common.errmsg.domain_invalid")),
contactEmail: z.string({ message: t("workflow_node.apply.form.contact_email.placeholder") }).email("common.errmsg.email_invalid"), contactEmail: z.string({ message: t("workflow_node.apply.form.contact_email.placeholder") }).email(t("common.errmsg.email_invalid")),
providerAccessId: z providerAccessId: z
.string({ message: t("workflow_node.apply.form.provider_access.placeholder") }) .string({ message: t("workflow_node.apply.form.provider_access.placeholder") })
.min(1, t("workflow_node.apply.form.provider_access.placeholder")), .min(1, t("workflow_node.apply.form.provider_access.placeholder")),
@@ -73,46 +69,27 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
disableFollowCNAME: z.boolean().nullish(), disableFollowCNAME: z.boolean().nullish(),
}); });
const formRule = createSchemaFieldRule(formSchema); const formRule = createSchemaFieldRule(formSchema);
const {
form: formInst,
formPending,
formProps,
} = useAntdForm<z.infer<typeof formSchema>>({
name: "workflowApplyNodeForm",
initialValues: (node?.config as WorkflowNodeConfigForApply) ?? initFormModel(),
onSubmit: async (values) => {
await formInst.validateFields();
await addEmail(values.contactEmail);
await updateNode(
produce(node, (draft) => {
draft.config = {
provider: accesses.find((e) => e.id === values.providerAccessId)?.provider,
...values,
} as WorkflowNodeConfigForApply;
draft.validated = true;
})
);
hidePanel();
},
});
const [fieldDomains, setFieldDomains] = useState(node?.config?.domains as string); const initialValues: ApplyNodeFormFieldValues = (workflowNode.config as WorkflowNodeConfigForApply) ?? initFormModel();
const [fieldNameservers, setFieldNameservers] = useState(node?.config?.nameservers as string);
const handleFieldDomainsChange = (e: React.ChangeEvent<HTMLInputElement>) => { const fieldDomains = Form.useWatch<string>("domains", form);
const value = e.target.value; const fieldNameservers = Form.useWatch<string>("nameservers", form);
setFieldDomains(value);
formInst.setFieldValue("domains", value);
};
const handleFieldNameserversChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
const value = e.target.value; onValuesChange?.(values as ApplyNodeFormFieldValues);
setFieldNameservers(value);
formInst.setFieldValue("nameservers", value);
}; };
return ( return (
<Form {...formProps} form={formInst} disabled={formPending} layout="vertical"> <Form
form={form}
disabled={disabled}
initialValues={initialValues}
layout="vertical"
name={formName}
preserve={false}
scrollToFirstError
onValuesChange={handleFormChange}
>
<Form.Item <Form.Item
name="domains" name="domains"
label={t("workflow_node.apply.form.domains.label")} label={t("workflow_node.apply.form.domains.label")}
@@ -121,21 +98,22 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
> >
<Space.Compact style={{ width: "100%" }}> <Space.Compact style={{ width: "100%" }}>
<Input <Input
disabled={formPending} disabled={disabled}
value={fieldDomains} value={fieldDomains}
placeholder={t("workflow_node.apply.form.domains.placeholder")} placeholder={t("workflow_node.apply.form.domains.placeholder")}
onChange={handleFieldDomainsChange} onChange={(e) => {
form.setFieldValue("domains", e.target.value);
}}
/> />
<FormFieldDomainsModalForm <FormFieldDomainsModalForm
data={fieldDomains} data={fieldDomains}
trigger={ trigger={
<Button disabled={formPending}> <Button disabled={disabled}>
<FormOutlinedIcon /> <FormOutlinedIcon />
</Button> </Button>
} }
onFinish={(v) => { onFinish={(v) => {
setFieldDomains(v); form.setFieldValue("domains", v);
formInst.setFieldValue("domains", v);
}} }}
/> />
</Space.Compact> </Space.Compact>
@@ -173,7 +151,7 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
onSubmit={(record) => { onSubmit={(record) => {
const provider = accessProvidersMap.get(record.provider); const provider = accessProvidersMap.get(record.provider);
if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage) { if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage) {
formInst.setFieldValue("providerAccessId", record.id); form.setFieldValue("providerAccessId", record.id);
} }
}} }}
/> />
@@ -216,21 +194,22 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
<Space.Compact style={{ width: "100%" }}> <Space.Compact style={{ width: "100%" }}>
<Input <Input
allowClear allowClear
disabled={formPending} disabled={disabled}
value={fieldNameservers} value={fieldNameservers}
placeholder={t("workflow_node.apply.form.nameservers.placeholder")} placeholder={t("workflow_node.apply.form.nameservers.placeholder")}
onChange={handleFieldNameserversChange} onChange={(e) => {
form.setFieldValue("nameservers", e.target.value);
}}
/> />
<FormFieldNameserversModalForm <FormFieldNameserversModalForm
data={fieldNameservers} data={fieldNameservers}
trigger={ trigger={
<Button disabled={formPending}> <Button disabled={disabled}>
<FormOutlinedIcon /> <FormOutlinedIcon />
</Button> </Button>
} }
onFinish={(v) => { onFinish={(v) => {
setFieldNameservers(v); form.setFieldValue("nameservers", v);
formInst.setFieldValue("nameservers", v);
}} }}
/> />
</Space.Compact> </Space.Compact>
@@ -260,12 +239,6 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
> >
<Switch /> <Switch />
</Form.Item> </Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={formPending}>
{t("common.button.save")}
</Button>
</Form.Item>
</Form> </Form>
); );
}; };
@@ -340,7 +313,7 @@ const FormFieldDomainsModalForm = ({
trigger, trigger,
onFinish, onFinish,
}: { }: {
data: string; data?: string;
disabled?: boolean; disabled?: boolean;
trigger?: React.ReactNode; trigger?: React.ReactNode;
onFinish?: (data: string) => void; onFinish?: (data: string) => void;
@@ -353,7 +326,7 @@ const FormFieldDomainsModalForm = ({
}, t("common.errmsg.domain_invalid")), }, t("common.errmsg.domain_invalid")),
}); });
const formRule = createSchemaFieldRule(formSchema); const formRule = createSchemaFieldRule(formSchema);
const [formInst] = Form.useForm<z.infer<typeof formSchema>>(); const [form] = Form.useForm<z.infer<typeof formSchema>>();
const [model, setModel] = useState<Partial<z.infer<typeof formSchema>>>({ domains: data?.split(MULTIPLE_INPUT_DELIMITER) }); const [model, setModel] = useState<Partial<z.infer<typeof formSchema>>>({ domains: data?.split(MULTIPLE_INPUT_DELIMITER) });
useEffect(() => { useEffect(() => {
@@ -372,7 +345,7 @@ const FormFieldDomainsModalForm = ({
return ( return (
<ModalForm <ModalForm
layout="vertical" layout="vertical"
form={formInst} form={form}
initialValues={model} initialValues={model}
modalProps={{ destroyOnClose: true }} modalProps={{ destroyOnClose: true }}
title={t("workflow_node.apply.form.domains.multiple_input_modal.title")} title={t("workflow_node.apply.form.domains.multiple_input_modal.title")}
@@ -388,7 +361,7 @@ const FormFieldDomainsModalForm = ({
); );
}; };
const FormFieldNameserversModalForm = ({ data, trigger, onFinish }: { data: string; trigger?: React.ReactNode; onFinish?: (data: string) => void }) => { const FormFieldNameserversModalForm = ({ data, trigger, onFinish }: { data?: string; trigger?: React.ReactNode; onFinish?: (data: string) => void }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const formSchema = z.object({ const formSchema = z.object({
@@ -397,7 +370,7 @@ const FormFieldNameserversModalForm = ({ data, trigger, onFinish }: { data: stri
}, t("common.errmsg.domain_invalid")), }, t("common.errmsg.domain_invalid")),
}); });
const formRule = createSchemaFieldRule(formSchema); const formRule = createSchemaFieldRule(formSchema);
const [formInst] = Form.useForm<z.infer<typeof formSchema>>(); const [form] = Form.useForm<z.infer<typeof formSchema>>();
const [model, setModel] = useState<Partial<z.infer<typeof formSchema>>>({ nameservers: data?.split(MULTIPLE_INPUT_DELIMITER) }); const [model, setModel] = useState<Partial<z.infer<typeof formSchema>>>({ nameservers: data?.split(MULTIPLE_INPUT_DELIMITER) });
useEffect(() => { useEffect(() => {
@@ -416,7 +389,7 @@ const FormFieldNameserversModalForm = ({ data, trigger, onFinish }: { data: stri
return ( return (
<ModalForm <ModalForm
layout="vertical" layout="vertical"
form={formInst} form={form}
initialValues={model} initialValues={model}
modalProps={{ destroyOnClose: true }} modalProps={{ destroyOnClose: true }}
title={t("workflow_node.apply.form.nameservers.multiple_input_modal.title")} title={t("workflow_node.apply.form.nameservers.multiple_input_modal.title")}

12
ui/src/components/workflow/node/BranchNode.tsx
View File

@@ -7,7 +7,7 @@ import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow"; import { useWorkflowStore } from "@/stores/workflow";
import AddNode from "./AddNode"; import AddNode from "./AddNode";
import NodeRender from "./NodeRender"; import WorkflowElement from "../WorkflowElement";
export type BrandNodeProps = { export type BrandNodeProps = {
node: WorkflowNode; node: WorkflowNode;
@@ -19,12 +19,12 @@ const BranchNode = ({ node, disabled }: BrandNodeProps) => {
const { addBranch } = useWorkflowStore(useZustandShallowSelector(["addBranch"])); const { addBranch } = useWorkflowStore(useZustandShallowSelector(["addBranch"]));
const renderNodes = (node: WorkflowNode, branchNodeId?: string, branchIndex?: number) => { const renderBranch = (node: WorkflowNode, branchNodeId?: string, branchIndex?: number) => {
const elements: JSX.Element[] = []; const elements: JSX.Element[] = [];
let current = node as WorkflowNode | undefined; let current = node as typeof node | undefined;
while (current) { while (current) {
elements.push(<NodeRender key={current.id} node={current} branchId={branchNodeId} branchIndex={branchIndex} disabled={disabled} />); elements.push(<WorkflowElement key={current.id} node={current} disabled={disabled} branchId={branchNodeId} branchIndex={branchIndex} />);
current = current.next; current = current.next;
} }
@@ -47,12 +47,12 @@ const BranchNode = ({ node, disabled }: BrandNodeProps) => {
{t("workflow_node.action.add_branch")} {t("workflow_node.action.add_branch")}
</Button> </Button>
{node.branches!.map((branch, index) => ( {node.branches?.map((branch, index) => (
<div <div
key={branch.id} key={branch.id}
className="relative flex flex-col items-center before:absolute before:left-1/2 before:top-0 before:h-full before:w-[2px] before:-translate-x-1/2 before:bg-stone-200 before:content-['']" className="relative flex flex-col items-center before:absolute before:left-1/2 before:top-0 before:h-full before:w-[2px] before:-translate-x-1/2 before:bg-stone-200 before:content-['']"
> >
<div className="relative flex flex-col items-center">{renderNodes(branch, node.id, index)}</div> <div className="relative flex flex-col items-center">{renderBranch(branch, node.id, index)}</div>
</div> </div>
))} ))}
</div> </div>

240
ui/src/components/workflow/node/CommonNode.tsx Normal file
View File

@@ -0,0 +1,240 @@
import { memo, useMemo } 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 { produce } from "immer";
import Show from "@/components/Show";
import { deployProvidersMap } from "@/domain/provider";
import { notifyChannelsMap } from "@/domain/settings";
import {
WORKFLOW_TRIGGERS,
type WorkflowNode,
type WorkflowNodeConfigForApply,
type WorkflowNodeConfigForDeploy,
type WorkflowNodeConfigForNotify,
type WorkflowNodeConfigForStart,
WorkflowNodeType,
} from "@/domain/workflow";
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
import { useAccessesStore } from "@/stores/access";
import { useContactEmailsStore } from "@/stores/contact";
import { useWorkflowStore } from "@/stores/workflow";
import AddNode from "./AddNode";
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;
disabled?: boolean;
};
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 nodeContentComponent = useMemo(() => {
if (!node.validated) {
return <Typography.Link>{t("workflow_node.action.configure_node")}</Typography.Link>;
}
switch (node.type) {
case WorkflowNodeType.Start: {
const config = (node.config as WorkflowNodeConfigForStart) ?? {};
return (
<div className="flex items-center justify-between space-x-2">
<Typography.Text className="truncate">
{config.trigger === WORKFLOW_TRIGGERS.AUTO
? t("workflow.props.trigger.auto")
: config.trigger === WORKFLOW_TRIGGERS.MANUAL
? t("workflow.props.trigger.manual")
: "　"}
</Typography.Text>
<Typography.Text className="truncate" type="secondary">
{config.trigger === WORKFLOW_TRIGGERS.AUTO ? config.triggerCron : ""}
</Typography.Text>
</div>
);
}
case WorkflowNodeType.Apply: {
const config = (node.config as WorkflowNodeConfigForApply) ?? {};
return <Typography.Text className="truncate">{config.domains || "　"}</Typography.Text>;
}
case WorkflowNodeType.Deploy: {
const config = (node.config as WorkflowNodeConfigForDeploy) ?? {};
const provider = deployProvidersMap.get(config.provider);
return (
<Space>
<Avatar src={provider?.icon} size="small" />
<Typography.Text className="truncate">{t(provider?.name ?? "")}</Typography.Text>
</Space>
);
}
case WorkflowNodeType.Notify: {
const config = (node.config as WorkflowNodeConfigForNotify) ?? {};
const channel = notifyChannelsMap.get(config.channel as string);
return (
<div className="flex items-center justify-between space-x-2">
<Typography.Text className="truncate">{t(channel?.name ?? "　")}</Typography.Text>
<Typography.Text className="truncate" type="secondary">
{config.subject ?? ""}
</Typography.Text>
</div>
);
}
default: {
console.warn(`[certimate] unsupported workflow node type: ${node.type}`);
return <></>;
}
}
}, [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();
},
});
};
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={
<Show when={node.type !== WorkflowNodeType.Start}>
<Dropdown
menu={{
items: [
{
key: "delete",
disabled: disabled,
label: t("workflow_node.action.delete_node"),
icon: <CloseCircleOutlinedIcon />,
danger: true,
onClick: () => {
if (disabled) return;
removeNode(node.id);
},
},
],
}}
trigger={["click"]}
>
<Button color="primary" icon={<EllipsisOutlinedIcon />} variant="text" />
</Dropdown>
</Show>
}
overlayClassName="shadow-md"
overlayInnerStyle={{ padding: 0 }}
placement="rightTop"
>
<Card className="relative w-[256px] overflow-hidden shadow-md" styles={{ body: { padding: 0 } }} hoverable>
<div className="bg-primary flex h-[48px] flex-col items-center justify-center truncate px-4 py-2 text-white">
<div
className="focus:bg-background focus:text-foreground w-full overflow-hidden text-center outline-none focus:rounded-sm"
contentEditable
suppressContentEditableWarning
onBlur={handleNodeNameBlur}
>
{node.name}
</div>
</div>
<div className="flex flex-col justify-center px-4 py-2">
<div className="cursor-pointer text-sm" onClick={handleNodeClick}>
{nodeContentComponent}
</div>
</div>
</Card>
</Popover>
<AddNode node={node} disabled={disabled} />
</>
);
};
export default memo(CommonNode);

3
ui/src/components/workflow/node/ConditionNode.tsx
View File

@@ -1,3 +1,4 @@
import { memo } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons"; import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
import { Button, Card, Dropdown, Popover } from "antd"; import { Button, Card, Dropdown, Popover } from "antd";
@@ -85,4 +86,4 @@ const ConditionNode = ({ node, branchId, branchIndex, disabled }: ConditionNodeP
); );
}; };
export default ConditionNode; export default memo(ConditionNode);

92
ui/src/components/workflow/node/DeployNodeForm.tsx
View File

@@ -1,9 +1,9 @@
import { memo, useCallback, useEffect, useMemo, useState } from "react"; import { memo, useCallback, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { PlusOutlined as PlusOutlinedIcon, QuestionCircleOutlined as QuestionCircleOutlinedIcon } from "@ant-design/icons"; import { PlusOutlined as PlusOutlinedIcon, QuestionCircleOutlined as QuestionCircleOutlinedIcon } from "@ant-design/icons";
import { Button, Divider, Form, Select, Tooltip, Typography } from "antd"; import { Button, Divider, Form, type FormInstance, Select, Tooltip, Typography } from "antd";
import { createSchemaFieldRule } from "antd-zod"; import { createSchemaFieldRule } from "antd-zod";
import { produce } from "immer"; import { init } from "i18next";
import { z } from "zod"; import { z } from "zod";
import Show from "@/components/Show"; import Show from "@/components/Show";
@@ -13,9 +13,9 @@ import DeployProviderPicker from "@/components/provider/DeployProviderPicker";
import DeployProviderSelect from "@/components/provider/DeployProviderSelect"; import DeployProviderSelect from "@/components/provider/DeployProviderSelect";
import { ACCESS_USAGES, DEPLOY_PROVIDERS, accessProvidersMap, deployProvidersMap } from "@/domain/provider"; import { ACCESS_USAGES, DEPLOY_PROVIDERS, accessProvidersMap, deployProvidersMap } from "@/domain/provider";
import { type WorkflowNode, type WorkflowNodeConfigForDeploy } from "@/domain/workflow"; import { type WorkflowNode, type WorkflowNodeConfigForDeploy } from "@/domain/workflow";
import { useAntdForm, useZustandShallowSelector } from "@/hooks"; import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow"; import { useWorkflowStore } from "@/stores/workflow";
import { usePanel } from "../PanelProvider";
import DeployNodeFormAliyunALBFields from "./DeployNodeFormAliyunALBFields"; import DeployNodeFormAliyunALBFields from "./DeployNodeFormAliyunALBFields";
import DeployNodeFormAliyunCDNFields from "./DeployNodeFormAliyunCDNFields"; import DeployNodeFormAliyunCDNFields from "./DeployNodeFormAliyunCDNFields";
import DeployNodeFormAliyunCLBFields from "./DeployNodeFormAliyunCLBFields"; import DeployNodeFormAliyunCLBFields from "./DeployNodeFormAliyunCLBFields";
@@ -40,19 +40,30 @@ import DeployNodeFormVolcEngineCDNFields from "./DeployNodeFormVolcEngineCDNFiel
import DeployNodeFormVolcEngineLiveFields from "./DeployNodeFormVolcEngineLiveFields"; import DeployNodeFormVolcEngineLiveFields from "./DeployNodeFormVolcEngineLiveFields";
import DeployNodeFormWebhookFields from "./DeployNodeFormWebhookFields"; import DeployNodeFormWebhookFields from "./DeployNodeFormWebhookFields";
type DeployNodeFormFieldValues = Partial<WorkflowNodeConfigForDeploy>;
export type DeployFormProps = { export type DeployFormProps = {
node: WorkflowNode; form: FormInstance;
formName?: string;
disabled?: boolean;
workflowNode: WorkflowNode;
onValuesChange?: (values: DeployNodeFormFieldValues) => void;
}; };
const initFormModel = (): Partial<WorkflowNodeConfigForDeploy> => { const initFormModel = (): DeployNodeFormFieldValues => {
return {}; return {};
}; };
const DeployNodeForm = ({ node }: DeployFormProps) => { const DeployNodeForm = ({ form, formName, disabled, workflowNode, onValuesChange }: DeployFormProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"])); const { getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
const { hidePanel } = usePanel();
const [previousOutput, setPreviousOutput] = useState<WorkflowNode[]>([]);
useEffect(() => {
const rs = getWorkflowOuptutBeforeId(workflowNode.id, "certificate");
setPreviousOutput(rs);
}, [workflowNode.id, getWorkflowOuptutBeforeId]);
const formSchema = z.object({ const formSchema = z.object({
provider: z.string({ message: t("workflow_node.deploy.form.provider.placeholder") }).nonempty(t("workflow_node.deploy.form.provider.placeholder")), provider: z.string({ message: t("workflow_node.deploy.form.provider.placeholder") }).nonempty(t("workflow_node.deploy.form.provider.placeholder")),
@@ -62,32 +73,10 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
certificate: z.string({ message: t("workflow_node.deploy.form.certificate.placeholder") }).nonempty(t("workflow_node.deploy.form.certificate.placeholder")), certificate: z.string({ message: t("workflow_node.deploy.form.certificate.placeholder") }).nonempty(t("workflow_node.deploy.form.certificate.placeholder")),
}); });
const formRule = createSchemaFieldRule(formSchema); const formRule = createSchemaFieldRule(formSchema);
const {
form: formInst,
formPending,
formProps,
} = useAntdForm<z.infer<typeof formSchema>>({
name: "workflowDeployNodeForm",
initialValues: (node?.config as WorkflowNodeConfigForDeploy) ?? initFormModel(),
onSubmit: async (values) => {
await formInst.validateFields();
await updateNode(
produce(node, (draft) => {
draft.config = { ...values };
draft.validated = true;
})
);
hidePanel();
},
});
const [previousOutput, setPreviousOutput] = useState<WorkflowNode[]>([]); const initialValues: DeployNodeFormFieldValues = (workflowNode.config as WorkflowNodeConfigForDeploy) ?? initFormModel();
useEffect(() => {
const rs = getWorkflowOuptutBeforeId(node.id, "certificate");
setPreviousOutput(rs);
}, [node, getWorkflowOuptutBeforeId]);
const fieldProvider = Form.useWatch("provider", { form: formInst, preserve: true }); const fieldProvider = Form.useWatch("provider", { form: form, preserve: true });
const formFieldsComponent = useMemo(() => { const formFieldsComponent = useMemo(() => {
/* /*
@@ -146,9 +135,9 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
const handleProviderPick = useCallback( const handleProviderPick = useCallback(
(value: string) => { (value: string) => {
formInst.setFieldValue("provider", value); form.setFieldValue("provider", value);
}, },
[formInst] [form]
); );
const handleProviderSelect = (value: string) => { const handleProviderSelect = (value: string) => {
@@ -156,10 +145,10 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
// TODO: 暂时不支持切换部署目标，需后端调整，否则之前若存在部署结果输出就不会再部署 // TODO: 暂时不支持切换部署目标，需后端调整，否则之前若存在部署结果输出就不会再部署
// 切换部署目标时重置表单，避免其他部署目标的配置字段影响当前部署目标 // 切换部署目标时重置表单，避免其他部署目标的配置字段影响当前部署目标
if (node.config?.provider === value) { if (initialValues?.provider === value) {
formInst.resetFields(); form.resetFields();
} else { } else {
const oldValues = formInst.getFieldsValue(); const oldValues = form.getFieldsValue();
const newValues: Record<string, unknown> = {}; const newValues: Record<string, unknown> = {};
for (const key in oldValues) { for (const key in oldValues) {
if (key === "provider" || key === "providerAccessId" || key === "certificate") { if (key === "provider" || key === "providerAccessId" || key === "certificate") {
@@ -168,16 +157,29 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
newValues[key] = undefined; newValues[key] = undefined;
} }
} }
formInst.setFieldsValue(newValues); form.setFieldsValue(newValues);
if (deployProvidersMap.get(fieldProvider)?.provider !== deployProvidersMap.get(value)?.provider) { if (deployProvidersMap.get(fieldProvider)?.provider !== deployProvidersMap.get(value)?.provider) {
formInst.setFieldValue("providerAccessId", undefined); form.setFieldValue("providerAccessId", undefined);
} }
} }
}; };
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onValuesChange?.(values as DeployNodeFormFieldValues);
};
return ( return (
<Form {...formProps} form={formInst} disabled={formPending} layout="vertical"> <Form
form={form}
disabled={disabled}
initialValues={initialValues}
layout="vertical"
name={formName}
preserve={false}
scrollToFirstError
onValuesChange={handleFormChange}
>
<Show when={!!fieldProvider} fallback={<DeployProviderPicker onSelect={handleProviderPick} />}> <Show when={!!fieldProvider} fallback={<DeployProviderPicker onSelect={handleProviderPick} />}>
<Form.Item name="provider" label={t("workflow_node.deploy.form.provider.label")} rules={[formRule]}> <Form.Item name="provider" label={t("workflow_node.deploy.form.provider.label")} rules={[formRule]}>
<DeployProviderSelect <DeployProviderSelect
@@ -213,7 +215,7 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
onSubmit={(record) => { onSubmit={(record) => {
const provider = accessProvidersMap.get(record.provider); const provider = accessProvidersMap.get(record.provider);
if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.DEPLOY === provider?.usage) { if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.DEPLOY === provider?.usage) {
formInst.setFieldValue("providerAccessId", record.id); form.setFieldValue("providerAccessId", record.id);
} }
}} }}
/> />
@@ -264,12 +266,6 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
</Divider> </Divider>
{formFieldsComponent} {formFieldsComponent}
<Form.Item>
<Button type="primary" htmlType="submit" loading={formPending}>
{t("common.button.save")}
</Button>
</Form.Item>
</Show> </Show>
</Form> </Form>
); );

3
ui/src/components/workflow/node/EndNode.tsx
View File

@@ -1,3 +1,4 @@
import { memo } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Typography } from "antd"; import { Typography } from "antd";
@@ -14,4 +15,4 @@ const EndNode = () => {
); );
}; };
export default EndNode; export default memo(EndNode);

37
ui/src/components/workflow/node/NodeRender.tsx
View File

@@ -1,37 +0,0 @@
import { memo } from "react";
import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
import WorkflowElement from "../WorkflowElement";
import BranchNode from "./BranchNode";
import ConditionNode from "./ConditionNode";
import EndNode from "./EndNode";
export type NodeRenderProps = {
node: WorkflowNode;
branchId?: string;
branchIndex?: number;
disabled?: boolean;
};
const NodeRender = ({ node: data, branchId, branchIndex, disabled }: NodeRenderProps) => {
const render = () => {
switch (data.type) {
case WorkflowNodeType.Start:
case WorkflowNodeType.Apply:
case WorkflowNodeType.Deploy:
case WorkflowNodeType.Notify:
return <WorkflowElement node={data} disabled={disabled} />;
case WorkflowNodeType.End:
return <EndNode />;
case WorkflowNodeType.Branch:
return <BranchNode node={data} disabled={disabled} />;
case WorkflowNodeType.Condition:
return <ConditionNode node={data as WorkflowNode} branchId={branchId!} branchIndex={branchIndex!} disabled={disabled} />;
}
};
return <>{render()}</>;
};
export default memo(NodeRender);

63
ui/src/components/workflow/node/NotifyNodeForm.tsx
View File

@@ -2,30 +2,33 @@ import { memo, useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link } from "react-router"; import { Link } from "react-router";
import { RightOutlined as RightOutlinedIcon } from "@ant-design/icons"; import { RightOutlined as RightOutlinedIcon } from "@ant-design/icons";
import { Button, Form, Input, Select } from "antd"; import { Button, Form, type FormInstance, Input, Select } from "antd";
import { createSchemaFieldRule } from "antd-zod"; import { createSchemaFieldRule } from "antd-zod";
import { produce } from "immer";
import { z } from "zod"; import { z } from "zod";
import { notifyChannelsMap } from "@/domain/settings"; import { notifyChannelsMap } from "@/domain/settings";
import { type WorkflowNode, type WorkflowNodeConfigForNotify } from "@/domain/workflow"; import { type WorkflowNode, type WorkflowNodeConfigForNotify } from "@/domain/workflow";
import { useAntdForm, useZustandShallowSelector } from "@/hooks"; import { useZustandShallowSelector } from "@/hooks";
import { useNotifyChannelsStore } from "@/stores/notify"; import { useNotifyChannelsStore } from "@/stores/notify";
import { useWorkflowStore } from "@/stores/workflow";
import { usePanel } from "../PanelProvider"; type NotifyNodeFormFieldValues = Partial<WorkflowNodeConfigForNotify>;
export type NotifyNodeFormProps = { export type NotifyNodeFormProps = {
node: WorkflowNode; form: FormInstance;
formName?: string;
disabled?: boolean;
workflowNode: WorkflowNode;
onValuesChange?: (values: NotifyNodeFormFieldValues) => void;
}; };
const initFormModel = (): Partial<WorkflowNodeConfigForNotify> => { const initFormModel = (): NotifyNodeFormFieldValues => {
return { return {
subject: "Completed!", subject: "Completed!",
message: "Your workflow has been completed on Certimate.", message: "Your workflow has been completed on Certimate.",
}; };
}; };
const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => { const NotifyNodeForm = ({ form, formName, disabled, workflowNode, onValuesChange }: NotifyNodeFormProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { const {
@@ -37,9 +40,6 @@ const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => {
fetchChannels(); fetchChannels();
}, [fetchChannels]); }, [fetchChannels]);
const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
const { hidePanel } = usePanel();
const formSchema = z.object({ const formSchema = z.object({
subject: z subject: z
.string({ message: t("workflow_node.notify.form.subject.placeholder") }) .string({ message: t("workflow_node.notify.form.subject.placeholder") })
@@ -52,27 +52,24 @@ const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => {
channel: z.string({ message: t("workflow_node.notify.form.channel.placeholder") }).min(1, t("workflow_node.notify.form.channel.placeholder")), channel: z.string({ message: t("workflow_node.notify.form.channel.placeholder") }).min(1, t("workflow_node.notify.form.channel.placeholder")),
}); });
const formRule = createSchemaFieldRule(formSchema); const formRule = createSchemaFieldRule(formSchema);
const {
form: formInst, const initialValues: NotifyNodeFormFieldValues = (workflowNode.config as WorkflowNodeConfigForNotify) ?? initFormModel();
formPending,
formProps, const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
} = useAntdForm<z.infer<typeof formSchema>>({ onValuesChange?.(values as NotifyNodeFormFieldValues);
name: "workflowNotifyNodeForm", };
initialValues: (node?.config as WorkflowNodeConfigForNotify) ?? initFormModel(),
onSubmit: async (values) => {
await formInst.validateFields();
await updateNode(
produce(node, (draft) => {
draft.config = { ...values };
draft.validated = true;
})
);
hidePanel();
},
});
return ( return (
<Form {...formProps} form={formInst} disabled={formPending} layout="vertical"> <Form
form={form}
disabled={disabled}
initialValues={initialValues}
layout="vertical"
name={formName}
preserve={false}
scrollToFirstError
onValuesChange={handleFormChange}
>
<Form.Item name="subject" label={t("workflow_node.notify.form.subject.label")} rules={[formRule]}> <Form.Item name="subject" label={t("workflow_node.notify.form.subject.label")} rules={[formRule]}>
<Input placeholder={t("workflow_node.notify.form.subject.placeholder")} /> <Input placeholder={t("workflow_node.notify.form.subject.placeholder")} />
</Form.Item> </Form.Item>
@@ -108,12 +105,6 @@ const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => {
/> />
</Form.Item> </Form.Item>
</Form.Item> </Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={formPending}>
{t("common.button.save")}
</Button>
</Form.Item>
</Form> </Form>
); );
}; };

72
ui/src/components/workflow/node/StartNodeForm.tsx
View File

@@ -1,35 +1,34 @@
import { memo, useEffect, useState } from "react"; import { memo, useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Alert, Button, Form, Input, Radio } from "antd"; import { Alert, Form, type FormInstance, Input, Radio } from "antd";
import { createSchemaFieldRule } from "antd-zod"; import { createSchemaFieldRule } from "antd-zod";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { produce } from "immer";
import { z } from "zod"; import { z } from "zod";
import Show from "@/components/Show"; import Show from "@/components/Show";
import { WORKFLOW_TRIGGERS, type WorkflowNode, type WorkflowNodeConfigForStart } from "@/domain/workflow"; import { WORKFLOW_TRIGGERS, type WorkflowNode, type WorkflowNodeConfigForStart, type WorkflowTriggerType } from "@/domain/workflow";
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow";
import { getNextCronExecutions, validCronExpression } from "@/utils/cron"; import { getNextCronExecutions, validCronExpression } from "@/utils/cron";
import { usePanel } from "../PanelProvider";
type StartNodeFormFieldValues = Partial<WorkflowNodeConfigForStart>;
export type StartNodeFormProps = { export type StartNodeFormProps = {
node: WorkflowNode; form: FormInstance;
formName?: string;
disabled?: boolean;
workflowNode: WorkflowNode;
onValuesChange?: (values: StartNodeFormFieldValues) => void;
}; };
const initFormModel = (): WorkflowNodeConfigForStart => { const initFormModel = (): StartNodeFormFieldValues => {
return { return {
trigger: WORKFLOW_TRIGGERS.AUTO, trigger: WORKFLOW_TRIGGERS.AUTO,
triggerCron: "0 0 * * *", triggerCron: "0 0 * * *",
}; };
}; };
const StartNodeForm = ({ node }: StartNodeFormProps) => { const StartNodeForm = ({ form, formName, disabled, workflowNode, onValuesChange }: StartNodeFormProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
const { hidePanel } = usePanel();
const formSchema = z const formSchema = z
.object({ .object({
trigger: z.string({ message: t("workflow_node.start.form.trigger.placeholder") }).min(1, t("workflow_node.start.form.trigger.placeholder")), trigger: z.string({ message: t("workflow_node.start.form.trigger.placeholder") }).min(1, t("workflow_node.start.form.trigger.placeholder")),
@@ -49,27 +48,11 @@ const StartNodeForm = ({ node }: StartNodeFormProps) => {
} }
}); });
const formRule = createSchemaFieldRule(formSchema); const formRule = createSchemaFieldRule(formSchema);
const {
form: formInst,
formPending,
formProps,
} = useAntdForm<z.infer<typeof formSchema>>({
name: "workflowStartNodeForm",
initialValues: (node?.config as WorkflowNodeConfigForStart) ?? initFormModel(),
onSubmit: async (values) => {
await formInst.validateFields();
await updateNode(
produce(node, (draft) => {
draft.config = { ...values };
draft.validated = true;
})
);
hidePanel();
},
});
const fieldTrigger = Form.useWatch<string>("trigger", formInst); const initialValues: StartNodeFormFieldValues = (workflowNode.config as WorkflowNodeConfigForStart) ?? initFormModel();
const fieldTriggerCron = Form.useWatch<string>("triggerCron", formInst);
const fieldTrigger = Form.useWatch<WorkflowTriggerType>("trigger", form);
const fieldTriggerCron = Form.useWatch<string>("triggerCron", form);
const [fieldTriggerCronExpectedExecutions, setFieldTriggerCronExpectedExecutions] = useState<Date[]>([]); const [fieldTriggerCronExpectedExecutions, setFieldTriggerCronExpectedExecutions] = useState<Date[]>([]);
useEffect(() => { useEffect(() => {
setFieldTriggerCronExpectedExecutions(getNextCronExecutions(fieldTriggerCron, 5)); setFieldTriggerCronExpectedExecutions(getNextCronExecutions(fieldTriggerCron, 5));
@@ -77,12 +60,27 @@ const StartNodeForm = ({ node }: StartNodeFormProps) => {
const handleTriggerChange = (value: string) => { const handleTriggerChange = (value: string) => {
if (value === WORKFLOW_TRIGGERS.AUTO) { if (value === WORKFLOW_TRIGGERS.AUTO) {
formInst.setFieldValue("triggerCron", formInst.getFieldValue("triggerCron") || initFormModel().triggerCron); form.setFieldValue("triggerCron", initialValues.triggerCron || initFormModel().triggerCron);
} else {
form.setFieldValue("triggerCron", undefined);
} }
}; };
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onValuesChange?.(values as StartNodeFormFieldValues);
};
return ( return (
<Form {...formProps} form={formInst} disabled={formPending} layout="vertical"> <Form
form={form}
disabled={disabled}
initialValues={initialValues}
layout="vertical"
name={formName}
preserve={false}
scrollToFirstError
onValuesChange={handleFormChange}
>
<Form.Item <Form.Item
name="trigger" name="trigger"
label={t("workflow_node.start.form.trigger.label")} label={t("workflow_node.start.form.trigger.label")}
@@ -124,12 +122,6 @@ const StartNodeForm = ({ node }: StartNodeFormProps) => {
<Alert type="info" message={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.start.form.trigger_cron_alert.content") }}></span>} /> <Alert type="info" message={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.start.form.trigger_cron_alert.content") }}></span>} />
</Form.Item> </Form.Item>
</Show> </Show>
<Form.Item>
<Button type="primary" htmlType="submit" loading={formPending}>
{t("common.button.save")}
</Button>
</Form.Item>
</Form> </Form>
); );
}; };

41
ui/src/components/workflow/panel/Panel.tsx Normal file
View File

@@ -0,0 +1,41 @@
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;

34
ui/src/components/workflow/panel/PanelContext.ts Normal file
View File

@@ -0,0 +1,34 @@
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;

90
ui/src/components/workflow/panel/PanelProvider.tsx Normal file
View File

@@ -0,0 +1,90 @@
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>
);
};