Skip to content

Commit

Permalink
refactor(console): extract role info component for role items
Browse files Browse the repository at this point in the history
  • Loading branch information
xiaoyijun committed May 23, 2024
1 parent 25d67f3 commit e17c235
Show file tree
Hide file tree
Showing 13 changed files with 91 additions and 95 deletions.
Original file line number Diff line number Diff line change
@@ -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);
}
}
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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}
Expand All @@ -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>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@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);
}
}
Original file line number Diff line number Diff line change
@@ -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" onClick={onDelete}>
<Close />
</IconButton>
</div>
);
}

export default TargetRoleItem;
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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;

This file was deleted.

This file was deleted.

4 changes: 2 additions & 2 deletions packages/console/src/components/RolesTransfer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down

0 comments on commit e17c235

Please sign in to comment.