Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Logged in Profiler: Allow searching pages in dropdown and show empty states #95415

Merged
merged 9 commits into from
Oct 17, 2024
Merged

Logged in Profiler: Allow searching pages in dropdown and show empty states #95415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
49b6ac0
adds a no page found component
vykes-mac Oct 15, 2024
1c7de61
remove call to backend when a page is not found in the list
vykes-mac Oct 15, 2024
ae59374
remove no page found component
vykes-mac Oct 15, 2024
966969a
read check for current page
vykes-mac Oct 15, 2024
0318a3a
add disclaimer at the bottom of the dropdown
vykes-mac Oct 16, 2024
ecb33e3
allow the disclaimer to always show
vykes-mac Oct 16, 2024
0a1da82
force a no pages found message when no pages are found
vykes-mac Oct 16, 2024
22c25ad
remove comment
vykes-mac Oct 16, 2024
1191805
Update copy
candy02058912 Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 18 additions & 6 deletions client/hosting/performance/components/PageSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we're looking for a specific page when using the searching, should it be Page not found instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think because a search query can return a list of pages matching and not only a specific one No pages found works. I think the copy works as is. but we can change later if others have a strong opinion.

}
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
Expand Down
2 changes: 1 addition & 1 deletion client/hosting/performance/hooks/useSitePerformancePageReports.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
38 changes: 30 additions & 8 deletions client/hosting/performance/site-performance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 ) => {
Expand Down Expand Up @@ -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 ) => {
Expand Down Expand Up @@ -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 );
Expand Down
11 changes: 10 additions & 1 deletion client/hosting/performance/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}
Expand Down
Loading