Logged in Profiler: Allow searching pages in dropdown and show empty …

…states (#95415) * adds a no page found component * remove call to backend when a page is not found in the list * remove no page found component * read check for current page * add disclaimer at the bottom of the dropdown * allow the disclaimer to always show * force a no pages found message when no pages are found * remove comment * Update copy --------- Co-authored-by: Candy Tsai <[email protected]>
Automattic · Oct 17, 2024 · 8bffce1 · 8bffce1
1 parent bc78002
commit 8bffce1
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 16 deletions.
diff --git a/client/hosting/performance/components/PageSelector.tsx b/client/hosting/performance/components/PageSelector.tsx
@@ -16,12 +16,24 @@ export const PageSelector = ( props: ComponentProps< typeof SearchableDropdown >
 				<SearchableDropdown
 					{ ...props }
 					className="site-performance__page-selector-drowdown"
-					__experimentalRenderItem={ ( { item } ) => (
-						<div className="site-performance__page-selector-item" aria-label={ item.label }>
-							<span>{ item.label }</span>
-							<span className="subtitle">{ item.path }</span>
-						</div>
-					) }
+					__experimentalRenderItem={ ( { item } ) => {
+						if ( item.value === '-1' ) {
+							return (
+								<div className="message">
+									{ translate( 'Performance testing is available for the 20 most popular pages.' ) }
+								</div>
+							);
+						}
+						if ( item.value === '-2' ) {
+							return <div className="message">{ translate( 'No pages found' ) }</div>;
+						}
+						return (
+							<div className="site-performance__page-selector-item" aria-label={ item.label }>
+								<span>{ item.label }</span>
+								<span className="subtitle">{ item.path }</span>
+							</div>
+						);
+					} }
 				/>
 				<div className="site-performance__page-selector-search-icon">
 					<Icon

diff --git a/client/hosting/performance/hooks/useSitePerformancePageReports.ts b/client/hosting/performance/hooks/useSitePerformancePageReports.ts
@@ -20,7 +20,7 @@ const FIELDS_TO_RETRIEVE = [ 'id', 'link', 'title', 'wpcom_performance_report_ur
 const getPages = ( siteId: number, query = '' ) => {
 	return wpcomRequest< SitePage[] >( {
 		path: addQueryArgs( `/sites/${ siteId }/pages`, {
-			per_page: 10,
+			per_page: 20,
 			search: query,
 			page: 1,
 			status: 'publish',

diff --git a/client/hosting/performance/site-performance.tsx b/client/hosting/performance/site-performance.tsx
@@ -1,7 +1,6 @@
 import page from '@automattic/calypso-router';
 import { useMobileBreakpoint } from '@automattic/viewport-react';
 import { Button } from '@wordpress/components';
-import { useDebouncedInput } from '@wordpress/compose';
 import { translate } from 'i18n-calypso';
 import moment from 'moment';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -156,15 +155,12 @@ export const SitePerformance = () => {
 	}, [ dispatch, siteId ] );
 
 	const queryParams = useSelector( getCurrentQueryArguments );
-	const [ , setQuery, query ] = useDebouncedInput();
 	const {
 		pages,
 		isInitialLoading,
 		savePerformanceReportUrl,
 		refetch: refetchPages,
-	} = useSitePerformancePageReports( {
-		query,
-	} );
+	} = useSitePerformancePageReports();
 
 	const orderedPages = useMemo( () => {
 		return [ ...pages ].sort( ( a, b ) => {
@@ -196,9 +192,12 @@ export const SitePerformance = () => {
 		currentPageUserSelection ?? pages?.find( ( page ) => page.value === currentPageId );
 
 	const pageOptions = useMemo( () => {
-		return currentPage
+		const options = currentPage
 			? [ currentPage, ...orderedPages.filter( ( p ) => p.value !== currentPage.value ) ]
 			: orderedPages;
+
+		// Add a disabled option at the end that will show a disclaimer message.
+		return [ ...options, { label: '', value: '-1', path: '', disabled: true } ];
 	}, [ currentPage, orderedPages ] );
 
 	const handleRecommendationsFilterChange = ( filter?: string ) => {
@@ -270,11 +269,34 @@ export const SitePerformance = () => {
 		} );
 	};
 
+	// This forces a no pages found message in the dropdown
+	const [ noPagesFound, setNoPagesFound ] = useState( { query: '', found: true } );
+
+	const options = ! noPagesFound.found
+		? [
+				{
+					label: noPagesFound.query,
+					value: '-2',
+					disabled: true,
+				},
+		  ]
+		: pageOptions;
+
 	const pageSelector = (
 		<PageSelector
-			onFilterValueChange={ setQuery }
+			onFilterValueChange={ ( value ) => {
+				const filter = pageOptions.find( ( option ) =>
+					option.label.toLowerCase().startsWith( value )
+				);
+
+				if ( filter ) {
+					setNoPagesFound( { query: '', found: true } );
+					return;
+				}
+				setNoPagesFound( { query: value, found: false } );
+			} }
 			allowReset={ false }
-			options={ pageOptions }
+			options={ options }
 			disabled={ disableControls }
 			onChange={ ( page_id ) => {
 				const url = new URL( window.location.href );

diff --git a/client/hosting/performance/style.scss b/client/hosting/performance/style.scss
@@ -204,6 +204,15 @@ $section-max-width: 1224px;
 
 	}
 
+	.message {
+		padding-inline: 18px;
+		padding-block: 16px;
+		font-size: $font-body-extra-small;
+		font-family: $font-sf-pro-text;
+		color: #949494 !important;
+		background: var(--color-surface);
+	}
+
 	.site-performance__page-selector-item {
 		display: flex;
 		flex-direction: column;
@@ -237,7 +246,7 @@ $section-max-width: 1224px;
 			border-top: 1px solid #F0F0F0;
 		}
 
-		&.is-selected * {
+		&.is-selected > .site-performance__page-selector-item > .subtitle {
 			color: #fff !important;
 		}
 	}