Add Search input to create pull remote site flow with controlled scroll (#2141)

* Add search input and controlled scroll to create and pull remote site flow

Author: sejas

src/modules/add-site/components/pull-remote-site.tsx

@@ -5,7 +5,7 @@ import {
 } from '@wordpress/components';
 import { check, Icon } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
-import { PropsWithChildren, useEffect } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 import { ArrowIcon } from 'src/components/arrow-icon';
 import Button from 'src/components/button';
 import offlineIcon from 'src/components/offline-icon';
@@ -14,7 +14,7 @@ import { useSyncSites } from 'src/hooks/sync-sites';
 import { useAuth } from 'src/hooks/use-auth';
 import { useOffline } from 'src/hooks/use-offline';
 import { getIpcApi } from 'src/lib/get-ipc-api';
-import { ListSites } from 'src/modules/sync/components/sync-sites-modal-selector';
+import { ListSites, SearchSites } from 'src/modules/sync/components/sync-sites-modal-selector';
 import { SyncTabImage } from 'src/modules/sync/components/sync-tab-image';
 import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
 
@@ -121,6 +121,15 @@ export function PullRemoteSite( {
 	const { isAuthenticated } = useAuth();
 	const { location } = useNavigator();
 	const { syncSites, refetchSites } = useSyncSites();
+	const [ searchQuery, setSearchQuery ] = useState< string >( '' );
+
+	const filteredSites = syncSites.filter( ( site ) => {
+		const searchQueryLower = searchQuery.toLowerCase();
+		return (
+			site.name?.toLowerCase().includes( searchQueryLower ) ||
+			site.url?.toLowerCase().includes( searchQueryLower )
+		);
+	} );
 
 	useEffect( () => {
 		if ( location.path === '/pullRemote' && isAuthenticated ) {
@@ -138,15 +147,20 @@ export function PullRemoteSite( {
 	};
 
 	return (
-		<VStack className="text-center w-full" alignment="top" spacing="3">
-			<Heading className="text-[32px] text-gray-900" weight={ 500 }>
+		<VStack className="w-full" alignment="top" spacing="3">
+			<Heading className="text-center text-[32px] text-gray-900" weight={ 500 }>
 				{ __( 'Pull your remote site' ) }
 			</Heading>
-			<ListSites
-				syncSites={ syncSites }
-				selectedSiteId={ selectedRemoteSite?.id || null }
-				onSelectSite={ handleSiteSelect }
-			/>
+			<VStack className="flex flex-col w-full max-w-[650px] flex-1">
+				<SearchSites searchQuery={ searchQuery } setSearchQuery={ setSearchQuery } />
+				<div className="h-full">
+					<ListSites
+						syncSites={ filteredSites }
+						selectedSiteId={ selectedRemoteSite?.id || null }
+						onSelectSite={ handleSiteSelect }
+					/>
+				</div>
+			</VStack>
 		</VStack>
 	);
 }

src/modules/add-site/index.tsx

@@ -278,7 +278,7 @@ function NavigationContent( props: NavigationContentProps ) {
 			<Navigator.Screen className="flex-1" path="/backup/create">
 				<CreateSite { ...createSiteProps } />
 			</Navigator.Screen>
-			<Navigator.Screen className="flex-1" path="/pullRemote">
+			<Navigator.Screen className="flex-1 flex justify-center" path="/pullRemote">
 				<PullRemoteSite
 					selectedRemoteSite={ selectedRemoteSite }
 					setSelectedRemoteSite={ ( remoteSite?: SyncSite ) => {

src/modules/sync/components/sync-sites-modal-selector.tsx

@@ -126,7 +126,7 @@ export function SyncSitesModalSelector( {
 	);
 }
 
-function SearchSites( {
+export function SearchSites( {
 	searchQuery,
 	setSearchQuery,
 }: {
@@ -136,9 +136,9 @@ function SearchSites( {
 	const { __ } = useI18n();
 	const locale = useI18nLocale();
 	return (
-		<div className="flex flex-col px-8 pb-6 border-b border-a8c-gray-5">
+		<div className="flex flex-col px-8 pb-6 border-b border-a8c-gray-5 shrink-0">
 			<SearchControl
-				className="w-full mt-0.5 mb-2"
+				className="w-full mt-0.5 mb-2 text-black"
 				placeholder={ __( 'Search sites' ) }
 				onChange={ ( value ) => {
 					setSearchQuery( value );