refactor: clean code

2025-10-04 13:34:52 +00:00 · 2025-01-21 00:42:28 +08:00
parent 6bdcfaaef0
commit d5568608f5
13 changed files with 85 additions and 91 deletions
--- a/ui/src/components/workflow/node/AddNode.tsx
+++ b/ui/src/components/workflow/node/AddNode.tsx
@@ -26,13 +26,13 @@ const AddNode = ({ node, disabled }: AddNodeProps) => {
    return [
      [WorkflowNodeType.Apply, "workflow_node.apply.label", <SolutionOutlinedIcon />],
      [WorkflowNodeType.Deploy, "workflow_node.deploy.label", <CloudUploadOutlinedIcon />],
+      [WorkflowNodeType.Notify, "workflow_node.notify.label", <SendOutlinedIcon />],
      [WorkflowNodeType.Branch, "workflow_node.branch.label", <SisternodeOutlinedIcon />],
      [WorkflowNodeType.ExecuteResultBranch, "workflow_node.execute_result_branch.label", <SisternodeOutlinedIcon />],
-      [WorkflowNodeType.Notify, "workflow_node.notify.label", <SendOutlinedIcon />],
    ]
      .filter(([type]) => {
-        if (node.type !== WorkflowNodeType.Apply && node.type !== WorkflowNodeType.Deploy && type === WorkflowNodeType.ExecuteResultBranch) {
-          return false;
+        if (node.type !== WorkflowNodeType.Apply && node.type !== WorkflowNodeType.Deploy && node.type !== WorkflowNodeType.Notify) {
+          return type !== WorkflowNodeType.ExecuteResultBranch;
        }

        return true;
--- a/ui/src/components/workflow/node/ConditionNode.tsx
+++ b/ui/src/components/workflow/node/ConditionNode.tsx
@@ -16,6 +16,8 @@ const ConditionNode = ({ node, disabled, branchId, branchIndex }: ConditionNodeP
  return (
    <>
      <Popover
+        classNames={{ root: "shadow-md" }}
+        styles={{ body: { padding: 0 } }}
        arrow={false}
        content={
          <SharedNode.Menu
@@ -26,8 +28,6 @@ const ConditionNode = ({ node, disabled, branchId, branchIndex }: ConditionNodeP
            trigger={<Button color="primary" icon={<MoreOutlinedIcon />} variant="text" />}
          />
        }
-        overlayClassName="shadow-md"
-        overlayInnerStyle={{ padding: 0 }}
        placement="rightTop"
      >
        <Card className="relative z-[1] mt-10 w-[256px] shadow-md" styles={{ body: { padding: 0 } }} hoverable>
--- a/ui/src/components/workflow/node/ExecuteResultNode.tsx
+++ b/ui/src/components/workflow/node/ExecuteResultNode.tsx
@@ -1,9 +1,12 @@
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
-import { MoreOutlined as MoreOutlinedIcon } from "@ant-design/icons";
-import { Button, Card, Popover } from "antd";
+import {
+  CheckCircleOutlined as CheckCircleOutlinedIcon,
+  CloseCircleOutlined as CloseCircleOutlinedIcon,
+  MoreOutlined as MoreOutlinedIcon,
+} from "@ant-design/icons";
+import { Button, Card, Popover, theme } from "antd";

-import { CheckCircleIcon, XCircleIcon } from "lucide-react";
 import { WorkflowNodeType } from "@/domain/workflow";
 import AddNode from "./AddNode";
 import SharedNode, { type SharedNodeProps } from "./_SharedNode";
@@ -16,9 +19,13 @@ export type ConditionNodeProps = SharedNodeProps & {
 const ExecuteResultNode = ({ node, disabled, branchId, branchIndex }: ConditionNodeProps) => {
  const { t } = useTranslation();

+  const { token: themeToken } = theme.useToken();
+
  return (
    <>
      <Popover
+        classNames={{ root: "shadow-md" }}
+        styles={{ body: { padding: 0 } }}
        arrow={false}
        content={
          <SharedNode.Menu
@@ -29,8 +36,6 @@ const ExecuteResultNode = ({ node, disabled, branchId, branchIndex }: ConditionN
            trigger={<Button color="primary" icon={<MoreOutlinedIcon />} variant="text" />}
          />
        }
-        overlayClassName="shadow-md"
-        overlayInnerStyle={{ padding: 0 }}
        placement="rightTop"
      >
        <Card className="relative z-[1] mt-10 w-[256px] shadow-md" styles={{ body: { padding: 0 } }} hoverable>
@@ -38,12 +43,12 @@ const ExecuteResultNode = ({ node, disabled, branchId, branchIndex }: ConditionN
            <div className="flex items-center space-x-2">
              {node.type === WorkflowNodeType.ExecuteSuccess ? (
                <>
-                  <CheckCircleIcon size={18} className="text-green-500" />
+                  <CheckCircleOutlinedIcon style={{ color: themeToken.colorSuccess }} />
                  <div>{t("workflow_node.execute_success.label")}</div>
                </>
              ) : (
                <>
-                  <XCircleIcon size={18} className="text-red-500" />
+                  <CloseCircleOutlinedIcon style={{ color: themeToken.colorError }} />
                  <div>{t("workflow_node.execute_failure.label")}</div>
                </>
              )}
--- a/ui/src/components/workflow/node/_SharedNode.tsx
+++ b/ui/src/components/workflow/node/_SharedNode.tsx
@@ -64,6 +64,16 @@ type SharedNodeMenuProps = SharedNodeProps & {
  afterDelete?: () => void;
 };

+const isBranchingNode = (node: WorkflowNode) => {
+  return (
+    node.type === WorkflowNodeType.Branch ||
+    node.type === WorkflowNodeType.Condition ||
+    node.type === WorkflowNodeType.ExecuteResultBranch ||
+    node.type === WorkflowNodeType.ExecuteSuccess ||
+    node.type === WorkflowNodeType.ExecuteFailure
+  );
+};
+
 const SharedNodeMenu = ({ trigger, node, disabled, branchId, branchIndex, afterUpdate, afterDelete }: SharedNodeMenuProps) => {
  const { t } = useTranslation();

@@ -91,13 +101,7 @@ const SharedNodeMenu = ({ trigger, node, disabled, branchId, branchIndex, afterU
  };

  const handleDeleteClick = async () => {
-    if (
-      node.type === WorkflowNodeType.Branch ||
-      node.type === WorkflowNodeType.Condition ||
-      node.type === WorkflowNodeType.ExecuteResultBranch ||
-      node.type === WorkflowNodeType.ExecuteSuccess ||
-      node.type === WorkflowNodeType.ExecuteFailure
-    ) {
+    if (isBranchingNode(node)) {
      await removeBranch(branchId!, branchIndex!);
    } else {
      await removeNode(node.id);
@@ -116,19 +120,13 @@ const SharedNodeMenu = ({ trigger, node, disabled, branchId, branchIndex, afterU
            {
              key: "rename",
              disabled: disabled,
-              label:
-                node.type === WorkflowNodeType.Branch || node.type === WorkflowNodeType.Condition
-                  ? t("workflow_node.action.rename_branch")
-                  : t("workflow_node.action.rename_node"),
+              label: isBranchingNode(node) ? t("workflow_node.action.rename_branch") : t("workflow_node.action.rename_node"),
              icon: <FormOutlinedIcon />,
              onClick: () => {
                nameRef.current = node.name;

                const dialog = modalApi.confirm({
-                  title:
-                    node.type === WorkflowNodeType.Branch || node.type === WorkflowNodeType.Condition
-                      ? t("workflow_node.action.rename_branch")
-                      : t("workflow_node.action.rename_node"),
+                  title: isBranchingNode(node) ? t("workflow_node.action.rename_branch") : t("workflow_node.action.rename_node"),
                  content: (
                    <div className="pb-2 pt-4">
                      <Input
@@ -156,14 +154,7 @@ const SharedNodeMenu = ({ trigger, node, disabled, branchId, branchIndex, afterU
            {
              key: "remove",
              disabled: disabled || node.type === WorkflowNodeType.Start,
-              label:
-                node.type === WorkflowNodeType.Branch ||
-                node.type === WorkflowNodeType.Condition ||
-                node.type === WorkflowNodeType.ExecuteResultBranch ||
-                node.type === WorkflowNodeType.ExecuteSuccess ||
-                node.type === WorkflowNodeType.ExecuteFailure
-                  ? t("workflow_node.action.remove_branch")
-                  : t("workflow_node.action.remove_node"),
+              label: isBranchingNode(node) ? t("workflow_node.action.remove_branch") : t("workflow_node.action.remove_node"),
              icon: <CloseCircleOutlinedIcon />,
              danger: true,
              onClick: handleDeleteClick,
@@ -193,10 +184,10 @@ const SharedNodeBlock = ({ children, node, disabled, onClick }: SharedNodeBlockP
  return (
    <>
      <Popover
+        classNames={{ root: "shadow-md" }}
+        styles={{ body: { padding: 0 } }}
        arrow={false}
        content={<SharedNodeMenu node={node} disabled={disabled} trigger={<Button color="primary" icon={<MoreOutlinedIcon />} variant="text" />} />}
-        overlayClassName="shadow-md"
-        overlayInnerStyle={{ padding: 0 }}
        placement="rightTop"
      >
        <Card className="relative w-[256px] overflow-hidden shadow-md" styles={{ body: { padding: 0 } }} hoverable>
--- a/ui/src/domain/workflow.ts
+++ b/ui/src/domain/workflow.ts
@@ -29,28 +29,28 @@ export type WorkflowTriggerType = (typeof WORKFLOW_TRIGGERS)[keyof typeof WORKFL
 export enum WorkflowNodeType {
  Start = "start",
  End = "end",
-  Branch = "branch",
-  ExecuteResultBranch = "execute_result_branch",
-  ExecuteSuccess = "execute_success",
-  ExecuteFailure = "execute_failure",
-  Condition = "condition",
  Apply = "apply",
  Deploy = "deploy",
  Notify = "notify",
+  Branch = "branch",
+  Condition = "condition",
+  ExecuteResultBranch = "execute_result_branch",
+  ExecuteSuccess = "execute_success",
+  ExecuteFailure = "execute_failure",
  Custom = "custom",
 }

 const workflowNodeTypeDefaultNames: Map<WorkflowNodeType, string> = new Map([
  [WorkflowNodeType.Start, i18n.t("workflow_node.start.label")],
  [WorkflowNodeType.End, i18n.t("workflow_node.end.label")],
-  [WorkflowNodeType.Branch, i18n.t("workflow_node.branch.label")],
-  [WorkflowNodeType.ExecuteResultBranch, i18n.t("workflow_node.execute_result_branch.label")],
-  [WorkflowNodeType.ExecuteSuccess, i18n.t("workflow_node.execute_success.label")],
-  [WorkflowNodeType.ExecuteFailure, i18n.t("workflow_node.execute_failure.label")],
-  [WorkflowNodeType.Condition, i18n.t("workflow_node.condition.label")],
  [WorkflowNodeType.Apply, i18n.t("workflow_node.apply.label")],
  [WorkflowNodeType.Deploy, i18n.t("workflow_node.deploy.label")],
  [WorkflowNodeType.Notify, i18n.t("workflow_node.notify.label")],
+  [WorkflowNodeType.Branch, i18n.t("workflow_node.branch.label")],
+  [WorkflowNodeType.Condition, i18n.t("workflow_node.condition.label")],
+  [WorkflowNodeType.ExecuteResultBranch, i18n.t("workflow_node.execute_result_branch.label")],
+  [WorkflowNodeType.ExecuteSuccess, i18n.t("workflow_node.execute_success.label")],
+  [WorkflowNodeType.ExecuteFailure, i18n.t("workflow_node.execute_failure.label")],
  [WorkflowNodeType.Custom, i18n.t("workflow_node.custom.title")],
 ]);

--- a/ui/src/i18n/locales/en/nls.workflow.nodes.json
+++ b/ui/src/i18n/locales/en/nls.workflow.nodes.json
@@ -1,5 +1,5 @@
 {
-  "workflow_node.action.configure_node": "Configure",
+  "workflow_node.action.configure_node": "Configure node",
  "workflow_node.action.add_node": "Add node",
  "workflow_node.action.rename_node": "Rename node",
  "workflow_node.action.remove_node": "Delete node",
@@ -379,13 +379,13 @@

  "workflow_node.end.label": "End",

-  "workflow_node.branch.label": "Branch",
+  "workflow_node.branch.label": "Parallel branch",

-  "workflow_node.execute_result_branch.label": "Execute result branch",
+  "workflow_node.condition.label": "Branch",

-  "workflow_node.execute_success.label": "Execute success",
+  "workflow_node.execute_result_branch.label": "Execution result branch",

-  "workflow_node.execute_failure.label": "Execute failure",
+  "workflow_node.execute_success.label": "If the previous node succeeded ...",

-  "workflow_node.condition.label": "Condition"
+  "workflow_node.execute_failure.label": "If the previous node failed ..."
 }
--- a/ui/src/i18n/locales/zh/nls.workflow.nodes.json
+++ b/ui/src/i18n/locales/zh/nls.workflow.nodes.json
@@ -3,7 +3,7 @@
  "workflow_node.branch.add_node": "添加节点",
  "workflow_node.action.rename_node": "重命名",
  "workflow_node.action.remove_node": "删除节点",
-  "workflow_node.action.add_branch": "添加分支",
+  "workflow_node.action.add_branch": "添加并行分支",
  "workflow_node.action.rename_branch": "重命名",
  "workflow_node.action.remove_branch": "删除分支",

@@ -379,13 +379,13 @@

  "workflow_node.end.label": "结束",

-  "workflow_node.branch.label": "分支",
+  "workflow_node.branch.label": "并行分支",
+
+  "workflow_node.condition.label": "分支",

  "workflow_node.execute_result_branch.label": "执行结果分支",

-  "workflow_node.execute_success.label": "执行成功",
+  "workflow_node.execute_success.label": "若前一节点执行成功…",

-  "workflow_node.execute_failure.label": "执行失败",
-
-  "workflow_node.condition.label": "条件"
+  "workflow_node.execute_failure.label": "若前一节点执行失败…"
 }