fix: improve users search (#4131)

https://linear.app/unleash/issue/2-1183/improve-users-list-search

This adapts the users list to use the new `useSearch` hook so you can
have a better search that also includes "username" and "email" as
fields. It's also more extensible in case we'd like to add filters in
the future.

frontend/src/component/admin/users/UsersList/UsersList.tsx

@@ -16,12 +16,7 @@ import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { Button, useMediaQuery } from '@mui/material';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { UserTypeCell } from './UserTypeCell/UserTypeCell';
-import {
-    useFlexLayout,
-    useGlobalFilter,
-    useSortBy,
-    useTable,
-} from 'react-table';
+import { useFlexLayout, useSortBy, useTable } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
@@ -35,6 +30,7 @@ import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
 import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 import { UserLimitWarning } from './UserLimitWarning/UserLimitWarning';
 import { RoleCell } from 'component/common/Table/cells/RoleCell/RoleCell';
+import { useSearch } from 'hooks/useSearch';
 
 const UsersList = () => {
     const navigate = useNavigate();
@@ -51,6 +47,8 @@ const UsersList = () => {
     const [delUser, setDelUser] = useState<IUser>();
     const { planUsers, isBillingUsers } = useUsersPlan(users);
 
+    const [searchValue, setSearchValue] = useState('');
+
     const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
 
@@ -105,7 +103,6 @@ const UsersList = () => {
                         <UserAvatar user={user} />
                     </TextCell>
                 ),
-                disableGlobalFilter: true,
                 disableSortBy: true,
                 maxWidth: 80,
             },
@@ -120,6 +117,7 @@ const UsersList = () => {
                         subtitle={user.email || user.username}
                     />
                 ),
+                searchable: true,
             },
             {
                 id: 'role',
@@ -130,14 +128,12 @@ const UsersList = () => {
                 Cell: ({ row: { original: user }, value }: any) => (
                     <RoleCell value={value} roleId={user.rootRole} />
                 ),
-                disableGlobalFilter: true,
                 maxWidth: 120,
             },
             {
                 Header: 'Created',
                 accessor: 'createdAt',
                 Cell: DateCell,
-                disableGlobalFilter: true,
                 sortType: 'date',
                 width: 120,
                 maxWidth: 120,
@@ -153,7 +149,6 @@ const UsersList = () => {
                         title={date => `Last login: ${date}`}
                     />
                 ),
-                disableGlobalFilter: true,
                 sortType: 'date',
                 maxWidth: 150,
             },
@@ -165,7 +160,6 @@ const UsersList = () => {
                 Cell: ({ row: { original: user } }: any) => (
                     <UserTypeCell value={isBillingUsers && user.paid} />
                 ),
-                disableGlobalFilter: true,
                 sortType: 'boolean',
             },
             {
@@ -182,9 +176,20 @@ const UsersList = () => {
                     />
                 ),
                 width: 150,
-                disableGlobalFilter: true,
                 disableSortBy: true,
             },
+            // Always hidden -- for search
+            {
+                accessor: 'username',
+                Header: 'Username',
+                searchable: true,
+            },
+            // Always hidden -- for search
+            {
+                accessor: 'email',
+                Header: 'Email',
+                searchable: true,
+            },
         ],
         [roles, navigate, isBillingUsers]
     );
@@ -196,30 +201,26 @@ const UsersList = () => {
         };
     }, [isBillingUsers]);
 
-    const data = isBillingUsers ? planUsers : users;
+    const { data, getSearchText } = useSearch(
+        columns,
+        searchValue,
+        isBillingUsers ? planUsers : users
+    );
 
-    const {
-        headerGroups,
-        rows,
-        prepareRow,
-        state: { globalFilter },
-        setGlobalFilter,
-        setHiddenColumns,
-    } = useTable(
+    const { headerGroups, rows, prepareRow, setHiddenColumns } = useTable(
         {
             columns: columns as any,
             data,
             initialState,
             sortTypes,
-            autoResetGlobalFilter: false,
             autoResetHiddenColumns: false,
             autoResetSortBy: false,
             disableSortRemove: true,
+            disableMultiSort: true,
             defaultColumn: {
                 Cell: TextCell,
             },
         },
-        useGlobalFilter,
         useSortBy,
         useFlexLayout
     );
@@ -252,8 +253,8 @@ const UsersList = () => {
                     actions={
                         <>
                             <Search
-                                initialValue={globalFilter}
-                                onChange={setGlobalFilter}
+                                initialValue={searchValue}
+                                onChange={setSearchValue}
                             />
                             <PageHeader.Divider />
                             <Button
@@ -269,7 +270,7 @@ const UsersList = () => {
             }
         >
             <UserLimitWarning />
-            <SearchHighlightProvider value={globalFilter}>
+            <SearchHighlightProvider value={getSearchText(searchValue)}>
                 <VirtualizedTable
                     rows={rows}
                     headerGroups={headerGroups}
@@ -280,11 +281,11 @@ const UsersList = () => {
                 condition={rows.length === 0}
                 show={
                     <ConditionallyRender
-                        condition={globalFilter?.length > 0}
+                        condition={searchValue?.length > 0}
                         show={
                             <TablePlaceholder>
                                 No users found matching &ldquo;
-                                {globalFilter}
+                                {searchValue}
                                 &rdquo;
                             </TablePlaceholder>
                         }