Fix Search Functionality for Full Name and Partial Matches in People Section (#3388)

public/locales/en/translation.json

@@ -1006,7 +1006,8 @@
   },
   "people": {
     "title": "People",
-    "searchUsers": "Search users"
+    "searchUsers": "Search users",
+    "nothingToShow": "Nothing to show here."
   },
   "userLogin": {
     "login": "Login",

public/locales/fr/translation.json

@@ -966,7 +966,8 @@
   },
   "people": {
     "title": "Personnes",
-    "searchUsers": "Rechercher des utilisateurs"
+    "searchUsers": "Rechercher des utilisateurs",
+    "nothingToShow": "Rien à afficher ici."
   },
   "userLogin": {
     "login": "Se connecter",

public/locales/hi/translation.json

@@ -966,7 +966,8 @@
   },
   "people": {
     "title": "लोग",
-    "searchUsers": "उपयोगकर्ताओं को खोजें"
+    "searchUsers": "उपयोगकर्ताओं को खोजें",
+    "nothingToShow": "यहां दिखाने के लिए कुछ नहीं है।"
   },
   "userLogin": {
     "login": "लॉग इन करें",

public/locales/sp/translation.json

@@ -981,7 +981,8 @@
   },
   "people": {
     "title": "Gente",
-    "searchUsers": "Buscar usuarios"
+    "searchUsers": "Buscar usuarios",
+    "nothingToShow": "Nada que mostrar aquí."
   },
   "userRegister": {
     "register": "Registro",

public/locales/zh/translation.json

@@ -980,7 +980,8 @@
   },
   "people": {
     "title": "人们",
-    "searchUsers": "搜索用户"
+    "searchUsers": "搜索用户",
+    "nothingToShow": "这里没有可显示的内容。"
   },
   "userRegister": {
     "enterFirstName": "输入您的名字",

src/screens/UserPortal/People/People.spec.tsx

@@ -165,6 +165,7 @@ const MOCKS = [
       variables: {
         orgId: '',
         firstName_contains: 'j',
+        lastName_contains: 'c',
       },
     },
     result: {
@@ -252,7 +253,7 @@ describe('Testing People Screen [User Portal]', () => {
 
     await wait();
 
-    userEvent.type(screen.getByTestId('searchInput'), 'j{enter}');
+    userEvent.type(screen.getByTestId('searchInput'), 'j c{enter}');
     await wait();
 
     expect(screen.queryByText('John Cena')).toBeInTheDocument();
@@ -277,7 +278,7 @@ describe('Testing People Screen [User Portal]', () => {
     userEvent.type(screen.getByTestId('searchInput'), '');
     userEvent.click(searchBtn);
     await wait();
-    userEvent.type(screen.getByTestId('searchInput'), 'j');
+    userEvent.type(screen.getByTestId('searchInput'), 'j c');
     userEvent.click(searchBtn);
     await wait();
 
@@ -335,6 +336,7 @@ describe('Testing People Screen Pagination [User Portal]', () => {
         variables: {
           orgId: '',
           firstName_contains: '',
+          lastName_contains: '',
         },
       },
       result: {
@@ -481,7 +483,11 @@ describe('People Component Mode Switch Coverage', () => {
       {
         request: {
           query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
-          variables: { orgId: '', firstName_contains: '' },
+          variables: {
+            orgId: '',
+            firstName_contains: '',
+            lastName_contains: '',
+          },
         },
         result: {
           data: {
@@ -594,7 +600,11 @@ describe('People Component Mode Switch Coverage', () => {
       {
         request: {
           query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
-          variables: { orgId: '', firstName_contains: '' },
+          variables: {
+            orgId: '',
+            firstName_contains: '',
+            lastName_contains: '',
+          },
         },
         result: {
           data: {
@@ -694,11 +704,72 @@ describe('People Additional Flow Tests', () => {
   const setupWithMocks = (mocks: MockData[]): RenderResult =>
     renderComponent(mocks);
 
+  const defaultAdminMock = {
+    request: {
+      query: ORGANIZATION_ADMINS_LIST,
+      variables: { orgId: '' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            __typename: 'Organization',
+            _id: 'org-1',
+            admins: [],
+          },
+        ],
+      },
+    },
+  };
+  it('handles full name search correctly', async () => {
+    const fullNameMock = {
+      request: {
+        query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+        variables: {
+          orgId: '',
+          firstName_contains: 'Noble',
+          lastName_contains: 'Mittal',
+        },
+      },
+      result: {
+        data: {
+          organizationsMemberConnection: {
+            edges: [
+              {
+                _id: 'user-3',
+                firstName: 'Noble',
+                lastName: 'Mittal',
+                image: null,
+                email: 'noble@test.com',
+                createdAt: '2023-03-02T03:22:08.101Z',
+              },
+            ],
+          },
+        },
+      },
+    };
+    renderComponent([fullNameMock, defaultAdminMock]);
+    await wait();
+    const searchInput = screen.getByTestId('searchInput');
+    await act(async () => {
+      userEvent.clear(searchInput);
+      userEvent.type(searchInput, 'Noble Mittal');
+      userEvent.click(screen.getByTestId('searchBtn'));
+    });
+    await waitFor(() => {
+      expect(screen.getByText('Noble Mittal')).toBeInTheDocument();
+    });
+  });
+
   it('searches partial user name correctly and displays matching results', async (): Promise<void> => {
     const aliMembersMock: MockData = {
       request: {
         query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
-        variables: { orgId: '', firstName_contains: 'Ali' },
+        variables: {
+          orgId: '',
+          firstName_contains: 'Ali',
+          lastName_contains: '',
+        },
       },
       result: {
         data: {
@@ -734,7 +805,11 @@ describe('People Additional Flow Tests', () => {
       {
         request: {
           query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
-          variables: { orgId: '', firstName_contains: '' },
+          variables: {
+            orgId: '',
+            firstName_contains: '',
+            lastName_contains: '',
+          },
         },
         result: {
           data: {
@@ -840,7 +915,7 @@ describe('Testing People Screen Edge Cases [User Portal]', () => {
     const membersMock = {
       request: {
         query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
-        variables: { orgId: '', firstName_contains: '' },
+        variables: { orgId: '', firstName_contains: '', lastName_contains: '' },
       },
       result: {
         data: {
@@ -956,7 +1031,7 @@ describe('People Component Additional Coverage Tests', () => {
     const membersMock = {
       request: {
         query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
-        variables: { orgId: '', firstName_contains: '' },
+        variables: { orgId: '', firstName_contains: '', lastName_contains: '' },
       },
       result: {
         data: {
@@ -992,7 +1067,7 @@ describe('People Component Pagination Tests', () => {
   const mockData = {
     request: {
       query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
-      variables: { orgId: '', firstName_contains: '' },
+      variables: { orgId: '', firstName_contains: '', lastName_contains: '' },
     },
     result: {
       data: {

src/screens/UserPortal/People/People.tsx

@@ -88,6 +88,7 @@ export default function people(): JSX.Element {
       variables: {
         orgId: organizationId,
         firstName_contains: '',
+        lastName_contains: '',
       },
     },
   );
@@ -112,9 +113,11 @@ export default function people(): JSX.Element {
     setPage(0);
   };
 
-  const handleSearch = (newFilter: string): void => {
+  const handleSearch = (userName: string): void => {
+    const [firstName = '', lastName = ''] = userName.trim().split(' ');
     refetch({
-      firstName_contains: newFilter,
+      firstName_contains: firstName,
+      lastName_contains: lastName,
     });
   };