From d67b5c1f7b34d706381cb1e5231ba1769987d810 Mon Sep 17 00:00:00 2001
From: kamianlaida <165994047+wohainilaodou@users.noreply.github.com>
Date: Tue, 16 Jul 2024 12:43:36 +0800
Subject: [PATCH] [INLONG-10592][Dashboard] When there are too many selections
 in the drop-down box, omit some of them (#10593)

---
 inlong-dashboard/src/ui/locales/cn.json             |  4 +++-
 inlong-dashboard/src/ui/locales/en.json             |  4 +++-
 .../src/ui/pages/ClusterTags/TagDetailModal.tsx     | 13 +++++++++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/inlong-dashboard/src/ui/locales/cn.json b/inlong-dashboard/src/ui/locales/cn.json
index caf2cc48122..858945290a1 100644
--- a/inlong-dashboard/src/ui/locales/cn.json
+++ b/inlong-dashboard/src/ui/locales/cn.json
@@ -920,5 +920,7 @@
   "pages.GroupDataTemplate.Modifier":"修改人",
   "pages.GroupDataTemplate.VisibleRange.All":"全局",
   "pages.GroupDataTemplate.VisibleRange.InCharges":"责任人",
-  "pages.GroupDataTemplate.VisibleRange.Tenant":"租户"
+  "pages.GroupDataTemplate.VisibleRange.Tenant":"租户",
+  "miscellaneous.total": "... 共",
+  "miscellaneous.tenants": "个租户"
 }
diff --git a/inlong-dashboard/src/ui/locales/en.json b/inlong-dashboard/src/ui/locales/en.json
index 93054818b8c..7956346c2bd 100644
--- a/inlong-dashboard/src/ui/locales/en.json
+++ b/inlong-dashboard/src/ui/locales/en.json
@@ -920,5 +920,7 @@
   "pages.GroupDataTemplate.Modifier":"Modifier",
   "pages.GroupDataTemplate.VisibleRange.All":"Global",
   "pages.GroupDataTemplate.VisibleRange.InCharges":"Owner",
-  "pages.GroupDataTemplate.VisibleRange.Tenant":"Tenant"
+  "pages.GroupDataTemplate.VisibleRange.Tenant":"Tenant",
+  "miscellaneous.total": "... total ",
+  "miscellaneous.tenants": " tenants"
 }
diff --git a/inlong-dashboard/src/ui/pages/ClusterTags/TagDetailModal.tsx b/inlong-dashboard/src/ui/pages/ClusterTags/TagDetailModal.tsx
index ef9f3534d39..743e3089a31 100644
--- a/inlong-dashboard/src/ui/pages/ClusterTags/TagDetailModal.tsx
+++ b/inlong-dashboard/src/ui/pages/ClusterTags/TagDetailModal.tsx
@@ -104,6 +104,18 @@ const TagDetailModal: React.FC<TagDetailModalProps> = ({ id, ...modalProps }) =>
           showSearch: true,
           allowClear: true,
           mode: 'multiple',
+          maxTagCount: 9,
+          maxTagTextLength: 20,
+          maxTagPlaceholder: omittedValues => {
+            console.log('omittedValues', omittedValues);
+            return (
+              <span>
+                {i18n.t('miscellaneous.total')}
+                {omittedValues.length}
+                {i18n.t('miscellaneous.tenants')}
+              </span>
+            );
+          },
           options: {
             requestTrigger: ['onOpen', 'onSearch'],
             requestService: keyword => ({
@@ -136,6 +148,7 @@ const TagDetailModal: React.FC<TagDetailModalProps> = ({ id, ...modalProps }) =>
 
   return (
     <Modal
+      width={600}
       {...modalProps}
       title={i18n.t(id ? 'basic.Edit' : 'basic.Create') + i18n.t('pages.ClusterTags.Name')}
       onOk={onOk}