feat: improve workflow node configuration

ui/src/components/access/AccessForm.tsx

@@ -0,0 +1,180 @@
+import { forwardRef, useImperativeHandle, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import AccessProviderSelect from "@/components/provider/AccessProviderSelect";
+import { type AccessModel } from "@/domain/access";
+import { ACCESS_PROVIDERS } from "@/domain/provider";
+import { useAntdForm, useAntdFormName } from "@/hooks";
+
+import AccessFormACMEHttpReqConfig from "./AccessFormACMEHttpReqConfig";
+import AccessFormAWSConfig from "./AccessFormAWSConfig";
+import AccessFormAliyunConfig from "./AccessFormAliyunConfig";
+import AccessFormBaiduCloudConfig from "./AccessFormBaiduCloudConfig";
+import AccessFormBytePlusConfig from "./AccessFormBytePlusConfig";
+import AccessFormCloudflareConfig from "./AccessFormCloudflareConfig";
+import AccessFormDogeCloudConfig from "./AccessFormDogeCloudConfig";
+import AccessFormGoDaddyConfig from "./AccessFormGoDaddyConfig";
+import AccessFormHuaweiCloudConfig from "./AccessFormHuaweiCloudConfig";
+import AccessFormKubernetesConfig from "./AccessFormKubernetesConfig";
+import AccessFormLocalConfig from "./AccessFormLocalConfig";
+import AccessFormNameDotComConfig from "./AccessFormNameDotComConfig";
+import AccessFormNameSiloConfig from "./AccessFormNameSiloConfig";
+import AccessFormPowerDNSConfig from "./AccessFormPowerDNSConfig";
+import AccessFormQiniuConfig from "./AccessFormQiniuConfig";
+import AccessFormSSHConfig from "./AccessFormSSHConfig";
+import AccessFormTencentCloudConfig from "./AccessFormTencentCloudConfig";
+import AccessFormVolcEngineConfig from "./AccessFormVolcEngineConfig";
+import AccessFormWebhookConfig from "./AccessFormWebhookConfig";
+
+type AccessFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
+type AccessFormPresets = "add" | "edit";
+
+export type AccessFormProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+  initialValues?: AccessFormFieldValues;
+  preset: AccessFormPresets;
+  onValuesChange?: (values: AccessFormFieldValues) => void;
+};
+
+export type AccessFormInstance = {
+  getFieldsValue: () => ReturnType<FormInstance<AccessFormFieldValues>["getFieldsValue"]>;
+  resetFields: FormInstance<AccessFormFieldValues>["resetFields"];
+  validateFields: FormInstance<AccessFormFieldValues>["validateFields"];
+};
+
+const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className, style, disabled, initialValues, preset, onValuesChange }, ref) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    name: z
+      .string({ message: t("access.form.name.placeholder") })
+      .min(1, t("access.form.name.placeholder"))
+      .max(64, t("common.errmsg.string_max", { max: 64 }))
+      .trim(),
+    provider: z.nativeEnum(ACCESS_PROVIDERS, { message: t("access.form.provider.placeholder") }),
+    config: z.any(),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm({
+    initialValues: initialValues,
+  });
+
+  const fieldProvider = Form.useWatch("provider", formInst);
+
+  const [nestedFormInst] = Form.useForm();
+  const nestedFormName = useAntdFormName({ form: nestedFormInst, name: "accessEditFormConfigForm" });
+  const nestedFormEl = useMemo(() => {
+    const nestedFormProps = {
+      form: nestedFormInst,
+      formName: nestedFormName,
+      disabled: disabled,
+      initialValues: initialValues?.config,
+    };
+
+    /*
+      注意：如果追加新的子组件，请保持以 ASCII 排序。
+      NOTICE: If you add new child component, please keep ASCII order.
+     */
+    switch (fieldProvider) {
+      case ACCESS_PROVIDERS.ACMEHTTPREQ:
+        return <AccessFormACMEHttpReqConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.ALIYUN:
+        return <AccessFormAliyunConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.AWS:
+        return <AccessFormAWSConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.BAIDUCLOUD:
+        return <AccessFormBaiduCloudConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.BYTEPLUS:
+        return <AccessFormBytePlusConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.CLOUDFLARE:
+        return <AccessFormCloudflareConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.DOGECLOUD:
+        return <AccessFormDogeCloudConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.GODADDY:
+        return <AccessFormGoDaddyConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.HUAWEICLOUD:
+        return <AccessFormHuaweiCloudConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.KUBERNETES:
+        return <AccessFormKubernetesConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.LOCAL:
+        return <AccessFormLocalConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.NAMEDOTCOM:
+        return <AccessFormNameDotComConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.NAMESILO:
+        return <AccessFormNameSiloConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.POWERDNS:
+        return <AccessFormPowerDNSConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.QINIU:
+        return <AccessFormQiniuConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.SSH:
+        return <AccessFormSSHConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.TENCENTCLOUD:
+        return <AccessFormTencentCloudConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.VOLCENGINE:
+        return <AccessFormVolcEngineConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.WEBHOOK:
+        return <AccessFormWebhookConfig {...nestedFormProps} />;
+    }
+  }, [disabled, initialValues?.config, fieldProvider, nestedFormInst, nestedFormName]);
+
+  const handleFormProviderChange = (name: string) => {
+    if (name === nestedFormName) {
+      formInst.setFieldValue("config", nestedFormInst.getFieldsValue());
+      onValuesChange?.(formInst.getFieldsValue(true));
+    }
+  };
+
+  const handleFormChange = (_: unknown, values: AccessFormFieldValues) => {
+    if (values.provider !== fieldProvider) {
+      formInst.setFieldValue("provider", values.provider);
+    }
+
+    onValuesChange?.(values);
+  };
+
+  useImperativeHandle(ref, () => {
+    return {
+      getFieldsValue: () => {
+        return formInst.getFieldsValue(true);
+      },
+      resetFields: (fields) => {
+        return formInst.resetFields(fields);
+      },
+      validateFields: (nameList, config) => {
+        const t1 = formInst.validateFields(nameList, config);
+        const t2 = nestedFormInst.validateFields(undefined, config);
+        return Promise.all([t1, t2]).then(() => t1);
+      },
+    } as AccessFormInstance;
+  });
+
+  return (
+    <Form.Provider onFormChange={handleFormProviderChange}>
+      <div className={className} style={style}>
+        <Form {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
+          <Form.Item name="name" label={t("access.form.name.label")} rules={[formRule]}>
+            <Input placeholder={t("access.form.name.placeholder")} />
+          </Form.Item>
+
+          <Form.Item
+            name="provider"
+            label={t("access.form.provider.label")}
+            rules={[formRule]}
+            tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.provider.tooltip") }}></span>}
+          >
+            <AccessProviderSelect disabled={preset !== "add"} placeholder={t("access.form.provider.placeholder")} showSearch={!disabled} />
+          </Form.Item>
+        </Form>
+
+        {nestedFormEl}
+      </div>
+    </Form.Provider>
+  );
+});
+
+export default AccessForm;