From 1184e52ba91e10b09dcfd43eb3ba0ded1cdfb521 Mon Sep 17 00:00:00 2001 From: Fu Diwei Date: Wed, 25 Dec 2024 23:20:09 +0800 Subject: [PATCH] refactor(ui): clean code --- ui/src/components/access/AccessEditForm.tsx | 78 +++++++++++-------- .../AccessEditFormACMEHttpReqConfig.tsx | 14 ++-- .../access/AccessEditFormAWSConfig.tsx | 14 ++-- .../access/AccessEditFormAliyunConfig.tsx | 14 ++-- .../access/AccessEditFormBaiduCloudConfig.tsx | 14 ++-- .../access/AccessEditFormBytePlusConfig.tsx | 14 ++-- .../access/AccessEditFormCloudflareConfig.tsx | 14 ++-- .../access/AccessEditFormDogeCloudConfig.tsx | 14 ++-- .../access/AccessEditFormGoDaddyConfig.tsx | 14 ++-- .../AccessEditFormHuaweiCloudConfig.tsx | 14 ++-- .../access/AccessEditFormKubernetesConfig.tsx | 20 ++--- .../access/AccessEditFormLocalConfig.tsx | 14 ++-- .../access/AccessEditFormNameDotComConfig.tsx | 14 ++-- .../access/AccessEditFormNameSiloConfig.tsx | 14 ++-- .../access/AccessEditFormPowerDNSConfig.tsx | 14 ++-- .../access/AccessEditFormQiniuConfig.tsx | 14 ++-- .../access/AccessEditFormSSHConfig.tsx | 20 ++--- .../AccessEditFormTencentCloudConfig.tsx | 14 ++-- .../access/AccessEditFormVolcEngineConfig.tsx | 14 ++-- .../access/AccessEditFormWebhookConfig.tsx | 14 ++-- ui/src/components/access/AccessEditModal.tsx | 8 +- ui/src/components/access/AccessTypeSelect.tsx | 6 +- ui/src/components/core/MultipleInput.tsx | 10 +-- .../notification/NotifyChannelEditForm.tsx | 58 ++++++++------ .../notification/NotifyChannels.tsx | 10 ++- ui/src/components/workflow/Panel.tsx | 2 +- .../workflow/node/NotifyNodeForm.tsx | 8 +- .../workflow/node/StartNodeForm.tsx | 32 ++++---- ui/src/pages/workflows/WorkflowDetail.tsx | 8 +- ui/src/utils/cron.ts | 2 + 30 files changed, 267 insertions(+), 233 deletions(-) diff --git a/ui/src/components/access/AccessEditForm.tsx b/ui/src/components/access/AccessEditForm.tsx index 511c28f4..b94558cd 100644 --- a/ui/src/components/access/AccessEditForm.tsx +++ b/ui/src/components/access/AccessEditForm.tsx @@ -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>; +type AccessEditFormFieldValues = Partial>; 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; -}; +export type AccessEditFormInstance = FormInstance; -const AccessEditForm = forwardRef(({ className, style, disabled, model, preset, onModelChange }, ref) => { +const AccessEditForm = forwardRef(({ className, style, disabled, initialValues, preset, onValuesChange }, ref) => { const { t } = useTranslation(); const formSchema = z.object({ @@ -59,14 +55,14 @@ const AccessEditForm = forwardRef(( config: z.any(), }); const formRule = createSchemaFieldRule(formSchema); - const { form: formInst, formProps } = useAntdForm>({ - initialValues: model as Partial>, + 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(( 注意：如果追加新的子组件，请保持以 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 ; @@ -116,36 +112,52 @@ const AccessEditForm = forwardRef(( case ACCESS_PROVIDER_TYPES.WEBHOOK: return ; } - }, [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 ( diff --git a/ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx b/ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx index b03f6e30..60aecc36 100644 --- a/ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx +++ b/ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx @@ -6,24 +6,24 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type ACMEHttpReqAccessConfig } from "@/domain/access"; -type AccessEditFormACMEHttpReqConfigModelValues = Partial; +type AccessEditFormACMEHttpReqConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormACMEHttpReqConfigModelValues); + onValuesChange?.(values as AccessEditFormACMEHttpReqConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormAWSConfig.tsx b/ui/src/components/access/AccessEditFormAWSConfig.tsx index f3630d7e..67bac4a9 100644 --- a/ui/src/components/access/AccessEditFormAWSConfig.tsx +++ b/ui/src/components/access/AccessEditFormAWSConfig.tsx @@ -6,17 +6,17 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type AWSAccessConfig } from "@/domain/access"; -type AccessEditFormAWSConfigModelValues = Partial; +type AccessEditFormAWSConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormAWSConfigModelValues); + onValuesChange?.(values as AccessEditFormAWSConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormAliyunConfig.tsx b/ui/src/components/access/AccessEditFormAliyunConfig.tsx index d86d0462..affac32b 100644 --- a/ui/src/components/access/AccessEditFormAliyunConfig.tsx +++ b/ui/src/components/access/AccessEditFormAliyunConfig.tsx @@ -6,24 +6,24 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type AliyunAccessConfig } from "@/domain/access"; -type AccessEditFormAliyunConfigModelValues = Partial; +type AccessEditFormAliyunConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormAliyunConfigModelValues); + onValuesChange?.(values as AccessEditFormAliyunConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx b/ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx index 9babb455..854f5059 100644 --- a/ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx +++ b/ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx @@ -6,24 +6,24 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type BaiduCloudAccessConfig } from "@/domain/access"; -type AccessEditFormBaiduCloudConfigModelValues = Partial; +type AccessEditFormBaiduCloudConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormBaiduCloudConfigModelValues); + onValuesChange?.(values as AccessEditFormBaiduCloudConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormBytePlusConfig.tsx b/ui/src/components/access/AccessEditFormBytePlusConfig.tsx index df6bd2df..b6dac7d4 100644 --- a/ui/src/components/access/AccessEditFormBytePlusConfig.tsx +++ b/ui/src/components/access/AccessEditFormBytePlusConfig.tsx @@ -6,24 +6,24 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type BytePlusAccessConfig } from "@/domain/access"; -type AccessEditFormBytePlusConfigModelValues = Partial; +type AccessEditFormBytePlusConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormBytePlusConfigModelValues); + onValuesChange?.(values as AccessEditFormBytePlusConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormCloudflareConfig.tsx b/ui/src/components/access/AccessEditFormCloudflareConfig.tsx index 27dcb3f9..32e55408 100644 --- a/ui/src/components/access/AccessEditFormCloudflareConfig.tsx +++ b/ui/src/components/access/AccessEditFormCloudflareConfig.tsx @@ -6,23 +6,23 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type CloudflareAccessConfig } from "@/domain/access"; -type AccessEditFormCloudflareConfigModelValues = Partial; +type AccessEditFormCloudflareConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormCloudflareConfigModelValues); + onValuesChange?.(values as AccessEditFormCloudflareConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormDogeCloudConfig.tsx b/ui/src/components/access/AccessEditFormDogeCloudConfig.tsx index 55bb0dba..6c9f8dd3 100644 --- a/ui/src/components/access/AccessEditFormDogeCloudConfig.tsx +++ b/ui/src/components/access/AccessEditFormDogeCloudConfig.tsx @@ -6,24 +6,24 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type DogeCloudAccessConfig } from "@/domain/access"; -type AccessEditFormDogeCloudConfigModelValues = Partial; +type AccessEditFormDogeCloudConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormDogeCloudConfigModelValues); + onValuesChange?.(values as AccessEditFormDogeCloudConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormGoDaddyConfig.tsx b/ui/src/components/access/AccessEditFormGoDaddyConfig.tsx index 307fa250..1f6561df 100644 --- a/ui/src/components/access/AccessEditFormGoDaddyConfig.tsx +++ b/ui/src/components/access/AccessEditFormGoDaddyConfig.tsx @@ -6,24 +6,24 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type GoDaddyAccessConfig } from "@/domain/access"; -type AccessEditFormGoDaddyConfigModelValues = Partial; +type AccessEditFormGoDaddyConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormGoDaddyConfigModelValues); + onValuesChange?.(values as AccessEditFormGoDaddyConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx b/ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx index b0b13d20..2893674a 100644 --- a/ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx +++ b/ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx @@ -6,17 +6,17 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type HuaweiCloudAccessConfig } from "@/domain/access"; -type AccessEditFormHuaweiCloudConfigModelValues = Partial; +type AccessEditFormHuaweiCloudConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormHuaweiCloudConfigModelValues); + onValuesChange?.(values as AccessEditFormHuaweiCloudConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormKubernetesConfig.tsx b/ui/src/components/access/AccessEditFormKubernetesConfig.tsx index e96e6c2c..f26dc8e0 100644 --- a/ui/src/components/access/AccessEditFormKubernetesConfig.tsx +++ b/ui/src/components/access/AccessEditFormKubernetesConfig.tsx @@ -11,21 +11,21 @@ import { useAntdForm } from "@/hooks"; import { type KubernetesAccessConfig } from "@/domain/access"; import { readFileContent } from "@/utils/file"; -type AccessEditFormKubernetesConfigModelValues = Partial; +type AccessEditFormKubernetesConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const [kubeFileList, setKubeFileList] = useState([]); 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) => { - 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 ( diff --git a/ui/src/components/access/AccessEditFormLocalConfig.tsx b/ui/src/components/access/AccessEditFormLocalConfig.tsx index 406b18b7..75af6e60 100644 --- a/ui/src/components/access/AccessEditFormLocalConfig.tsx +++ b/ui/src/components/access/AccessEditFormLocalConfig.tsx @@ -3,28 +3,28 @@ import { Form, type FormInstance } from "antd"; import { useAntdForm } from "@/hooks"; import { type LocalAccessConfig } from "@/domain/access"; -type AccessEditFormLocalConfigModelValues = Partial; +type AccessEditFormLocalConfigFieldValues = Partial; 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
; diff --git a/ui/src/components/access/AccessEditFormNameDotComConfig.tsx b/ui/src/components/access/AccessEditFormNameDotComConfig.tsx index 163bb135..7f62ad3b 100644 --- a/ui/src/components/access/AccessEditFormNameDotComConfig.tsx +++ b/ui/src/components/access/AccessEditFormNameDotComConfig.tsx @@ -6,24 +6,24 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type NameDotComAccessConfig } from "@/domain/access"; -type AccessEditFormNameDotComConfigModelValues = Partial; +type AccessEditFormNameDotComConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormNameDotComConfigModelValues); + onValuesChange?.(values as AccessEditFormNameDotComConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormNameSiloConfig.tsx b/ui/src/components/access/AccessEditFormNameSiloConfig.tsx index 29633f4c..bb674d84 100644 --- a/ui/src/components/access/AccessEditFormNameSiloConfig.tsx +++ b/ui/src/components/access/AccessEditFormNameSiloConfig.tsx @@ -6,23 +6,23 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type NameSiloAccessConfig } from "@/domain/access"; -type AccessEditFormNameSiloConfigModelValues = Partial; +type AccessEditFormNameSiloConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormNameSiloConfigModelValues); + onValuesChange?.(values as AccessEditFormNameSiloConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormPowerDNSConfig.tsx b/ui/src/components/access/AccessEditFormPowerDNSConfig.tsx index 4e0ef195..a20b1c48 100644 --- a/ui/src/components/access/AccessEditFormPowerDNSConfig.tsx +++ b/ui/src/components/access/AccessEditFormPowerDNSConfig.tsx @@ -6,24 +6,24 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type PowerDNSAccessConfig } from "@/domain/access"; -type AccessEditFormPowerDNSConfigModelValues = Partial; +type AccessEditFormPowerDNSConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormPowerDNSConfigModelValues); + onValuesChange?.(values as AccessEditFormPowerDNSConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormQiniuConfig.tsx b/ui/src/components/access/AccessEditFormQiniuConfig.tsx index f75149c8..93aef30a 100644 --- a/ui/src/components/access/AccessEditFormQiniuConfig.tsx +++ b/ui/src/components/access/AccessEditFormQiniuConfig.tsx @@ -6,24 +6,24 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type QiniuAccessConfig } from "@/domain/access"; -type AccessEditFormQiniuConfigModelValues = Partial; +type AccessEditFormQiniuConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormQiniuConfigModelValues); + onValuesChange?.(values as AccessEditFormQiniuConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormSSHConfig.tsx b/ui/src/components/access/AccessEditFormSSHConfig.tsx index 2b209204..46c7b002 100644 --- a/ui/src/components/access/AccessEditFormSSHConfig.tsx +++ b/ui/src/components/access/AccessEditFormSSHConfig.tsx @@ -11,17 +11,17 @@ import { useAntdForm } from "@/hooks"; import { type SSHAccessConfig } from "@/domain/access"; import { readFileContent } from "@/utils/file"; -type AccessEditFormSSHConfigModelValues = Partial; +type AccessEditFormSSHConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const [keyFileList, setKeyFileList] = useState([]); 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) => { - 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 ( diff --git a/ui/src/components/access/AccessEditFormTencentCloudConfig.tsx b/ui/src/components/access/AccessEditFormTencentCloudConfig.tsx index 3f2322d9..2c035518 100644 --- a/ui/src/components/access/AccessEditFormTencentCloudConfig.tsx +++ b/ui/src/components/access/AccessEditFormTencentCloudConfig.tsx @@ -6,24 +6,24 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type TencentCloudAccessConfig } from "@/domain/access"; -type AccessEditFormTencentCloudConfigModelValues = Partial; +type AccessEditFormTencentCloudConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormTencentCloudConfigModelValues); + onValuesChange?.(values as AccessEditFormTencentCloudConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormVolcEngineConfig.tsx b/ui/src/components/access/AccessEditFormVolcEngineConfig.tsx index cf1a196d..1641b65d 100644 --- a/ui/src/components/access/AccessEditFormVolcEngineConfig.tsx +++ b/ui/src/components/access/AccessEditFormVolcEngineConfig.tsx @@ -6,24 +6,24 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type VolcEngineAccessConfig } from "@/domain/access"; -type AccessEditFormVolcEngineConfigModelValues = Partial; +type AccessEditFormVolcEngineConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormVolcEngineConfigModelValues); + onValuesChange?.(values as AccessEditFormVolcEngineConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditFormWebhookConfig.tsx b/ui/src/components/access/AccessEditFormWebhookConfig.tsx index ecf6119d..a94355c8 100644 --- a/ui/src/components/access/AccessEditFormWebhookConfig.tsx +++ b/ui/src/components/access/AccessEditFormWebhookConfig.tsx @@ -6,23 +6,23 @@ import { z } from "zod"; import { useAntdForm } from "@/hooks"; import { type WebhookAccessConfig } from "@/domain/access"; -type AccessEditFormWebhookConfigModelValues = Partial; +type AccessEditFormWebhookConfigFieldValues = Partial; 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>({ form: form, - initialValues: model ?? initFormModel(), + initialValues: initialValues ?? initFormModel(), }); const handleFormChange = (_: unknown, values: z.infer) => { - onModelChange?.(values as AccessEditFormWebhookConfigModelValues); + onValuesChange?.(values as AccessEditFormWebhookConfigFieldValues); }; return ( diff --git a/ui/src/components/access/AccessEditModal.tsx b/ui/src/components/access/AccessEditModal.tsx index 38c10831..a33f425b 100644 --- a/ui/src/components/access/AccessEditModal.tsx +++ b/ui/src/components/access/AccessEditModal.tsx @@ -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} >
- +
diff --git a/ui/src/components/access/AccessTypeSelect.tsx b/ui/src/components/access/AccessTypeSelect.tsx index 1899d165..646c9d30 100644 --- a/ui/src/components/access/AccessTypeSelect.tsx +++ b/ui/src/components/access/AccessTypeSelect.tsx @@ -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); diff --git a/ui/src/components/core/MultipleInput.tsx b/ui/src/components/core/MultipleInput.tsx index f9887b05..1f14e866 100644 --- a/ui/src/components/core/MultipleInput.tsx +++ b/ui/src/components/core/MultipleInput.tsx @@ -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( @@ -236,8 +236,8 @@ const MultipleInputItem = forwardRef ({ - focus: () => { - inputRef.current?.focus(); + focus: (options) => { + inputRef.current?.focus(options); }, blur: () => { inputRef.current?.blur(); diff --git a/ui/src/components/notification/NotifyChannelEditForm.tsx b/ui/src/components/notification/NotifyChannelEditForm.tsx index a5e87324..21de2ba3 100644 --- a/ui/src/components/notification/NotifyChannelEditForm.tsx +++ b/ui/src/components/notification/NotifyChannelEditForm.tsx @@ -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; -}; +export type NotifyChannelEditFormInstance = FormInstance; const NotifyChannelEditForm = forwardRef( - ({ 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 { - 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 (
{ 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} - setChannelFormChanged(true)} /> + setChannelFormChanged(true)} + /> } onFinish={handleBaseInfoFormFinish} /> + {t("common.button.edit")}} onFinish={handleBaseInfoFormFinish} /> @@ -183,11 +183,11 @@ const WorkflowDetail = () => { const WorkflowBaseInfoModalForm = memo( ({ - model, + initialValues, trigger, onFinish, }: { - model: Pick; + initialValues: Pick; trigger?: React.ReactElement; onFinish?: (values: Pick) => Promise; }) => { @@ -229,7 +229,7 @@ const WorkflowBaseInfoModalForm = memo( formProps, ...formApi } = useAntdForm>({ - initialValues: model, + initialValues: initialValues, onSubmit: async () => { const ret = await onFinish?.(formInst.getFieldsValue(true)); if (ret != null && !ret) return; diff --git a/ui/src/utils/cron.ts b/ui/src/utils/cron.ts index 89db10b9..c2ca22e2 100644 --- a/ui/src/utils/cron.ts +++ b/ui/src/utils/cron.ts @@ -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 });