feat: update antd from 5.2.3 to 5.24.1 (#3593)

2025-05-22 18:25:47 +08:00 · 2025-02-18 20:54:10 +08:00 · 2025-02-18 20:54:10 +08:00 · d61f9a1856
commit d61f9a1856
parent aa52af02b3
16 changed files with 866 additions and 695 deletions
--- a/web/package.json
+++ b/web/package.json
@ -3,8 +3,8 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
-    "@ant-design/cssinjs": "^1.10.1",
-    "@ant-design/icons": "^4.7.0",
+    "@ant-design/cssinjs": "^1.23.0",
+    "@ant-design/icons": "^5.6.1",
    "@craco/craco": "^6.4.5",
    "@crowdin/cli": "^3.7.10",
    "@ctrl/tinycolor": "^3.5.0",
@ -23,8 +23,8 @@
    "@web3-onboard/sequence": "^2.0.8",
    "@web3-onboard/taho": "^2.0.5",
    "@web3-onboard/trust": "^2.0.4",
-    "antd": "5.2.3",
-    "antd-token-previewer": "^1.1.0-22",
+    "antd": "5.24.1",
+    "antd-token-previewer": "^2.0.8",
    "buffer": "^6.0.3",
    "codemirror": "^6.0.1",
    "copy-to-clipboard": "^3.3.1",
--- a/web/src/App.js
+++ b/web/src/App.js
@ -327,7 +327,7 @@ class App extends Component {
            isAiAssistantOpen: false,
          });
        }}
-        visible={this.state.isAiAssistantOpen}
+        open={this.state.isAiAssistantOpen}
      >
        <iframe id="iframeHelper" title={"iframeHelper"} src={`${Conf.AiAssistantUrl}/?isRaw=1`} width="100%" height="100%" scrolling="no" frameBorder="no" />
      </Drawer>
--- a/web/src/App.less
+++ b/web/src/App.less
@ -58,6 +58,16 @@ img {
  }
 }

