From 991fed565e258c8d94d2f6ed4b3a3eeed78b31fb Mon Sep 17 00:00:00 2001
From: yangon <2689991790@qq.com>
Date: Wed, 28 Aug 2024 11:55:05 +0800
Subject: [PATCH] Optimize CustomModal (#528)

---
 .../customModal/ActivateTenantModal.tsx       |  8 ++---
 ui/src/components/customModal/AddNSModal.tsx  |  8 ++---
 .../components/customModal/AddZoneModal.tsx   |  8 ++---
 .../customModal/HandleAccountModal.tsx        |  6 ++--
 .../customModal/HandleRoleModal.tsx           |  6 ++--
 .../components/customModal/LogReplayModal.tsx |  8 ++---
 .../customModal/ModifyPasswordModal.tsx       |  8 ++---
 .../customModal/ModifyUnitDetailModal.tsx     |  8 ++---
 .../customModal/ModifyUnitModal.tsx           |  8 ++---
 ui/src/components/customModal/MyInfoModal.tsx | 15 +++++----
 .../components/customModal/ResetPwdModal.tsx  |  6 ++--
 ui/src/components/customModal/ScaleModal.tsx  |  6 ++--
 .../customModal/SwitchTenantModal.tsx         |  8 ++---
 .../components/customModal/UpgradeModal.tsx   |  8 ++---
 .../customModal/UpgradeTenantModal.tsx        |  8 ++---
 ui/src/components/customModal/index.tsx       | 33 ++++++++-----------
 ui/src/i18n/strings/zh-CN.json                |  2 +-
 ui/src/pages/Access/Accounts.tsx              |  3 +-
 ui/src/pages/Access/Roles.tsx                 |  1 +
 ui/src/pages/Layouts/BasicLayout/index.tsx    |  9 ++++-
 ui/src/pages/Login/index.tsx                  | 25 ++++++++++----
 21 files changed, 104 insertions(+), 88 deletions(-)

diff --git a/ui/src/components/customModal/ActivateTenantModal.tsx b/ui/src/components/customModal/ActivateTenantModal.tsx
index c216c9e4d..cb2b93b70 100644
--- a/ui/src/components/customModal/ActivateTenantModal.tsx
+++ b/ui/src/components/customModal/ActivateTenantModal.tsx
@@ -31,7 +31,7 @@ export default function ActivateTenantModal({
   const handleSubmit = async () => {
     await activateTenant({ ns, name, failover: true });
   };
-  const handleCancel = () => setVisible(false);
+  const onCancel = () => setVisible(false);
 
   return (
     <CustomModal
@@ -39,9 +39,9 @@ export default function ActivateTenantModal({
         id: 'Dashboard.components.customModal.ActivateTenantModal.ActivateASecondaryTenant',
         defaultMessage: '激活备租户',
       })}
-      isOpen={visible}
-      handleOk={handleSubmit}
-      handleCancel={handleCancel}
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={onCancel}
     >
       <p>
         {intl.formatMessage({
diff --git a/ui/src/components/customModal/AddNSModal.tsx b/ui/src/components/customModal/AddNSModal.tsx
index c9e07d094..ce65d626f 100644
--- a/ui/src/components/customModal/AddNSModal.tsx
+++ b/ui/src/components/customModal/AddNSModal.tsx
@@ -39,7 +39,7 @@ export default function AddNSModal({
       form.submit();
     } catch (err) {}
   };
-  const handleCancel = () => setVisible(false);
+  const onCancel = () => setVisible(false);
   const onFinish = async (val: FormData) => {
     newNamespace.current = val.namespace;
     await createNS(val.namespace);
@@ -50,9 +50,9 @@ export default function AddNSModal({
         id: 'OBDashboard.components.customModal.AddNSModal.AddNamespace',
         defaultMessage: '新增命名空间',
       })}
-      isOpen={visible}
-      handleOk={handleSubmit}
-      handleCancel={handleCancel}
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={onCancel}
     >
       <Form form={form} onFinish={onFinish}>
         <Form.Item
diff --git a/ui/src/components/customModal/AddZoneModal.tsx b/ui/src/components/customModal/AddZoneModal.tsx
index 3fd2fc975..8f46663a9 100644
--- a/ui/src/components/customModal/AddZoneModal.tsx
+++ b/ui/src/components/customModal/AddZoneModal.tsx
@@ -29,7 +29,7 @@ export default function AddZoneModal({
     } catch (err) {}
   };
 
-  const handleCancel = () => {
+  const onCancel = () => {
     form.resetFields();
     setVisible(false);
   };
@@ -62,9 +62,9 @@ export default function AddZoneModal({
         id: 'OBDashboard.components.customModal.AddZoneModal.AddZone',
         defaultMessage: '新增Zone',
       })}
-      isOpen={visible}
-      handleOk={handleSubmit}
-      handleCancel={handleCancel}
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={onCancel}
     >
       <Form
         form={form}
diff --git a/ui/src/components/customModal/HandleAccountModal.tsx b/ui/src/components/customModal/HandleAccountModal.tsx
index 397249a3d..67da0225e 100644
--- a/ui/src/components/customModal/HandleAccountModal.tsx
+++ b/ui/src/components/customModal/HandleAccountModal.tsx
@@ -97,9 +97,9 @@ export default function HandleAccountModal({
                 }),
         },
       )}
-      isOpen={visible}
-      handleOk={handleSubmit}
-      handleCancel={() => {
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={() => {
         form.resetFields();
         setVisible(false);
       }}
diff --git a/ui/src/components/customModal/HandleRoleModal.tsx b/ui/src/components/customModal/HandleRoleModal.tsx
index b14df28fd..65a07d860 100644
--- a/ui/src/components/customModal/HandleRoleModal.tsx
+++ b/ui/src/components/customModal/HandleRoleModal.tsx
@@ -227,9 +227,9 @@ export default function HandleRoleModal({
                 }),
         },
       )}
-      isOpen={visible}
-      handleOk={handleSubmit}
-      handleCancel={() => {
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={() => {
         form.resetFields();
         setVisible(false);
       }}
diff --git a/ui/src/components/customModal/LogReplayModal.tsx b/ui/src/components/customModal/LogReplayModal.tsx
index 47ee3834b..cea77fa9c 100644
--- a/ui/src/components/customModal/LogReplayModal.tsx
+++ b/ui/src/components/customModal/LogReplayModal.tsx
@@ -24,7 +24,7 @@ export default function LogReplayModal({
     } catch (err) {}
   };
 
-  const handleCancel = () => setVisible(false);
+  const onCancel = () => setVisible(false);
   const onFinish = async (values: any) => {
     const res = await replayLogOfTenant({ namespace, name, ...values });
     if (res.successful) {
@@ -46,9 +46,9 @@ export default function LogReplayModal({
         id: 'Dashboard.components.customModal.LogReplayModal.StandbyTenantLogPlayback',
         defaultMessage: '备租户日志回放',
       })}
-      isOpen={visible}
-      handleOk={handleSubmit}
-      handleCancel={handleCancel}
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={onCancel}
     >
       <Form
         form={form}
diff --git a/ui/src/components/customModal/ModifyPasswordModal.tsx b/ui/src/components/customModal/ModifyPasswordModal.tsx
index c0ab16907..14247b634 100644
--- a/ui/src/components/customModal/ModifyPasswordModal.tsx
+++ b/ui/src/components/customModal/ModifyPasswordModal.tsx
@@ -26,7 +26,7 @@ export default function ModifyPasswordModal({
     } catch (err) {}
   };
 
-  const handleCancel = () => setVisible(false);
+  const onCancel = () => setVisible(false);
   const onFinish = async (values: any) => {
     const res = await changeTenantPassword({
       ns,
@@ -53,9 +53,9 @@ export default function ModifyPasswordModal({
         id: 'Dashboard.components.customModal.ModifyPasswordModal.ModifyRootPassword',
         defaultMessage: '修改 root 密码',
       })}
-      isOpen={visible}
-      handleOk={handleSubmit}
-      handleCancel={handleCancel}
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={onCancel}
     >
       <Form
         form={form}
diff --git a/ui/src/components/customModal/ModifyUnitDetailModal.tsx b/ui/src/components/customModal/ModifyUnitDetailModal.tsx
index 40a045d8a..8635a2167 100644
--- a/ui/src/components/customModal/ModifyUnitDetailModal.tsx
+++ b/ui/src/components/customModal/ModifyUnitDetailModal.tsx
@@ -100,7 +100,7 @@ export default function ModifyUnitDetailModal({
       form.submit();
     } catch (err) {}
   };
-  const handleCancel = () => {
+  const onCancel = () => {
     if (setEditZone) {
       setEditZone('');
       setSelectZones([]);
@@ -255,9 +255,9 @@ export default function ModifyUnitDetailModal({
               defaultMessage: '编辑资源池',
             })
       }
-      isOpen={visible}
-      handleOk={handleSubmit}
-      handleCancel={handleCancel}
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={onCancel}
     >
       <Form
         form={form}
diff --git a/ui/src/components/customModal/ModifyUnitModal.tsx b/ui/src/components/customModal/ModifyUnitModal.tsx
index 5d4fda8f1..3442050db 100644
--- a/ui/src/components/customModal/ModifyUnitModal.tsx
+++ b/ui/src/components/customModal/ModifyUnitModal.tsx
@@ -28,7 +28,7 @@ export default function ModifyUnitModal({
     } catch (err) {}
   };
 
-  const handleCancel = () => setVisible(false);
+  const onCancel = () => setVisible(false);
   const onFinish = async (values: any) => {
     const res = await modifyUnitNumReportWrap({
       ns,
@@ -61,9 +61,9 @@ export default function ModifyUnitModal({
         id: 'Dashboard.components.customModal.ModifyUnitModal.ModifyTheNumberOfUnits',
         defaultMessage: '修改 Unit 数量',
       })}
-      isOpen={visible}
-      handleOk={handleSubmit}
-      handleCancel={handleCancel}
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={onCancel}
     >
       <Form
         form={form}
diff --git a/ui/src/components/customModal/MyInfoModal.tsx b/ui/src/components/customModal/MyInfoModal.tsx
index 0fefc2eaf..e753445e6 100644
--- a/ui/src/components/customModal/MyInfoModal.tsx
+++ b/ui/src/components/customModal/MyInfoModal.tsx
@@ -1,5 +1,5 @@
 import { intl } from '@/utils/intl';
-import { useModel } from '@umijs/max';
+import { getLocale, useModel } from '@umijs/max';
 import type { DescriptionsProps } from 'antd';
 import { Button, Descriptions } from 'antd';
 import CustomModal from '.';
@@ -10,7 +10,7 @@ export default function MyInfoModal({
 }: API.CommonModalType) {
   const { initialState = {} } = useModel('@@initialState');
   const { accountInfo } = initialState;
-
+  const locale = getLocale();
   const items: DescriptionsProps['items'] = [
     {
       key: 'nickname',
@@ -50,18 +50,19 @@ export default function MyInfoModal({
       key: 'lastLoginAt',
       label: intl.formatMessage({
         id: 'src.pages.Access.B52ED09C',
-        defaultMessage: '最后一次登录时间',
+        defaultMessage: '上次登录于',
       }),
       children: `${accountInfo?.lastLoginAt || '-'}`,
     },
   ];
-
+  const labelWidth = locale === 'en-US' ? 110 : 84;
   return (
     <CustomModal
-      isOpen={visible}
-      handleCancel={() => {
+      open={visible}
+      onCancel={() => {
         setVisible(false);
       }}
+      maskClosable={true}
       footer={
         <Button
           type="primary"
@@ -81,6 +82,8 @@ export default function MyInfoModal({
           id: 'src.components.customModal.FCCAF16C',
           defaultMessage: '我的信息',
         })}
+        labelStyle={{ width: labelWidth, justifyContent: 'end' }}
+        column={1}
         items={items}
       />
     </CustomModal>
diff --git a/ui/src/components/customModal/ResetPwdModal.tsx b/ui/src/components/customModal/ResetPwdModal.tsx
index cdec6f7e4..7b67b6cec 100644
--- a/ui/src/components/customModal/ResetPwdModal.tsx
+++ b/ui/src/components/customModal/ResetPwdModal.tsx
@@ -61,9 +61,9 @@ export default function ResetPwdModal({
         id: 'src.components.customModal.BC49A0BD',
         defaultMessage: '修改密码',
       })}
-      isOpen={visible}
-      handleOk={handleSubmit}
-      handleCancel={() => {
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={() => {
         form.resetFields();
         setVisible(false);
       }}
diff --git a/ui/src/components/customModal/ScaleModal.tsx b/ui/src/components/customModal/ScaleModal.tsx
index 289099bab..29ce973d4 100644
--- a/ui/src/components/customModal/ScaleModal.tsx
+++ b/ui/src/components/customModal/ScaleModal.tsx
@@ -61,9 +61,9 @@ export default function ScaleModal({
         id: 'src.components.customModal.F7DD1D45',
         defaultMessage: '扩缩容Zone',
       })}
-      isOpen={visible}
-      handleOk={handleSubmit}
-      handleCancel={() => {
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={() => {
         setVisible(false);
         form.resetFields();
       }}
diff --git a/ui/src/components/customModal/SwitchTenantModal.tsx b/ui/src/components/customModal/SwitchTenantModal.tsx
index 9fc4a884e..fcfd02a89 100644
--- a/ui/src/components/customModal/SwitchTenantModal.tsx
+++ b/ui/src/components/customModal/SwitchTenantModal.tsx
@@ -31,7 +31,7 @@ export default function SwitchTenantModal({
   const handleSubmit = async () => {
     await activateTenant({ ns, name, switchover: true });
   };
-  const handleCancel = () => setVisible(false);
+  const onCancel = () => setVisible(false);
 
   return (
     <CustomModal
@@ -39,9 +39,9 @@ export default function SwitchTenantModal({
         id: 'Dashboard.components.customModal.SwitchTenantModal.ActiveStandbySwitchover',
         defaultMessage: '主备切换',
       })}
-      isOpen={visible}
-      handleOk={handleSubmit}
-      handleCancel={handleCancel}
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={onCancel}
     >
       <p>
         {intl.formatMessage({
diff --git a/ui/src/components/customModal/UpgradeModal.tsx b/ui/src/components/customModal/UpgradeModal.tsx
index fe191b71f..d5a01e443 100644
--- a/ui/src/components/customModal/UpgradeModal.tsx
+++ b/ui/src/components/customModal/UpgradeModal.tsx
@@ -23,7 +23,7 @@ export default function UpgradeModal({
     } catch (err) {}
   };
 
-  const handleCancel = () => setVisible(false);
+  const onCancel = () => setVisible(false);
   const onFinish = async ({ image }: any) => {
     const res = await upgradeClusterReportWrap({ ns, name, image });
     if (res.successful) {
@@ -45,9 +45,9 @@ export default function UpgradeModal({
         id: 'OBDashboard.components.customModal.UpgradeModal.VersionUpgrade',
         defaultMessage: '版本升级',
       })}
-      isOpen={visible}
-      handleOk={handleSubmit}
-      handleCancel={handleCancel}
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={onCancel}
     >
       <Form form={form} onFinish={onFinish}>
         <Form.Item<FieldType>
diff --git a/ui/src/components/customModal/UpgradeTenantModal.tsx b/ui/src/components/customModal/UpgradeTenantModal.tsx
index e1c65a5da..8f86adf1a 100644
--- a/ui/src/components/customModal/UpgradeTenantModal.tsx
+++ b/ui/src/components/customModal/UpgradeTenantModal.tsx
@@ -31,7 +31,7 @@ export default function UpgradeTenantModal({
   const handleSubmit = async () => {
     await upgradeTenant({ ns, name });
   };
-  const handleCancel = () => setVisible(false);
+  const onCancel = () => setVisible(false);
 
   return (
     <CustomModal
@@ -39,9 +39,9 @@ export default function UpgradeTenantModal({
         id: 'Dashboard.components.customModal.UpgradeTenantModal.TenantVersionUpgrade',
         defaultMessage: '租户版本升级',
       })}
-      isOpen={visible}
-      handleOk={handleSubmit}
-      handleCancel={handleCancel}
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={onCancel}
     >
       <p>
         {intl.formatMessage({
diff --git a/ui/src/components/customModal/index.tsx b/ui/src/components/customModal/index.tsx
index 6c9e8893b..83e5bf162 100644
--- a/ui/src/components/customModal/index.tsx
+++ b/ui/src/components/customModal/index.tsx
@@ -1,37 +1,30 @@
 import { intl } from '@/utils/intl';
-import { Modal } from 'antd';
-import { ReactNode } from 'react';
+import { Modal, ModalProps } from 'antd';
 
-interface CustomModalProps {
-  isOpen: boolean;
-  title?: string;
-  handleOk?: () => void;
-  handleCancel?: () => void;
-  children: ReactNode;
-  footer?: React.ReactNode;
-  width?: number;
-}
-
-export default function CustomModal(props: CustomModalProps) {
-  const { isOpen, handleOk, handleCancel, title, width = 520, footer } = props;
+/**
+ * By default, you are not allowed to click on the mask to close the pop-up window.
+ */
+export default function CustomModal({
+  width = 520,
+  children,
+  maskClosable = false,
+  ...props
+}: ModalProps) {
   return (
     <Modal
       width={width}
-      title={title}
-      open={isOpen}
-      onOk={handleOk}
       okText={intl.formatMessage({
         id: 'Dashboard.components.customModal.Ok',
         defaultMessage: '确定',
       })}
+      maskClosable={maskClosable}
       cancelText={intl.formatMessage({
         id: 'Dashboard.components.customModal.Cancel',
         defaultMessage: '取消',
       })}
-      onCancel={handleCancel}
-      footer={footer}
+      {...props}
     >
-      {props.children}
+      {children}
     </Modal>
   );
 }
diff --git a/ui/src/i18n/strings/zh-CN.json b/ui/src/i18n/strings/zh-CN.json
index 8d26e35a0..7857b7301 100644
--- a/ui/src/i18n/strings/zh-CN.json
+++ b/ui/src/i18n/strings/zh-CN.json
@@ -1137,7 +1137,7 @@
   "src.components.customModal.E903F734": "请输入",
   "src.api.855C826A": "原密码输入不正确",
   "src.api.1717A275": "无权限访问",
-  "src.pages.Access.B52ED09C": "最后一次登录时间",
+  "src.pages.Access.B52ED09C": "上次登录于",
   "src.constants.22EDA0DC": "要求内核版本 >= 4.2.1.4 (4.2.2.x 除外)",
   "src.components.customModal.F7DD1D45": "扩缩容Zone",
   "src.components.customModal.08DC5F92": "角色已存在"
diff --git a/ui/src/pages/Access/Accounts.tsx b/ui/src/pages/Access/Accounts.tsx
index 56c8dc444..c9cad0139 100644
--- a/ui/src/pages/Access/Accounts.tsx
+++ b/ui/src/pages/Access/Accounts.tsx
@@ -102,7 +102,7 @@ export default function Accounts({
     {
       title: intl.formatMessage({
         id: 'src.pages.Access.B52ED09C',
-        defaultMessage: '最后一次登录时间',
+        defaultMessage: '上次登录于',
       }),
       key: 'lastLoginAt',
       dataIndex: 'lastLoginAt',
@@ -125,6 +125,7 @@ export default function Accounts({
         return (
           <Space>
             <Button
+              style={{ paddingLeft: 0 }}
               onClick={() => {
                 setResetModalVisible(true);
                 if (
diff --git a/ui/src/pages/Access/Roles.tsx b/ui/src/pages/Access/Roles.tsx
index 27b5f3a26..e597904a0 100644
--- a/ui/src/pages/Access/Roles.tsx
+++ b/ui/src/pages/Access/Roles.tsx
@@ -86,6 +86,7 @@ export default function Roles({
         return (
           <Space>
             <Button
+              style={{ paddingLeft: 0 }}
               onClick={() => handleEdit(record)}
               disabled={disabled}
               type="link"
diff --git a/ui/src/pages/Layouts/BasicLayout/index.tsx b/ui/src/pages/Layouts/BasicLayout/index.tsx
index cfa87079c..3d0ab2404 100644
--- a/ui/src/pages/Layouts/BasicLayout/index.tsx
+++ b/ui/src/pages/Layouts/BasicLayout/index.tsx
@@ -124,7 +124,14 @@ const BasicLayout: React.FC = () => {
   );
 
   useEffect(() => {
-    history.replace(menus.find((item) => item.accessible)?.link || '/overview');
+    const path = window.location.hash.split('#')[1];
+    const allLink = menus
+      .filter((item) => item.accessible)
+      .map((accItem) => accItem?.link);
+    const targetPath = allLink.find((item) => path.includes(item));
+    history.replace(
+      targetPath || menus.find((item) => item.accessible)?.link || '/overview',
+    );
   }, []);
 
   return (
diff --git a/ui/src/pages/Login/index.tsx b/ui/src/pages/Login/index.tsx
index 7523711db..55a8ee3ad 100644
--- a/ui/src/pages/Login/index.tsx
+++ b/ui/src/pages/Login/index.tsx
@@ -2,7 +2,7 @@ import { intl } from '@/utils/intl';
 import { LockOutlined, UserOutlined } from '@ant-design/icons';
 import { useModel, useNavigate } from '@umijs/max';
 import { Button, Form, Input } from 'antd';
-import React from 'react';
+import React, { useState } from 'react';
 
 import { user } from '@/api';
 import logoSrc from '@/assets/oceanbase_logo.svg';
@@ -13,16 +13,22 @@ const Login: React.FC = () => {
   const { refresh } = useModel('@@initialState');
   const navigate = useNavigate();
   const publicKey = usePublicKey();
+  const [loading, setLoading] = useState(false);
 
   const onFinish = async (values: API.User) => {
+    setLoading(true);
     values.password = encryptText(values.password, publicKey) as string;
     const res = await user.login(values);
     if (res.successful) {
-      if (res.data.needReset) {
-        navigate('/reset');
-      } else {
-        navigate('/overview');
-      }
+      // Set a timer to wait for permissions to update
+      setTimeout(() => {
+        if (res.data.needReset) {
+          navigate('/reset');
+        } else {
+          navigate('/overview');
+        }
+        setLoading(false);
+      }, 500);
       refresh();
       localStorage.setItem('user', values.username);
     }
@@ -61,7 +67,12 @@ const Login: React.FC = () => {
         </Form.Item>
 
         <Form.Item style={{ display: 'flex', justifyContent: 'center' }}>
-          <Button style={{ width: 270 }} type="primary" htmlType="submit">
+          <Button
+            loading={loading}
+            style={{ width: 270 }}
+            type="primary"
+            htmlType="submit"
+          >
             {intl.formatMessage({
               id: 'dashboard.pages.Login.Login',
               defaultMessage: '登录',