mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-25 00:07:47 +01:00
feat: improve group users select search (#1988)
* 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:
parent
c62ca2020a
commit
1d43c05131
@ -6,6 +6,7 @@ import { VFC } from 'react';
|
||||
import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
|
||||
import { IGroupUser } from 'interfaces/group';
|
||||
import { UG_USERS_ID } from 'utils/testIds';
|
||||
import { caseInsensitiveSearch } from 'utils/search';
|
||||
|
||||
const StyledOption = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
@ -95,6 +96,14 @@ export const GroupFormUsersSelect: VFC<IGroupFormUsersSelectProps> = ({
|
||||
renderOption={(props, option, { 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}
|
||||
getOptionLabel={(option: IUser) =>
|
||||
option.email || option.name || option.username || ''
|
||||
|
@ -33,6 +33,7 @@ import {
|
||||
PA_USERS_GROUPS_ID,
|
||||
PA_USERS_GROUPS_TITLE_ID,
|
||||
} from 'utils/testIds';
|
||||
import { caseInsensitiveSearch } from 'utils/search';
|
||||
|
||||
const StyledForm = styled('form')(() => ({
|
||||
display: 'flex',
|
||||
@ -333,6 +334,32 @@ export const ProjectAccessAssign = ({
|
||||
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) =>
|
||||
option.type === value.type &&
|
||||
option.entity.id === value.entity.id
|
||||
|
2
frontend/src/utils/search.ts
Normal file
2
frontend/src/utils/search.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export const caseInsensitiveSearch = (search: string, value?: string) =>
|
||||
Boolean(value?.toLowerCase()?.includes(search.toLowerCase()));
|
Loading…
Reference in New Issue
Block a user