Optimize CustomModal (#528)

oceanbase · Aug 28, 2024 · 991fed5 · 991fed5
1 parent 012d1e2
commit 991fed5
Show file tree

Hide file tree

Showing 21 changed files with 104 additions and 88 deletions.
diff --git a/ui/src/components/customModal/ActivateTenantModal.tsx b/ui/src/components/customModal/ActivateTenantModal.tsx
@@ -31,17 +31,17 @@ export default function ActivateTenantModal({
   const handleSubmit = async () => {
     await activateTenant({ ns, name, failover: true });
   };
-  const handleCancel = () => setVisible(false);
+  const onCancel = () => setVisible(false);
 
   return (
     <CustomModal
       title={intl.formatMessage({
         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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -31,17 +31,17 @@ export default function SwitchTenantModal({
   const handleSubmit = async () => {
     await activateTenant({ ns, name, switchover: true });
   };
-  const handleCancel = () => setVisible(false);
+  const onCancel = () => setVisible(false);
 
   return (
     <CustomModal
       title={intl.formatMessage({
         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
@@ -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
@@ -31,17 +31,17 @@ export default function UpgradeTenantModal({
   const handleSubmit = async () => {
     await upgradeTenant({ ns, name });
   };
-  const handleCancel = () => setVisible(false);
+  const onCancel = () => setVisible(false);
 
   return (
     <CustomModal
       title={intl.formatMessage({
         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
@@ -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
@@ -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
@@ -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 (