github
/
certimate
mirror of https://github.com/usual2970/certimate
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): clean code

main
Fu Diwei 2024-12-25 23:20:09 +08:00
parent adbf40914e
commit 1184e52ba9
30 changed files with 267 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
ui/src/components/access/AccessEditForm.tsx
View File

@ -1,7 +1,7 @@
import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useCreation } from "ahooks";
import { Form, Input } from "antd";
import { Form, Input, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@ -28,25 +28,21 @@ import AccessEditFormTencentCloudConfig from "./AccessEditFormTencentCloudConfig
import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";
type AccessEditFormModelValues = Partial<MaybeModelRecord<AccessModel>>;
type AccessEditFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
type AccessEditFormPresets = "add" | "edit";
export type AccessEditFormProps = {
className?: string;
style?: React.CSSProperties;
disabled?: boolean;
model?: AccessEditFormModelValues;
initialValues?: AccessEditFormFieldValues;
preset: AccessEditFormPresets;
onModelChange?: (model: AccessEditFormModelValues) => void;
onValuesChange?: (values: AccessEditFormFieldValues) => void;
};
export type AccessEditFormInstance = {
getFieldsValue: () => AccessEditFormModelValues;
resetFields: () => void;
validateFields: () => Promise<AccessEditFormModelValues>;
};
export type AccessEditFormInstance = FormInstance<AccessEditFormFieldValues>;
const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>(({ className, style, disabled, model, preset, onModelChange }, ref) => {
const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>(({ className, style, disabled, initialValues, preset, onValuesChange }, ref) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -59,14 +55,14 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
config: z.any(),
});
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
initialValues: model as Partial<z.infer<typeof formSchema>>,
const { form: formInst, formProps } = useAntdForm({
initialValues: initialValues,
});
const [configType, setConfigType] = useState(model?.configType);
const [configType, setConfigType] = useState(initialValues?.configType);
useEffect(() => {
setConfigType(model?.configType);
}, [model?.configType]);
setConfigType(initialValues?.configType);
}, [initialValues?.configType]);
const [configFormInst] = Form.useForm();
const configFormName = useCreation(() => `accessEditForm_config${Math.random().toString(36).substring(2, 10)}${new Date().getTime()}`, []);
@ -75,7 +71,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
注意：如果追加新的子组件，请保持以 ASCII 排序。
NOTICE: If you add new child component, please keep ASCII order.
*/
const configFormProps = { form: configFormInst, formName: configFormName, disabled: disabled, model: model?.config };
const configFormProps = { form: configFormInst, formName: configFormName, disabled: disabled, initialValues: initialValues?.config };
switch (configType) {
case ACCESS_PROVIDER_TYPES.ACMEHTTPREQ:
return <AccessEditFormACMEHttpReqConfig {...configFormProps} />;
@ -116,36 +112,52 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
case ACCESS_PROVIDER_TYPES.WEBHOOK:
return <AccessEditFormWebhookConfig {...configFormProps} />;
}
}, [disabled, model, configType, configFormInst, configFormName]);
}, [disabled, initialValues, configType, configFormInst, configFormName]);
const handleFormProviderChange = (name: string) => {
if (name === configFormName) {
formInst.setFieldValue("config", configFormInst.getFieldsValue());
onModelChange?.(formInst.getFieldsValue(true));
onValuesChange?.(formInst.getFieldsValue(true));
}
};
const handleFormChange = (_: unknown, values: AccessEditFormModelValues) => {
const handleFormChange = (_: unknown, values: AccessEditFormFieldValues) => {
if (values.configType !== configType) {
setConfigType(values.configType);
}
onModelChange?.(values);
onValuesChange?.(values);
};
useImperativeHandle(ref, () => ({
getFieldsValue: () => {
return formInst.getFieldsValue(true);
},
resetFields: () => {
return formInst.resetFields();
},
validateFields: () => {
const t1 = formInst.validateFields();
const t2 = configFormInst.validateFields();
return Promise.all([t1, t2]).then(() => t1);
},
}));
useImperativeHandle(ref, () => {
return {
getFieldValue: (name) => formInst.getFieldValue(name),
getFieldsValue: (...args) => {
if (Array.from(args).length === 0) {
return formInst.getFieldsValue(true);
}
return formInst.getFieldsValue(args[0] as any, args[1] as any);
},
getFieldError: (name) => formInst.getFieldError(name),
getFieldsError: (nameList) => formInst.getFieldsError(nameList),
getFieldWarning: (name) => formInst.getFieldWarning(name),
isFieldsTouched: (nameList, allFieldsTouched) => formInst.isFieldsTouched(nameList, allFieldsTouched),
isFieldTouched: (name) => formInst.isFieldTouched(name),
isFieldValidating: (name) => formInst.isFieldValidating(name),
isFieldsValidating: (nameList) => formInst.isFieldsValidating(nameList),
resetFields: (fields) => formInst.resetFields(fields),
setFields: (fields) => formInst.setFields(fields),
setFieldValue: (name, value) => formInst.setFieldValue(name, value),
setFieldsValue: (values) => formInst.setFieldsValue(values),
submit: () => formInst.submit(),
validateFields: (nameList, config) => {
const t1 = formInst.validateFields(nameList, config);
const t2 = configFormInst.validateFields(undefined, config);
return Promise.all([t1, t2]).then(() => t1);
},
} as AccessEditFormInstance;
});
return (
<Form.Provider onFormChange={handleFormProviderChange}>

14
ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx
View File

@ -6,24 +6,24 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type ACMEHttpReqAccessConfig } from "@/domain/access";
type AccessEditFormACMEHttpReqConfigModelValues = Partial<ACMEHttpReqAccessConfig>;
type AccessEditFormACMEHttpReqConfigFieldValues = Partial<ACMEHttpReqAccessConfig>;
export type AccessEditFormACMEHttpReqConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormACMEHttpReqConfigModelValues;
onModelChange?: (model: AccessEditFormACMEHttpReqConfigModelValues) => void;
initialValues?: AccessEditFormACMEHttpReqConfigFieldValues;
onValuesChange?: (values: AccessEditFormACMEHttpReqConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormACMEHttpReqConfigModelValues => {
const initFormModel = (): AccessEditFormACMEHttpReqConfigFieldValues => {
return {
endpoint: "https://example.com/api/",
mode: "",
};
};
const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormACMEHttpReqConfigProps) => {
const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormACMEHttpReqConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -45,11 +45,11 @@ const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, model, onMo
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormACMEHttpReqConfigModelValues);
onValuesChange?.(values as AccessEditFormACMEHttpReqConfigFieldValues);
};
return (

14
ui/src/components/access/AccessEditFormAWSConfig.tsx
View File

@ -6,17 +6,17 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type AWSAccessConfig } from "@/domain/access";
type AccessEditFormAWSConfigModelValues = Partial<AWSAccessConfig>;
type AccessEditFormAWSConfigFieldValues = Partial<AWSAccessConfig>;
export type AccessEditFormAWSConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormAWSConfigModelValues;
onModelChange?: (model: AccessEditFormAWSConfigModelValues) => void;
initialValues?: AccessEditFormAWSConfigFieldValues;
onValuesChange?: (values: AccessEditFormAWSConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormAWSConfigModelValues => {
const initFormModel = (): AccessEditFormAWSConfigFieldValues => {
return {
accessKeyId: "",
secretAccessKey: "",
@ -25,7 +25,7 @@ const initFormModel = (): AccessEditFormAWSConfigModelValues => {
};
};
const AccessEditFormAWSConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormAWSConfigProps) => {
const AccessEditFormAWSConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormAWSConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -57,11 +57,11 @@ const AccessEditFormAWSConfig = ({ form, formName, disabled, model, onModelChang
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormAWSConfigModelValues);
onValuesChange?.(values as AccessEditFormAWSConfigFieldValues);
};
return (

14
ui/src/components/access/AccessEditFormAliyunConfig.tsx
View File

@ -6,24 +6,24 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type AliyunAccessConfig } from "@/domain/access";
type AccessEditFormAliyunConfigModelValues = Partial<AliyunAccessConfig>;
type AccessEditFormAliyunConfigFieldValues = Partial<AliyunAccessConfig>;
export type AccessEditFormAliyunConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormAliyunConfigModelValues;
onModelChange?: (model: AccessEditFormAliyunConfigModelValues) => void;
initialValues?: AccessEditFormAliyunConfigFieldValues;
onValuesChange?: (values: AccessEditFormAliyunConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormAliyunConfigModelValues => {
const initFormModel = (): AccessEditFormAliyunConfigFieldValues => {
return {
accessKeyId: "",
accessKeySecret: "",
};
};
const AccessEditFormAliyunConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormAliyunConfigProps) => {
const AccessEditFormAliyunConfig = ({ form, formName, disabled, initialValues, onValuesChange: onValuesChange }: AccessEditFormAliyunConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -41,11 +41,11 @@ const AccessEditFormAliyunConfig = ({ form, formName, disabled, model, onModelCh
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormAliyunConfigModelValues);
onValuesChange?.(values as AccessEditFormAliyunConfigFieldValues);
};
return (

14
ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx
View File

@ -6,24 +6,24 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type BaiduCloudAccessConfig } from "@/domain/access";
type AccessEditFormBaiduCloudConfigModelValues = Partial<BaiduCloudAccessConfig>;
type AccessEditFormBaiduCloudConfigFieldValues = Partial<BaiduCloudAccessConfig>;
export type AccessEditFormBaiduCloudConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormBaiduCloudConfigModelValues;
onModelChange?: (model: AccessEditFormBaiduCloudConfigModelValues) => void;
initialValues?: AccessEditFormBaiduCloudConfigFieldValues;
onValuesChange?: (values: AccessEditFormBaiduCloudConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormBaiduCloudConfigModelValues => {
const initFormModel = (): AccessEditFormBaiduCloudConfigFieldValues => {
return {
accessKeyId: "",
secretAccessKey: "",
};
};
const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormBaiduCloudConfigProps) => {
const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormBaiduCloudConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -41,11 +41,11 @@ const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, model, onMod
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormBaiduCloudConfigModelValues);
onValuesChange?.(values as AccessEditFormBaiduCloudConfigFieldValues);
};
return (

14
ui/src/components/access/AccessEditFormBytePlusConfig.tsx
View File

@ -6,24 +6,24 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type BytePlusAccessConfig } from "@/domain/access";
type AccessEditFormBytePlusConfigModelValues = Partial<BytePlusAccessConfig>;
type AccessEditFormBytePlusConfigFieldValues = Partial<BytePlusAccessConfig>;
export type AccessEditFormBytePlusConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormBytePlusConfigModelValues;
onModelChange?: (model: AccessEditFormBytePlusConfigModelValues) => void;
initialValues?: AccessEditFormBytePlusConfigFieldValues;
onValuesChange?: (values: AccessEditFormBytePlusConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormBytePlusConfigModelValues => {
const initFormModel = (): AccessEditFormBytePlusConfigFieldValues => {
return {
accessKey: "",
secretKey: "",
};
};
const AccessEditFormBytePlusConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormBytePlusConfigProps) => {
const AccessEditFormBytePlusConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormBytePlusConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -41,11 +41,11 @@ const AccessEditFormBytePlusConfig = ({ form, formName, disabled, model, onModel
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormBytePlusConfigModelValues);
onValuesChange?.(values as AccessEditFormBytePlusConfigFieldValues);
};
return (

14
ui/src/components/access/AccessEditFormCloudflareConfig.tsx
View File

@ -6,23 +6,23 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type CloudflareAccessConfig } from "@/domain/access";
type AccessEditFormCloudflareConfigModelValues = Partial<CloudflareAccessConfig>;
type AccessEditFormCloudflareConfigFieldValues = Partial<CloudflareAccessConfig>;
export type AccessEditFormCloudflareConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormCloudflareConfigModelValues;
onModelChange?: (model: AccessEditFormCloudflareConfigModelValues) => void;
initialValues?: AccessEditFormCloudflareConfigFieldValues;
onValuesChange?: (values: AccessEditFormCloudflareConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormCloudflareConfigModelValues => {
const initFormModel = (): AccessEditFormCloudflareConfigFieldValues => {
return {
dnsApiToken: "",
};
};
const AccessEditFormCloudflareConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormCloudflareConfigProps) => {
const AccessEditFormCloudflareConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormCloudflareConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -35,11 +35,11 @@ const AccessEditFormCloudflareConfig = ({ form, formName, disabled, model, onMod
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormCloudflareConfigModelValues);
onValuesChange?.(values as AccessEditFormCloudflareConfigFieldValues);
};
return (

14
ui/src/components/access/AccessEditFormDogeCloudConfig.tsx
View File

@ -6,24 +6,24 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type DogeCloudAccessConfig } from "@/domain/access";
type AccessEditFormDogeCloudConfigModelValues = Partial<DogeCloudAccessConfig>;
type AccessEditFormDogeCloudConfigFieldValues = Partial<DogeCloudAccessConfig>;
export type AccessEditFormDogeCloudConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormDogeCloudConfigModelValues;
onModelChange?: (model: AccessEditFormDogeCloudConfigModelValues) => void;
initialValues?: AccessEditFormDogeCloudConfigFieldValues;
onValuesChange?: (values: AccessEditFormDogeCloudConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormDogeCloudConfigModelValues => {
const initFormModel = (): AccessEditFormDogeCloudConfigFieldValues => {
return {
accessKey: "",
secretKey: "",
};
};
const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormDogeCloudConfigProps) => {
const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormDogeCloudConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -41,11 +41,11 @@ const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, model, onMode
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormDogeCloudConfigModelValues);
onValuesChange?.(values as AccessEditFormDogeCloudConfigFieldValues);
};
return (

14
ui/src/components/access/AccessEditFormGoDaddyConfig.tsx
View File

@ -6,24 +6,24 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type GoDaddyAccessConfig } from "@/domain/access";
type AccessEditFormGoDaddyConfigModelValues = Partial<GoDaddyAccessConfig>;
type AccessEditFormGoDaddyConfigFieldValues = Partial<GoDaddyAccessConfig>;
export type AccessEditFormGoDaddyConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormGoDaddyConfigModelValues;
onModelChange?: (model: AccessEditFormGoDaddyConfigModelValues) => void;
initialValues?: AccessEditFormGoDaddyConfigFieldValues;
onValuesChange?: (values: AccessEditFormGoDaddyConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormGoDaddyConfigModelValues => {
const initFormModel = (): AccessEditFormGoDaddyConfigFieldValues => {
return {
apiKey: "",
apiSecret: "",
};
};
const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormGoDaddyConfigProps) => {
const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormGoDaddyConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -41,11 +41,11 @@ const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, model, onModelC
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormGoDaddyConfigModelValues);
onValuesChange?.(values as AccessEditFormGoDaddyConfigFieldValues);
};
return (

14
ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx
View File

@ -6,17 +6,17 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type HuaweiCloudAccessConfig } from "@/domain/access";
type AccessEditFormHuaweiCloudConfigModelValues = Partial<HuaweiCloudAccessConfig>;
type AccessEditFormHuaweiCloudConfigFieldValues = Partial<HuaweiCloudAccessConfig>;
export type AccessEditFormHuaweiCloudConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormHuaweiCloudConfigModelValues;
onModelChange?: (model: AccessEditFormHuaweiCloudConfigModelValues) => void;
initialValues?: AccessEditFormHuaweiCloudConfigFieldValues;
onValuesChange?: (values: AccessEditFormHuaweiCloudConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormHuaweiCloudConfigModelValues => {
const initFormModel = (): AccessEditFormHuaweiCloudConfigFieldValues => {
return {
accessKeyId: "",
secretAccessKey: "",
@ -24,7 +24,7 @@ const initFormModel = (): AccessEditFormHuaweiCloudConfigModelValues => {
};
};
const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormHuaweiCloudConfigProps) => {
const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormHuaweiCloudConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -49,11 +49,11 @@ const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, model, onMo
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormHuaweiCloudConfigModelValues);
onValuesChange?.(values as AccessEditFormHuaweiCloudConfigFieldValues);
};
return (

20
ui/src/components/access/AccessEditFormKubernetesConfig.tsx
View File

@ -11,21 +11,21 @@ import { useAntdForm } from "@/hooks";
import { type KubernetesAccessConfig } from "@/domain/access";
import { readFileContent } from "@/utils/file";
type AccessEditFormKubernetesConfigModelValues = Partial<KubernetesAccessConfig>;
type AccessEditFormKubernetesConfigFieldValues = Partial<KubernetesAccessConfig>;
export type AccessEditFormKubernetesConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormKubernetesConfigModelValues;
onModelChange?: (model: AccessEditFormKubernetesConfigModelValues) => void;
initialValues?: AccessEditFormKubernetesConfigFieldValues;
onValuesChange?: (values: AccessEditFormKubernetesConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormKubernetesConfigModelValues => {
const initFormModel = (): AccessEditFormKubernetesConfigFieldValues => {
return {};
};
const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormKubernetesConfigProps) => {
const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormKubernetesConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -39,16 +39,16 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onMod
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const [kubeFileList, setKubeFileList] = useState<UploadFile[]>([]);
useDeepCompareEffect(() => {
setKubeFileList(model?.kubeConfig?.trim() ? [{ uid: "-1", name: "kubeconfig", status: "done" }] : []);
}, [model]);
setKubeFileList(initialValues?.kubeConfig?.trim() ? [{ uid: "-1", name: "kubeconfig", status: "done" }] : []);
}, [initialValues]);
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormKubernetesConfigModelValues);
onValuesChange?.(values as AccessEditFormKubernetesConfigFieldValues);
};
const handleKubeFileChange: UploadProps["onChange"] = async ({ file }) => {
@ -60,7 +60,7 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onMod
setKubeFileList([]);
}
flushSync(() => onModelChange?.(formInst.getFieldsValue(true)));
flushSync(() => onValuesChange?.(formInst.getFieldsValue(true)));
};
return (

14
ui/src/components/access/AccessEditFormLocalConfig.tsx
View File

@ -3,28 +3,28 @@ import { Form, type FormInstance } from "antd";
import { useAntdForm } from "@/hooks";
import { type LocalAccessConfig } from "@/domain/access";
type AccessEditFormLocalConfigModelValues = Partial<LocalAccessConfig>;
type AccessEditFormLocalConfigFieldValues = Partial<LocalAccessConfig>;
export type AccessEditFormLocalConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormLocalConfigModelValues;
onModelChange?: (model: AccessEditFormLocalConfigModelValues) => void;
initialValues?: AccessEditFormLocalConfigFieldValues;
onValuesChange?: (values: AccessEditFormLocalConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormLocalConfigModelValues => {
const initFormModel = (): AccessEditFormLocalConfigFieldValues => {
return {};
};
const AccessEditFormLocalConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormLocalConfigProps) => {
const AccessEditFormLocalConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormLocalConfigProps) => {
const { form: formInst, formProps } = useAntdForm({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: unknown) => {
onModelChange?.(values as AccessEditFormLocalConfigModelValues);
onValuesChange?.(values as AccessEditFormLocalConfigFieldValues);
};
return <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}></Form>;

14
ui/src/components/access/AccessEditFormNameDotComConfig.tsx
View File

@ -6,24 +6,24 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type NameDotComAccessConfig } from "@/domain/access";
type AccessEditFormNameDotComConfigModelValues = Partial<NameDotComAccessConfig>;
type AccessEditFormNameDotComConfigFieldValues = Partial<NameDotComAccessConfig>;
export type AccessEditFormNameDotComConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormNameDotComConfigModelValues;
onModelChange?: (model: AccessEditFormNameDotComConfigModelValues) => void;
initialValues?: AccessEditFormNameDotComConfigFieldValues;
onValuesChange?: (values: AccessEditFormNameDotComConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormNameDotComConfigModelValues => {
const initFormModel = (): AccessEditFormNameDotComConfigFieldValues => {
return {
username: "",
apiToken: "",
};
};
const AccessEditFormNameDotComConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormNameDotComConfigProps) => {
const AccessEditFormNameDotComConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormNameDotComConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -41,11 +41,11 @@ const AccessEditFormNameDotComConfig = ({ form, formName, disabled, model, onMod
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormNameDotComConfigModelValues);
onValuesChange?.(values as AccessEditFormNameDotComConfigFieldValues);
};
return (

14
ui/src/components/access/AccessEditFormNameSiloConfig.tsx
View File

@ -6,23 +6,23 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type NameSiloAccessConfig } from "@/domain/access";
type AccessEditFormNameSiloConfigModelValues = Partial<NameSiloAccessConfig>;
type AccessEditFormNameSiloConfigFieldValues = Partial<NameSiloAccessConfig>;
export type AccessEditFormNameSiloConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormNameSiloConfigModelValues;
onModelChange?: (model: AccessEditFormNameSiloConfigModelValues) => void;
initialValues?: AccessEditFormNameSiloConfigFieldValues;
onValuesChange?: (values: AccessEditFormNameSiloConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormNameSiloConfigModelValues => {
const initFormModel = (): AccessEditFormNameSiloConfigFieldValues => {
return {
apiKey: "",
};
};
const AccessEditFormNameSiloConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormNameSiloConfigProps) => {
const AccessEditFormNameSiloConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormNameSiloConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -35,11 +35,11 @@ const AccessEditFormNameSiloConfig = ({ form, formName, disabled, model, onModel
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormNameSiloConfigModelValues);
onValuesChange?.(values as AccessEditFormNameSiloConfigFieldValues);
};
return (

14
ui/src/components/access/AccessEditFormPowerDNSConfig.tsx
View File

@ -6,24 +6,24 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type PowerDNSAccessConfig } from "@/domain/access";
type AccessEditFormPowerDNSConfigModelValues = Partial<PowerDNSAccessConfig>;
type AccessEditFormPowerDNSConfigFieldValues = Partial<PowerDNSAccessConfig>;
export type AccessEditFormPowerDNSConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormPowerDNSConfigModelValues;
onModelChange?: (model: AccessEditFormPowerDNSConfigModelValues) => void;
initialValues?: AccessEditFormPowerDNSConfigFieldValues;
onValuesChange?: (values: AccessEditFormPowerDNSConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormPowerDNSConfigModelValues => {
const initFormModel = (): AccessEditFormPowerDNSConfigFieldValues => {
return {
apiUrl: "",
apiKey: "",
};
};
const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormPowerDNSConfigProps) => {
const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormPowerDNSConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -37,11 +37,11 @@ const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, model, onModel
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormPowerDNSConfigModelValues);
onValuesChange?.(values as AccessEditFormPowerDNSConfigFieldValues);
};
return (

14
ui/src/components/access/AccessEditFormQiniuConfig.tsx
View File

@ -6,24 +6,24 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type QiniuAccessConfig } from "@/domain/access";
type AccessEditFormQiniuConfigModelValues = Partial<QiniuAccessConfig>;
type AccessEditFormQiniuConfigFieldValues = Partial<QiniuAccessConfig>;
export type AccessEditFormQiniuConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormQiniuConfigModelValues;
onModelChange?: (model: AccessEditFormQiniuConfigModelValues) => void;
initialValues?: AccessEditFormQiniuConfigFieldValues;
onValuesChange?: (values: AccessEditFormQiniuConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormQiniuConfigModelValues => {
const initFormModel = (): AccessEditFormQiniuConfigFieldValues => {
return {
accessKey: "",
secretKey: "",
};
};
const AccessEditFormQiniuConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormQiniuConfigProps) => {
const AccessEditFormQiniuConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormQiniuConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -41,11 +41,11 @@ const AccessEditFormQiniuConfig = ({ form, formName, disabled, model, onModelCha
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormQiniuConfigModelValues);
onValuesChange?.(values as AccessEditFormQiniuConfigFieldValues);
};
return (

20
ui/src/components/access/AccessEditFormSSHConfig.tsx
View File

@ -11,17 +11,17 @@ import { useAntdForm } from "@/hooks";
import { type SSHAccessConfig } from "@/domain/access";
import { readFileContent } from "@/utils/file";
type AccessEditFormSSHConfigModelValues = Partial<SSHAccessConfig>;
type AccessEditFormSSHConfigFieldValues = Partial<SSHAccessConfig>;
export type AccessEditFormSSHConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormSSHConfigModelValues;
onModelChange?: (model: AccessEditFormSSHConfigModelValues) => void;
initialValues?: AccessEditFormSSHConfigFieldValues;
onValuesChange?: (values: AccessEditFormSSHConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormSSHConfigModelValues => {
const initFormModel = (): AccessEditFormSSHConfigFieldValues => {
return {
host: "127.0.0.1",
port: 22,
@ -29,7 +29,7 @@ const initFormModel = (): AccessEditFormSSHConfigModelValues => {
};
};
const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormSSHConfigProps) => {
const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormSSHConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -74,16 +74,16 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const [keyFileList, setKeyFileList] = useState<UploadFile[]>([]);
useDeepCompareEffect(() => {
setKeyFileList(model?.key?.trim() ? [{ uid: "-1", name: "sshkey", status: "done" }] : []);
}, [model]);
setKeyFileList(initialValues?.key?.trim() ? [{ uid: "-1", name: "sshkey", status: "done" }] : []);
}, [initialValues]);
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormSSHConfigModelValues);
onValuesChange?.(values as AccessEditFormSSHConfigFieldValues);
};
const handleKeyFileChange: UploadProps["onChange"] = async ({ file }) => {
@ -95,7 +95,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
setKeyFileList([]);
}
flushSync(() => onModelChange?.(formInst.getFieldsValue(true)));
flushSync(() => onValuesChange?.(formInst.getFieldsValue(true)));
};
return (

14
ui/src/components/access/AccessEditFormTencentCloudConfig.tsx
View File

@ -6,24 +6,24 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type TencentCloudAccessConfig } from "@/domain/access";
type AccessEditFormTencentCloudConfigModelValues = Partial<TencentCloudAccessConfig>;
type AccessEditFormTencentCloudConfigFieldValues = Partial<TencentCloudAccessConfig>;
export type AccessEditFormTencentCloudConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormTencentCloudConfigModelValues;
onModelChange?: (model: AccessEditFormTencentCloudConfigModelValues) => void;
initialValues?: AccessEditFormTencentCloudConfigFieldValues;
onValuesChange?: (values: AccessEditFormTencentCloudConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormTencentCloudConfigModelValues => {
const initFormModel = (): AccessEditFormTencentCloudConfigFieldValues => {
return {
secretId: "",
secretKey: "",
};
};
const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormTencentCloudConfigProps) => {
const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormTencentCloudConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -41,11 +41,11 @@ const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, model, onM
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormTencentCloudConfigModelValues);
onValuesChange?.(values as AccessEditFormTencentCloudConfigFieldValues);
};
return (

14
ui/src/components/access/AccessEditFormVolcEngineConfig.tsx
View File

@ -6,24 +6,24 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type VolcEngineAccessConfig } from "@/domain/access";
type AccessEditFormVolcEngineConfigModelValues = Partial<VolcEngineAccessConfig>;
type AccessEditFormVolcEngineConfigFieldValues = Partial<VolcEngineAccessConfig>;
export type AccessEditFormVolcEngineConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormVolcEngineConfigModelValues;
onModelChange?: (model: AccessEditFormVolcEngineConfigModelValues) => void;
initialValues?: AccessEditFormVolcEngineConfigFieldValues;
onValuesChange?: (values: AccessEditFormVolcEngineConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormVolcEngineConfigModelValues => {
const initFormModel = (): AccessEditFormVolcEngineConfigFieldValues => {
return {
accessKeyId: "",
secretAccessKey: "",
};
};
const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormVolcEngineConfigProps) => {
const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormVolcEngineConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -41,11 +41,11 @@ const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, model, onMod
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormVolcEngineConfigModelValues);
onValuesChange?.(values as AccessEditFormVolcEngineConfigFieldValues);
};
return (

14
ui/src/components/access/AccessEditFormWebhookConfig.tsx
View File

@ -6,23 +6,23 @@ import { z } from "zod";
import { useAntdForm } from "@/hooks";
import { type WebhookAccessConfig } from "@/domain/access";
type AccessEditFormWebhookConfigModelValues = Partial<WebhookAccessConfig>;
type AccessEditFormWebhookConfigFieldValues = Partial<WebhookAccessConfig>;
export type AccessEditFormWebhookConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormWebhookConfigModelValues;
onModelChange?: (model: AccessEditFormWebhookConfigModelValues) => void;
initialValues?: AccessEditFormWebhookConfigFieldValues;
onValuesChange?: (values: AccessEditFormWebhookConfigFieldValues) => void;
};
const initFormModel = (): AccessEditFormWebhookConfigModelValues => {
const initFormModel = (): AccessEditFormWebhookConfigFieldValues => {
return {
url: "",
};
};
const AccessEditFormWebhookConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormWebhookConfigProps) => {
const AccessEditFormWebhookConfig = ({ form, formName, disabled, initialValues, onValuesChange }: AccessEditFormWebhookConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@ -34,11 +34,11 @@ const AccessEditFormWebhookConfig = ({ form, formName, disabled, model, onModelC
const formRule = createSchemaFieldRule(formSchema);
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
initialValues: initialValues ?? initFormModel(),
});
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormWebhookConfigModelValues);
onValuesChange?.(values as AccessEditFormWebhookConfigFieldValues);
};
return (

8
ui/src/components/access/AccessEditModal.tsx
View File

@ -9,7 +9,7 @@ import { getErrMsg } from "@/utils/error";
import AccessEditForm, { type AccessEditFormInstance, type AccessEditFormProps } from "./AccessEditForm";
export type AccessEditModalProps = {
data?: AccessEditFormProps["model"];
data?: AccessEditFormProps["initialValues"];
loading?: boolean;
open?: boolean;
preset: AccessEditFormProps["preset"];
@ -62,13 +62,13 @@ const AccessEditModal = ({ data, loading, trigger, preset, ...props }: AccessEdi
throw "Invalid props: `data`";
}
await createAccess(formRef.current!.getFieldsValue() as AccessModel);
await createAccess(formRef.current!.getFieldsValue(true) as AccessModel);
} else if (preset === "edit") {
if (!data?.id) {
throw "Invalid props: `data`";
}
await updateAccess({ ...data, ...formRef.current!.getFieldsValue() } as AccessModel);
await updateAccess({ ...data, ...formRef.current!.getFieldsValue(true) } as AccessModel);
}
setOpen(false);
@ -106,7 +106,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, ...props }: AccessEdi
onCancel={handleClickCancel}
>
<div className="pt-4 pb-2">
<AccessEditForm ref={formRef} preset={preset === "add" ? "add" : "edit"} model={data} />
<AccessEditForm ref={formRef} initialValues={data} preset={preset === "add" ? "add" : "edit"} />
</div>
</Modal>
</>

6
ui/src/components/access/AccessTypeSelect.tsx
View File

@ -9,7 +9,7 @@ export type AccessTypeSelectProps = Omit<
"filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
>;
const AccessTypeSelect = memo((props: AccessTypeSelectProps) => {
const AccessTypeSelect = (props: AccessTypeSelectProps) => {
const { t } = useTranslation();
const options = Array.from(accessProvidersMap.values()).map((item) => ({
@ -66,6 +66,6 @@ const AccessTypeSelect = memo((props: AccessTypeSelectProps) => {
optionRender={(option) => renderOption(option.data.value)}
/>
);
});
};
export default AccessTypeSelect;
export default memo(AccessTypeSelect);

10
ui/src/components/core/MultipleInput.tsx
View File

@ -177,9 +177,9 @@ type MultipleInputItemProps = Omit<
};
type MultipleInputItemInstance = {
focus: () => void;
blur: () => void;
select: () => void;
focus: InputRef["focus"];
blur: InputRef["blur"];
select: InputRef["select"];
};
const MultipleInputItem = forwardRef<MultipleInputItemInstance, MultipleInputItemProps>(
@ -236,8 +236,8 @@ const MultipleInputItem = forwardRef<MultipleInputItemInstance, MultipleInputIte
};
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current?.focus();
focus: (options) => {
inputRef.current?.focus(options);
},
blur: () => {
inputRef.current?.blur();

58
ui/src/components/notification/NotifyChannelEditForm.tsx
View File

@ -1,6 +1,6 @@
import { forwardRef, useImperativeHandle, useMemo } from "react";
import { useCreation } from "ahooks";
import { Form } from "antd";
import { Form, type FormInstance } from "antd";
import { useAntdForm } from "@/hooks";
import { NOTIFY_CHANNELS, type NotifyChannelsSettingsContent } from "@/domain/settings";
@ -13,27 +13,23 @@ import NotifyChannelEditFormTelegramFields from "./NotifyChannelEditFormTelegram
import NotifyChannelEditFormWebhookFields from "./NotifyChannelEditFormWebhookFields";
import NotifyChannelEditFormWeComFields from "./NotifyChannelEditFormWeComFields";
type NotifyChannelEditFormModelValues = NotifyChannelsSettingsContent[keyof NotifyChannelsSettingsContent];
type NotifyChannelEditFormFieldValues = NotifyChannelsSettingsContent[keyof NotifyChannelsSettingsContent];
export type NotifyChannelEditFormProps = {
className?: string;
style?: React.CSSProperties;
channel: string;
disabled?: boolean;
model?: NotifyChannelEditFormModelValues;
onModelChange?: (model: NotifyChannelEditFormModelValues) => void;
initialValues?: NotifyChannelEditFormFieldValues;
onValuesChange?: (values: NotifyChannelEditFormFieldValues) => void;
};
export type NotifyChannelEditFormInstance = {
getFieldsValue: () => NotifyChannelEditFormModelValues;
resetFields: () => void;
validateFields: () => Promise<NotifyChannelEditFormModelValues>;
};
export type NotifyChannelEditFormInstance = FormInstance;
const NotifyChannelEditForm = forwardRef<NotifyChannelEditFormInstance, NotifyChannelEditFormProps>(
({ className, style, channel, disabled, model, onModelChange }, ref) => {
({ className, style, channel, disabled, initialValues, onValuesChange }, ref) => {
const { form: formInst, formProps } = useAntdForm({
initialValues: model,
initialValues: initialValues,
});
const formName = useCreation(() => `notifyChannelEditForm_${Math.random().toString(36).substring(2, 10)}${new Date().getTime()}`, []);
const formFieldsComponent = useMemo(() => {
@ -61,21 +57,35 @@ const NotifyChannelEditForm = forwardRef<NotifyChannelEditFormInstance, NotifyCh
}
}, [channel]);
const handleFormChange = (_: unknown, values: NotifyChannelEditFormModelValues) => {
onModelChange?.(values);
const handleFormChange = (_: unknown, values: NotifyChannelEditFormFieldValues) => {
onValuesChange?.(values);
};
useImperativeHandle(ref, () => ({
getFieldsValue: () => {
return formInst.getFieldsValue(true);
},
resetFields: () => {
return formInst.resetFields();
},
validateFields: () => {
return formInst.validateFields();
},
}));
useImperativeHandle(ref, () => {
return {
getFieldValue: (name) => formInst.getFieldValue(name),
getFieldsValue: (...args) => {
if (Array.from(args).length === 0) {
return formInst.getFieldsValue(true);
}
return formInst.getFieldsValue(args[0] as any, args[1] as any);
},
getFieldError: (name) => formInst.getFieldError(name),
getFieldsError: (nameList) => formInst.getFieldsError(nameList),
getFieldWarning: (name) => formInst.getFieldWarning(name),
isFieldsTouched: (nameList, allFieldsTouched) => formInst.isFieldsTouched(nameList, allFieldsTouched),
isFieldTouched: (name) => formInst.isFieldTouched(name),
isFieldValidating: (name) => formInst.isFieldValidating(name),
isFieldsValidating: (nameList) => formInst.isFieldsValidating(nameList),
resetFields: (fields) => formInst.resetFields(fields),
setFields: (fields) => formInst.setFields(fields),
setFieldValue: (name, value) => formInst.setFieldValue(name, value),
setFieldsValue: (values) => formInst.setFieldsValue(values),
validateFields: (nameList, config) => formInst.validateFields(nameList, config),
submit: () => formInst.submit(),
} as NotifyChannelEditFormInstance;
});
return (
<Form

10
ui/src/components/notification/NotifyChannels.tsx
View File

@ -32,7 +32,7 @@ const NotifyChannel = ({ className, style, channel }: NotifyChannelProps) => {
await channelFormRef.current!.validateFields();
try {
setChannel(channel, channelFormRef.current!.getFieldsValue());
setChannel(channel, channelFormRef.current!.getFieldsValue(true));
setChannelFormChanged(false);
messageApi.success(t("common.text.operation_succeeded"));
@ -46,7 +46,13 @@ const NotifyChannel = ({ className, style, channel }: NotifyChannelProps) => {
{MessageContextHolder}
{NotificationContextHolder}
<NotifyChannelEditForm ref={channelFormRef} className="mt-2" channel={channel} model={channelConfig} onModelChange={() => setChannelFormChanged(true)} />
<NotifyChannelEditForm
ref={channelFormRef}
className="mt-2"
channel={channel}
initialValues={channelConfig}
onValuesChange={() => setChannelFormChanged(true)}
/>
<Space className="mb-2">
<Button type="primary" disabled={!channelFormChanged} onClick={handleSubmit}>

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

@ -14,7 +14,7 @@ const Panel = ({ open, onOpenChange, children, name }: AddNodePanelProps) => {
}, [open, onOpenChange]);
return (
<Drawer open={open} title={name} width={640} onClose={() => onOpenChange(false)}>
<Drawer destroyOnClose={true} open={open} title={name} width={640} onClose={() => onOpenChange(false)}>
{children}
</Drawer>
);

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

@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { memo, useEffect, useState } from "react";
import { Link } from "react-router";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
@ -18,11 +18,11 @@ export type NotifyNodeFormProps = {
data: WorkflowNode;
};
const initFormModel = () => {
const initFormModel = (): WorkflowNodeConfig => {
return {
subject: "",
message: "",
} as WorkflowNodeConfig;
};
};
const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
@ -115,4 +115,4 @@ const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
);
};
export default NotifyNodeForm;
export default memo(NotifyNodeForm);

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

@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { memo, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Alert, Button, Form, Input, Radio } from "antd";
@ -16,11 +16,11 @@ export type StartNodeFormProps = {
data: WorkflowNode;
};
const initFormModel = () => {
const initFormModel = (): WorkflowNodeConfig => {
return {
executionMethod: "auto",
crontab: "0 0 * * *",
} as WorkflowNodeConfig;
};
};
const StartNodeForm = ({ data }: StartNodeFormProps) => {
@ -110,16 +110,20 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow.nodes.start.form.trigger_cron.tooltip") }}></span>}
extra={
<span>
{t("workflow.nodes.start.form.trigger_cron.extra")}
<br />
{triggerCronLastExecutions.map((d) => (
<>
{dayjs(d).format("YYYY-MM-DD HH:mm:ss")}
<br />
</>
))}
</span>
triggerCronLastExecutions.length > 0 ? (
<span>
{t("workflow.nodes.start.form.trigger_cron.extra")}
<br />
{triggerCronLastExecutions.map((d) => (
<>
{dayjs(d).format("YYYY-MM-DD HH:mm:ss")}
<br />
</>
))}
</span>
) : (
<></>
)
}
>
<Input placeholder={t("workflow.nodes.start.form.trigger_cron.placeholder")} onChange={(e) => handleTriggerCronChange(e.target.value)} />
@ -138,4 +142,4 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
);
};
export default StartNodeForm;
export default memo(StartNodeForm);

8
ui/src/pages/workflows/WorkflowDetail.tsx
View File

@ -125,7 +125,7 @@ const WorkflowDetail = () => {
title={workflow.name}
extra={[
<Button.Group key="actions">
<WorkflowBaseInfoModalForm model={workflow} trigger={<Button>{t("common.button.edit")}</Button>} onFinish={handleBaseInfoFormFinish} />
<WorkflowBaseInfoModalForm initialValues={workflow} trigger={<Button>{t("common.button.edit")}</Button>} onFinish={handleBaseInfoFormFinish} />
<Button onClick={handleEnableChange}>{workflow.enabled ? t("common.button.disable") : t("common.button.enable")}</Button>
@ -183,11 +183,11 @@ const WorkflowDetail = () => {
const WorkflowBaseInfoModalForm = memo(
({
model,
initialValues,
trigger,
onFinish,
}: {
model: Pick<WorkflowModel, "name" | "description">;
initialValues: Pick<WorkflowModel, "name" | "description">;
trigger?: React.ReactElement;
onFinish?: (values: Pick<WorkflowModel, "name" | "description">) => Promise<void | boolean>;
}) => {
@ -229,7 +229,7 @@ const WorkflowBaseInfoModalForm = memo(
formProps,
...formApi
} = useAntdForm<z.infer<typeof formSchema>>({
initialValues: model,
initialValues: initialValues,
onSubmit: async () => {
const ret = await onFinish?.(formInst.getFieldsValue(true));
if (ret != null && !ret) return;

2
ui/src/utils/cron.ts
View File

@ -10,6 +10,8 @@ export const validCronExpression = (expr: string): boolean => {
};
export const getNextCronExecutions = (expr: string, times = 1): Date[] => {
if (!expr) return [];
try {
const now = new Date();
const cron = parseExpression(expr, { currentDate: now, iterator: true });