From ee9a6067c2a7651ad94e79f0f9cfc221ff31b1fc Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Tue, 14 Jul 2026 03:38:41 +0200
Subject: [PATCH] refactor(frontend): migrate off deprecated Ant Design 6 props

The repo's type-aware deprecation sweep (eslint.deprecated.config.js) reported fourteen findings; it now reports zero. Alert message becomes title and closable+onClose becomes closable.onClose; Select optionFilterProp moves into showSearch.optionFilterProp and suffixIcon becomes suffix; Drawer width becomes size; Progress trailColor becomes railColor. Behavior is unchanged apart from a few single-mode selects gaining type-to-filter, which the old prop already implied.
---
 .../src/pages/clients/BulkAttachInboundsModal.tsx     |  2 +-
 .../src/pages/clients/BulkDetachInboundsModal.tsx     |  2 +-
 frontend/src/pages/clients/ClientsPage.tsx            |  2 +-
 frontend/src/pages/clients/FilterDrawer.tsx           | 11 ++++-------
 frontend/src/pages/hosts/HostFormModal.tsx            |  5 ++---
 .../src/pages/inbounds/clients/AttachClientsModal.tsx |  2 +-
 .../inbounds/clients/AttachExistingClientsModal.tsx   |  2 +-
 frontend/src/pages/settings/EmailTab.tsx              |  3 +--
 frontend/src/pages/settings/TelegramTab.tsx           |  3 +--
 frontend/src/pages/sub/SubPage.tsx                    |  2 +-
 frontend/src/pages/sub/SubUsageSummary.tsx            |  2 +-
 .../src/pages/xray/balancers/BalancerFormModal.tsx    |  4 ++--
 frontend/src/pages/xray/dns/DnsPresetsModal.tsx       |  2 +-
 frontend/src/pages/xray/dns/DnsTab.tsx                |  2 +-
 14 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/frontend/src/pages/clients/BulkAttachInboundsModal.tsx b/frontend/src/pages/clients/BulkAttachInboundsModal.tsx
