jiazhizhong/certimate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): duplicate form names

Browse Source
This commit is contained in:
Fu Diwei
2024-12-20 12:06:30 +08:00
parent d143df3f9f
commit cae33cfc4f
27 changed files with 116 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,32 +1,11 @@
import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { useCreation, useDeepCompareEffect } from "ahooks";
import { Form, Input } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
import {
ACCESS_PROVIDER_TYPES,
type AccessModel,
type ACMEHttpReqAccessConfig,
type AliyunAccessConfig,
type AWSAccessConfig,
type BaiduCloudAccessConfig,
type BytePlusAccessConfig,
type CloudflareAccessConfig,
type DogeCloudAccessConfig,
type GoDaddyAccessConfig,
type HuaweiCloudAccessConfig,
type KubernetesAccessConfig,
type LocalAccessConfig,
type NameSiloAccessConfig,
type PowerDNSAccessConfig,
type QiniuAccessConfig,
type SSHAccessConfig,
type TencentCloudAccessConfig,
type VolcEngineAccessConfig,
type WebhookAccessConfig,
} from "@/domain/access";
import { ACCESS_PROVIDER_TYPES, type AccessModel } from "@/domain/access";
import AccessTypeSelect from "./AccessTypeSelect";
import AccessEditFormACMEHttpReqConfig from "./AccessEditFormACMEHttpReqConfig";
import AccessEditFormAliyunConfig from "./AccessEditFormAliyunConfig";
@@ -48,13 +27,14 @@ import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";
type AccessEditFormModelType = Partial<MaybeModelRecord<AccessModel>>;
type AccessEditFormModes = "add" | "edit";
export type AccessEditFormProps = {
className?: string;
style?: React.CSSProperties;
disabled?: boolean;
loading?: boolean;
mode: "add" | "edit";
mode: AccessEditFormModes;
model?: AccessEditFormModelType;
onModelChange?: (model: AccessEditFormModelType) => void;
};
@@ -91,53 +71,55 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
}, [model?.configType]);
const [configFormInst] = Form.useForm();
const configFormName = useCreation(() => `accessEditForm_config${Math.random().toString(36).substring(2, 10)}${new Date().getTime()}`, []);
const configFormComponent = useMemo(() => {
/*
注意：如果追加新的子组件，请保持以 ASCII 排序。
NOTICE: If you add new child component, please keep ASCII order.
*/
const configFormProps = { form: configFormInst, formName: configFormName, disabled: disabled, loading: loading, model: model?.config };
switch (configType) {
case ACCESS_PROVIDER_TYPES.ACMEHTTPREQ:
return <AccessEditFormACMEHttpReqConfig form={configFormInst} model={model?.config as ACMEHttpReqAccessConfig} />;
return <AccessEditFormACMEHttpReqConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.ALIYUN:
return <AccessEditFormAliyunConfig form={configFormInst} model={model?.config as AliyunAccessConfig} />;
return <AccessEditFormAliyunConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.AWS:
return <AccessEditFormAWSConfig form={configFormInst} model={model?.config as AWSAccessConfig} />;
return <AccessEditFormAWSConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.BAIDUCLOUD:
return <AccessEditFormBaiduCloudConfig form={configFormInst} model={model?.config as BaiduCloudAccessConfig} />;
return <AccessEditFormBaiduCloudConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.BYTEPLUS:
return <AccessEditFormBytePlusConfig form={configFormInst} model={model?.config as BytePlusAccessConfig} />;
return <AccessEditFormBytePlusConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.CLOUDFLARE:
return <AccessEditFormCloudflareConfig form={configFormInst} model={model?.config as CloudflareAccessConfig} />;
return <AccessEditFormCloudflareConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.DOGECLOUD:
return <AccessEditFormDogeCloudConfig form={configFormInst} model={model?.config as DogeCloudAccessConfig} />;
return <AccessEditFormDogeCloudConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.GODADDY:
return <AccessEditFormGoDaddyConfig form={configFormInst} model={model?.config as GoDaddyAccessConfig} />;
return <AccessEditFormGoDaddyConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.HUAWEICLOUD:
return <AccessEditFormHuaweiCloudConfig form={configFormInst} model={model?.config as HuaweiCloudAccessConfig} />;
return <AccessEditFormHuaweiCloudConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.KUBERNETES:
return <AccessEditFormKubernetesConfig form={configFormInst} model={model?.config as KubernetesAccessConfig} />;
return <AccessEditFormKubernetesConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.LOCAL:
return <AccessEditFormLocalConfig form={configFormInst} model={model?.config as LocalAccessConfig} />;
return <AccessEditFormLocalConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.NAMESILO:
return <AccessEditFormNameSiloConfig form={configFormInst} model={model?.config as NameSiloAccessConfig} />;
return <AccessEditFormNameSiloConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.POWERDNS:
return <AccessEditFormPowerDNSConfig form={configFormInst} model={model?.config as PowerDNSAccessConfig} />;
return <AccessEditFormPowerDNSConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.QINIU:
return <AccessEditFormQiniuConfig form={configFormInst} model={model?.config as QiniuAccessConfig} />;
return <AccessEditFormQiniuConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.SSH:
return <AccessEditFormSSHConfig form={configFormInst} model={model?.config as SSHAccessConfig} />;
return <AccessEditFormSSHConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.TENCENTCLOUD:
return <AccessEditFormTencentCloudConfig form={configFormInst} model={model?.config as TencentCloudAccessConfig} />;
return <AccessEditFormTencentCloudConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.VOLCENGINE:
return <AccessEditFormVolcEngineConfig form={configFormInst} model={model?.config as VolcEngineAccessConfig} />;
return <AccessEditFormVolcEngineConfig {...configFormProps} />;
case ACCESS_PROVIDER_TYPES.WEBHOOK:
return <AccessEditFormWebhookConfig form={configFormInst} model={model?.config as WebhookAccessConfig} />;
return <AccessEditFormWebhookConfig {...configFormProps} />;
}
}, [model, configType, configFormInst]);
const handleFormProviderChange = (name: string) => {
if (name === "configForm") {
if (name === configFormName) {
form.setFieldValue("config", configFormInst.getFieldsValue());
onModelChange?.(form.getFieldsValue(true));
}

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

@@ -11,6 +11,7 @@ type AccessEditFormACMEHttpReqConfigModelType = Partial<ACMEHttpReqAccessConfig>
export type AccessEditFormACMEHttpReqConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormACMEHttpReqConfigModelType;
@@ -24,7 +25,7 @@ const initModel = () => {
} as AccessEditFormACMEHttpReqConfigModelType;
};
const AccessEditFormACMEHttpReqConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormACMEHttpReqConfigProps) => {
const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormACMEHttpReqConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -55,7 +56,7 @@ const AccessEditFormACMEHttpReqConfig = ({ form, disabled, loading, model, onMod
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="endpoint"
label={t("access.form.acmehttpreq_endpoint.label")}

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

@@ -11,6 +11,7 @@ type AccessEditFormAWSConfigModelType = Partial<AWSAccessConfig>;
export type AccessEditFormAWSConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormAWSConfigModelType;
@@ -23,7 +24,7 @@ const initModel = () => {
} as AccessEditFormAWSConfigModelType;
};
const AccessEditFormAWSConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormAWSConfigProps) => {
const AccessEditFormAWSConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormAWSConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -64,7 +65,7 @@ const AccessEditFormAWSConfig = ({ form, disabled, loading, model, onModelChange
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="accessKeyId"
label={t("access.form.aws_access_key_id.label")}

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

@@ -11,6 +11,7 @@ type AccessEditFormAliyunConfigModelType = Partial<AliyunAccessConfig>;
export type AccessEditFormAliyunConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormAliyunConfigModelType;
@@ -21,7 +22,7 @@ const initModel = () => {
return {} as AccessEditFormAliyunConfigModelType;
};
const AccessEditFormAliyunConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormAliyunConfigProps) => {
const AccessEditFormAliyunConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormAliyunConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -48,7 +49,7 @@ const AccessEditFormAliyunConfig = ({ form, disabled, loading, model, onModelCha
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="accessKeyId"
label={t("access.form.aliyun_access_key_id.label")}

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

@@ -11,6 +11,7 @@ type AccessEditFormBaiduCloudConfigModelType = Partial<BaiduCloudAccessConfig>;
export type AccessEditFormBaiduCloudConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormBaiduCloudConfigModelType;
@@ -21,7 +22,7 @@ const initModel = () => {
return {} as AccessEditFormBaiduCloudConfigModelType;
};
const AccessEditFormBaiduCloudConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormBaiduCloudConfigProps) => {
const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormBaiduCloudConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -48,7 +49,7 @@ const AccessEditFormBaiduCloudConfig = ({ form, disabled, loading, model, onMode
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="accessKeyId"
label={t("access.form.baiducloud_access_key_id.label")}

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

@@ -11,6 +11,7 @@ type AccessEditFormBytePlusConfigModelType = Partial<BytePlusAccessConfig>;
export type AccessEditFormBytePlusConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormBytePlusConfigModelType;
@@ -21,7 +22,7 @@ const initModel = () => {
return {} as AccessEditFormBytePlusConfigModelType;
};
const AccessEditFormBytePlusConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormBytePlusConfigProps) => {
const AccessEditFormBytePlusConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormBytePlusConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -48,7 +49,7 @@ const AccessEditFormBytePlusConfig = ({ form, disabled, loading, model, onModelC
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="accessKey"
label={t("access.form.byteplus_access_key.label")}

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

@@ -11,6 +11,7 @@ type AccessEditFormCloudflareConfigModelType = Partial<CloudflareAccessConfig>;
export type AccessEditFormCloudflareConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormCloudflareConfigModelType;
@@ -21,7 +22,7 @@ const initModel = () => {
return {} as AccessEditFormCloudflareConfigModelType;
};
const AccessEditFormCloudflareConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormCloudflareConfigProps) => {
const AccessEditFormCloudflareConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormCloudflareConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -43,7 +44,7 @@ const AccessEditFormCloudflareConfig = ({ form, disabled, loading, model, onMode
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="dnsApiToken"
label={t("access.form.cloudflare_dns_api_token.label")}

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

@@ -11,6 +11,7 @@ type AccessEditFormDogeCloudConfigModelType = Partial<DogeCloudAccessConfig>;
export type AccessEditFormDogeCloudConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormDogeCloudConfigModelType;
@@ -21,7 +22,7 @@ const initModel = () => {
return {} as AccessEditFormDogeCloudConfigModelType;
};
const AccessEditFormDogeCloudConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormDogeCloudConfigProps) => {
const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormDogeCloudConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -48,7 +49,7 @@ const AccessEditFormDogeCloudConfig = ({ form, disabled, loading, model, onModel
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="accessKey"
label={t("access.form.dogecloud_access_key.label")}

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

@@ -11,6 +11,7 @@ type AccessEditFormGoDaddyConfigModelType = Partial<GoDaddyAccessConfig>;
export type AccessEditFormGoDaddyConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormGoDaddyConfigModelType;
@@ -21,7 +22,7 @@ const initModel = () => {
return {} as AccessEditFormGoDaddyConfigModelType;
};
const AccessEditFormGoDaddyConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormGoDaddyConfigProps) => {
const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormGoDaddyConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -48,7 +49,7 @@ const AccessEditFormGoDaddyConfig = ({ form, disabled, loading, model, onModelCh
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="apiKey"
label={t("access.form.godaddy_api_key.label")}

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

@@ -11,6 +11,7 @@ type AccessEditFormHuaweiCloudConfigModelType = Partial<HuaweiCloudAccessConfig>
export type AccessEditFormHuaweiCloudConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormHuaweiCloudConfigModelType;
@@ -23,7 +24,7 @@ const initModel = () => {
} as AccessEditFormHuaweiCloudConfigModelType;
};
const AccessEditFormHuaweiCloudConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormHuaweiCloudConfigProps) => {
const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormHuaweiCloudConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -57,7 +58,7 @@ const AccessEditFormHuaweiCloudConfig = ({ form, disabled, loading, model, onMod
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="accessKeyId"
label={t("access.form.huaweicloud_access_key_id.label")}

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

@@ -14,6 +14,7 @@ type AccessEditFormKubernetesConfigModelType = Partial<KubernetesAccessConfig>;
export type AccessEditFormKubernetesConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormKubernetesConfigModelType;
@@ -24,7 +25,7 @@ const initModel = () => {
return {} as AccessEditFormKubernetesConfigModelType;
};
const AccessEditFormKubernetesConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormKubernetesConfigProps) => {
const AccessEditFormKubernetesConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormKubernetesConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -32,7 +33,8 @@ const AccessEditFormKubernetesConfig = ({ form, disabled, loading, model, onMode
.string()
.trim()
.min(0, t("access.form.k8s_kubeconfig.placeholder"))
.max(20480, t("common.errmsg.string_max", { max: 20480 })),
.max(20480, t("common.errmsg.string_max", { max: 20480 }))
.nullish(),
});
const formRule = createSchemaFieldRule(formSchema);
@@ -61,7 +63,7 @@ const AccessEditFormKubernetesConfig = ({ form, disabled, loading, model, onMode
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="kubeConfig"
label={t("access.form.k8s_kubeconfig.label")}

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

@@ -8,6 +8,7 @@ type AccessEditFormLocalConfigModelType = Partial<LocalAccessConfig>;
export type AccessEditFormLocalConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormLocalConfigModelType;
@@ -18,13 +19,13 @@ const initModel = () => {
return {} as AccessEditFormLocalConfigModelType;
};
const AccessEditFormLocalConfig = ({ form, disabled, loading, model }: AccessEditFormLocalConfigProps) => {
const AccessEditFormLocalConfig = ({ form, formName, disabled, loading, model }: AccessEditFormLocalConfigProps) => {
const [initialValues, setInitialValues] = useState(model ?? initModel());
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);
return <Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm"></Form>;
return <Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName}></Form>;
};
export default AccessEditFormLocalConfig;

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

@@ -11,6 +11,7 @@ type AccessEditFormNameSiloConfigModelType = Partial<NameSiloAccessConfig>;
export type AccessEditFormNameSiloConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormNameSiloConfigModelType;
@@ -21,7 +22,7 @@ const initModel = () => {
return {} as AccessEditFormNameSiloConfigModelType;
};
const AccessEditFormNameSiloConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormNameSiloConfigProps) => {
const AccessEditFormNameSiloConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormNameSiloConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -43,7 +44,7 @@ const AccessEditFormNameSiloConfig = ({ form, disabled, loading, model, onModelC
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="apiKey"
label={t("access.form.namesilo_api_key.label")}

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

@@ -11,6 +11,7 @@ type AccessEditFormPowerDNSConfigModelType = Partial<PowerDNSAccessConfig>;
export type AccessEditFormPowerDNSConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormPowerDNSConfigModelType;
@@ -21,7 +22,7 @@ const initModel = () => {
return {} as AccessEditFormPowerDNSConfigModelType;
};
const AccessEditFormPowerDNSConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormPowerDNSConfigProps) => {
const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormPowerDNSConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -44,7 +45,7 @@ const AccessEditFormPowerDNSConfig = ({ form, disabled, loading, model, onModelC
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="apiUrl"
label={t("access.form.powerdns_api_url.label")}

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

@@ -11,6 +11,7 @@ type AccessEditFormQiniuConfigModelType = Partial<QiniuAccessConfig>;
export type AccessEditFormQiniuConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormQiniuConfigModelType;
@@ -21,7 +22,7 @@ const initModel = () => {
return {} as AccessEditFormQiniuConfigModelType;
};
const AccessEditFormQiniuConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormQiniuConfigProps) => {
const AccessEditFormQiniuConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormQiniuConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -48,7 +49,7 @@ const AccessEditFormQiniuConfig = ({ form, disabled, loading, model, onModelChan
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="accessKey"
label={t("access.form.qiniu_access_key.label")}

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

@@ -14,6 +14,7 @@ type AccessEditFormSSHConfigModelType = Partial<SSHAccessConfig>;
export type AccessEditFormSSHConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormSSHConfigModelType;
@@ -28,7 +29,7 @@ const initModel = () => {
} as AccessEditFormSSHConfigModelType;
};
const AccessEditFormSSHConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormSSHConfigProps) => {
const AccessEditFormSSHConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormSSHConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -97,7 +98,7 @@ const AccessEditFormSSHConfig = ({ form, disabled, loading, model, onModelChange
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<div className="flex space-x-2">
<div className="w-2/3">
<Form.Item name="host" label={t("access.form.ssh_host.label")} rules={[formRule]}>

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

@@ -11,6 +11,7 @@ type AccessEditFormTencentCloudConfigModelType = Partial<TencentCloudAccessConfi
export type AccessEditFormTencentCloudConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormTencentCloudConfigModelType;
@@ -21,7 +22,7 @@ const initModel = () => {
return {} as AccessEditFormTencentCloudConfigModelType;
};
const AccessEditFormTencentCloudConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormTencentCloudConfigProps) => {
const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormTencentCloudConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -48,7 +49,7 @@ const AccessEditFormTencentCloudConfig = ({ form, disabled, loading, model, onMo
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="secretId"
label={t("access.form.tencentcloud_secret_id.label")}

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

@@ -11,6 +11,7 @@ type AccessEditFormVolcEngineConfigModelType = Partial<VolcEngineAccessConfig>;
export type AccessEditFormVolcEngineConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormVolcEngineConfigModelType;
@@ -21,7 +22,7 @@ const initModel = () => {
return {} as AccessEditFormVolcEngineConfigModelType;
};
const AccessEditFormVolcEngineConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormVolcEngineConfigProps) => {
const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormVolcEngineConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -48,7 +49,7 @@ const AccessEditFormVolcEngineConfig = ({ form, disabled, loading, model, onMode
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item
name="accessKeyId"
label={t("access.form.volcengine_access_key_id.label")}

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

@@ -10,6 +10,7 @@ type AccessEditFormWebhookConfigModelType = Partial<WebhookAccessConfig>;
export type AccessEditFormWebhookConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
loading?: boolean;
model?: AccessEditFormWebhookConfigModelType;
@@ -20,7 +21,7 @@ const initModel = () => {
return {} as AccessEditFormWebhookConfigModelType;
};
const AccessEditFormWebhookConfig = ({ form, disabled, loading, model, onModelChange }: AccessEditFormWebhookConfigProps) => {
const AccessEditFormWebhookConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormWebhookConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -41,7 +42,7 @@ const AccessEditFormWebhookConfig = ({ form, disabled, loading, model, onModelCh
};
return (
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name="configForm" onValuesChange={handleFormChange}>
<Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form.Item name="url" label={t("access.form.webhook_url.label")} rules={[formRule]}>
<Input placeholder={t("access.form.webhook_url.placeholder")} />
</Form.Item>

5
ui/src/components/access/AccessSelect.tsx
View File

@@ -6,13 +6,13 @@ import { useAccessStore } from "@/stores/access";
export type AccessTypeSelectProps = Omit<
SelectProps,
"filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
"filterOption" | "filterSort" | "labelRender" | "loading" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
> & {
filter?: (record: AccessModel) => boolean;
};
const AccessSelect = ({ filter, ...props }: AccessTypeSelectProps) => {
const { accesses, fetchAccesses } = useAccessStore();
const { initialized, accesses, fetchAccesses } = useAccessStore();
useEffect(() => {
fetchAccesses();
}, [fetchAccesses]);
@@ -64,6 +64,7 @@ const AccessSelect = ({ filter, ...props }: AccessTypeSelectProps) => {
return <Typography.Text type="secondary">{props.placeholder}</Typography.Text>;
}}
loading={!initialized}
options={options}
optionFilterProp="label"
optionLabelProp={undefined}