Enhancement/11889 server pagination

assets/js/components/email-reporting/InviteOthersToSubscribe/InviteSearchInput.js

@@ -26,38 +26,25 @@ import PropTypes from 'prop-types';
  */
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useCallback, useState, useEffect } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { useDebounce } from '@/js/hooks/useDebounce';
 import VisuallyHidden from '@/js/components/VisuallyHidden';
 import CloseIcon from '@/svg/icons/close.svg';
 
 export default function InviteSearchInput( { value = '', onChange } ) {
 	const instanceID = useInstanceId( InviteSearchInput, 'InviteSearchInput' );
-	const [ inputValue, setInputValue ] = useState( value );
-	const debouncedOnChange = useDebounce( onChange, 300 );
-
-	// Sync external value changes (e.g., when panel resets).
-	useEffect( () => {
-		setInputValue( value );
-	}, [ value ] );
 
 	const handleChange = useCallback(
-		( event ) => {
-			setInputValue( event.target.value );
-			debouncedOnChange( event.target.value );
-		},
-		[ debouncedOnChange ]
+		( event ) => onChange( event.target.value ),
+		[ onChange ]
 	);
 
 	const handleClear = useCallback( () => {
-		setInputValue( '' );
-		debouncedOnChange.cancel();
 		onChange( '' );
-	}, [ debouncedOnChange, onChange ] );
+	}, [ onChange ] );
 
 	return (
 		<div className="googlesitekit-invite-search-input">
@@ -77,10 +64,10 @@ export default function InviteSearchInput( { value = '', onChange } ) {
 					'Search user name, role, or email',
 					'google-site-kit'
 				) }
-				value={ inputValue }
+				value={ value }
 				onChange={ handleChange }
 			/>
