refactor(console): extract role info component for role items

packages/console/src/components/RolesTransfer/SourceRolesBox/SourceRoleItem/index.module.scss

@@ -0,0 +1,13 @@
+@use '@/scss/underscore' as _;
+
+.item {
+  display: flex;
+  align-items: center;
+  padding: _.unit(2.5) _.unit(4);
+  user-select: none;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-hover);
+  }
+}

packages/console/src/components/RolesTransfer/components/SourceRoleItem/index.tsx → packages/console/src/components/RolesTransfer/SourceRolesBox/SourceRoleItem/index.tsx

@@ -1,9 +1,10 @@
-import { type RoleResponse, RoleType } from '@logto/schemas';
-import { useTranslation } from 'react-i18next';
+import { type RoleResponse } from '@logto/schemas';
 
 import Checkbox from '@/ds-components/Checkbox';
 import { onKeyDownHandler } from '@/utils/a11y';
 
+import RoleInformation from '../../components/RoleInformation';
+
 import * as styles from './index.module.scss';
 
 type Props = {
@@ -13,9 +14,6 @@ type Props = {
 };
 
 function SourceRoleItem({ role, isSelected, onSelect }: Props) {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { name, type, usersCount, applicationsCount } = role;
-
   return (
     <div
       className={styles.item}
@@ -34,14 +32,7 @@ function SourceRoleItem({ role, isSelected, onSelect }: Props) {
           onSelect();
         }}
       />
-      <div className={styles.name}>{name}</div>
-      <div className={styles.count}>
-        (
-        {type === RoleType.User
-          ? t('user_details.roles.assigned_user_count', { value: usersCount })
-          : t('application_details.roles.assigned_app_count', { value: applicationsCount })}
-        )
-      </div>
+      <RoleInformation role={role} />
     </div>
   );
 }

packages/console/src/components/RolesTransfer/components/SourceRolesBox/index.tsx → packages/console/src/components/RolesTransfer/SourceRolesBox/index.tsx

@@ -17,8 +17,7 @@ import useDebounce from '@/hooks/use-debounce';
 import * as transferLayout from '@/scss/transfer.module.scss';
 import { buildUrl } from '@/utils/url';
 
-import SourceRoleItem from '../SourceRoleItem';
-
+import SourceRoleItem from './SourceRoleItem';
 import * as styles from './index.module.scss';
 
 type Props = {

packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.module.scss

@@ -0,0 +1,17 @@
+@use '@/scss/underscore' as _;
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: _.unit(2) _.unit(3) _.unit(2) _.unit(4);
+  user-select: none;
+
+  &:hover {
+    background-color: var(--color-hover);
+  }
+
+  .closeIcon {
+    margin-left: _.unit(1);
+  }
+}

packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.tsx

@@ -0,0 +1,26 @@
+import { type RoleResponse } from '@logto/schemas';
+
+import Close from '@/assets/icons/close.svg';
+import IconButton from '@/ds-components/IconButton';
+
+import RoleInformation from '../../components/RoleInformation';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  readonly role: RoleResponse;
+  readonly onDelete: () => void;
+};
+
+function TargetRoleItem({ role, onDelete }: Props) {
+  return (
+    <div className={styles.item}>
+      <RoleInformation role={role} />
+      <IconButton size="small" className={styles.closeIcon} onClick={onDelete}>
+        <Close />
+      </IconButton>
+    </div>
+  );
+}
+
+export default TargetRoleItem;

packages/console/src/components/RolesTransfer/components/TargetRolesBox/index.tsx → packages/console/src/components/RolesTransfer/TargetRolesBox/index.tsx

@@ -3,8 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import * as transferLayout from '@/scss/transfer.module.scss';
 
-import TargetRoleItem from '../TargetRoleItem';
-
+import TargetRoleItem from './TargetRoleItem';
 import * as styles from './index.module.scss';
 
 type Props = {

packages/console/src/components/RolesTransfer/components/SourceRoleItem/index.module.scss → packages/console/src/components/RolesTransfer/components/RoleInformation/index.module.scss

@@ -1,16 +1,10 @@
 @use '@/scss/underscore' as _;
 
-.item {
+.container {
   display: flex;
   align-items: center;
   font: var(--font-body-2);
-  padding: _.unit(2.5) _.unit(4);
-  user-select: none;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--color-hover);
-  }
+  overflow: hidden;
 
   .name {
     @include _.text-ellipsis;

packages/console/src/components/RolesTransfer/components/RoleInformation/index.tsx

@@ -0,0 +1,29 @@
+import { RoleType, type RoleResponse } from '@logto/schemas';
+import { useTranslation } from 'react-i18next';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  readonly role: RoleResponse;
+};
+
+function RoleInformation({ role }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  const { name, type, usersCount, applicationsCount } = role;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.name}>{name}</div>
+      <div className={styles.count}>
+        (
+        {type === RoleType.User
+          ? t('user_details.roles.assigned_user_count', { value: usersCount })
+          : t('application_details.roles.assigned_app_count', { value: applicationsCount })}
+        )
+      </div>
+    </div>
+  );
+}
+
+export default RoleInformation;

packages/console/src/components/RolesTransfer/index.tsx

@@ -3,8 +3,8 @@ import classNames from 'classnames';
 
 import * as transferLayout from '@/scss/transfer.module.scss';
 
-import SourceRolesBox from './components/SourceRolesBox';
-import TargetRolesBox from './components/TargetRolesBox';
+import SourceRolesBox from './SourceRolesBox';
+import TargetRolesBox from './TargetRolesBox';
 import * as styles from './index.module.scss';
 
 type Props = {