Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

feat: improve group users select search (#1988)

Browse Source 
* feat: improve group users select search

* fix: implement in project access assignment as well

* refactor: move caseInsensitiveSearch helper to util
This commit is contained in:
Nuno Góis 2022-08-30 08:06:59 +01:00 committed by GitHub
parent c62ca2020a
commit 1d43c05131
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/component/admin/groups/GroupForm/GroupFormUsersSelect/GroupFormUsersSelect.tsx
View File

@ -6,6 +6,7 @@ import { VFC } from 'react';
import { useUsers } from 'hooks/api/getters/useUsers/useUsers'; import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
import { IGroupUser } from 'interfaces/group'; import { IGroupUser } from 'interfaces/group';
import { UG_USERS_ID } from 'utils/testIds'; import { UG_USERS_ID } from 'utils/testIds';
import { caseInsensitiveSearch } from 'utils/search';
const StyledOption = styled('div')(({ theme }) => ({ const StyledOption = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
@ -95,6 +96,14 @@ export const GroupFormUsersSelect: VFC<IGroupFormUsersSelectProps> = ({
renderOption={(props, option, { selected }) => renderOption={(props, option, { selected }) =>
renderOption(props, option as IUser, selected) renderOption(props, option as IUser, selected)
} }
filterOptions={(options, { inputValue }) =>
options.filter(
({ name, username, email }) =>
caseInsensitiveSearch(inputValue, email) ||
caseInsensitiveSearch(inputValue, name) ||
caseInsensitiveSearch(inputValue, username)
)
}
isOptionEqualToValue={(option, value) => option.id === value.id} isOptionEqualToValue={(option, value) => option.id === value.id}
getOptionLabel={(option: IUser) => getOptionLabel={(option: IUser) =>
option.email || option.name || option.username || '' option.email || option.name || option.username || ''

27
frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx
View File

@ -33,6 +33,7 @@ import {
PA_USERS_GROUPS_ID, PA_USERS_GROUPS_ID,
PA_USERS_GROUPS_TITLE_ID, PA_USERS_GROUPS_TITLE_ID,
} from 'utils/testIds'; } from 'utils/testIds';
import { caseInsensitiveSearch } from 'utils/search';
const StyledForm = styled('form')(() => ({ const StyledForm = styled('form')(() => ({
display: 'flex', display: 'flex',
@ -333,6 +334,32 @@ export const ProjectAccessAssign = ({
return option.entity.name; return option.entity.name;
} }
}} }}
filterOptions={(options, { inputValue }) =>
options.filter((option: IAccessOption) => {
if (option.type === ENTITY_TYPE.USER) {
const optionUser =
option.entity as IUser;
return (
caseInsensitiveSearch(
inputValue,
optionUser.email
) ||
caseInsensitiveSearch(
inputValue,
optionUser.name
) ||
caseInsensitiveSearch(
inputValue,
optionUser.username
)
);
}
return caseInsensitiveSearch(
inputValue,
option.entity.name
);
})
}
isOptionEqualToValue={(option, value) => isOptionEqualToValue={(option, value) =>
option.type === value.type && option.type === value.type &&
option.entity.id === value.entity.id option.entity.id === value.entity.id

2
frontend/src/utils/search.ts Normal file
View File

@ -0,0 +1,2 @@
export const caseInsensitiveSearch = (search: string, value?: string) =>
Boolean(value?.toLowerCase()?.includes(search.toLowerCase()));