Merge branch 'next' into feat/new-workflow

ui/src/components/workflow/WorkflowElement.tsx

@@ -11,6 +11,7 @@ import ExecuteResultBranchNode from "./node/ExecuteResultBranchNode";
 import ExecuteResultNode from "./node/ExecuteResultNode";
 import NotifyNode from "./node/NotifyNode";
 import StartNode from "./node/StartNode";
+import UploadNode from "./node/UploadNode";
 
 export type WorkflowElementProps = {
   node: WorkflowNode;
@@ -28,6 +29,9 @@ const WorkflowElement = ({ node, disabled, branchId, branchIndex }: WorkflowElem
       case WorkflowNodeType.Apply:
         return <ApplyNode node={node} disabled={disabled} />;
 
+      case WorkflowNodeType.Upload:
+        return <UploadNode node={node} disabled={disabled} />;
+
       case WorkflowNodeType.Deploy:
         return <DeployNode node={node} disabled={disabled} />;
 
@@ -60,3 +64,4 @@ const WorkflowElement = ({ node, disabled, branchId, branchIndex }: WorkflowElem
 };
 
 export default memo(WorkflowElement);
+

ui/src/components/workflow/node/AddNode.tsx

@@ -2,6 +2,7 @@ import { memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import {
   CloudUploadOutlined as CloudUploadOutlinedIcon,
+  DeploymentUnitOutlined as DeploymentUnitOutlinedIcon,
   PlusOutlined as PlusOutlinedIcon,
   SendOutlined as SendOutlinedIcon,
   SisternodeOutlined as SisternodeOutlinedIcon,
@@ -25,7 +26,8 @@ const AddNode = ({ node, disabled }: AddNodeProps) => {
   const dropdownMenus = useMemo(() => {
     return [
       [WorkflowNodeType.Apply, "workflow_node.apply.label", <SolutionOutlinedIcon />],
-      [WorkflowNodeType.Deploy, "workflow_node.deploy.label", <CloudUploadOutlinedIcon />],
+      [WorkflowNodeType.Upload, "workflow_node.upload.label", <CloudUploadOutlinedIcon />],
+      [WorkflowNodeType.Deploy, "workflow_node.deploy.label", <DeploymentUnitOutlinedIcon />],
       [WorkflowNodeType.Notify, "workflow_node.notify.label", <SendOutlinedIcon />],
       [WorkflowNodeType.Branch, "workflow_node.branch.label", <SisternodeOutlinedIcon />],
       [WorkflowNodeType.ExecuteResultBranch, "workflow_node.execute_result_branch.label", <SisternodeOutlinedIcon />],

ui/src/components/workflow/node/UploadNode.tsx

@@ -0,0 +1,91 @@
+import { memo, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Flex, Typography } from "antd";
+import { produce } from "immer";
+
+import type { WorkflowNodeConfigForUpload } from "@/domain/workflow";
+import { WorkflowNodeType } from "@/domain/workflow";
+import { useZustandShallowSelector } from "@/hooks";
+import { useWorkflowStore } from "@/stores/workflow";
+
+import UploadNodeConfigForm, { type UploadNodeConfigFormInstance } from "./UploadNodeConfigForm";
+import SharedNode, { type SharedNodeProps } from "./_SharedNode";
+
+export type UploadNodeProps = SharedNodeProps;
+
+const UploadNode = ({ node, disabled }: UploadNodeProps) => {
+  if (node.type !== WorkflowNodeType.Upload) {
+    console.warn(`[certimate] current workflow node type is not: ${WorkflowNodeType.Upload}`);
+  }
+
+  const { t } = useTranslation();
+
+  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
+
+  const formRef = useRef<UploadNodeConfigFormInstance>(null);
+  const [formPending, setFormPending] = useState(false);
+
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const getFormValues = () => formRef.current!.getFieldsValue() as WorkflowNodeConfigForUpload;
+
+  const wrappedEl = useMemo(() => {
+    if (node.type !== WorkflowNodeType.Upload) {
+      console.warn(`[certimate] current workflow node type is not: ${WorkflowNodeType.Upload}`);
+    }
+
+    if (!node.validated) {
+      return <Typography.Link>{t("workflow_node.action.configure_node")}</Typography.Link>;
+    }
+
+    const config = (node.config as WorkflowNodeConfigForUpload) ?? {};
+    return (
+      <Flex className="size-full overflow-hidden" align="center" gap={8}>
+        <Typography.Text className="truncate">{config.domains ?? ""}</Typography.Text>
+      </Flex>
+    );
+  }, [node]);
+
+  const handleDrawerConfirm = async () => {
+    setFormPending(true);
+    try {
+      await formRef.current!.validateFields();
+    } catch (err) {
+      setFormPending(false);
+      throw err;
+    }
+
+    try {
+      const newValues = getFormValues();
+      const newNode = produce(node, (draft) => {
+        draft.config = {
+          ...newValues,
+        };
+        draft.validated = true;
+      });
+      await updateNode(newNode);
+    } finally {
+      setFormPending(false);
+    }
+  };
+
+  return (
+    <>
+      <SharedNode.Block node={node} disabled={disabled} onClick={() => setDrawerOpen(true)}>
+        {wrappedEl}
+      </SharedNode.Block>
+
+      <SharedNode.ConfigDrawer
+        node={node}
+        open={drawerOpen}
+        pending={formPending}
+        onConfirm={handleDrawerConfirm}
+        onOpenChange={(open) => setDrawerOpen(open)}
+        getFormValues={() => formRef.current!.getFieldsValue()}
+      >
+        <UploadNodeConfigForm ref={formRef} disabled={disabled} initialValues={node.config} />
+      </SharedNode.ConfigDrawer>
+    </>
+  );
+};
+
+export default memo(UploadNode);

ui/src/components/workflow/node/UploadNodeConfigForm.tsx

@@ -0,0 +1,180 @@
+import { forwardRef, memo, useImperativeHandle } from "react";
+import { useTranslation } from "react-i18next";
+import { UploadOutlined as UploadOutlinedIcon } from "@ant-design/icons";
+import { Button, Form, type FormInstance, Input, Upload, type UploadProps } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { validateCertificate, validatePrivateKey } from "@/api/certificates";
+import { type WorkflowNodeConfigForUpload } from "@/domain/workflow";
+import { useAntdForm } from "@/hooks";
+import { getErrMsg } from "@/utils/error";
+import { readFileContent } from "@/utils/file";
+
+type UploadNodeConfigFormFieldValues = Partial<WorkflowNodeConfigForUpload>;
+
+export type UploadNodeConfigFormProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+  initialValues?: UploadNodeConfigFormFieldValues;
+  onValuesChange?: (values: UploadNodeConfigFormFieldValues) => void;
+};
+
+export type UploadNodeConfigFormInstance = {
+  getFieldsValue: () => ReturnType<FormInstance<UploadNodeConfigFormFieldValues>["getFieldsValue"]>;
+  resetFields: FormInstance<UploadNodeConfigFormFieldValues>["resetFields"];
+  validateFields: FormInstance<UploadNodeConfigFormFieldValues>["validateFields"];
+};
+
+const initFormModel = (): UploadNodeConfigFormFieldValues => {
+  return {};
+};
+
+const UploadNodeConfigForm = forwardRef<UploadNodeConfigFormInstance, UploadNodeConfigFormProps>(
+  ({ className, style, disabled, initialValues, onValuesChange }, ref) => {
+    const { t } = useTranslation();
+
+    const formSchema = z.object({
+      domains: z.string().nullish(),
+      certificate: z
+        .string({ message: t("workflow_node.upload.form.certificate.placeholder") })
+        .min(1, t("workflow_node.upload.form.certificate.placeholder"))
+        .max(5120, t("common.errmsg.string_max", { max: 5120 })),
+      privateKey: z
+        .string({ message: t("workflow_node.upload.form.private_key.placeholder") })
+        .min(1, t("workflow_node.upload.form.private_key.placeholder"))
+        .max(5120, t("common.errmsg.string_max", { max: 5120 })),
+    });
+    const formRule = createSchemaFieldRule(formSchema);
+    const { form: formInst, formProps } = useAntdForm({
+      name: "workflowNodeUploadConfigForm",
+      initialValues: initialValues ?? initFormModel(),
+    });
+
+    const fieldCertificate = Form.useWatch("certificate", formInst);
+    const fieldPrivateKey = Form.useWatch("privateKey", formInst);
+
+    const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+      onValuesChange?.(values as UploadNodeConfigFormFieldValues);
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        getFieldsValue: () => {
+          return formInst.getFieldsValue(true);
+        },
+        resetFields: (fields) => {
+          return formInst.resetFields(fields as (keyof UploadNodeConfigFormFieldValues)[]);
+        },
+        validateFields: (nameList, config) => {
+          return formInst.validateFields(nameList, config);
+        },
+      } as UploadNodeConfigFormInstance;
+    });
+
+    const handleCertificateFileChange: UploadProps["onChange"] = async ({ file }) => {
+      if (file && file.status !== "removed") {
+        const certificate = await readFileContent(file.originFileObj ?? (file as unknown as File));
+
+        try {
+          const resp = await validateCertificate(certificate);
+          formInst.setFields([
+            {
+              name: "domains",
+              value: resp.data.domains,
+            },
+            {
+              name: "certificate",
+              value: certificate,
+            },
+          ]);
+        } catch (e) {
+          formInst.setFields([
+            {
+              name: "domains",
+              value: "",
+            },
+            {
+              name: "certificate",
+              value: "",
+              errors: [getErrMsg(e)],
+            },
+          ]);
+        }
+      } else {
+        formInst.setFieldValue("certificate", "");
+      }
+
+      onValuesChange?.(formInst.getFieldsValue(true));
+    };
+
+    const handlePrivateKeyFileChange: UploadProps["onChange"] = async ({ file }) => {
+      if (file && file.status !== "removed") {
+        const privateKey = await readFileContent(file.originFileObj ?? (file as unknown as File));
+
+        try {
+          await validatePrivateKey(privateKey);
+          formInst.setFields([
+            {
+              name: "privateKey",
+              value: privateKey,
+            },
+          ]);
+        } catch (e) {
+          formInst.setFields([
+            {
+              name: "privateKey",
+              value: "",
+              errors: [getErrMsg(e)],
+            },
+          ]);
+        }
+      } else {
+        formInst.setFieldValue("privateKey", "");
+      }
+
+      onValuesChange?.(formInst.getFieldsValue(true));
+    };
+
+    return (
+      <Form className={className} style={style} {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
+        <Form.Item name="domains" label={t("workflow_node.upload.form.domains.label")} rules={[formRule]}>
+          <Input placeholder={t("workflow_node.upload.form.domains.placeholder")} readOnly />
+        </Form.Item>
+
+        <Form.Item name="certificate" label={t("workflow_node.upload.form.certificate.label")} rules={[formRule]}>
+          <Input.TextArea
+            readOnly
+            autoSize={{ minRows: 5, maxRows: 10 }}
+            placeholder={t("workflow_node.upload.form.certificate.placeholder")}
+            value={fieldCertificate}
+          />
+        </Form.Item>
+
+        <Form.Item>
+          <Upload beforeUpload={() => false} maxCount={1} onChange={handleCertificateFileChange}>
+            <Button icon={<UploadOutlinedIcon />}>{t("workflow_node.upload.form.certificate.button")}</Button>
+          </Upload>
+        </Form.Item>
+
+        <Form.Item name="privateKey" label={t("workflow_node.upload.form.private_key.label")} rules={[formRule]}>
+          <Input.TextArea
+            readOnly
+            autoSize={{ minRows: 5, maxRows: 10 }}
+            placeholder={t("workflow_node.upload.form.private_key.placeholder")}
+            value={fieldPrivateKey}
+          />
+        </Form.Item>
+
+        <Form.Item>
+          <Upload beforeUpload={() => false} maxCount={1} onChange={handlePrivateKeyFileChange}>
+            <Button icon={<UploadOutlinedIcon />}>{t("workflow_node.upload.form.private_key.button")}</Button>
+          </Upload>
+        </Form.Item>
+      </Form>
+    );
+  }
+);
+
+export default memo(UploadNodeConfigForm);