mirror of
https://github.com/woodchen-ink/certimate.git
synced 2025-07-19 09:51:55 +08:00
feat(ui): new workflow node panel
This commit is contained in:
Fu Diwei
parent
e4c51aece4
commit
350160833b
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
};
|
||||
@ -1,176 +1,44 @@
|
||||
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 { memo, useMemo } from "react";
|
||||
|
||||
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 { useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
|
||||
|
||||
import PanelBody from "./PanelBody";
|
||||
import { usePanel } from "./PanelProvider";
|
||||
import AddNode from "./node/AddNode";
|
||||
import BranchNode from "./node/BranchNode";
|
||||
import CommonNode from "./node/CommonNode";
|
||||
import ConditionNode from "./node/ConditionNode";
|
||||
import EndNode from "./node/EndNode";
|
||||
|
||||
export type NodeProps = {
|
||||
export type WorkflowElementProps = {
|
||||
node: WorkflowNode;
|
||||
disabled?: boolean;
|
||||
branchId?: string;
|
||||
branchIndex?: number;
|
||||
};
|
||||
|
||||
const WorkflowElement = ({ node, disabled }: NodeProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
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>;
|
||||
}
|
||||
|
||||
const WorkflowElement = ({ node, disabled, ...props }: WorkflowElementProps) => {
|
||||
const nodeComponent = useMemo(() => {
|
||||
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.Start:
|
||||
case WorkflowNodeType.Apply:
|
||||
case WorkflowNodeType.Deploy:
|
||||
case WorkflowNodeType.Notify:
|
||||
return <CommonNode node={node} disabled={disabled} />;
|
||||
|
||||
case WorkflowNodeType.Apply: {
|
||||
const config = (node.config as WorkflowNodeConfigForApply) ?? {};
|
||||
return <Typography.Text className="truncate">{config.domains || " "}</Typography.Text>;
|
||||
}
|
||||
case WorkflowNodeType.Branch:
|
||||
return <BranchNode node={node} disabled={disabled} />;
|
||||
|
||||
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.Condition:
|
||||
return <ConditionNode node={node} disabled={disabled} branchId={props.branchId!} branchIndex={props.branchIndex!} />;
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
case WorkflowNodeType.End:
|
||||
return <EndNode />;
|
||||
|
||||
default: {
|
||||
default:
|
||||
console.warn(`[certimate] unsupported workflow node type: ${node.type}`);
|
||||
return <></>;
|
||||
}
|
||||
}
|
||||
};
|
||||
}, [node, disabled, props]);
|
||||
|
||||
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;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
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} />
|
||||
</>
|
||||
);
|
||||
return <>{nodeComponent}</>;
|
||||
};
|
||||
|
||||
export default WorkflowElement;
|
||||
export default memo(WorkflowElement);
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import { useMemo } from "react";
|
||||
|
||||
import WorkflowElement from "@/components/workflow/WorkflowElement";
|
||||
import WorkflowProvider from "@/components/workflow/WorkflowProvider";
|
||||
import EndNode from "@/components/workflow/node/EndNode";
|
||||
import NodeRender from "@/components/workflow/node/NodeRender";
|
||||
import { type WorkflowNode } from "@/domain/workflow";
|
||||
import { type WorkflowNode, WorkflowNodeType, newNode } from "@/domain/workflow";
|
||||
import { useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
|
||||
@ -19,16 +18,16 @@ const WorkflowElements = ({ className, style, disabled }: WorkflowElementsProps)
|
||||
const elements = useMemo(() => {
|
||||
const nodes: JSX.Element[] = [];
|
||||
|
||||
let current = workflow.draft as WorkflowNode;
|
||||
let current = workflow.draft as WorkflowNode | undefined;
|
||||
while (current) {
|
||||
nodes.push(<NodeRender key={current.id} node={current} disabled={disabled} />);
|
||||
current = current.next as WorkflowNode;
|
||||
nodes.push(<WorkflowElement key={current.id} node={current} disabled={disabled} />);
|
||||
current = current.next;
|
||||
}
|
||||
|
||||
nodes.push(<EndNode key="workflow-end" />);
|
||||
nodes.push(<WorkflowElement key="end" node={newNode(WorkflowNodeType.End)} />);
|
||||
|
||||
return nodes;
|
||||
}, [workflow]);
|
||||
}, [workflow, disabled]);
|
||||
|
||||
return (
|
||||
<div className={className} style={style}>
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
import React from "react";
|
||||
|
||||
import { PanelProvider } from "./PanelProvider";
|
||||
import { PanelProvider } from "./panel/PanelProvider";
|
||||
|
||||
const WorkflowProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
return <PanelProvider>{children}</PanelProvider>;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useMemo } from "react";
|
||||
import { memo, useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
CloudUploadOutlined as CloudUploadOutlinedIcon,
|
||||
@ -43,7 +43,7 @@ const AddNode = ({ node, disabled }: AddNodeProps) => {
|
||||
},
|
||||
};
|
||||
});
|
||||
}, []);
|
||||
}, [node.id, disabled]);
|
||||
|
||||
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-['']">
|
||||
@ -56,4 +56,4 @@ const AddNode = ({ node, disabled }: AddNodeProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default AddNode;
|
||||
export default memo(AddNode);
|
||||
|
||||
@ -2,9 +2,8 @@ import { memo, useCallback, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FormOutlined as FormOutlinedIcon, PlusOutlined as PlusOutlinedIcon, QuestionCircleOutlined as QuestionCircleOutlinedIcon } from "@ant-design/icons";
|
||||
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 { produce } from "immer";
|
||||
import { z } from "zod";
|
||||
|
||||
import ModalForm from "@/components/ModalForm";
|
||||
@ -13,20 +12,22 @@ import AccessEditModal from "@/components/access/AccessEditModal";
|
||||
import AccessSelect from "@/components/access/AccessSelect";
|
||||
import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider";
|
||||
import { type WorkflowNode, type WorkflowNodeConfigForApply } from "@/domain/workflow";
|
||||
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
|
||||
import { useAccessesStore } from "@/stores/access";
|
||||
import { useContactEmailsStore } from "@/stores/contact";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
import { validDomainName, validIPv4Address, validIPv6Address } from "@/utils/validators";
|
||||
import { usePanel } from "../PanelProvider";
|
||||
|
||||
type ApplyNodeFormFieldValues = Partial<WorkflowNodeConfigForApply>;
|
||||
|
||||
export type ApplyNodeFormProps = {
|
||||
node: WorkflowNode;
|
||||
form: FormInstance;
|
||||
formName?: string;
|
||||
disabled?: boolean;
|
||||
workflowNode: WorkflowNode;
|
||||
onValuesChange?: (values: ApplyNodeFormFieldValues) => void;
|
||||
};
|
||||
|
||||
const MULTIPLE_INPUT_DELIMITER = ";";
|
||||
|
||||
const initFormModel = (): Partial<WorkflowNodeConfigForApply> => {
|
||||
const initFormModel = (): ApplyNodeFormFieldValues => {
|
||||
return {
|
||||
keyAlgorithm: "RSA2048",
|
||||
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 { accesses } = useAccessesStore(useZustandShallowSelector("accesses"));
|
||||
const { addEmail } = useContactEmailsStore(useZustandShallowSelector("addEmail"));
|
||||
const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
|
||||
const { hidePanel } = usePanel();
|
||||
|
||||
const formSchema = z.object({
|
||||
domains: z.string({ message: t("workflow_node.apply.form.domains.placeholder") }).refine((v) => {
|
||||
return String(v)
|
||||
.split(MULTIPLE_INPUT_DELIMITER)
|
||||
.every((e) => validDomainName(e, true));
|
||||
}, 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
|
||||
.string({ message: 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(),
|
||||
});
|
||||
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 [fieldNameservers, setFieldNameservers] = useState(node?.config?.nameservers as string);
|
||||
const initialValues: ApplyNodeFormFieldValues = (workflowNode.config as WorkflowNodeConfigForApply) ?? initFormModel();
|
||||
|
||||
const handleFieldDomainsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setFieldDomains(value);
|
||||
formInst.setFieldValue("domains", value);
|
||||
};
|
||||
const fieldDomains = Form.useWatch<string>("domains", form);
|
||||
const fieldNameservers = Form.useWatch<string>("nameservers", form);
|
||||
|
||||
const handleFieldNameserversChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setFieldNameservers(value);
|
||||
formInst.setFieldValue("nameservers", value);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onValuesChange?.(values as ApplyNodeFormFieldValues);
|
||||
};
|
||||
|
||||
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="domains"
|
||||
label={t("workflow_node.apply.form.domains.label")}
|
||||
@ -121,21 +98,22 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
|
||||
>
|
||||
<Space.Compact style={{ width: "100%" }}>
|
||||
<Input
|
||||
disabled={formPending}
|
||||
disabled={disabled}
|
||||
value={fieldDomains}
|
||||
placeholder={t("workflow_node.apply.form.domains.placeholder")}
|
||||
onChange={handleFieldDomainsChange}
|
||||
onChange={(e) => {
|
||||
form.setFieldValue("domains", e.target.value);
|
||||
}}
|
||||
/>
|
||||
<FormFieldDomainsModalForm
|
||||
data={fieldDomains}
|
||||
trigger={
|
||||
<Button disabled={formPending}>
|
||||
<Button disabled={disabled}>
|
||||
<FormOutlinedIcon />
|
||||
</Button>
|
||||
}
|
||||
onFinish={(v) => {
|
||||
setFieldDomains(v);
|
||||
formInst.setFieldValue("domains", v);
|
||||
form.setFieldValue("domains", v);
|
||||
}}
|
||||
/>
|
||||
</Space.Compact>
|
||||
@ -173,7 +151,7 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
|
||||
onSubmit={(record) => {
|
||||
const provider = accessProvidersMap.get(record.provider);
|
||||
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%" }}>
|
||||
<Input
|
||||
allowClear
|
||||
disabled={formPending}
|
||||
disabled={disabled}
|
||||
value={fieldNameservers}
|
||||
placeholder={t("workflow_node.apply.form.nameservers.placeholder")}
|
||||
onChange={handleFieldNameserversChange}
|
||||
onChange={(e) => {
|
||||
form.setFieldValue("nameservers", e.target.value);
|
||||
}}
|
||||
/>
|
||||
<FormFieldNameserversModalForm
|
||||
data={fieldNameservers}
|
||||
trigger={
|
||||
<Button disabled={formPending}>
|
||||
<Button disabled={disabled}>
|
||||
<FormOutlinedIcon />
|
||||
</Button>
|
||||
}
|
||||
onFinish={(v) => {
|
||||
setFieldNameservers(v);
|
||||
formInst.setFieldValue("nameservers", v);
|
||||
form.setFieldValue("nameservers", v);
|
||||
}}
|
||||
/>
|
||||
</Space.Compact>
|
||||
@ -260,12 +239,6 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={formPending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
@ -340,7 +313,7 @@ const FormFieldDomainsModalForm = ({
|
||||
trigger,
|
||||
onFinish,
|
||||
}: {
|
||||
data: string;
|
||||
data?: string;
|
||||
disabled?: boolean;
|
||||
trigger?: React.ReactNode;
|
||||
onFinish?: (data: string) => void;
|
||||
@ -353,7 +326,7 @@ const FormFieldDomainsModalForm = ({
|
||||
}, t("common.errmsg.domain_invalid")),
|
||||
});
|
||||
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) });
|
||||
useEffect(() => {
|
||||
@ -372,7 +345,7 @@ const FormFieldDomainsModalForm = ({
|
||||
return (
|
||||
<ModalForm
|
||||
layout="vertical"
|
||||
form={formInst}
|
||||
form={form}
|
||||
initialValues={model}
|
||||
modalProps={{ destroyOnClose: true }}
|
||||
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 formSchema = z.object({
|
||||
@ -397,7 +370,7 @@ const FormFieldNameserversModalForm = ({ data, trigger, onFinish }: { data: stri
|
||||
}, t("common.errmsg.domain_invalid")),
|
||||
});
|
||||
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) });
|
||||
useEffect(() => {
|
||||
@ -416,7 +389,7 @@ const FormFieldNameserversModalForm = ({ data, trigger, onFinish }: { data: stri
|
||||
return (
|
||||
<ModalForm
|
||||
layout="vertical"
|
||||
form={formInst}
|
||||
form={form}
|
||||
initialValues={model}
|
||||
modalProps={{ destroyOnClose: true }}
|
||||
title={t("workflow_node.apply.form.nameservers.multiple_input_modal.title")}
|
||||
|
||||
@ -7,7 +7,7 @@ import { useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
|
||||
import AddNode from "./AddNode";
|
||||
import NodeRender from "./NodeRender";
|
||||
import WorkflowElement from "../WorkflowElement";
|
||||
|
||||
export type BrandNodeProps = {
|
||||
node: WorkflowNode;
|
||||
@ -19,12 +19,12 @@ const BranchNode = ({ node, disabled }: BrandNodeProps) => {
|
||||
|
||||
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[] = [];
|
||||
|
||||
let current = node as WorkflowNode | undefined;
|
||||
let current = node as typeof node | undefined;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -47,12 +47,12 @@ const BranchNode = ({ node, disabled }: BrandNodeProps) => {
|
||||
{t("workflow_node.action.add_branch")}
|
||||
</Button>
|
||||
|
||||
{node.branches!.map((branch, index) => (
|
||||
{node.branches?.map((branch, index) => (
|
||||
<div
|
||||
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-['']"
|
||||
>
|
||||
<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>
|
||||
|
||||
240
ui/src/components/workflow/node/CommonNode.tsx
Normal file
240
ui/src/components/workflow/node/CommonNode.tsx
Normal 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);
|
||||
@ -1,3 +1,4 @@
|
||||
import { memo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
|
||||
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);
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { memo, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { PlusOutlined as PlusOutlinedIcon, QuestionCircleOutlined as QuestionCircleOutlinedIcon } from "@ant-design/icons";
|
||||
import { 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 { produce } from "immer";
|
||||
import { init } from "i18next";
|
||||
import { z } from "zod";
|
||||
|
||||
import Show from "@/components/Show";
|
||||
@ -13,9 +13,9 @@ import DeployProviderPicker from "@/components/provider/DeployProviderPicker";
|
||||
import DeployProviderSelect from "@/components/provider/DeployProviderSelect";
|
||||
import { ACCESS_USAGES, DEPLOY_PROVIDERS, accessProvidersMap, deployProvidersMap } from "@/domain/provider";
|
||||
import { type WorkflowNode, type WorkflowNodeConfigForDeploy } from "@/domain/workflow";
|
||||
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
|
||||
import { useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
import { usePanel } from "../PanelProvider";
|
||||
|
||||
import DeployNodeFormAliyunALBFields from "./DeployNodeFormAliyunALBFields";
|
||||
import DeployNodeFormAliyunCDNFields from "./DeployNodeFormAliyunCDNFields";
|
||||
import DeployNodeFormAliyunCLBFields from "./DeployNodeFormAliyunCLBFields";
|
||||
@ -40,19 +40,30 @@ import DeployNodeFormVolcEngineCDNFields from "./DeployNodeFormVolcEngineCDNFiel
|
||||
import DeployNodeFormVolcEngineLiveFields from "./DeployNodeFormVolcEngineLiveFields";
|
||||
import DeployNodeFormWebhookFields from "./DeployNodeFormWebhookFields";
|
||||
|
||||
type DeployNodeFormFieldValues = Partial<WorkflowNodeConfigForDeploy>;
|
||||
|
||||
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 {};
|
||||
};
|
||||
|
||||
const DeployNodeForm = ({ node }: DeployFormProps) => {
|
||||
const DeployNodeForm = ({ form, formName, disabled, workflowNode, onValuesChange }: DeployFormProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
|
||||
const { hidePanel } = usePanel();
|
||||
const { getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
|
||||
|
||||
const [previousOutput, setPreviousOutput] = useState<WorkflowNode[]>([]);
|
||||
useEffect(() => {
|
||||
const rs = getWorkflowOuptutBeforeId(workflowNode.id, "certificate");
|
||||
setPreviousOutput(rs);
|
||||
}, [workflowNode.id, getWorkflowOuptutBeforeId]);
|
||||
|
||||
const formSchema = z.object({
|
||||
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")),
|
||||
});
|
||||
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[]>([]);
|
||||
useEffect(() => {
|
||||
const rs = getWorkflowOuptutBeforeId(node.id, "certificate");
|
||||
setPreviousOutput(rs);
|
||||
}, [node, getWorkflowOuptutBeforeId]);
|
||||
const initialValues: DeployNodeFormFieldValues = (workflowNode.config as WorkflowNodeConfigForDeploy) ?? initFormModel();
|
||||
|
||||
const fieldProvider = Form.useWatch("provider", { form: formInst, preserve: true });
|
||||
const fieldProvider = Form.useWatch("provider", { form: form, preserve: true });
|
||||
|
||||
const formFieldsComponent = useMemo(() => {
|
||||
/*
|
||||
@ -146,9 +135,9 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
|
||||
|
||||
const handleProviderPick = useCallback(
|
||||
(value: string) => {
|
||||
formInst.setFieldValue("provider", value);
|
||||
form.setFieldValue("provider", value);
|
||||
},
|
||||
[formInst]
|
||||
[form]
|
||||
);
|
||||
|
||||
const handleProviderSelect = (value: string) => {
|
||||
@ -156,10 +145,10 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
|
||||
|
||||
// TODO: 暂时不支持切换部署目标，需后端调整，否则之前若存在部署结果输出就不会再部署
|
||||
// 切换部署目标时重置表单，避免其他部署目标的配置字段影响当前部署目标
|
||||
if (node.config?.provider === value) {
|
||||
formInst.resetFields();
|
||||
if (initialValues?.provider === value) {
|
||||
form.resetFields();
|
||||
} else {
|
||||
const oldValues = formInst.getFieldsValue();
|
||||
const oldValues = form.getFieldsValue();
|
||||
const newValues: Record<string, unknown> = {};
|
||||
for (const key in oldValues) {
|
||||
if (key === "provider" || key === "providerAccessId" || key === "certificate") {
|
||||
@ -168,16 +157,29 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
|
||||
newValues[key] = undefined;
|
||||
}
|
||||
}
|
||||
formInst.setFieldsValue(newValues);
|
||||
form.setFieldsValue(newValues);
|
||||
|
||||
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 (
|
||||
<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} />}>
|
||||
<Form.Item name="provider" label={t("workflow_node.deploy.form.provider.label")} rules={[formRule]}>
|
||||
<DeployProviderSelect
|
||||
@ -213,7 +215,7 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
|
||||
onSubmit={(record) => {
|
||||
const provider = accessProvidersMap.get(record.provider);
|
||||
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>
|
||||
|
||||
{formFieldsComponent}
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={formPending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Show>
|
||||
</Form>
|
||||
);
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { memo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Typography } from "antd";
|
||||
|
||||
@ -14,4 +15,4 @@ const EndNode = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default EndNode;
|
||||
export default memo(EndNode);
|
||||
|
||||
@ -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);
|
||||
@ -2,30 +2,33 @@ import { memo, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router";
|
||||
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 { produce } from "immer";
|
||||
import { z } from "zod";
|
||||
|
||||
import { notifyChannelsMap } from "@/domain/settings";
|
||||
import { type WorkflowNode, type WorkflowNodeConfigForNotify } from "@/domain/workflow";
|
||||
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
|
||||
import { useZustandShallowSelector } from "@/hooks";
|
||||
import { useNotifyChannelsStore } from "@/stores/notify";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
import { usePanel } from "../PanelProvider";
|
||||
|
||||
type NotifyNodeFormFieldValues = Partial<WorkflowNodeConfigForNotify>;
|
||||
|
||||
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 {
|
||||
subject: "Completed!",
|
||||
message: "Your workflow has been completed on Certimate.",
|
||||
};
|
||||
};
|
||||
|
||||
const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => {
|
||||
const NotifyNodeForm = ({ form, formName, disabled, workflowNode, onValuesChange }: NotifyNodeFormProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const {
|
||||
@ -37,9 +40,6 @@ const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => {
|
||||
fetchChannels();
|
||||
}, [fetchChannels]);
|
||||
|
||||
const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
|
||||
const { hidePanel } = usePanel();
|
||||
|
||||
const formSchema = z.object({
|
||||
subject: z
|
||||
.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")),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const {
|
||||
form: formInst,
|
||||
formPending,
|
||||
formProps,
|
||||
} = useAntdForm<z.infer<typeof formSchema>>({
|
||||
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();
|
||||
},
|
||||
});
|
||||
|
||||
const initialValues: NotifyNodeFormFieldValues = (workflowNode.config as WorkflowNodeConfigForNotify) ?? initFormModel();
|
||||
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onValuesChange?.(values as NotifyNodeFormFieldValues);
|
||||
};
|
||||
|
||||
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]}>
|
||||
<Input placeholder={t("workflow_node.notify.form.subject.placeholder")} />
|
||||
</Form.Item>
|
||||
@ -108,12 +105,6 @@ const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => {
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={formPending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,35 +1,34 @@
|
||||
import { memo, useEffect, useState } from "react";
|
||||
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 dayjs from "dayjs";
|
||||
import { produce } from "immer";
|
||||
import { z } from "zod";
|
||||
|
||||
import Show from "@/components/Show";
|
||||
import { WORKFLOW_TRIGGERS, type WorkflowNode, type WorkflowNodeConfigForStart } from "@/domain/workflow";
|
||||
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
import { WORKFLOW_TRIGGERS, type WorkflowNode, type WorkflowNodeConfigForStart, type WorkflowTriggerType } from "@/domain/workflow";
|
||||
import { getNextCronExecutions, validCronExpression } from "@/utils/cron";
|
||||
import { usePanel } from "../PanelProvider";
|
||||
|
||||
type StartNodeFormFieldValues = Partial<WorkflowNodeConfigForStart>;
|
||||
|
||||
export type StartNodeFormProps = {
|
||||
node: WorkflowNode;
|
||||
form: FormInstance;
|
||||
formName?: string;
|
||||
disabled?: boolean;
|
||||
workflowNode: WorkflowNode;
|
||||
onValuesChange?: (values: StartNodeFormFieldValues) => void;
|
||||
};
|
||||
|
||||
const initFormModel = (): WorkflowNodeConfigForStart => {
|
||||
const initFormModel = (): StartNodeFormFieldValues => {
|
||||
return {
|
||||
trigger: WORKFLOW_TRIGGERS.AUTO,
|
||||
triggerCron: "0 0 * * *",
|
||||
};
|
||||
};
|
||||
|
||||
const StartNodeForm = ({ node }: StartNodeFormProps) => {
|
||||
const StartNodeForm = ({ form, formName, disabled, workflowNode, onValuesChange }: StartNodeFormProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
|
||||
const { hidePanel } = usePanel();
|
||||
|
||||
const formSchema = z
|
||||
.object({
|
||||
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 {
|
||||
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 fieldTriggerCron = Form.useWatch<string>("triggerCron", formInst);
|
||||
const initialValues: StartNodeFormFieldValues = (workflowNode.config as WorkflowNodeConfigForStart) ?? initFormModel();
|
||||
|
||||
const fieldTrigger = Form.useWatch<WorkflowTriggerType>("trigger", form);
|
||||
const fieldTriggerCron = Form.useWatch<string>("triggerCron", form);
|
||||
const [fieldTriggerCronExpectedExecutions, setFieldTriggerCronExpectedExecutions] = useState<Date[]>([]);
|
||||
useEffect(() => {
|
||||
setFieldTriggerCronExpectedExecutions(getNextCronExecutions(fieldTriggerCron, 5));
|
||||
@ -77,12 +60,27 @@ const StartNodeForm = ({ node }: StartNodeFormProps) => {
|
||||
|
||||
const handleTriggerChange = (value: string) => {
|
||||
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 (
|
||||
<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="trigger"
|
||||
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>} />
|
||||
</Form.Item>
|
||||
</Show>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={formPending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
41
ui/src/components/workflow/panel/Panel.tsx
Normal file
41
ui/src/components/workflow/panel/Panel.tsx
Normal 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
34
ui/src/components/workflow/panel/PanelContext.ts
Normal 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
90
ui/src/components/workflow/panel/PanelProvider.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user