fix: update antd dependencies and snapshot tests (#11604)

* fix: update antd dependencies and snapshot tests

* fix: update table list form item render signature

* test: add MessageChannel polyfill for jest/jsdom environments

* fix: update antd dependency to version 6.1.3

* fix: update deprecated props in antd components

* ci: switch to bun for faster builds

* Apply suggestions from code review

.github/workflows/preview-build.yml

@@ -16,10 +16,9 @@ jobs:
         with:
           ref: ${{ github.event.pull_request.head.sha }}
 
-      - name: build
+      - uses: oven-sh/setup-bun@v2
-        run: |
+      - run: bun install
-          yarn
+      - run: bun run build
-          yarn build
 
       - name: upload dist artifact
         uses: actions/upload-artifact@v4

package.json

@@ -36,9 +36,9 @@
   ],
   "dependencies": {
     "@ant-design/icons": "^6.1.0",
-    "@ant-design/pro-components": "^2.8.9",
+    "@ant-design/pro-components": "3.1.0-0",
-    "antd": "^6.0.0",
+    "antd": "^6.2.0",
-    "antd-style": "^3.7.0",
+    "antd-style": "^4.1.0",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.13",
     "react": "^19.1.0",

src/components/HeaderDropdown/index.tsx

@@ -32,7 +32,9 @@ const HeaderDropdown: React.FC<HeaderDropdownProps> = ({
   const { styles } = useStyles();
   return (
     <Dropdown
-      overlayClassName={classNames(styles.dropdown, cls)}
+      classNames={{
+        root: classNames(styles.dropdown, cls),
+      }}
       {...restProps}
     />
   );

src/pages/Admin.tsx

@@ -15,7 +15,7 @@ const Admin: React.FC = () => {
     >
       <Card>
         <Alert
-          message={intl.formatMessage({
+          title={intl.formatMessage({
             id: 'pages.welcome.alertMessage',
             defaultMessage:
               'Faster and stronger heavy-duty components have been released.',

src/pages/table-list/index.tsx

@@ -10,7 +10,7 @@ import {
   ProTable,
 } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl, useRequest } from '@umijs/max';
-import { Button, Drawer, Input, message } from 'antd';
+import { Button, Drawer, type FormInstance, Input, message } from 'antd';
 import React, { useCallback, useRef, useState } from 'react';
 import { removeRule, rule } from '@/services/ant-design-pro/api';
 import CreateForm from './components/CreateForm';
@@ -150,7 +150,18 @@ const TableList: React.FC = () => {
       sorter: true,
       dataIndex: 'updatedAt',
       valueType: 'dateTime',
-      renderFormItem: (item, { defaultRender, ...rest }, form) => {
+      formItemRender: (
+        item: ProColumns<API.RuleListItem>,
+        {
+          defaultRender,
+          ...rest
+        }: {
+          defaultRender: (
+            item: ProColumns<API.RuleListItem>,
+          ) => React.ReactNode;
+        },
+        form: FormInstance,
+      ) => {
         const status = form.getFieldValue('status');
         if (`${status}` === '0') {
           return false;
@@ -301,7 +312,7 @@ const TableList: React.FC = () => {
       )}
 
       <Drawer
-        width={600}
+        size={600}
         open={showDetail}
         onClose={() => {
           setCurrentRow(undefined);

src/pages/user/login/__snapshots__/login.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Login Page should login success 1`] = `
 <DocumentFragment>
   <div
-    class="ant-app css-var-_r_7_"
+    class="ant-app css-var-_r_9_"
   >
     <div
       class="acss-trkbkn"
@@ -77,14 +77,14 @@ exports[`Login Page should login success 1`] = `
           >
             <form
               autocomplete="off"
-              class="ant-form ant-form-vertical css-var-_r_7_ ant-form-css-var ant-pro-form"
+              class="ant-form ant-form-vertical css-var-_r_9_ ant-form-css-var ant-pro-form"
             >
               <input
                 style="display: none;"
                 type="text"
               />
               <div
-                class="ant-tabs ant-tabs-top ant-tabs-centered css-var-_r_7_ ant-tabs-css-var"
+                class="ant-tabs ant-tabs-top ant-tabs-centered css-var-_r_9_ ant-tabs-css-var"
               >
                 <div
                   aria-orientation="horizontal"
@@ -186,13 +186,13 @@ exports[`Login Page should login success 1`] = `
                 </div>
               </div>
               <div
-                class="ant-form-item css-var-_r_7_ ant-form-css-var ant-form-item-has-success ant-form-item-vertical"
+                class="ant-form-item css-var-_r_9_ ant-form-css-var ant-form-item-has-success ant-form-item-vertical"
               >
                 <div
-                  class="ant-row ant-form-item-row css-var-_r_7_"
+                  class="ant-row ant-form-item-row css-var-_r_9_"
                 >
                   <div
-                    class="ant-col ant-form-item-control css-var-_r_7_"
+                    class="ant-col ant-form-item-control css-var-_r_9_"
                   >
                     <div
                       class="ant-form-item-control-input"
@@ -201,7 +201,7 @@ exports[`Login Page should login success 1`] = `
                         class="ant-form-item-control-input-content"
                       >
                         <span
-                          class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-outlined ant-input-status-success css-var-_r_7_ ant-input-css-var"
+                          class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-outlined ant-input-status-success css-var-_r_9_ ant-input-css-var"
                         >
                           <span
                             class="ant-input-prefix"
@@ -270,13 +270,13 @@ exports[`Login Page should login success 1`] = `
                 </div>
               </div>
               <div
-                class="ant-form-item css-var-_r_7_ ant-form-css-var ant-form-item-has-success ant-form-item-vertical"
+                class="ant-form-item css-var-_r_9_ ant-form-css-var ant-form-item-has-success ant-form-item-vertical"
               >
                 <div
-                  class="ant-row ant-form-item-row css-var-_r_7_"
+                  class="ant-row ant-form-item-row css-var-_r_9_"
                 >
                   <div
-                    class="ant-col ant-form-item-control css-var-_r_7_"
+                    class="ant-col ant-form-item-control css-var-_r_9_"
                   >
                     <div
                       class="ant-form-item-control-input"
@@ -285,7 +285,7 @@ exports[`Login Page should login success 1`] = `
                         class="ant-form-item-control-input-content"
                       >
                         <span
-                          class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-outlined ant-input-status-success ant-input-password ant-input-password-large css-var-_r_7_ ant-input-css-var"
+                          class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-outlined ant-input-status-success ant-input-password ant-input-password-large css-var-_r_9_ ant-input-css-var"
                         >
                           <span
                             class="ant-input-prefix"
@@ -354,7 +354,7 @@ exports[`Login Page should login success 1`] = `
                 style="margin-bottom: 24px;"
               >
                 <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked css-var-_r_7_ ant-checkbox-css-var"
+                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked css-var-_r_9_ ant-checkbox-css-var"
                 >
                   <span
                     class="ant-checkbox ant-wave-target ant-checkbox-checked"
@@ -382,7 +382,7 @@ exports[`Login Page should login success 1`] = `
                 </a>
               </div>
               <button
-                class="ant-btn css-var-_r_7_ ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg"
+                class="ant-btn css-var-_r_9_ ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg"
                 style="width: 100%;"
                 type="button"
               >

src/pages/user/login/index.tsx

@@ -103,7 +103,7 @@ const LoginMessage: React.FC<{
       style={{
         marginBottom: 24,
       }}
-      message={content}
+      title={content}
       type="error"
       showIcon
     />

tests/setupTests.jsx

@@ -27,6 +27,43 @@ class Worker {
   }
 }
 window.Worker = Worker;
+// Polyfill MessageChannel for environments (like jest/jsdom) that don't provide it
+if (typeof global.MessageChannel === 'undefined') {
+  class PolyMessageChannel {
+    constructor() {
+      const channel = this;
+      this.port1 = {
+        postMessage(msg) {
+          setTimeout(() => {
+            if (
+              channel.port2 &&
+              typeof channel.port2.onmessage === 'function'
+            ) {
+              channel.port2.onmessage({ data: msg });
+            }
+          }, 0);
+        },
+      };
+      this.port2 = {
+        postMessage(msg) {
+          setTimeout(() => {
+            if (
+              channel.port1 &&
+              typeof channel.port1.onmessage === 'function'
+            ) {
+              channel.port1.onmessage({ data: msg });
+            }
+          }, 0);
+        },
+      };
+    }
+  }
+
+  global.MessageChannel = PolyMessageChannel;
+  if (typeof window !== 'undefined') {
+    window.MessageChannel = PolyMessageChannel;
+  }
+}
 
 if (typeof window !== 'undefined') {
   // ref: https://github.com/ant-design/ant-design/issues/18774