0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-10 22:22:45 -05:00

refactor(console): update search placeholder (#2948)

This commit is contained in:
Xiao Yijun 2023-01-16 12:36:39 +08:00 committed by GitHub
parent a484d67cf5
commit 102019108c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
50 changed files with 99 additions and 39 deletions

View file

@ -9,6 +9,10 @@
display: flex;
justify-content: space-between;
align-items: center;
.searchInput {
width: 306px;
}
}
tbody {

View file

@ -112,8 +112,14 @@ const PermissionsTable = ({
filter={
<div className={styles.filter}>
<Search
inputClassName={styles.searchInput}
defaultValue={keyword}
isClearable={Boolean(keyword)}
placeholder={t(
isApiColumnVisible
? 'permissions.search_placeholder'
: 'permissions.search_placeholder_without_api'
)}
onSearch={searchHandler}
onClearSearch={clearSearchHandler}
/>

View file

@ -4,14 +4,10 @@
display: flex;
align-items: center;
:not(:first-child) {
>:not(:first-child) {
margin-left: _.unit(2);
}
.searchInput {
width: 286px;
}
.searchIcon {
color: var(--color-text-secondary);
}

View file

@ -11,11 +11,20 @@ import * as styles from './index.module.scss';
type Props = {
defaultValue?: string;
isClearable?: boolean;
placeholder?: string;
inputClassName?: string;
onSearch?: (value: string) => void;
onClearSearch?: () => void;
};
const Search = ({ defaultValue = '', isClearable = false, onSearch, onClearSearch }: Props) => {
const Search = ({
defaultValue = '',
isClearable = false,
placeholder,
inputClassName,
onSearch,
onClearSearch,
}: Props) => {
const [inputValue, setInputValue] = useState<string>(defaultValue);
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@ -35,15 +44,14 @@ const Search = ({ defaultValue = '', isClearable = false, onSearch, onClearSearc
return (
<div className={styles.search}>
<div className={styles.searchInput}>
<TextInput
value={inputValue}
icon={<SearchIcon className={styles.searchIcon} />}
placeholder={t('general.search_placeholder')}
onChange={handleSearchChange}
onKeyPress={handleSearchKeyPress}
/>
</div>
<TextInput
className={inputClassName}
value={inputValue}
icon={<SearchIcon className={styles.searchIcon} />}
placeholder={placeholder}
onChange={handleSearchChange}
onKeyPress={handleSearchKeyPress}
/>
<Button title="general.search" onClick={handleClick} />
{isClearable && (
<Button size="small" type="text" title="general.clear_result" onClick={onClearSearch} />

View file

@ -128,6 +128,7 @@ const RoleUsers = () => {
<Search
defaultValue={keyword}
isClearable={Boolean(keyword)}
placeholder={t('general.search_placeholder')}
onSearch={(value) => {
setKeyword(value);
setPageIndex(1);

View file

@ -0,0 +1,3 @@
.search {
width: 306px;
}

View file

@ -17,6 +17,7 @@ import { buildUrl } from '@/utilities/url';
import AssignedUsers from './components/AssignedUsers';
import CreateRoleModal from './components/CreateRoleModal';
import * as styles from './index.module.scss';
const rolesPathname = '/roles';
const createRolePathname = `${rolesPathname}/create`;
@ -92,6 +93,8 @@ const Roles = () => {
}}
filter={
<Search
inputClassName={styles.search}
placeholder={t('roles.search')}
defaultValue={keyword}
isClearable={Boolean(keyword)}
onSearch={(value) => {

View file

@ -108,6 +108,7 @@ const UserRoles = () => {
<Search
defaultValue={keyword}
isClearable={Boolean(keyword)}
placeholder={t('user_details.roles.search')}
onSearch={(value) => {
setKeyword(value);
setPageIndex(1);

View file

@ -5,6 +5,10 @@
background-color: var(--color-layer-1);
border-bottom: 1px solid var(--color-divider);
border-radius: 12px 12px 0 0;
.searchInput {
width: 338px;
}
}
.tableLayout {

View file

@ -85,6 +85,8 @@ const Users = () => {
<div className={classNames(resourcesStyles.table, styles.tableLayout)}>
<div className={styles.filter}>
<Search
inputClassName={styles.searchInput}
placeholder={t('users.search')}
defaultValue={keyword}
isClearable={Boolean(keyword)}
onSearch={(value) => {

View file

@ -1,5 +1,6 @@
const permissions = {
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
search_placeholder: 'Search by API or permission name', // UNTRANSLATED
search_placeholder_without_api: 'Search by permission name', // UNTRANSLATED
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED

View file

@ -18,7 +18,6 @@ const role_details = {
assign_subtitle:
'Assign permissions to this role. The role will gain the added permissions, and users with this role will inherit these permissions.', // UNTRANSLATED
assign_form_filed: 'Assign permissions', // UNTRANSLATED
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
added_text: '{{value, number}} permissions added', // UNTRANSLATED
api_permission_count: '{{value, number}} permissions', // UNTRANSLATED
confirm_assign: 'Assign Permission', // UNTRANSLATED
@ -36,7 +35,8 @@ const role_details = {
'It will remain in your user pool but lose the authorization for this role.', // UNTRANSLATED
deleted: '{{name}} was successfully removed from this role!', // UNTRANSLATED
assign_title: 'Assign users', // UNTRANSLATED
assign_subtitle: 'Assign users to the role', // UNTRANSLATED
assign_subtitle:
'Assign users to this role. Find appropriate users by searching name, email, phone, or user ID.', // UNTRANSLATED
assign_users_field: 'Assign users', // UNTRANSLATED
confirm_assign: 'Assign users', // UNTRANSLATED
users_assigned: 'The selected users were successfully assigned to this role!', // UNTRANSLATED

View file

@ -14,6 +14,7 @@ const roles = {
'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', // UNTRANSLATED
create_role_button: 'Create role', // UNTRANSLATED
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
};
export default roles;

View file

@ -57,6 +57,7 @@ const user_details = {
assigned_user_count: '{{value, number}} users', // UNTRANSLATED
confirm_assign: 'Assign roles', // UNTRANSLATED
role_assigned: 'Successfully assigned role(s)', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
},
};

View file

@ -10,6 +10,7 @@ const users = {
create_form_password: 'Passwort',
create_form_name: 'Name',
unnamed: 'Unbenannt',
search: 'Search by name, email, phone or username', // UNTRANSLATED
};
export default users;

View file

@ -1,5 +1,6 @@
const permissions = {
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
search_placeholder: 'Search by API or permission name',
search_placeholder_without_api: 'Search by permission name',
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED

View file

@ -18,7 +18,6 @@ const role_details = {
assign_subtitle:
'Assign permissions to this role. The role will gain the added permissions, and users with this role will inherit these permissions.',
assign_form_filed: 'Assign permissions',
search_placeholder: 'Search by API or Permission name',
added_text: '{{value, number}} permissions added',
api_permission_count: '{{value, number}} permissions',
confirm_assign: 'Assign Permission',
@ -36,7 +35,8 @@ const role_details = {
'It will remain in your user pool but lose the authorization for this role.',
deleted: '{{name}} was successfully removed from this role!', // UNTRANSLATED
assign_title: 'Assign users',
assign_subtitle: 'Assign users to the role',
assign_subtitle:
'Assign users to this role. Find appropriate users by searching name, email, phone, or user ID.',
assign_users_field: 'Assign users',
confirm_assign: 'Assign users',
users_assigned: 'The selected users were successfully assigned to this role!',

View file

@ -14,6 +14,7 @@ const roles = {
'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.',
create_role_button: 'Create role',
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
search: 'Search by role name, description or ID',
};
export default roles;

View file

@ -55,6 +55,7 @@ const user_details = {
assigned_user_count: '{{value, number}} users',
confirm_assign: 'Assign roles',
role_assigned: 'Successfully assigned role(s)',
search: 'Search by role name, description or ID',
},
};

View file

@ -10,6 +10,7 @@ const users = {
create_form_password: 'Password',
create_form_name: 'Full name',
unnamed: 'Unnamed',
search: 'Search by name, email, phone or username',
};
export default users;

View file

@ -1,5 +1,6 @@
const permissions = {
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
search_placeholder: 'Search by API or permission name', // UNTRANSLATED
search_placeholder_without_api: 'Search by permission name', // UNTRANSLATED
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED

View file

@ -18,7 +18,6 @@ const role_details = {
assign_subtitle:
'Assign permissions to this role. The role will gain the added permissions, and users with this role will inherit these permissions.', // UNTRANSLATED
assign_form_filed: 'Assign permissions', // UNTRANSLATED
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
added_text: '{{value, number}} permissions added', // UNTRANSLATED
api_permission_count: '{{value, number}} permissions', // UNTRANSLATED
confirm_assign: 'Assign Permission', // UNTRANSLATED
@ -36,7 +35,8 @@ const role_details = {
'It will remain in your user pool but lose the authorization for this role.', // UNTRANSLATED
deleted: '{{name}} was successfully removed from this role!', // UNTRANSLATED
assign_title: 'Assign users', // UNTRANSLATED
assign_subtitle: 'Assign users to the role', // UNTRANSLATED
assign_subtitle:
'Assign users to this role. Find appropriate users by searching name, email, phone, or user ID.', // UNTRANSLATED
assign_users_field: 'Assign users', // UNTRANSLATED
confirm_assign: 'Assign users', // UNTRANSLATED
users_assigned: 'The selected users were successfully assigned to this role!', // UNTRANSLATED

View file

@ -14,6 +14,7 @@ const roles = {
'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', // UNTRANSLATED
create_role_button: 'Create role', // UNTRANSLATED
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
};
export default roles;

View file

@ -57,6 +57,7 @@ const user_details = {
assigned_user_count: '{{value, number}} users', // UNTRANSLATED
confirm_assign: 'Assign roles', // UNTRANSLATED
role_assigned: 'Successfully assigned role(s)', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
},
};

View file

@ -10,6 +10,7 @@ const users = {
create_form_password: 'Mot de passe',
create_form_name: 'Nom complet',
unnamed: 'Sans nom',
search: 'Search by name, email, phone or username', // UNTRANSLATED
};
export default users;

View file

@ -1,5 +1,6 @@
const permissions = {
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
search_placeholder: 'Search by API or permission name', // UNTRANSLATED
search_placeholder_without_api: 'Search by permission name', // UNTRANSLATED
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED

View file

@ -18,7 +18,6 @@ const role_details = {
assign_subtitle:
'Assign permissions to this role. The role will gain the added permissions, and users with this role will inherit these permissions.', // UNTRANSLATED
assign_form_filed: 'Assign permissions', // UNTRANSLATED
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
added_text: '{{value, number}} permissions added', // UNTRANSLATED
api_permission_count: '{{value, number}} permissions', // UNTRANSLATED
confirm_assign: 'Assign Permission', // UNTRANSLATED
@ -36,7 +35,8 @@ const role_details = {
'It will remain in your user pool but lose the authorization for this role.', // UNTRANSLATED
deleted: '{{name}} was successfully removed from this role!', // UNTRANSLATED
assign_title: 'Assign users', // UNTRANSLATED
assign_subtitle: 'Assign users to the role', // UNTRANSLATED
assign_subtitle:
'Assign users to this role. Find appropriate users by searching name, email, phone, or user ID.', // UNTRANSLATED
assign_users_field: 'Assign users', // UNTRANSLATED
confirm_assign: 'Assign users', // UNTRANSLATED
users_assigned: 'The selected users were successfully assigned to this role!', // UNTRANSLATED

View file

@ -14,6 +14,7 @@ const roles = {
'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', // UNTRANSLATED
create_role_button: 'Create role', // UNTRANSLATED
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
};
export default roles;

View file

@ -54,6 +54,7 @@ const user_details = {
assigned_user_count: '{{value, number}} users', // UNTRANSLATED
confirm_assign: 'Assign roles', // UNTRANSLATED
role_assigned: 'Successfully assigned role(s)', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
},
};

View file

@ -9,6 +9,7 @@ const users = {
create_form_password: '비밀번호',
create_form_name: '이름',
unnamed: '이름없음',
search: 'Search by name, email, phone or username', // UNTRANSLATED
};
export default users;

View file

@ -1,5 +1,6 @@
const permissions = {
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
search_placeholder: 'Search by API or permission name', // UNTRANSLATED
search_placeholder_without_api: 'Search by permission name', // UNTRANSLATED
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED

View file

@ -18,7 +18,6 @@ const role_details = {
assign_subtitle:
'Assign permissions to this role. The role will gain the added permissions, and users with this role will inherit these permissions.', // UNTRANSLATED
assign_form_filed: 'Assign permissions', // UNTRANSLATED
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
added_text: '{{value, number}} permissions added', // UNTRANSLATED
api_permission_count: '{{value, number}} permissions', // UNTRANSLATED
confirm_assign: 'Assign Permission', // UNTRANSLATED
@ -36,7 +35,8 @@ const role_details = {
'It will remain in your user pool but lose the authorization for this role.', // UNTRANSLATED
deleted: '{{name}} was successfully removed from this role!', // UNTRANSLATED
assign_title: 'Assign users', // UNTRANSLATED
assign_subtitle: 'Assign users to the role', // UNTRANSLATED
assign_subtitle:
'Assign users to this role. Find appropriate users by searching name, email, phone, or user ID.', // UNTRANSLATED
assign_users_field: 'Assign users', // UNTRANSLATED
confirm_assign: 'Assign users', // UNTRANSLATED
users_assigned: 'The selected users were successfully assigned to this role!', // UNTRANSLATED

View file

@ -14,6 +14,7 @@ const roles = {
'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', // UNTRANSLATED
create_role_button: 'Create role', // UNTRANSLATED
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
};
export default roles;

View file

@ -55,6 +55,7 @@ const user_details = {
assigned_user_count: '{{value, number}} users', // UNTRANSLATED
confirm_assign: 'Assign roles', // UNTRANSLATED
role_assigned: 'Successfully assigned role(s)', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
},
};

View file

@ -10,6 +10,7 @@ const users = {
create_form_password: 'Senha',
create_form_name: 'Nome completo',
unnamed: 'Sem nome',
search: 'Search by name, email, phone or username', // UNTRANSLATED
};
export default users;

View file

@ -1,5 +1,6 @@
const permissions = {
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
search_placeholder: 'Search by API or permission name', // UNTRANSLATED
search_placeholder_without_api: 'Search by permission name', // UNTRANSLATED
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED

View file

@ -18,7 +18,6 @@ const role_details = {
assign_subtitle:
'Assign permissions to this role. The role will gain the added permissions, and users with this role will inherit these permissions.', // UNTRANSLATED
assign_form_filed: 'Assign permissions', // UNTRANSLATED
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
added_text: '{{value, number}} permissions added', // UNTRANSLATED
api_permission_count: '{{value, number}} permissions', // UNTRANSLATED
confirm_assign: 'Assign Permission', // UNTRANSLATED
@ -36,7 +35,8 @@ const role_details = {
'It will remain in your user pool but lose the authorization for this role.', // UNTRANSLATED
deleted: '{{name}} was successfully removed from this role!', // UNTRANSLATED
assign_title: 'Assign users', // UNTRANSLATED
assign_subtitle: 'Assign users to the role', // UNTRANSLATED
assign_subtitle:
'Assign users to this role. Find appropriate users by searching name, email, phone, or user ID.', // UNTRANSLATED
assign_users_field: 'Assign users', // UNTRANSLATED
confirm_assign: 'Assign users', // UNTRANSLATED
users_assigned: 'The selected users were successfully assigned to this role!', // UNTRANSLATED

View file

@ -14,6 +14,7 @@ const roles = {
'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', // UNTRANSLATED
create_role_button: 'Create role', // UNTRANSLATED
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
};
export default roles;

View file

@ -57,6 +57,7 @@ const user_details = {
assigned_user_count: '{{value, number}} users', // UNTRANSLATED
confirm_assign: 'Assign roles', // UNTRANSLATED
role_assigned: 'Successfully assigned role(s)', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
},
};

View file

@ -10,6 +10,7 @@ const users = {
create_form_password: 'Password',
create_form_name: 'Nome completo',
unnamed: 'Sem nome',
search: 'Search by name, email, phone or username', // UNTRANSLATED
};
export default users;

View file

@ -1,5 +1,6 @@
const permissions = {
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
search_placeholder: 'Search by API or permission name', // UNTRANSLATED
search_placeholder_without_api: 'Search by permission name', // UNTRANSLATED
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED

View file

@ -18,7 +18,6 @@ const role_details = {
assign_subtitle:
'Assign permissions to this role. The role will gain the added permissions, and users with this role will inherit these permissions.', // UNTRANSLATED
assign_form_filed: 'Assign permissions', // UNTRANSLATED
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
added_text: '{{value, number}} permissions added', // UNTRANSLATED
api_permission_count: '{{value, number}} permissions', // UNTRANSLATED
confirm_assign: 'Assign Permission', // UNTRANSLATED
@ -36,7 +35,8 @@ const role_details = {
'It will remain in your user pool but lose the authorization for this role.', // UNTRANSLATED
deleted: '{{name}} was successfully removed from this role!', // UNTRANSLATED
assign_title: 'Assign users', // UNTRANSLATED
assign_subtitle: 'Assign users to the role', // UNTRANSLATED
assign_subtitle:
'Assign users to this role. Find appropriate users by searching name, email, phone, or user ID.', // UNTRANSLATED
assign_users_field: 'Assign users', // UNTRANSLATED
confirm_assign: 'Assign users', // UNTRANSLATED
users_assigned: 'The selected users were successfully assigned to this role!', // UNTRANSLATED

View file

@ -14,6 +14,7 @@ const roles = {
'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', // UNTRANSLATED
create_role_button: 'Create role', // UNTRANSLATED
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
};
export default roles;

View file

@ -55,6 +55,7 @@ const user_details = {
assigned_user_count: '{{value, number}} users', // UNTRANSLATED
confirm_assign: 'Assign roles', // UNTRANSLATED
role_assigned: 'Successfully assigned role(s)', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
},
};

View file

@ -10,6 +10,7 @@ const users = {
create_form_password: 'Şifre',
create_form_name: 'Ad Soyad',
unnamed: 'İsimsiz',
search: 'Search by name, email, phone or username', // UNTRANSLATED
};
export default users;

View file

@ -1,5 +1,6 @@
const permissions = {
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
search_placeholder: 'Search by API or permission name', // UNTRANSLATED
search_placeholder_without_api: 'Search by permission name', // UNTRANSLATED
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED

View file

@ -18,7 +18,6 @@ const role_details = {
assign_subtitle:
'Assign permissions to this role. The role will gain the added permissions, and users with this role will inherit these permissions.', // UNTRANSLATED
assign_form_filed: 'Assign permissions', // UNTRANSLATED
search_placeholder: 'Search by API or Permission name', // UNTRANSLATED
added_text: '{{value, number}} permissions added', // UNTRANSLATED
api_permission_count: '{{value, number}} permissions', // UNTRANSLATED
confirm_assign: 'Assign Permission', // UNTRANSLATED
@ -36,7 +35,8 @@ const role_details = {
'It will remain in your user pool but lose the authorization for this role.', // UNTRANSLATED
deleted: '{{name}} was successfully removed from this role!', // UNTRANSLATED
assign_title: 'Assign users', // UNTRANSLATED
assign_subtitle: 'Assign users to the role', // UNTRANSLATED
assign_subtitle:
'Assign users to this role. Find appropriate users by searching name, email, phone, or user ID.', // UNTRANSLATED
assign_users_field: 'Assign users', // UNTRANSLATED
confirm_assign: 'Assign users', // UNTRANSLATED
users_assigned: 'The selected users were successfully assigned to this role!', // UNTRANSLATED

View file

@ -14,6 +14,7 @@ const roles = {
'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', // UNTRANSLATED
create_role_button: 'Create role', // UNTRANSLATED
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
};
export default roles;

View file

@ -53,6 +53,7 @@ const user_details = {
assigned_user_count: '{{value, number}} users', // UNTRANSLATED
confirm_assign: 'Assign roles', // UNTRANSLATED
role_assigned: 'Successfully assigned role(s)', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
},
};

View file

@ -9,6 +9,7 @@ const users = {
create_form_password: '密码',
create_form_name: '姓名',
unnamed: '未命名',
search: 'Search by name, email, phone or username', // UNTRANSLATED
};
export default users;