From 1d43c05131e1a532d256af1474e41aa44ba0f9cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 30 Aug 2022 08:06:59 +0100
Subject: [PATCH] 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
---
 .../GroupFormUsersSelect.tsx                  |  9 +++++++
 .../ProjectAccessAssign.tsx                   | 27 +++++++++++++++++++
 frontend/src/utils/search.ts                  |  2 ++
 3 files changed, 38 insertions(+)
 create mode 100644 frontend/src/utils/search.ts

diff --git a/frontend/src/component/admin/groups/GroupForm/GroupFormUsersSelect/GroupFormUsersSelect.tsx b/frontend/src/component/admin/groups/GroupForm/GroupFormUsersSelect/GroupFormUsersSelect.tsx
index e17f558b4e..be42212e2e 100644
--- a/frontend/src/component/admin/groups/GroupForm/GroupFormUsersSelect/GroupFormUsersSelect.tsx
+++ b/frontend/src/component/admin/groups/GroupForm/GroupFormUsersSelect/GroupFormUsersSelect.tsx
@@ -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 || ''
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx
index 8b0144468f..4dab92db9e 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx
@@ -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
diff --git a/frontend/src/utils/search.ts b/frontend/src/utils/search.ts
new file mode 100644
index 0000000000..02555762be
--- /dev/null
+++ b/frontend/src/utils/search.ts
@@ -0,0 +1,2 @@
+export const caseInsensitiveSearch = (search: string, value?: string) =>
+    Boolean(value?.toLowerCase()?.includes(search.toLowerCase()));