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

ui/src/App.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useLayoutEffect, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { RouterProvider } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useCreation } from "ahooks";
 import { App, ConfigProvider, theme, type ThemeConfig } from "antd";
 import { type Locale } from "antd/es/locale";
 import AntdLocaleEnUs from "antd/locale/en_US";
@@ -18,7 +17,7 @@ const RootApp = () => {
 
   const { theme: browserTheme } = useBrowserTheme();
 
-  const antdLocalesMap: Record<string, Locale> = useCreation(
+  const antdLocalesMap: Record<string, Locale> = useMemo(
     () => ({
       [localeNames.ZH]: AntdLocaleZhCN,
       [localeNames.EN]: AntdLocaleEnUs,
@@ -33,7 +32,7 @@ const RootApp = () => {
   i18n.on("languageChanged", handleLanguageChanged);
   useLayoutEffect(handleLanguageChanged, [antdLocalesMap, i18n]);
 
-  const antdThemesMap: Record<string, ThemeConfig> = useCreation(
+  const antdThemesMap: Record<string, ThemeConfig> = useMemo(
     () => ({
       ["light"]: { algorithm: theme.defaultAlgorithm },
       ["dark"]: { algorithm: theme.darkAlgorithm },

ui/src/components/access/AccessEditForm.tsx

@@ -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>
   );

ui/src/components/access/AccessEditFormACMEHttpReqConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormAWSConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormAliyunConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormBaiduCloudConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormBytePlusConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormCloudflareConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormDogeCloudConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormGoDaddyConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormKubernetesConfig.tsx

@@ -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]);

ui/src/components/access/AccessEditFormLocalConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormNameSiloConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormPowerDNSConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormQiniuConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormSSHConfig.tsx

@@ -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]);

ui/src/components/access/AccessEditFormTencentCloudConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormVolcEngineConfig.tsx

@@ -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]);
 

ui/src/components/access/AccessEditFormWebhookConfig.tsx

@@ -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);
 

ui/src/components/access/AccessEditModal.tsx

@@ -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 {

ui/src/domain/access.ts

@@ -41,15 +41,24 @@ export const ACCESS_PROVIDER_TYPES = Object.freeze({
   WEBHOOK: ACCESS_PROVIDER_TYPE_WEBHOOK,
 } as const);
 
+export const ACCESS_PROVIDER_USAGE_ALL = "all" as const;
+export const ACCESS_PROVIDER_USAGE_APPLY = "apply" as const;
+export const ACCESS_PROVIDER_USAGE_DEPLOY = "deploy" as const;
+export const ACCESS_PROVIDER_USAGES = Object.freeze({
+  ALL: ACCESS_PROVIDER_USAGE_ALL,
+  APPLY: ACCESS_PROVIDER_USAGE_APPLY,
+  DEPLOY: ACCESS_PROVIDER_USAGE_DEPLOY,
+} as const);
+
+// #region AccessModel
 export interface AccessModel extends BaseModel {
   name: string;
   configType: string;
   usage: AccessUsages;
   config: /*
-  注意：如果追加新的类型，请保持以 ASCII 排序。
-  NOTICE: If you add new type, please keep ASCII order.
- */
-  Record<string, unknown> &
+    注意：如果追加新的类型，请保持以 ASCII 排序。
+    NOTICE: If you add new type, please keep ASCII order.
+  */ Record<string, unknown> &
     (
       | ACMEHttpReqAccessConfig
       | AliyunAccessConfig
@@ -71,7 +80,9 @@ export interface AccessModel extends BaseModel {
       | WebhookAccessConfig
     );
 }
+// #endregion
 
+// #region AccessConfig
 export type ACMEHttpReqAccessConfig = {
   endpoint: string;
   mode?: string;
@@ -163,19 +174,12 @@ export type VolcEngineAccessConfig = {
 export type WebhookAccessConfig = {
   url: string;
 };
+// #endregion
 
-export const ACCESS_PROVIDER_USAGE_ALL = "all" as const;
-export const ACCESS_PROVIDER_USAGE_APPLY = "apply" as const;
-export const ACCESS_PROVIDER_USAGE_DEPLOY = "deploy" as const;
-export const ACCESS_PROVIDER_USAGES = Object.freeze({
-  ALL: ACCESS_PROVIDER_USAGE_ALL,
-  APPLY: ACCESS_PROVIDER_USAGE_APPLY,
-  DEPLOY: ACCESS_PROVIDER_USAGE_DEPLOY,
-} as const);
+// #region AccessProvider
+export type AccessUsages = (typeof ACCESS_PROVIDER_USAGES)[keyof typeof ACCESS_PROVIDER_USAGES];
 
-type AccessUsages = (typeof ACCESS_PROVIDER_USAGES)[keyof typeof ACCESS_PROVIDER_USAGES];
-
-type AccessProvider = {
+export type AccessProvider = {
   type: string;
   name: string;
   icon: string;
@@ -208,3 +212,4 @@ export const accessProvidersMap: Map<AccessProvider["type"], AccessProvider> = n
     [ACCESS_PROVIDER_TYPE_ACMEHTTPREQ, "common.provider.acmehttpreq", "/imgs/providers/acmehttpreq.svg", "apply"],
   ].map(([type, name, icon, usage]) => [type, { type, name, icon, usage: usage as AccessUsages }])
 );
+// #endregion

ui/src/i18n/locales/zh/nls.access.json

@@ -118,8 +118,8 @@
   "access.form.volcengine_secret_access_key.label": "火山引擎 Secret Access Key",
   "access.form.volcengine_secret_access_key.placeholder": "请输入火山引擎 Secret Access Key",
   "access.form.volcengine_secret_access_key.tooltip": "这是什么？请参阅 <a href=\"https://www.volcengine.com/docs/6291/216571\" target=\"_blank\">https://www.volcengine.com/docs/6291/216571</a>",
-  "access.form.webhook_url.label": "Webhook URL",
-  "access.form.webhook_url.placeholder": "请输入 Webhook URL",
+  "access.form.webhook_url.label": "Webhook 回调地址",
+  "access.form.webhook_url.placeholder": "请输入 Webhook 回调地址",
   "access.form.ssh_host.label": "服务器地址",
   "access.form.ssh_host.placeholder": "请输入服务器地址",
   "access.form.ssh_port.label": "服务器端口",

ui/src/pages/ConsoleLayout.tsx

@@ -182,7 +182,7 @@ const SiderMenu = memo(({ onSelect }: { onSelect?: (key: string) => void }) => {
 const ThemeToggleButton = memo(({ size }: { size?: ButtonProps["size"] }) => {
   const { t } = useTranslation();
 
-  const { theme, setThemeMode } = useBrowserTheme();
+  const { theme, themeMode, setThemeMode } = useBrowserTheme();
 
   const items: Required<MenuProps>["items"] = [
     ["light", t("common.theme.light")],
@@ -194,7 +194,9 @@ const ThemeToggleButton = memo(({ size }: { size?: ButtonProps["size"] }) => {
       label: label,
       onClick: () => {
         setThemeMode(key as Parameters<typeof setThemeMode>[0]);
-        window.location.reload();
+        if (key !== themeMode) {
+          window.location.reload();
+        }
       },
     };
   });

ui/src/pages/accesses/AccessList.tsx

@@ -83,7 +83,7 @@ const AccessList = () => {
 
             <AccessEditModal
               data={{ ...record, id: undefined, name: `${record.name}-copy` }}
-              mode="copy"
+              mode="add"
               trigger={
                 <Tooltip title={t("access.action.copy")}>
                   <Button type="link" icon={<CopyIcon size={16} />} />
@@ -119,7 +119,7 @@ const AccessList = () => {
       }
 
       console.error(err);
-      notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+      notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
     });
   }, []);
 
@@ -152,7 +152,7 @@ const AccessList = () => {
           await deleteAccess(data);
         } catch (err) {
           console.error(err);
-          notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+          notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
         }
       },
     });

ui/src/pages/certificates/CertificateList.tsx

@@ -198,7 +198,7 @@ const CertificateList = () => {
         }
 
         console.error(err);
-        notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+        notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
       },
     }
   );

ui/src/pages/dashboard/Dashboard.tsx

@@ -49,7 +49,7 @@ const Dashboard = () => {
         }
 
         console.error(err);
-        notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+        notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
       },
     }
   );

ui/src/pages/login/Login.tsx

@@ -30,7 +30,7 @@ const Login = () => {
       await getPocketBase().admins.authWithPassword(fields.username, fields.password);
       navigage("/");
     } catch (err) {
-      notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+      notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
     } finally {
       setFormPending(false);
     }

ui/src/pages/workflows/WorkflowList.tsx

@@ -230,7 +230,7 @@ const WorkflowList = () => {
         }
 
         console.error(err);
-        notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+        notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
       },
     }
   );
@@ -253,7 +253,7 @@ const WorkflowList = () => {
       }
     } catch (err) {
       console.error(err);
-      notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+      notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
     }
   };
 
@@ -269,7 +269,7 @@ const WorkflowList = () => {
           }
         } catch (err) {
           console.error(err);
-          notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+          notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
         }
       },
     });