feat: Allow searching users by email

src/components/accounts/ui/input/AccountsInput.js

@@ -1,21 +1,25 @@
 import { TextField } from '@mui/material';
 import { grey } from '@mui/material/colors';
-import React from 'react';
+import React, { useDeferredValue, useState, useEffect } from 'react';
 import SearchIcon from '@mui/icons-material/Search';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 
-export const AccountsInput = ({
-  search,
-  setsearch,
-  placeholder,
-  width = 200,
-}) => {
+export const AccountsInput = ({ setsearch, placeholder, width = 200 }) => {
+  const [internalSearch, setInternalSearch] = useState('');
+  const deferredSearch = useDeferredValue(internalSearch);
+
   const handleChange = (e) => {
-    setsearch(e.target.value);
+    setInternalSearch(e.target.value);
   };
+
   const clearInput = () => {
-    setsearch('');
+    setInternalSearch('');
   };
+
+  useEffect(() => {
+    setsearch(deferredSearch);
+  }, [deferredSearch, setsearch]);
+
   return (
     <TextField
       sx={(theme) => ({
@@ -28,11 +32,11 @@ export const AccountsInput = ({
       })}
       size="small"
       placeholder={placeholder}
-      value={search}
+      value={internalSearch}
       onChange={(e) => handleChange(e)}
       InputProps={{
         startAdornment: <SearchIcon color="disabled" />,
-        endAdornment: search && (
+        endAdornment: internalSearch && (
           <HighlightOffIcon
             fontSize="small"
             color="primary"

src/components/globals/constants.js

@@ -11509,7 +11509,7 @@ export const navigationCustom = [
         title: 'Hybrid CMS',
         zuid: '7-f0bbf4b083-v2pnsn',
         children: [],
-      }
+      },
     ],
   },
   {

src/pages/instances/[zuid]/support/index.js

@@ -84,7 +84,6 @@ export default function Support() {
       <Grid container>
         <AccountsHeader {...headerProps}>
           <AccountsInput
-            search={search}
             setsearch={setsearch}
             placeholder=" Search subjects, ticket #"
             width={250}

src/pages/instances/[zuid]/users.js

@@ -143,12 +143,16 @@ export default function UsersPage() {
     userInfo,
   );
 
-  const filteredUsers = instanceUserWithRoles?.filter((e) => {
-    const name = `${e?.firstName?.toLowerCase() || '-'} ${
-      e?.lastName?.toLowerCase() || '-'
-    }`;
-    return name?.includes(search?.toLowerCase());
+  const filteredUsers = instanceUserWithRoles?.filter((user) => {
+    const formattedSearchKeyword = search?.toLowerCase()?.trim();
+    const userFullName = `${user?.firstName || '-'} ${user?.lastName || '-'}`;
+
+    return (
+      userFullName?.toLowerCase()?.includes(formattedSearchKeyword) ||
+      user?.email?.toLowerCase()?.includes(formattedSearchKeyword)
+    );
   });
+
   const userProps = {
     updateRole,
     roles: filteredUsers,

src/views/accounts/instances/Apis.js

@@ -463,7 +463,6 @@ export const Apis = ({
   // arrToSubmit,
   // setarrToSubmit,
   // updateSetting,
-  search,
   setsearch,
 }) => {
   const handleCreateTokenModal = () => {
@@ -494,11 +493,7 @@ export const Apis = ({
   return (
     <Grid container>
       <AccountsHeader {...headerProps}>
-        <AccountsInput
-          search={search}
-          setsearch={setsearch}
-          placeholder=" Seach tokens"
-        />
+        <AccountsInput setsearch={setsearch} placeholder=" Seach tokens" />
         {isInstanceOwner && (
           <Button
             onClick={handleCreateTokenModal}

src/views/accounts/instances/Settings.js

@@ -274,11 +274,7 @@ export const Settings = ({
     <Grid container>
       <AccountsHeader {...headerProps}>
         <Stack>
-          <AccountsInput
-            search={search}
-            setsearch={setsearch}
-            placeholder=" Search settings"
-          />
+          <AccountsInput setsearch={setsearch} placeholder=" Search settings" />
         </Stack>
 
         <Stack>

src/views/accounts/instances/Users.js

@@ -279,7 +279,6 @@ const Index = ({
   isOwner,
   instanceZUID,
   loading,
-  search,
   setsearch,
   respondToInvite,
   pendingUsers,
@@ -320,7 +319,6 @@ const Index = ({
     <Grid container>
       <AccountsHeader {...headerProps}>
         <AccountsInput
-          search={search}
           setsearch={setsearch}
           placeholder=" Search users"
           width={250}