-			{ inputValue && (
+			{ value && (
 				<span
 					className="googlesitekit-invite-search-input__clear"
 					onClick={ handleClear }

assets/js/components/email-reporting/InviteOthersToSubscribe/InviteSearchInput.test.js

@@ -0,0 +1,69 @@
+/**
+ * InviteSearchInput tests.
+ *
+ * Site Kit by Google, Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { createTestRegistry, render } from '../../../../../tests/js/test-utils';
+import InviteSearchInput from './InviteSearchInput';
+
+describe( 'InviteSearchInput', () => {
+	let registry;
+
+	beforeEach( () => {
+		registry = createTestRegistry();
+	} );
+
+	it( 'calls onChange on every keystroke', () => {
+		const onChange = jest.fn();
+		const { getByLabelText } = render(
+			<InviteSearchInput value="" onChange={ onChange } />,
+			{ registry }
+		);
+		const searchInput = getByLabelText(
+			/Search user name, role, or email/i
+		);
+
+		fireEvent.change( searchInput, {
+			target: { value: 'a' },
+		} );
+		fireEvent.change( searchInput, {
+			target: { value: 'ab' },
+		} );
+
+		expect( onChange ).toHaveBeenNthCalledWith( 1, 'a' );
+		expect( onChange ).toHaveBeenNthCalledWith( 2, 'ab' );
+	} );
+
+	it( 'clears search when clear button is clicked', () => {
+		const onChange = jest.fn();
+		const { getByLabelText } = render(
+			<InviteSearchInput value="abc" onChange={ onChange } />,
+			{ registry }
+		);
+
+		fireEvent.click( getByLabelText( 'Clear search' ) );
+
+		expect( onChange ).toHaveBeenCalledWith( '' );
+	} );
+} );

assets/js/components/email-reporting/InviteOthersToSubscribe/InviteUserList.js

@@ -25,7 +25,6 @@ import PropTypes from 'prop-types';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -46,33 +45,22 @@ export default function InviteUserList( {
 	onInviteResult,
 	isLoading = false,
 } ) {
-	const filteredUsers = useMemo( () => {
-		if ( ! searchTerm ) {
-			return users;
-		}
-
-		const lowerSearchTerm = searchTerm.toLowerCase();
-
-		return users.filter( ( user ) => {
-			const nameMatch = user.name
-				?.toLowerCase()
-				.includes( lowerSearchTerm );
-			const emailMatch = user.email
-				?.toLowerCase()
-				.includes( lowerSearchTerm );
-			const roleMatch = user.role
-				?.toLowerCase()
-				.includes( lowerSearchTerm );
-
-			return nameMatch || emailMatch || roleMatch;
-		} );
-	}, [ users, searchTerm ] );
-
 	if ( isLoading ) {
 		return <InviteUserSkeletonList visibleItems={ 3 } />;
 	}
 
 	if ( users.length === 0 ) {
+		if ( searchTerm ) {
+			return (
+				<EmptyMessage
+					text={ __(
+						'No users match your search.',
+						'google-site-kit'
+					) }
+				/>
+			);
+		}
+
 		return (
 			<EmptyMessage
 				text={ __(
@@ -83,17 +71,9 @@ export default function InviteUserList( {
 		);
 	}
 
-	if ( filteredUsers.length === 0 ) {
-		return (
-			<EmptyMessage
-				text={ __( 'No users match your search.', 'google-site-kit' ) }
-			/>
-		);
-	}
-
 	return (
 		<div className="googlesitekit-invite-user-list">
-			{ filteredUsers.map( ( user ) => (
+			{ users.map( ( user ) => (
 				<InviteUserRow
 					key={ user.id }
 					user={ user }

assets/js/components/email-reporting/InviteOthersToSubscribe/InviteUserList.test.js

@@ -66,91 +66,32 @@ describe( 'InviteUserList', () => {
 		expect( getByText( 'AuthorUser' ) ).toBeInTheDocument();
 	} );
 
-	it( 'filters users by name match', () => {
-		const { getByText, queryByText } = render(
-			<InviteUserList
-				users={ mockUsers }
-				searchTerm="MainAdmin"
-				onInviteResult={ mockOnInviteResult }
-			/>,
-			{ registry }
-		);
-
-		expect( getByText( 'MainAdminName' ) ).toBeInTheDocument();
-		expect( queryByText( 'EditorUser' ) ).not.toBeInTheDocument();
-		expect( queryByText( 'AuthorUser' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'filters users by email match', () => {
-		const { getByText, queryByText } = render(
-			<InviteUserList
-				users={ mockUsers }
-				searchTerm="editor@example"
-				onInviteResult={ mockOnInviteResult }
-			/>,
-			{ registry }
-		);
-
-		expect( getByText( 'EditorUser' ) ).toBeInTheDocument();
-		expect( queryByText( 'MainAdminName' ) ).not.toBeInTheDocument();
-		expect( queryByText( 'AuthorUser' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'filters users by role match', () => {
-		const { getByText, queryByText } = render(
-			<InviteUserList
-				users={ mockUsers }
-				searchTerm="author"
-				onInviteResult={ mockOnInviteResult }
-			/>,
-			{ registry }
-		);
-
-		expect( getByText( 'AuthorUser' ) ).toBeInTheDocument();
-		expect( queryByText( 'MainAdminName' ) ).not.toBeInTheDocument();
-		expect( queryByText( 'EditorUser' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'performs case-insensitive search', () => {
-		const { getByText, queryByText } = render(
-			<InviteUserList
-				users={ mockUsers }
-				searchTerm="MAINADMIN"
-				onInviteResult={ mockOnInviteResult }
-			/>,
-			{ registry }
-		);
-
-		expect( getByText( 'MainAdminName' ) ).toBeInTheDocument();
-		expect( queryByText( 'EditorUser' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'shows "No users match your search" when filter returns empty', () => {
+	it( 'shows empty state when users array is empty', () => {
 		const { getByText } = render(
 			<InviteUserList
-				users={ mockUsers }
-				searchTerm="nonexistentuser"
+				users={ [] }
 				onInviteResult={ mockOnInviteResult }
 			/>,
 			{ registry }
 		);
 
 		expect(
-			getByText( 'No users match your search.' )
+			getByText( 'No users are eligible to receive invitations.' )
 		).toBeInTheDocument();
 	} );
 
-	it( 'shows empty state when users array is empty', () => {
+	it( 'shows no search matches empty state when search term is present', () => {
 		const { getByText } = render(
 			<InviteUserList
 				users={ [] }
+				searchTerm="john"
 				onInviteResult={ mockOnInviteResult }
 			/>,
 			{ registry }
 		);
 
 		expect(
-			getByText( 'No users are eligible to receive invitations.' )
+			getByText( 'No users match your search.' )
 		).toBeInTheDocument();
 	} );