+.org-select {
+  display: flex;
+  position: relative;
+  transform: translateY(50%);
+  margin: 0 10px !important;
+  float: right;
+  min-width: 120px;
+  max-width: 180px;
+}
+
 .rightDropDown {
  display: flex;
  align-items: center;
--- a/web/src/BaseListPage.js
+++ b/web/src/BaseListPage.js
@ -121,10 +121,12 @@ class BaseListPage extends React.Component {
      record[dataIndex]
        ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
        : "",
-    onFilterDropdownOpenChange: visible => {
-      if (visible) {
-        setTimeout(() => this.searchInput.select(), 100);
-      }
+    filterDropdownProps: {
+      onOpenChange: visible => {
+        if (visible) {
+          setTimeout(() => this.searchInput.select(), 100);
+        }
+      },
    },
    render: (text, record, index) => {
      const highlightContent = this.state.searchedColumn === dataIndex ? (
@ -173,7 +175,7 @@ class BaseListPage extends React.Component {
    const steps = TourConfig.getSteps();
    steps.map((item, index) => {
      if (!index) {
-        item.target = () => document.querySelector("table");
+        item.target = () => document.querySelector(".ant-table");
      } else {
        item.target = () => document.getElementById(item.id) || null;
      }
--- a/web/src/CasbinEditor.js
+++ b/web/src/CasbinEditor.js
@ -19,8 +19,6 @@ import {Tabs} from "antd";
 import i18next from "i18next";
 import Editor from "./common/Editor";

-const {TabPane} = Tabs;
-
 const CasbinEditor = ({model, onModelTextChange}) => {
  const [activeKey, setActiveKey] = useState("advanced");
  const iframeRef = useRef(null);
@ -66,10 +64,15 @@ const CasbinEditor = ({model, onModelTextChange}) => {

  return (
    <div style={{height: "100%", width: "100%", display: "flex", flexDirection: "column"}}>
-      <Tabs activeKey={activeKey} onChange={handleTabChange} style={{flex: "0 0 auto", marginTop: "-10px"}}>
-        <TabPane tab={i18next.t("model:Basic Editor")} key="basic" />
-        <TabPane tab={i18next.t("model:Advanced Editor")} key="advanced" />
-      </Tabs>
+      <Tabs
+        activeKey={activeKey}
+        onChange={handleTabChange}
+        style={{flex: "0 0 auto", marginTop: "-10px"}}
+        items={[
+          {key: "basic", label: i18next.t("model:Basic Editor")},
+          {key: "advanced", label: i18next.t("model:Advanced Editor")},
+        ]}
+      />
      <div style={{flex: "1 1 auto", overflow: "hidden"}}>
        {activeKey === "advanced" ? (
          <IframeEditor
--- a/web/src/ManagementPage.js
+++ b/web/src/ManagementPage.js
@ -206,11 +206,11 @@ function ManagementPage(props) {
                        <OrganizationSelect
                          initValue={Setting.getOrganization()}
                          withAll={true}
-                          style={{marginRight: "20px", width: "180px", display: !Setting.isMobile() ? "flex" : "none"}}
+                          className="org-select"
+                          style={{display: Setting.isMobile() ? "none" : "flex"}}
                          onChange={(value) => {
                            Setting.setOrganization(value);
                          }}
-                          className="select-box"
                        />
          }
        </React.Fragment>
@ -459,7 +459,7 @@ function ManagementPage(props) {
      <Header style={{padding: "0", marginBottom: "3px", backgroundColor: props.themeAlgorithm.includes("dark") ? "black" : "white"}} >
        {props.requiredEnableMfa || (Setting.isMobile() ?
          <React.Fragment>
-            <Drawer title={i18next.t("general:Close")} placement="left" visible={menuVisible} onClose={onClose}>
+            <Drawer title={i18next.t("general:Close")} placement="left" open={menuVisible} onClose={onClose}>
              <Menu
                items={getMenuItems()}
                mode={"inline"}
--- a/web/src/PermissionListPage.js
+++ b/web/src/PermissionListPage.js
@ -113,8 +113,8 @@ class PermissionListPage extends BaseListPage {

    return (
      <Upload {...props}>
-        <Button id="upload-button" type="primary" size="small">
-          <UploadOutlined /> {i18next.t("user:Upload (.xlsx)")}
+        <Button icon={<UploadOutlined />} id="upload-button" type="primary" size="small">
+          {i18next.t("user:Upload (.xlsx)")}
        </Button></Upload>
    );
  }
--- a/web/src/RoleListPage.js
+++ b/web/src/RoleListPage.js
@ -106,8 +106,8 @@ class RoleListPage extends BaseListPage {

    return (
      <Upload {...props}>
-        <Button type="primary" size="small">
-          <UploadOutlined /> {i18next.t("user:Upload (.xlsx)")}
+        <Button icon={<UploadOutlined />} type="primary" size="small">
+          {i18next.t("user:Upload (.xlsx)")}
        </Button>
      </Upload>
    );
--- a/web/src/UserListPage.js
+++ b/web/src/UserListPage.js
@ -188,8 +188,8 @@ class UserListPage extends BaseListPage {

    return (
      <Upload {...props}>
-        <Button id="upload-button" type="primary" size="small">
-          <UploadOutlined /> {i18next.t("user:Upload (.xlsx)")}
+        <Button icon={<UploadOutlined />} id="upload-button" type="primary" size="small">
+          {i18next.t("user:Upload (.xlsx)")}
        </Button>
      </Upload>
    );
--- a/web/src/auth/ForgetPage.js
+++ b/web/src/auth/ForgetPage.js
@ -471,9 +471,12 @@ class ForgetPage extends React.Component {
      <React.Fragment>
        <CustomGithubCorner />
        <div className="forget-content" style={{padding: Setting.isMobile() ? "0" : null, boxShadow: Setting.isMobile() ? "none" : null}}>
-          <Button type="text" style={{position: "relative", left: Setting.isMobile() ? "10px" : "-90px", top: 0}} size={"large"} onClick={() => {this.stepBack();}}>
-            <ArrowLeftOutlined style={{fontSize: "24px"}} />
-          </Button>
+          <Button type="text"
+            style={{position: "relative", left: Setting.isMobile() ? "10px" : "-90px", top: 0}}
+            icon={<ArrowLeftOutlined style={{fontSize: "24px"}} />}
+            size={"large"}
+            onClick={() => {this.stepBack();}}
+          />
          <Row>
            <Col span={24} style={{justifyContent: "center"}}>
              <Row>
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@ -530,9 +530,11 @@ class LoginPage extends React.Component {
      return null;
    }

+    const resultItemKey = `${application.organization}_${application.name}_${signinItem.name}`;
+
    if (signinItem.name === "Logo") {
      return (
-        <div className="login-logo-box">
+        <div key={resultItemKey} className="login-logo-box">
          <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
          {
            Setting.renderHelmet(application)
@ -544,7 +546,7 @@ class LoginPage extends React.Component {
      );
    } else if (signinItem.name === "Back button") {
      return (
-        <div className="back-button">
+        <div key={resultItemKey} className="back-button">
          <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
          {
            this.renderBackButton()
@ -562,14 +564,14 @@ class LoginPage extends React.Component {
      }

      return (
-        <div className="login-languages">
+        <div key={resultItemKey} className="login-languages">
          <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
          <LanguageSelect languages={application.organizationObj.languages} />
        </div>
      );
    } else if (signinItem.name === "Signin methods") {
      return (
-        <div>
+        <div key={resultItemKey}>
          <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
          {this.renderMethodChoiceBox()}
        </div>
@ -577,7 +579,7 @@ class LoginPage extends React.Component {
      ;
    } else if (signinItem.name === "Username") {
      return (
-        <div>
+        <div key={resultItemKey}>
          <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
          <Form.Item
            name="username"
@ -654,14 +656,14 @@ class LoginPage extends React.Component {
      );
    } else if (signinItem.name === "Password") {
      return (
-        <div>
+        <div key={resultItemKey}>
          <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
          {this.renderPasswordOrCodeInput(signinItem)}
        </div>
      );
    } else if (signinItem.name === "Forgot password?") {
      return (
-        <div>
+        <div key={resultItemKey}>
          <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
          <div className="login-forget-password">
            <Form.Item name="autoSignin" valuePropName="checked" noStyle>
@ -679,7 +681,7 @@ class LoginPage extends React.Component {
      return AgreementModal.isAgreementRequired(application) ? AgreementModal.renderAgreementFormItem(application, true, {}, this) : null;
    } else if (signinItem.name === "Login button") {
      return (
-        <Form.Item className="login-button-box">
+        <Form.Item key={resultItemKey} className="login-button-box">
          <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
          <Button
            type="primary"
@ -723,13 +725,13 @@ class LoginPage extends React.Component {
      }

      return (
-        <div>
+        <div key={resultItemKey}>
          <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
          <Form.Item>
            {
              application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map((providerItem, id) => {
                return (
-                  <span key ={id} onClick={(e) => {
+                  <span key={id} onClick={(e) => {
                    const agreementChecked = this.form.current.getFieldValue("agreement");

                    if (agreementChecked !== undefined && typeof agreementChecked === "boolean" && !agreementChecked) {
@ -752,11 +754,11 @@ class LoginPage extends React.Component {
      );
    } else if (signinItem.name.startsWith("Text ") || signinItem?.isCustom) {
      return (
-        <div dangerouslySetInnerHTML={{__html: signinItem.customCss}} />
+        <div key={resultItemKey} dangerouslySetInnerHTML={{__html: signinItem.customCss}} />
      );
    } else if (signinItem.name === "Signup link") {
      return (
-        <div style={{width: "100%"}} className="login-signup-link">
+        <div key={resultItemKey} style={{width: "100%"}} className="login-signup-link">
          <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
          {this.renderFooter(application, signinItem)}
        </div>
--- a/web/src/basic/Dashboard.js
+++ b/web/src/basic/Dashboard.js
@ -167,25 +167,35 @@ const Dashboard = (props) => {
    };
    myChart.setOption(option);

+    const cardStyles = {
+      body: {
+        width: Setting.isMobile() ? "340px" : "100%",
+        height: Setting.isMobile() ? "100px" : "150px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      },
+    };
+
    return (
      <Row id="statistic" gutter={80} justify={"center"}>
        <Col span={50} style={{marginBottom: "10px"}}>
-          <Card bordered={false} bodyStyle={{width: Setting.isMobile() ? "340px" : "100%", height: Setting.isMobile() ? "100px" : "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
+          <Card variant="borderless" styles={cardStyles}>
            <Statistic title={i18next.t("home:Total users")} fontSize="100px" value={dashboardData.userCounts[30]} valueStyle={{fontSize: "30px"}} style={{width: "200px", paddingLeft: "10px"}} />
          </Card>
        </Col>
        <Col span={50} style={{marginBottom: "10px"}}>
-          <Card bordered={false} bodyStyle={{width: Setting.isMobile() ? "340px" : "100%", height: Setting.isMobile() ? "100px" : "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
+          <Card variant="borderless" styles={cardStyles}>
            <Statistic title={i18next.t("home:New users today")} fontSize="100px" value={dashboardData.userCounts[30] - dashboardData.userCounts[30 - 1]} valueStyle={{fontSize: "30px"}} prefix={<ArrowUpOutlined />} style={{width: "200px", paddingLeft: "10px"}} />
          </Card>
        </Col>
        <Col span={50} style={{marginBottom: "10px"}}>
-          <Card bordered={false} bodyStyle={{width: Setting.isMobile() ? "340px" : "100%", height: Setting.isMobile() ? "100px" : "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
+          <Card variant="borderless" styles={cardStyles}>
            <Statistic title={i18next.t("home:New users past 7 days")} value={dashboardData.userCounts[30] - dashboardData.userCounts[30 - 7]} valueStyle={{fontSize: "30px"}} prefix={<ArrowUpOutlined />} style={{width: "200px", paddingLeft: "10px"}} />
          </Card>
        </Col>
        <Col span={50} style={{marginBottom: "10px"}}>
-          <Card bordered={false} bodyStyle={{width: Setting.isMobile() ? "340px" : "100%", height: Setting.isMobile() ? "100px" : "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
+          <Card variant="borderless" styles={cardStyles}>
            <Statistic title={i18next.t("home:New users past 30 days")} value={dashboardData.userCounts[30] - dashboardData.userCounts[30 - 30]} valueStyle={{fontSize: "30px"}} prefix={<ArrowUpOutlined />} style={{width: "200px", paddingLeft: "10px"}} />
          </Card>
        </Col>
--- a/web/src/basic/GridCards.js
+++ b/web/src/basic/GridCards.js
@ -31,7 +31,7 @@ const GridCards = (props) => {

  return (
    Setting.isMobile() ? (
-      <Card bodyStyle={{padding: 0}}>
+      <Card styles={{body: {padding: 0}}}>
        {items.map(item => <SingleCard key={item.link} logo={item.logo} link={item.link} title={item.name} desc={item.description} isSingle={items.length === 1} />)}
      </Card>
    ) : (
--- a/web/src/common/select/OrganizationSelect.js
+++ b/web/src/common/select/OrganizationSelect.js
@ -70,6 +70,7 @@ function OrganizationSelect(props) {
    <Select
      options={getOrganizationItems()}
      virtual={false}
+      popupMatchSelectWidth={false}
      placeholder={i18next.t("login:Please select an organization")}
      value={value}
      onChange={handleOnChange}
--- a/web/src/pricing/PricingPage.js
+++ b/web/src/pricing/PricingPage.js
@ -147,7 +147,7 @@ class PricingPage extends React.Component {

    if (Setting.isMobile()) {
      return (
-        <Card style={{border: "none"}} bodyStyle={{padding: 0}}>
+        <Card style={{border: "none"}} styles={{body: {padding: 0}}}>
          {
            this.state.plans.map(item => {
              return item.period === this.state.selectedPeriod ? (
--- a/web/yarn.lock
+++ b/web/yarn.lock