refactor: replace App.useApp message with custom message component

Replace antd App.useApp message with custom message component from '@/components/EscapeAntd' across multiple pages and components. Also simplify clipboard handling in CreateApiKeyModal by removing try-catch block since the custom message component handles errors.

Author: coding-hui

src/pages/ApiKey/components/CreateApiKeyModal.tsx

@@ -75,14 +75,10 @@ const CreateApiKeyModal: React.FC<Props> = (props) => {
   const [createModalVisible, setCreateModalVisible] = useState(false);
 
   const handleCopy = async (text: string, setCopied: (value: boolean) => void) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      message.success(intl.formatMessage(INTL.COPY_SUCCESS));
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      message.error(intl.formatMessage(INTL.COPY_FAILED));
-    }
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    message.success(intl.formatMessage(INTL.COPY_SUCCESS));
+    setTimeout(() => setCopied(false), 2000);
   };
 
   const SuccessContent = ({ result }: { result: API.ApiKey }) => (

src/pages/Application/Edit/_hooks.ts

@@ -1,4 +1,5 @@
-import { App, Form } from 'antd';
+import { Form } from 'antd';
+import { message } from '@/components/EscapeAntd';
 import { BASIC_INTL } from '@/constant';
 import { useEffect, useRef } from 'react';
 import { ProFormInstance } from '@ant-design/pro-components';
@@ -12,7 +13,6 @@ import {
 
 export default function useAppHook() {
   const intl = useIntl();
-  const { message } = App.useApp();
   const { instanceId } = useParams();
   const formRef = useRef<ProFormInstance<UpdateApplicationRequest>>();
   const name = Form.useWatch('name', formRef.current);

src/pages/IdentityProvider/Create/_hooks.ts

@@ -1,4 +1,5 @@
-import { App, Form } from 'antd';
+import { Form } from 'antd';
+import { message } from '@/components/EscapeAntd';
 import { BASIC_INTL } from '@/constant';
 import { useEffect, useRef } from 'react';
 import { ProFormInstance } from '@ant-design/pro-components';
@@ -21,7 +22,7 @@ export type FormProps = {
 
 export default function useIdentityProviderHook() {
   const intl = useIntl();
-  const { message } = App.useApp();
+
   const { instanceId } = useParams();
   const formRef = useRef<ProFormInstance<FormType>>();
   const name = Form.useWatch('name', formRef.current);

src/pages/Login/_hooks.ts

@@ -1,4 +1,4 @@
-import { App } from 'antd';
+import { message } from '@/components/EscapeAntd';
 import { flushSync } from 'react-dom';
 import { history, useIntl, useModel, useRequest } from '@umijs/max';
 import { login } from '@/services/system/login';
@@ -20,7 +20,7 @@ const INTL = {
 
 export default function useLoginHook() {
   const intl = useIntl();
-  const { message } = App.useApp();
+
   const [appConfLoadCompleted, setAppConfLoadCompleted] = useState(false);
   const [loginType, setLoginType] = useState<string>('account');
   const { initialState, setInitialState } = useModel('@@initialState');

src/pages/Organization/Edit/_hooks.ts

@@ -1,6 +1,7 @@
 import { history, useIntl, useParams, useRequest } from '@@/exports';
 import { useEffect, useState } from 'react';
-import { App, Form } from 'antd';
+import { Form } from 'antd';
+import { message } from '@/components/EscapeAntd';
 import { BASIC_INTL } from '@/constant';
 import {
   getOrganization,
@@ -12,7 +13,7 @@ import {
 
 export default function useOrganizationHook() {
   const intl = useIntl();
-  const { message } = App.useApp();
+
   const { instanceId } = useParams();
   const [orgInfoForm] = Form.useForm();
   const [currentTab, setCurrentTab] = useState('info');

src/pages/Organization/Tree/_hooks.ts

@@ -1,5 +1,5 @@
 import { DependencyList, Key, useEffect, useState } from 'react';
-import { App } from 'antd';
+import { message } from '@/components/EscapeAntd';
 import { useActive } from '@/hooks';
 import { BASIC_INTL } from '@/constant';
 import { useIntl, useRequest } from '@@/exports';
@@ -21,7 +21,6 @@ export type Props = {
 export default function useOrgTreeHook(props: Props) {
   const { initDeps = [], onSelect, currentKey } = props;
   const intl = useIntl();
-  const { message } = App.useApp();
 
   const [initLoading, { active: showInitLoading, deactive: hideInitLoading }] = useActive(false);
   const [searching, { active: beginSearching, deactive: endSearching }] = useActive(false);

src/pages/Policy/Create/_hooks.ts

@@ -5,7 +5,7 @@ import { createPolicy, CreatePolicyRequest } from '@/services/policy/createPolic
 import { updatePolicy, UpdatePolicyRequest } from '@/services/policy/updatePolicy';
 import { getPolicyInfo } from '@/services/policy/getPolicyInfo';
 import { listResources } from '@/services/resource/listResources';
-import { App } from 'antd';
+import { message } from '@/components/EscapeAntd';
 import { PolicyType } from '@/enums';
 
 const INTL = {
@@ -42,7 +42,7 @@ type FormType = UpdatePolicyRequest &
 
 export default function usePolicyHook() {
   const intl = useIntl();
-  const { message } = App.useApp();
+
   const { instanceId } = useParams();
   const formRef = useRef<ProFormInstance<FormType>>();
 

src/pages/User/Edit/_hooks.ts

@@ -3,7 +3,8 @@ import { history, useIntl, useParams, useRequest } from '@@/exports';
 import { getUserInfo } from '@/services/user/getUserInfo';
 import { useEffect, useRef, useState } from 'react';
 import { updateUser } from '@/services/user/updateUser';
-import { App, Form } from 'antd';
+import { Form } from 'antd';
+import { message } from '@/components/EscapeAntd';
 import { revokeRole } from '@/services/role/revokeRole';
 import { ActionType } from '@ant-design/pro-components';
 import { batchAssignRole } from '@/services/role/assignRole';
@@ -42,7 +43,7 @@ const USER_TABS = {
 
 export default function useUserHook() {
   const intl = useIntl();
-  const { message } = App.useApp();
+
   const { instanceId } = useParams();
   const [userInfoForm] = Form.useForm();
   const [accountInfoForm] = Form.useForm();