opt namespace UI (#193)

* feat: opt display length according to language Signed-off-by: warjiang <1096409085@qq.com> * feat: add pop-confirm when delete namespace Signed-off-by: warjiang <1096409085@qq.com> --------- Signed-off-by: warjiang <1096409085@qq.com>
karmada-io · Feb 13, 2025 · f787eed · f787eed
1 parent 7f742ef
commit f787eed
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 9 deletions.
diff --git a/ui/apps/dashboard/locales/en-US.json b/ui/apps/dashboard/locales/en-US.json
@@ -171,6 +171,7 @@
   "d4e6e1153ed42d2b2482f22ee04ac05a": "Add",
   "f0ade52acfa0bc5bd63e7cb29db84959": "Do you want to delete {{name}} Workload?",
   "6163856192e115e6b914d6fb8c4fd82c": "Do you want to delete {{name}} Service?",
+  "b410105ce63c464d55d0b139912476e1": "Do you want to delete {{name}} Namespace?",
   "ad23e7bbdbe6ed03eebfc27eef7570fa": "View Service",
   "7afddf70e5c82fab8fa935458b53174a": "Add",
   "236513393327bd6b098056314f8676ac": "Edit Override Policy",

diff --git a/ui/apps/dashboard/locales/zh-CN.json b/ui/apps/dashboard/locales/zh-CN.json
@@ -170,6 +170,7 @@
   "d4e6e1153ed42d2b2482f22ee04ac05a": "新增集群差异化策略",
   "f0ade52acfa0bc5bd63e7cb29db84959": "确认要删除 {{name}} 工作负载么?",
   "6163856192e115e6b914d6fb8c4fd82c": "确认要删除 {{name}} 服务么",
+  "b410105ce63c464d55d0b139912476e1": "确认要删除 {{name}} 命名空间么?",
   "ad23e7bbdbe6ed03eebfc27eef7570fa": "查看服务",
   "7afddf70e5c82fab8fa935458b53174a": "新增覆盖策略",
   "236513393327bd6b098056314f8676ac": "编辑覆盖策略",

diff --git a/ui/apps/dashboard/src/pages/multicloud-resource-manage/namespace/index.tsx b/ui/apps/dashboard/src/pages/multicloud-resource-manage/namespace/index.tsx
@@ -17,7 +17,16 @@ limitations under the License.
 import i18nInstance from '@/utils/i18n';
 import Panel from '@/components/panel';
 import { useQuery } from '@tanstack/react-query';
-import { App, Button, Input, Space, Table, TableColumnProps, Tag } from 'antd';
+import {
+  App,
+  Button,
+  Input,
+  Popconfirm,
+  Space,
+  Table,
+  TableColumnProps,
+  Tag,
+} from 'antd';
 import { GetNamespaces } from '@/services/namespace.ts';
 import type { Namespace } from '@/services/namespace.ts';
 import { Icons } from '@/components/icons';
@@ -104,11 +113,12 @@ const NamespacePage = () => {
             <Button size={'small'} type="link" disabled={true}>
               {i18nInstance.t('95b351c86267f3aedf89520959bce689', '编辑')}
             </Button>
-            <Button
-              size={'small'}
-              type="link"
-              danger
-              onClick={async () => {
+            <Popconfirm
+              placement="topRight"
+              title={i18nInstance.t('b410105ce63c464d55d0b139912476e1', {
+                name: r.objectMeta.name,
+              })}
+              onConfirm={async () => {
                 const ret = await DeleteResource({
                   kind: 'namespace',
                   name: r.objectMeta.name,
@@ -130,9 +140,19 @@ const NamespacePage = () => {
                   );
                 }
               }}
+              okText={i18nInstance.t(
+                'e83a256e4f5bb4ff8b3d804b5473217a',
+                '确认',
+              )}
+              cancelText={i18nInstance.t(
+                '625fb26b4b3340f7872b411f401e754c',
+                '取消',
+              )}
             >
-              {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b', '删除')}
-            </Button>
+              <Button size={'small'} type="link" danger>
+                {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b', '删除')}
+              </Button>
+            </Popconfirm>
           </Space.Compact>
         );
       },

diff --git a/ui/apps/dashboard/src/pages/overview/index.tsx b/ui/apps/dashboard/src/pages/overview/index.tsx
@@ -220,7 +220,9 @@ const Overview = () => {
           title={i18nInstance.t('ba584c3d8a7e637efe00449e0c93900c', '资源信息')}
           bordered
           items={resourceItems}
-          labelStyle={{ width: '150px' }}
+          labelStyle={{
+            width: i18nInstance.language === 'en-US' ? '200px' : '150px',
+          }}
         />
       </Panel>
     </Spin>