From 014d7f63c322e2ed86eb8bd37e157c362c25828e Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Mon, 3 Jun 2024 10:51:36 +0800
Subject: [PATCH] refactor(console): make long text breakable in roles page
 (#5956)

---
 packages/console/src/pages/Roles/index.module.scss |  6 ------
 packages/console/src/pages/Roles/index.tsx         | 12 ++++++------
 2 files changed, 6 insertions(+), 12 deletions(-)
 delete mode 100644 packages/console/src/pages/Roles/index.module.scss

diff --git a/packages/console/src/pages/Roles/index.module.scss b/packages/console/src/pages/Roles/index.module.scss
deleted file mode 100644
index 7fda4bad1..000000000
--- a/packages/console/src/pages/Roles/index.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use '@/scss/underscore' as _;
-
-.type,
-.description {
-  @include _.text-ellipsis;
-}
diff --git a/packages/console/src/pages/Roles/index.tsx b/packages/console/src/pages/Roles/index.tsx
index 172f8d52e..d7b693430 100644
--- a/packages/console/src/pages/Roles/index.tsx
+++ b/packages/console/src/pages/Roles/index.tsx
@@ -12,6 +12,7 @@ import UserRoleIconDark from '@/assets/icons/user-role-dark.svg';
 import UserRoleIcon from '@/assets/icons/user-role.svg';
 import RolesEmptyDark from '@/assets/images/roles-empty-dark.svg';
 import RolesEmpty from '@/assets/images/roles-empty.svg';
+import Breakable from '@/components/Breakable';
 import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
 import ItemPreview from '@/components/ItemPreview';
 import ListPage from '@/components/ListPage';
@@ -28,7 +29,6 @@ import { buildUrl, formatSearchKeyword } from '@/utils/url';
 
 import AssignedEntities from './components/AssignedEntities';
 import CreateRoleModal from './components/CreateRoleModal';
-import * as styles from './index.module.scss';
 
 const rolesPathname = '/roles';
 const createRolePathname = `${rolesPathname}/create`;
@@ -107,18 +107,18 @@ function Roles() {
           {
             title: t('roles.col_type'),
             dataIndex: 'type',
-            colSpan: 5,
+            colSpan: 4,
             render: ({ type }) => (
-              <div className={styles.type}>
+              <Breakable>
                 {type === RoleType.User ? t('roles.type_user') : t('roles.type_machine_to_machine')}
-              </div>
+              </Breakable>
             ),
           },
           {
             title: t('roles.col_description'),
             dataIndex: 'description',
-            colSpan: 5,
-            render: ({ description }) => <div className={styles.description}>{description}</div>,
+            colSpan: 6,
+            render: ({ description }) => <Breakable>{description}</Breakable>,
           },
           {
             title: <span>{t('roles.col_assigned_entities')}</span>,