Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

refactor(console): reorg role transfer component file structure (#5911)

Browse source
This commit is contained in:
Xiao Yijun 2024-05-23 17:32:22 +08:00 committed by GitHub
parent 25d67f33f3
commit fb20fc1154
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 95 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/console/src/components/RolesTransfer/SourceRolesBox/SourceRoleItem/index.module.scss Normal file
View file

@ -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);
}
}

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

@ -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>
);
}

0
packages/console/src/components/RolesTransfer/components/SourceRolesBox/index.module.scss → packages/console/src/components/RolesTransfer/SourceRolesBox/index.module.scss
View file

3
packages/console/src/components/RolesTransfer/components/SourceRolesBox/index.tsx → packages/console/src/components/RolesTransfer/SourceRolesBox/index.tsx
View file

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

17
packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.module.scss Normal file
View file

@ -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);
}
}

26
packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.tsx Normal file
View file

@ -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;

0
packages/console/src/components/RolesTransfer/components/TargetRolesBox/index.module.scss → packages/console/src/components/RolesTransfer/TargetRolesBox/index.module.scss
View file

3
packages/console/src/components/RolesTransfer/components/TargetRolesBox/index.tsx → packages/console/src/components/RolesTransfer/TargetRolesBox/index.tsx
View file

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

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

@ -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;

29
packages/console/src/components/RolesTransfer/components/RoleInformation/index.tsx Normal file
View file

@ -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;

31
packages/console/src/components/RolesTransfer/components/TargetRoleItem/index.module.scss
View file

@ -1,31 +0,0 @@
@use '@/scss/underscore' as _;
.item {
display: flex;
align-items: center;
padding: _.unit(2) _.unit(3) _.unit(2) _.unit(4);
font: var(--font-body-2);
user-select: none;
&:hover {
background-color: var(--color-hover);
}
.info {
flex: 1 1 0;
display: flex;
align-items: center;
margin-right: _.unit(2);
overflow: hidden;
.name {
@include _.text-ellipsis;
}
.count {
flex-shrink: 0;
margin-left: _.unit(2);
color: var(--color-text-secondary);
}
}
}

37
packages/console/src/components/RolesTransfer/components/TargetRoleItem/index.tsx
View file

@ -1,37 +0,0 @@
import { type RoleResponse, RoleType } from '@logto/schemas';
import { useTranslation } from 'react-i18next';
import Close from '@/assets/icons/close.svg';
import IconButton from '@/ds-components/IconButton';
import * as styles from './index.module.scss';
type Props = {
readonly role: RoleResponse;
readonly onDelete: () => void;
};
function TargetRoleItem({ role, onDelete }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const { name, type, usersCount, applicationsCount } = role;
return (
<div className={styles.item}>
<div className={styles.info}>
<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>
<IconButton size="small" onClick={onDelete}>
<Close />
</IconButton>
</div>
);
}
export default TargetRoleItem;

4
packages/console/src/components/RolesTransfer/index.tsx
View file

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