index 31a74ab62..81730f9d4 100644
--- a/frontend/src/pages/clients/BulkAttachInboundsModal.tsx
+++ b/frontend/src/pages/clients/BulkAttachInboundsModal.tsx
@@ -96,7 +96,7 @@ export default function BulkAttachInboundsModal({
               onChange={setTargetIds}
               options={targetOptions}
               placeholder={t('pages.clients.attachToInboundsTargets')}
-              optionFilterProp="label"
+              showSearch={{ optionFilterProp: 'label' }}
               autoFocus
             />
           </>
diff --git a/frontend/src/pages/clients/BulkDetachInboundsModal.tsx b/frontend/src/pages/clients/BulkDetachInboundsModal.tsx
index 93835c220..0cdcabe6f 100644
--- a/frontend/src/pages/clients/BulkDetachInboundsModal.tsx
+++ b/frontend/src/pages/clients/BulkDetachInboundsModal.tsx
@@ -96,7 +96,7 @@ export default function BulkDetachInboundsModal({
               onChange={setTargetIds}
               options={targetOptions}
               placeholder={t('pages.clients.detachFromInboundsTargets')}
-              optionFilterProp="label"
+              showSearch={{ optionFilterProp: 'label' }}
               autoFocus
             />
           </>
diff --git a/frontend/src/pages/clients/ClientsPage.tsx b/frontend/src/pages/clients/ClientsPage.tsx
index 4a54f8209..89f9b6d8d 100644
--- a/frontend/src/pages/clients/ClientsPage.tsx
+++ b/frontend/src/pages/clients/ClientsPage.tsx
@@ -1212,7 +1212,7 @@ export default function ClientsPage() {
                           value={sortValueFor(sortColumn, sortOrder)}
                           aria-label={t('sort')}
                           size={isMobile ? 'small' : 'middle'}
-                          suffixIcon={<SortAscendingOutlined />}
+                          suffix={<SortAscendingOutlined />}
                           style={{ minWidth: isMobile ? 130 : 200 }}
                           onChange={(value) => {
                             const opt = SORT_OPTIONS.find((o) => o.value === value);
diff --git a/frontend/src/pages/clients/FilterDrawer.tsx b/frontend/src/pages/clients/FilterDrawer.tsx
index 851e30c3e..96e54f66e 100644
--- a/frontend/src/pages/clients/FilterDrawer.tsx
+++ b/frontend/src/pages/clients/FilterDrawer.tsx
@@ -89,7 +89,7 @@ export default function FilterDrawer({
       title={t('pages.clients.filterTitle')}
       open={open}
       onClose={() => onOpenChange(false)}
-      width={420}
+      size={420}
       destroyOnHidden
       footer={
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -139,8 +139,7 @@ export default function FilterDrawer({
             placeholder={t('inbounds')}
             maxTagCount="responsive"
             allowClear
-            showSearch
-            optionFilterProp="label"
+            showSearch={{ optionFilterProp: 'label' }}
             listHeight={220}
           />
         </Form.Item>
@@ -155,8 +154,7 @@ export default function FilterDrawer({
               placeholder={t('pages.clients.filters.nodes')}
               maxTagCount="responsive"
               allowClear
-              showSearch
-              optionFilterProp="label"
+              showSearch={{ optionFilterProp: 'label' }}
               listHeight={220}
             />
           </Form.Item>
@@ -171,8 +169,7 @@ export default function FilterDrawer({
             placeholder={t('pages.clients.groupPlaceholder')}
             maxTagCount="responsive"
             allowClear
-            showSearch
-            optionFilterProp="label"
+            showSearch={{ optionFilterProp: 'label' }}
             listHeight={220}
           />
         </Form.Item>
diff --git a/frontend/src/pages/hosts/HostFormModal.tsx b/frontend/src/pages/hosts/HostFormModal.tsx
index 6dedfa087..2573b9df7 100644
--- a/frontend/src/pages/hosts/HostFormModal.tsx
+++ b/frontend/src/pages/hosts/HostFormModal.tsx
@@ -191,8 +191,7 @@ export default function HostFormModal({ open, mode, host, inboundOptions, existi
                       <Select
                         mode="multiple"
                         options={inboundSelectOptions}
-                        showSearch
-                        optionFilterProp="label"
+                        showSearch={{ optionFilterProp: 'label' }}
                         placeholder={t('pages.hosts.selectInbound')}
                       />
                     </FormField>
@@ -211,7 +210,7 @@ export default function HostFormModal({ open, mode, host, inboundOptions, existi
                       <Select mode="tags" allowClear tokenSeparators={[',']} />
                     </FormField>
                     <FormField name="nodeGuids" label={t('pages.hosts.fields.nodeGuids')} tooltip={t('pages.hosts.hints.nodeGuids')}>
-                      <Select mode="multiple" allowClear options={nodeSelectOptions} optionFilterProp="label" />
+                      <Select mode="multiple" allowClear options={nodeSelectOptions} showSearch={{ optionFilterProp: 'label' }} />
                     </FormField>
                     <FormField name="enable" label={t('pages.hosts.fields.enable')} valueProp="checked">
                       <Switch />
diff --git a/frontend/src/pages/inbounds/clients/AttachClientsModal.tsx b/frontend/src/pages/inbounds/clients/AttachClientsModal.tsx
index 666012f4b..429ed3241 100644
--- a/frontend/src/pages/inbounds/clients/AttachClientsModal.tsx
+++ b/frontend/src/pages/inbounds/clients/AttachClientsModal.tsx
@@ -203,7 +203,7 @@ export default function AttachClientsModal({
           onChange={setTargetIds}
           options={targetOptions}
           placeholder={t('pages.inbounds.attachClientsTargets')}
-          optionFilterProp="label"
+          showSearch={{ optionFilterProp: 'label' }}
         />
       )}
     </Modal>
diff --git a/frontend/src/pages/inbounds/clients/AttachExistingClientsModal.tsx b/frontend/src/pages/inbounds/clients/AttachExistingClientsModal.tsx
index 142eb4f64..806617fde 100644
--- a/frontend/src/pages/inbounds/clients/AttachExistingClientsModal.tsx
+++ b/frontend/src/pages/inbounds/clients/AttachExistingClientsModal.tsx
@@ -203,7 +203,7 @@ export default function AttachExistingClientsModal({
                     options={groupOptions}
                     placeholder={t('pages.clients.group')}
                     style={{ minWidth: 160 }}
-                    optionFilterProp="label"
+                    showSearch={{ optionFilterProp: 'label' }}
                   />
                 )}
               </Space>
diff --git a/frontend/src/pages/settings/EmailTab.tsx b/frontend/src/pages/settings/EmailTab.tsx
index eee583070..975dd37ad 100644
--- a/frontend/src/pages/settings/EmailTab.tsx
+++ b/frontend/src/pages/settings/EmailTab.tsx
@@ -113,8 +113,7 @@ export default function EmailTab({ allSetting, updateSetting }: EmailTabProps) {
                       : <span><b>{stageLabel[testResult.stage || ''] || testResult.stage}:</b> {t('pages.settings.' + testResult.msg)}</span>
                   }
                   showIcon
-                  closable
-                  onClose={() => setTestResult(null)}
+                  closable={{ onClose: () => setTestResult(null) }}
                 />
               )}
             </Space>
diff --git a/frontend/src/pages/settings/TelegramTab.tsx b/frontend/src/pages/settings/TelegramTab.tsx
index 967a34557..349435da1 100644
--- a/frontend/src/pages/settings/TelegramTab.tsx
+++ b/frontend/src/pages/settings/TelegramTab.tsx
@@ -233,8 +233,7 @@ export default function TelegramTab({ allSetting, updateSetting }: TelegramTabPr
                   type={testResult.success ? 'success' : 'error'}
                   title={testResult.msg}
                   showIcon
-                  closable
-                  onClose={() => setTestResult(null)}
+                  closable={{ onClose: () => setTestResult(null) }}
                 />
               )}
             </Space>
diff --git a/frontend/src/pages/sub/SubPage.tsx b/frontend/src/pages/sub/SubPage.tsx
index feb659bf9..d6b39089d 100644
--- a/frontend/src/pages/sub/SubPage.tsx
+++ b/frontend/src/pages/sub/SubPage.tsx
@@ -286,7 +286,7 @@ export default function SubPage() {
             <Col xs={24} sm={22} md={18} lg={14} xl={12}>
               <Card hoverable className="subscription-card" title={cardTitle} extra={cardExtra}>
                 {announce && (
-                  <Alert type="info" showIcon message={announce} style={{ marginBottom: 16 }} />
+                  <Alert type="info" showIcon title={announce} style={{ marginBottom: 16 }} />
                 )}
                 <Descriptions
                   bordered
diff --git a/frontend/src/pages/sub/SubUsageSummary.tsx b/frontend/src/pages/sub/SubUsageSummary.tsx
index 7d59f779b..5a1c255d5 100644
--- a/frontend/src/pages/sub/SubUsageSummary.tsx
+++ b/frontend/src/pages/sub/SubUsageSummary.tsx
@@ -78,7 +78,7 @@ export default function SubUsageSummary({
           percent={pct}
           showInfo={false}
           strokeColor={{ '0%': stroke.from, '100%': stroke.to }}
-          trailColor="var(--ant-color-fill-secondary)"
+          railColor="var(--ant-color-fill-secondary)"
           strokeWidth={10}
           className="usage-summary-bar"
         />
diff --git a/frontend/src/pages/xray/balancers/BalancerFormModal.tsx b/frontend/src/pages/xray/balancers/BalancerFormModal.tsx
index 1e31f7570..780e6f0e7 100644
--- a/frontend/src/pages/xray/balancers/BalancerFormModal.tsx
+++ b/frontend/src/pages/xray/balancers/BalancerFormModal.tsx
@@ -257,7 +257,7 @@ export default function BalancerFormModal({
             <Alert
               type="info"
               showIcon
-              message={t('pages.xray.balancer.balancerFallbackInfo')}
+              title={t('pages.xray.balancer.balancerFallbackInfo')}
               style={{ marginBottom: 16 }}
             />
           )}
@@ -265,7 +265,7 @@ export default function BalancerFormModal({
             <Alert
               type="error"
               showIcon
-              message={t('pages.xray.balancer.balancerFallbackCycle')}
+              title={t('pages.xray.balancer.balancerFallbackCycle')}
               style={{ marginBottom: 16 }}
             />
           )}
diff --git a/frontend/src/pages/xray/dns/DnsPresetsModal.tsx b/frontend/src/pages/xray/dns/DnsPresetsModal.tsx
index e765b7687..e8559e00e 100644
--- a/frontend/src/pages/xray/dns/DnsPresetsModal.tsx
+++ b/frontend/src/pages/xray/dns/DnsPresetsModal.tsx
@@ -86,7 +86,7 @@ export default function DnsPresetsModal({ open, onClose, onInstall }: DnsPresets
         type="warning"
         showIcon
         className="preset-warning"
-        message={t('pages.xray.dns.dnsLeakWarning')}
+        title={t('pages.xray.dns.dnsLeakWarning')}
       />
       <div className="preset-list">
         {PRESETS.map((preset) => (
diff --git a/frontend/src/pages/xray/dns/DnsTab.tsx b/frontend/src/pages/xray/dns/DnsTab.tsx
index 5bf024d74..5d5cc3ebc 100644
--- a/frontend/src/pages/xray/dns/DnsTab.tsx
+++ b/frontend/src/pages/xray/dns/DnsTab.tsx
@@ -240,7 +240,7 @@ export default function DnsTab({ templateSettings, setTemplateSettings }: DnsTab
                 <Alert
                   type="warning"
                   showIcon
-                  message={t('pages.xray.dns.dnsLeakWarning')}
+                  title={t('pages.xray.dns.dnsLeakWarning')}
                   style={{ marginBottom: 12 }}
                 />
                 <SettingListItem