This is an automated email from the ASF dual-hosted git repository.
lizhimins pushed a commit to branch rocketmq-studio
in repository https://gitbox.apache.org/repos/asf/rocketmq-dashboard.git
The following commit(s) were added to refs/heads/rocketmq-studio by this push:
new 39f04b2a fix(web): migrate deprecated Ant Design props across Studio
pages (#1835)
39f04b2a is described below
commit 39f04b2a9abb494354e6403ffdc3a7251b37f756
Author: 0 <[email protected]>
AuthorDate: Thu Aug 13 16:11:16 2026 +0800
fix(web): migrate deprecated Ant Design props across Studio pages (#1835)
Consolidates 17 per-page migration PRs by 123123213weqw: message (#1835),
certificate (#1836), client (#1837), cluster (#1838), ACL (#1839),
consumer (#1840), DLQ (#1841), instance (#1842), topic (#1843),
alert rule (#1844), settings modal (#1845), alert asset modal (#1846),
group management (#1847), LiteTopic (#1848), producer (#1849),
proxy (#1850), SSL settings (#1851). Behavior unchanged.
---
web/src/pages/cluster/certs.tsx | 21 +++------------------
web/src/pages/cluster/clients.tsx | 4 ++--
web/src/pages/cluster/index.tsx | 12 ++++++------
web/src/pages/instance/acl.tsx | 8 ++++----
web/src/pages/instance/consumer.tsx | 16 ++++++++--------
web/src/pages/instance/index.tsx | 2 +-
web/src/pages/instance/topic.tsx | 10 +++++-----
web/src/pages/ops/alerts.tsx | 2 +-
web/src/pages/studio/AlertManagement.tsx | 2 +-
web/src/pages/studio/GroupManagement.tsx | 13 ++++++++-----
web/src/pages/studio/LiteTopic.tsx | 16 ++++++++--------
web/src/pages/studio/Producer.tsx | 5 ++++-
web/src/pages/studio/SslSettings.tsx | 2 +-
13 files changed, 52 insertions(+), 61 deletions(-)
diff --git a/web/src/pages/cluster/certs.tsx b/web/src/pages/cluster/certs.tsx
index c06e8dba..c916ce6f 100644
--- a/web/src/pages/cluster/certs.tsx
+++ b/web/src/pages/cluster/certs.tsx
@@ -16,18 +16,7 @@
*/
import { useEffect, useState } from 'react';
-import {
- Table,
- Tag,
- Input,
- Select,
- Flex,
- Space,
- Typography,
- Card,
- Alert,
- message,
-} from 'antd';
+import { Table, Tag, Input, Select, Flex, Space, Typography, Card, Alert,
message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import PageHeader from '../../components/PageHeader';
import type { K8sCertInfo } from '../../api/cluster';
@@ -197,10 +186,7 @@ const K8sCertsPage = () => {
return (
<div style={{ padding: 24 }}>
- <PageHeader
- title="K8s 证书管理"
- subtitle={`共 ${filteredCerts.length} 个证书`}
- />
+ <PageHeader title="K8s 证书管理" subtitle={`共 ${filteredCerts.length} 个证书`}
/>
<Alert
data-testid="k8s-cert-local-metadata-notice"
type="warning"
@@ -238,7 +224,7 @@ const K8sCertsPage = () => {
/>
</Space>
</Flex>
- <Card bodyStyle={{ padding: 0 }}>
+ <Card styles={{ body: { padding: 0 } }}>
<Table
columns={certColumns}
dataSource={filteredCerts}
@@ -249,7 +235,6 @@ const K8sCertsPage = () => {
scroll={{ x: 1750 }}
/>
</Card>
-
</div>
);
};
diff --git a/web/src/pages/cluster/clients.tsx
b/web/src/pages/cluster/clients.tsx
index b944ba43..4cceb64b 100644
--- a/web/src/pages/cluster/clients.tsx
+++ b/web/src/pages/cluster/clients.tsx
@@ -504,7 +504,7 @@ const ClientsPage = () => {
</Flex>
{/* ─── Table ─── */}
- <Card bodyStyle={{ padding: 0 }}>
+ <Card styles={{ body: { padding: 0 } }}>
<Table
columns={columns}
dataSource={filtered}
@@ -528,7 +528,7 @@ const ClientsPage = () => {
onCancel={() => setSelectedConnection(null)}
footer={<Button onClick={() =>
setSelectedConnection(null)}>{t('common.close')}</Button>}
width={640}
- destroyOnClose
+ destroyOnHidden
>
{selectedConnection && (
<Descriptions column={1} bordered size="small">
diff --git a/web/src/pages/cluster/index.tsx b/web/src/pages/cluster/index.tsx
index d6bc2076..ea68c3c7 100644
--- a/web/src/pages/cluster/index.tsx
+++ b/web/src/pages/cluster/index.tsx
@@ -553,7 +553,7 @@ const ClusterPage = () => {
{t('cluster.createCluster')}
</Button>
</Flex>
- <Card bodyStyle={{ padding: 0 }}>
+ <Card styles={{ body: { padding: 0 } }}>
<Table
columns={brokerColumns}
dataSource={allBrokers}
@@ -816,7 +816,7 @@ const ClusterPage = () => {
{t('cluster.createNameServer')}
</Button>
</Flex>
- <Card bodyStyle={{ padding: 0 }}>
+ <Card styles={{ body: { padding: 0 } }}>
<Table
columns={clusterColumns}
dataSource={filteredClusters}
@@ -987,7 +987,7 @@ const ClusterPage = () => {
{t('cluster.createCluster')}
</Button>
</Flex>
- <Card bodyStyle={{ padding: 0 }}>
+ <Card styles={{ body: { padding: 0 } }}>
<Table
columns={proxyColumns}
dataSource={allProxies}
@@ -1110,7 +1110,7 @@ const ClusterPage = () => {
}}
okText={t('common.confirm')}
cancelText={t('common.cancel')}
- destroyOnClose
+ destroyOnHidden
>
<Form form={nsForm} layout="vertical" style={{ marginTop: 16 }}>
{nsModalMode === 'create' && (
@@ -1146,7 +1146,7 @@ const ClusterPage = () => {
onCancel={() => setSelectedProxy(null)}
footer={<Button onClick={() =>
setSelectedProxy(null)}>{t('common.close')}</Button>}
width={560}
- destroyOnClose
+ destroyOnHidden
>
{selectedProxy && (
<Descriptions column={1} bordered size="small">
@@ -1197,7 +1197,7 @@ const ClusterPage = () => {
confirmLoading={connectTesting}
onOk={handleTestConnection}
width={560}
- destroyOnClose
+ destroyOnHidden
>
<Text type="secondary">{t('cluster.testConnectionDesc')}</Text>
<Form form={connectForm} layout="vertical" style={{ marginTop: 16 }}>
diff --git a/web/src/pages/instance/acl.tsx b/web/src/pages/instance/acl.tsx
index 56423a31..74151151 100644
--- a/web/src/pages/instance/acl.tsx
+++ b/web/src/pages/instance/acl.tsx
@@ -877,7 +877,7 @@ const AclPage = () => {
style={{ marginBottom: 16 }}
/>
- <Card bordered={false} bodyStyle={{ padding: 0 }}>
+ <Card variant="borderless" styles={{ body: { padding: 0 } }}>
<Tabs
activeKey={activeTab}
onChange={setActiveTab}
@@ -1101,7 +1101,7 @@ const AclPage = () => {
cancelText={t('common.cancel')}
confirmLoading={ruleSubmitting}
width={560}
- destroyOnClose
+ destroyOnHidden
>
<Form form={ruleForm} layout="vertical" style={{ marginTop: 16 }}>
<Form.Item
@@ -1200,7 +1200,7 @@ const AclPage = () => {
cancelText={t('common.cancel')}
confirmLoading={userSubmitting}
width={520}
- destroyOnClose
+ destroyOnHidden
>
<Form form={userForm} layout="vertical" style={{ marginTop: 16 }}>
<Form.Item
@@ -1237,7 +1237,7 @@ const AclPage = () => {
cancelText={t('common.cancel')}
confirmLoading={plainSubmitting}
width={560}
- destroyOnClose
+ destroyOnHidden
>
<Form form={plainForm} layout="vertical" style={{ marginTop: 16 }}>
<Form.Item
diff --git a/web/src/pages/instance/consumer.tsx
b/web/src/pages/instance/consumer.tsx
index dc9d683f..350e856c 100644
--- a/web/src/pages/instance/consumer.tsx
+++ b/web/src/pages/instance/consumer.tsx
@@ -944,7 +944,7 @@ const ConsumerPageContent = ({
</Flex>
{/* ─── Table with expandable rows ─── */}
- <Card bodyStyle={{ padding: 0 }}>
+ <Card styles={{ body: { padding: 0 } }}>
<Table
columns={columns}
dataSource={filtered}
@@ -1005,7 +1005,7 @@ const ConsumerPageContent = ({
setShowOnlyInconsistent(false);
}}
width={800}
- destroyOnClose
+ destroyOnHidden
footer={null}
>
{selectedGroup && (
@@ -1084,7 +1084,7 @@ const ConsumerPageContent = ({
bordered
column={2}
size="small"
- labelStyle={{ fontWeight: 500, width: 140 }}
+ styles={{ label: { fontWeight: 500, width: 140 } }}
>
<Descriptions.Item label="Group 名称">
<Text strong>{selectedGroup.name}</Text>
@@ -1246,7 +1246,7 @@ const ConsumerPageContent = ({
background: '#fafafa',
borderRadius: 8,
}}
- bodyStyle={{ padding: '8px 16px' }}
+ styles={{ body: { padding: '8px 16px' } }}
>
<Space size={24}>
<Space size={4}>
@@ -1306,7 +1306,7 @@ const ConsumerPageContent = ({
}}
footer={null}
width={900}
- destroyOnClose
+ destroyOnHidden
>
<Space direction="vertical" size={16} style={{ width: '100%' }}>
<Descriptions bordered column={2} size="small">
@@ -1438,7 +1438,7 @@ const ConsumerPageContent = ({
okText="创建"
cancelText="取消"
width={560}
- destroyOnClose
+ destroyOnHidden
>
<Form
form={form}
@@ -1538,7 +1538,7 @@ const ConsumerPageContent = ({
importRows.every((row) => row.status === 'success' || row.status
=== 'invalid'),
}}
width={720}
- destroyOnClose
+ destroyOnHidden
>
<Space direction="vertical" style={{ width: '100%' }} size={12}>
{importErrors.length > 0 ? (
@@ -1621,7 +1621,7 @@ const ConsumerPageContent = ({
okText="确认重置"
cancelText="取消"
width={480}
- destroyOnClose
+ destroyOnHidden
>
{resetGroup && (
<div style={{ marginTop: 16 }}>
diff --git a/web/src/pages/instance/index.tsx b/web/src/pages/instance/index.tsx
index ef466a45..e75828f4 100644
--- a/web/src/pages/instance/index.tsx
+++ b/web/src/pages/instance/index.tsx
@@ -563,7 +563,7 @@ const InstancePage = () => {
</Flex>
{/* Table */}
- <Card bodyStyle={{ padding: 0 }}>
+ <Card styles={{ body: { padding: 0 } }}>
<Table
className="instance-table"
columns={columns}
diff --git a/web/src/pages/instance/topic.tsx b/web/src/pages/instance/topic.tsx
index 898460e2..d7206682 100644
--- a/web/src/pages/instance/topic.tsx
+++ b/web/src/pages/instance/topic.tsx
@@ -617,7 +617,7 @@ const TopicPage = () => {
const typeInfo = TOPIC_TYPE_MAP[topic.type];
return (
- <Descriptions bordered column={2} size="small" labelStyle={{ fontWeight:
500 }}>
+ <Descriptions bordered column={2} size="small" styles={{ label: {
fontWeight: 500 } }}>
<Descriptions.Item label="Topic 名称" span={2}>
{topic.name}
</Descriptions.Item>
@@ -1112,7 +1112,7 @@ const TopicPage = () => {
open={detailModalOpen}
onCancel={() => setDetailModalOpen(false)}
width={800}
- destroyOnClose
+ destroyOnHidden
footer={null}
>
{selectedTopic && (
@@ -1200,7 +1200,7 @@ const TopicPage = () => {
okText="创建"
cancelText="取消"
width={560}
- destroyOnClose
+ destroyOnHidden
>
<Form
form={form}
@@ -1299,7 +1299,7 @@ const TopicPage = () => {
importRows.every((row) => row.status === 'success' || row.status
=== 'invalid'),
}}
width={720}
- destroyOnClose
+ destroyOnHidden
>
<Space direction="vertical" style={{ width: '100%' }} size={12}>
{importErrors.length > 0 ? (
@@ -1354,7 +1354,7 @@ const TopicPage = () => {
cancelText="取消"
confirmLoading={sending}
width={640}
- destroyOnClose
+ destroyOnHidden
>
<Form
form={sendForm}
diff --git a/web/src/pages/ops/alerts.tsx b/web/src/pages/ops/alerts.tsx
index 65e93c73..b47a99ff 100644
--- a/web/src/pages/ops/alerts.tsx
+++ b/web/src/pages/ops/alerts.tsx
@@ -364,7 +364,7 @@ const AlertsPage = () => {
/>
{/* ─── Table ─── */}
- <Card bodyStyle={{ padding: 0 }}>
+ <Card styles={{ body: { padding: 0 } }}>
<Flex
align="center"
justify="space-between"
diff --git a/web/src/pages/studio/AlertManagement.tsx
b/web/src/pages/studio/AlertManagement.tsx
index a2a31903..5eeef011 100644
--- a/web/src/pages/studio/AlertManagement.tsx
+++ b/web/src/pages/studio/AlertManagement.tsx
@@ -737,7 +737,7 @@ const AlertManagementPage: React.FC = () => {
form.resetFields();
}}
width={720}
- destroyOnClose
+ destroyOnHidden
>
<Form form={form} layout="vertical" style={{ marginTop: 16 }}>
<Row gutter={16}>
diff --git a/web/src/pages/studio/GroupManagement.tsx
b/web/src/pages/studio/GroupManagement.tsx
index 8a2e05e1..31b82e45 100644
--- a/web/src/pages/studio/GroupManagement.tsx
+++ b/web/src/pages/studio/GroupManagement.tsx
@@ -318,7 +318,10 @@ const GroupManagementPage = () => {
</Space>
</div>
- <Card bordered={false} style={{ borderRadius: 8, boxShadow: '0 1px 6px
rgba(0,0,0,0.04)' }}>
+ <Card
+ variant="borderless"
+ style={{ borderRadius: 8, boxShadow: '0 1px 6px rgba(0,0,0,0.04)' }}
+ >
<Table
columns={columns}
dataSource={filteredGroupData}
@@ -344,7 +347,7 @@ const GroupManagementPage = () => {
}}
footer={null}
width={720}
- destroyOnClose
+ destroyOnHidden
>
<div style={{ marginBottom: 16 }}>
<h3 style={{ margin: 0, display: 'flex', alignItems: 'center' }}>
@@ -363,7 +366,7 @@ const GroupManagementPage = () => {
<div>
<Row gutter={16} style={{ marginBottom: 20 }}>
<Col span={8}>
- <Card bordered={false} style={{ background: '#f6ffed'
}}>
+ <Card variant="borderless" style={{ background:
'#f6ffed' }}>
<div style={{ color: '#666', fontSize: 12 }}>
{t('groupMgmt.onlineInstances')}
</div>
@@ -381,7 +384,7 @@ const GroupManagementPage = () => {
</Card>
</Col>
<Col span={8}>
- <Card bordered={false} style={{ background: '#fff2f0'
}}>
+ <Card variant="borderless" style={{ background:
'#fff2f0' }}>
<div style={{ color: '#666', fontSize: 12 }}>
{t('groupMgmt.totalDiff')}
</div>
@@ -391,7 +394,7 @@ const GroupManagementPage = () => {
</Card>
</Col>
<Col span={8}>
- <Card bordered={false} style={{ background: '#f0f5ff'
}}>
+ <Card variant="borderless" style={{ background:
'#f0f5ff' }}>
<div style={{ color: '#666', fontSize: 12 }}>
{t('groupMgmt.subscribedTopics')}
</div>
diff --git a/web/src/pages/studio/LiteTopic.tsx
b/web/src/pages/studio/LiteTopic.tsx
index 466b56e4..44ae5d09 100644
--- a/web/src/pages/studio/LiteTopic.tsx
+++ b/web/src/pages/studio/LiteTopic.tsx
@@ -430,7 +430,7 @@ const LiteTopicPage: React.FC = () => {
: 0;
return (
- <Card bordered={false} style={{ marginBottom: 16, borderRadius: 8 }}>
+ <Card variant="borderless" style={{ marginBottom: 16, borderRadius: 8 }}>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 16
}}>
<Gauge size={20} weight="bold" style={{ marginRight: 8, color:
'#1677ff' }} />
<h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>
@@ -592,7 +592,7 @@ const LiteTopicPage: React.FC = () => {
<Row gutter={16}>
<Col span={8}>
<Card
- bordered={false}
+ variant="borderless"
style={{ background: '#f6ffed', borderRadius: 8, textAlign:
'center', padding: 12 }}
>
<div style={{ fontSize: 12, color: '#8c8c8c', marginBottom: 4 }}>
@@ -603,7 +603,7 @@ const LiteTopicPage: React.FC = () => {
</Col>
<Col span={8}>
<Card
- bordered={false}
+ variant="borderless"
style={{ background: '#f6ffed', borderRadius: 8, textAlign:
'center', padding: 12 }}
>
<div style={{ fontSize: 12, color: '#8c8c8c', marginBottom: 4 }}>
@@ -616,7 +616,7 @@ const LiteTopicPage: React.FC = () => {
</Col>
<Col span={8}>
<Card
- bordered={false}
+ variant="borderless"
style={{ background: '#fffbe6', borderRadius: 8, textAlign:
'center', padding: 12 }}
>
<div style={{ fontSize: 12, color: '#8c8c8c', marginBottom: 4 }}>
@@ -724,7 +724,7 @@ const LiteTopicPage: React.FC = () => {
{renderQuotaPanel()}
{/* Search / Filter Bar */}
- <Card bordered={false} style={{ marginBottom: 16, borderRadius: 8 }}>
+ <Card variant="borderless" style={{ marginBottom: 16, borderRadius: 8 }}>
<Space size="middle" wrap>
<Input
placeholder={t('liteTopic.searchPlaceholder')}
@@ -770,7 +770,7 @@ const LiteTopicPage: React.FC = () => {
</Card>
{/* Main Table */}
- <Card bordered={false} style={{ borderRadius: 8 }}>
+ <Card variant="borderless" style={{ borderRadius: 8 }}>
<Table
columns={columns}
dataSource={filteredTopicList}
@@ -800,7 +800,7 @@ const LiteTopicPage: React.FC = () => {
setSessionDrawerOpen(false);
setSessionData(null);
}}
- destroyOnClose
+ destroyOnHidden
>
{renderSessionContent()}
</Drawer>
@@ -814,7 +814,7 @@ const LiteTopicPage: React.FC = () => {
confirmLoading={extendTTLLoading}
okText={t('common.confirm')}
cancelText={t('common.cancel')}
- destroyOnClose
+ destroyOnHidden
>
<Form layout="vertical" style={{ marginTop: 16 }}>
<Form.Item label={t('liteTopic.pattern')}>
diff --git a/web/src/pages/studio/Producer.tsx
b/web/src/pages/studio/Producer.tsx
index 764f7546..a6b049bc 100644
--- a/web/src/pages/studio/Producer.tsx
+++ b/web/src/pages/studio/Producer.tsx
@@ -237,7 +237,10 @@ const ProducerPage = () => {
<h2 style={{ fontSize: 20, fontWeight: 600, margin: 0
}}>{t('producer.title')}</h2>
</div>
- <Card bordered={false} style={{ borderRadius: 8, boxShadow: '0 1px 6px
rgba(0,0,0,0.04)' }}>
+ <Card
+ variant="borderless"
+ style={{ borderRadius: 8, boxShadow: '0 1px 6px rgba(0,0,0,0.04)' }}
+ >
<Form form={form} layout="inline" onFinish={onFinish} style={{
marginBottom: 20 }}>
<Form.Item label="INSTANCE">
<Select
diff --git a/web/src/pages/studio/SslSettings.tsx
b/web/src/pages/studio/SslSettings.tsx
index 43fb03af..0fb36544 100644
--- a/web/src/pages/studio/SslSettings.tsx
+++ b/web/src/pages/studio/SslSettings.tsx
@@ -31,7 +31,7 @@ const SslSettingsPage = () => {
<span>{t('ssl.title')}</span>
</Space>
}
- bordered={false}
+ variant="borderless"
style={{ borderRadius: 8, boxShadow: '0 1px 6px rgba(0,0,0,0.04)' }}
>
<Alert
