refactor: replace PermissionsTableFilter with FilterByText

.changeset/permissions-table-filter-by-text.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixed the permissions admin table showing an empty result when the search filter was narrowed while on a later page; the table now resets to the first page whenever the filter changes.

apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.spec.tsx

@@ -1,7 +1,7 @@
 import type { IPermission, IRole } from '@rocket.chat/core-typings';
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { composeStories } from '@storybook/react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 
@@ -97,3 +97,31 @@ test('should NOT display modal if the permission is access-permissions and has m
 	await userEvent.click(screen.getByRole('checkbox', { name: 'access-permissions - Administrator' }));
 	expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 });
+
+test('should reset pagination to the first page when the filter changes', async () => {
+	const setFilter = jest.fn();
+	const setCurrent = jest.fn();
+
+	render(
+		<PermissionsTable
+			permissions={defaultPermissions}
+			total={defaultPermissions.length}
+			setFilter={setFilter}
+			roleList={roles}
+			paginationData={{ ...createMockedPagination(), setCurrent }}
+		/>,
+		{
+			wrapper: mockAppRoot().build(),
+		},
+	);
+
+	// The mount effect applies the initial empty filter and resets the page once; clear those
+	// calls so the assertions below only see what the filter change itself triggers.
+	setFilter.mockClear();
+	setCurrent.mockClear();
+
+	await userEvent.type(screen.getByRole('textbox', { name: 'Search' }), 'admin');
+
+	await waitFor(() => expect(setFilter).toHaveBeenCalledWith('admin'));
+	expect(setCurrent).toHaveBeenCalledWith(0);
+});

apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx

@@ -1,14 +1,16 @@
 import type { IPermission, IRole } from '@rocket.chat/core-typings';
 import { css } from '@rocket.chat/css-in-js';
 import { Pagination, Palette } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { GenericTable, GenericTableHeader, GenericTableHeaderCell, GenericTableBody } from '@rocket.chat/ui-client';
 import type { usePagination } from '@rocket.chat/ui-client';
 import { useMethod } from '@rocket.chat/ui-contexts';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PermissionRow from './PermissionRow';
-import PermissionsTableFilter from './PermissionsTableFilter';
 import RoleHeader from './RoleHeader';
+import FilterByText from '../../../../components/FilterByText';
 import GenericNoResults from '../../../../components/GenericNoResults';
 
 type PermissionsTableProps = {
@@ -27,6 +29,15 @@ const PermissionsTable = ({ roleList, permissions, setFilter, total, paginationD
 
 	const { current, itemsPerPage, setCurrent, setItemsPerPage, ...paginationProps } = paginationData;
 
+	const [text, setText] = useState('');
+	const debouncedText = useDebouncedValue(text, 500);
+
+	useEffect(() => {
+		setFilter(debouncedText);
+		// Reset to the first page so narrowing the filter doesn't strand the user on a now-empty offset
+		setCurrent(0);
+	}, [debouncedText, setFilter, setCurrent]);
+
 	const tableCustomStyle = css`
 		// Makes the first column of the table sticky
 		tr > th {
@@ -62,7 +73,7 @@ const PermissionsTable = ({ roleList, permissions, setFilter, total, paginationD
 
 	return (
 		<>
-			<PermissionsTableFilter onChange={setFilter} />
+			<FilterByText value={text} onChange={(event) => setText(event.target.value)} />
 			{permissions?.length === 0 && <GenericNoResults />}
 			{permissions?.length > 0 && (
 				<>

apps/meteor/client/views/admin/permissions/PermissionsTable/__snapshots__/PermissionsTable.spec.tsx.snap

@@ -6,29 +6,36 @@ exports[`renders Default without crashing 1`] = `
     <div
       class="rcx-box rcx-box--full rcx-css-9x4qdd"
     >
-      <div>
-        <label
-          class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-cnkcl9"
+      <form
+        class="rcx-box rcx-box--full rcx-css-12ji3te"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-654uuc"
         >
-          <input
-            class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-            placeholder="Search"
-            size="1"
-            type="text"
-            value=""
-          />
-          <span
-            class="rcx-box rcx-box--full rcx-input-box__addon"
+          <label
+            class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
           >
-            <i
-              aria-hidden="true"
-              class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+            <input
+              aria-label="Search"
+              class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box rcx-css-fvxpep"
+              placeholder="Search"
+              size="1"
+              type="text"
+              value=""
+            />
+            <span
+              class="rcx-box rcx-box--full rcx-input-box__addon"
             >
-              
-            </i>
-          </span>
-        </label>
-      </div>
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+              >
+                
+              </i>
+            </span>
+          </label>
+        </div>
+      </form>
       <div
         class="rcx-box rcx-box--full rcx-css-h9m6k6"
       >
@@ -1193,29 +1200,36 @@ exports[`renders Empty without crashing 1`] = `
     <div
       class="rcx-box rcx-box--full rcx-css-9x4qdd"
     >
-      <div>
-        <label
-          class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-cnkcl9"
+      <form
+        class="rcx-box rcx-box--full rcx-css-12ji3te"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-654uuc"
         >
-          <input
-            class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-            placeholder="Search"
-            size="1"
-            type="text"
-            value=""
-          />
-          <span
-            class="rcx-box rcx-box--full rcx-input-box__addon"
+          <label
+            class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
           >
-            <i
-              aria-hidden="true"
-              class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+            <input
+              aria-label="Search"
+              class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box rcx-css-fvxpep"
+              placeholder="Search"
+              size="1"
+              type="text"
+              value=""
+            />
+            <span
+              class="rcx-box rcx-box--full rcx-input-box__addon"
             >
-              
-            </i>
-          </span>
-        </label>
-      </div>
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+              >
+                
+              </i>
+            </span>
+          </label>
+        </div>
+      </form>
       <div
         class="rcx-box rcx-box--full rcx-css-1wg1u9h"
       >