refactor(console): reorg role transfer component file structure

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 = {