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

fix(ui): deep compare when model change in AccessEditForm

Browse Source
This commit is contained in:
Fu Diwei
2024-12-19 21:34:17 +08:00
parent 84a3817b15
commit d143df3f9f
29 changed files with 102 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -80,7 +81,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
const [form] = Form.useForm<z.infer<typeof formSchema>>();
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model as Partial<z.infer<typeof formSchema>>);
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model as Partial<z.infer<typeof formSchema>>);
}, [model]);
@@ -90,7 +91,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
}, [model?.configType]);
const [configFormInst] = Form.useForm();
const configForm = useMemo(() => {
const configFormComponent = useMemo(() => {
/*
注意：如果追加新的子组件，请保持以 ASCII 排序。
NOTICE: If you add new child component, please keep ASCII order.
@@ -182,7 +183,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
</Form.Item>
</Form>
{configForm}
{configFormComponent}
</div>
</Form.Provider>
);

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

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input, Select, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -45,7 +46,7 @@ const AccessEditFormACMEHttpReqConfig = ({ form, disabled, loading, model, onMod
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -54,7 +55,7 @@ const AccessEditFormAWSConfig = ({ form, disabled, loading, model, onModelChange
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -38,7 +39,7 @@ const AccessEditFormAliyunConfig = ({ form, disabled, loading, model, onModelCha
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -38,7 +39,7 @@ const AccessEditFormBaiduCloudConfig = ({ form, disabled, loading, model, onMode
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -38,7 +39,7 @@ const AccessEditFormBytePlusConfig = ({ form, disabled, loading, model, onModelC
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -33,7 +34,7 @@ const AccessEditFormCloudflareConfig = ({ form, disabled, loading, model, onMode
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -38,7 +39,7 @@ const AccessEditFormDogeCloudConfig = ({ form, disabled, loading, model, onModel
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -38,7 +39,7 @@ const AccessEditFormGoDaddyConfig = ({ form, disabled, loading, model, onModelCh
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -47,7 +48,7 @@ const AccessEditFormHuaweiCloudConfig = ({ form, disabled, loading, model, onMod
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { flushSync } from "react-dom";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Button, Form, Input, Upload, type FormInstance, type UploadFile, type UploadProps } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -36,7 +37,7 @@ const AccessEditFormKubernetesConfig = ({ form, disabled, loading, model, onMode
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
setKubeFileList(model?.kubeConfig?.trim() ? [{ uid: "-1", name: "kubeconfig", status: "done" }] : []);
}, [model]);

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

@@ -1,4 +1,5 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useDeepCompareEffect } from "ahooks";
import { Form, type FormInstance } from "antd";
import { type LocalAccessConfig } from "@/domain/access";
@@ -19,7 +20,7 @@ const initModel = () => {
const AccessEditFormLocalConfig = ({ form, disabled, loading, model }: AccessEditFormLocalConfigProps) => {
const [initialValues, setInitialValues] = useState(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -33,7 +34,7 @@ const AccessEditFormNameSiloConfig = ({ form, disabled, loading, model, onModelC
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -34,7 +35,7 @@ const AccessEditFormPowerDNSConfig = ({ form, disabled, loading, model, onModelC
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -38,7 +39,7 @@ const AccessEditFormQiniuConfig = ({ form, disabled, loading, model, onModelChan
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { flushSync } from "react-dom";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Button, Form, Input, InputNumber, Upload, type FormInstance, type UploadFile, type UploadProps } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -72,7 +73,7 @@ const AccessEditFormSSHConfig = ({ form, disabled, loading, model, onModelChange
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
setKeyFileList(model?.key?.trim() ? [{ uid: "-1", name: "sshkey", status: "done" }] : []);
}, [model]);

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

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -38,7 +39,7 @@ const AccessEditFormTencentCloudConfig = ({ form, disabled, loading, model, onMo
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDeepCompareEffect } from "ahooks";
import { Form, Input, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -38,7 +39,7 @@ const AccessEditFormVolcEngineConfig = ({ form, disabled, loading, model, onMode
const formRule = createSchemaFieldRule(formSchema);
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
useEffect(() => {
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
}, [model]);

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

@@ -24,7 +24,10 @@ const AccessEditFormWebhookConfig = ({ form, disabled, loading, model, onModelCh
const { t } = useTranslation();
const formSchema = z.object({
url: z.string().url(t("common.errmsg.url_invalid")),
url: z
.string()
.min(1, { message: t("access.form.webhook_url.placeholder") })
.url({ message: t("common.errmsg.url_invalid") }),
});
const formRule = createSchemaFieldRule(formSchema);

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

@@ -6,12 +6,12 @@ import { Modal, notification } from "antd";
import { type AccessModel } from "@/domain/access";
import { useAccessStore } from "@/stores/access";
import { getErrMsg } from "@/utils/error";
import AccessEditForm, { type AccessEditFormInstance } from "./AccessEditForm";
import AccessEditForm, { type AccessEditFormInstance, type AccessEditFormProps } from "./AccessEditForm";
export type AccessEditModalProps = {
data?: Partial<MaybeModelRecord<AccessModel>>;
data?: AccessEditFormProps["model"];
loading?: boolean;
mode: "add" | "edit" | "copy";
mode: AccessEditFormProps["mode"];
open?: boolean;
trigger?: React.ReactElement;
onOpenChange?: (open: boolean) => void;
@@ -57,7 +57,7 @@ const AccessEditModal = ({ data, loading, mode, trigger, ...props }: AccessEditM
}
try {
if (mode === "add" || mode === "copy") {
if (mode === "add") {
if (data?.id) {
throw "Invalid props: `data`";
}
@@ -73,7 +73,7 @@ const AccessEditModal = ({ data, loading, mode, trigger, ...props }: AccessEditM
setOpen(false);
} catch (err) {
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
throw err;
} finally {