Logged-in Performance Profiler: Allow re-running test

Automattic · Sep 13, 2024 · 2c99832 · 2c99832
1 parent bb8582a
commit 2c99832
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 10 deletions.
diff --git a/client/hosting/performance/hooks/useSitePages.ts b/client/hosting/performance/hooks/useSitePages.ts
@@ -31,14 +31,22 @@ const getPages = ( siteId: number, query = '' ) => {
 	} );
 };
 
+export const getSitePagesQueryKey = ( {
+	siteId,
+	query,
+}: {
+	siteId?: number | null;
+	query: string;
+} ) => [ 'useSitePages', siteId, query ];
+
 export const useSitePages = ( { query = '' } ) => {
 	const { __ } = useI18n();
 
 	const site = useSelector( getSelectedSite );
 	const siteId = site?.ID;
 
 	const { data } = useQuery( {
-		queryKey: [ 'useSitePages', siteId, query ],
+		queryKey: getSitePagesQueryKey( { siteId, query } ),
 		queryFn: () => getPages( siteId!, query ),
 		refetchOnWindowFocus: false,
 		enabled: !! siteId,

diff --git a/client/hosting/performance/site-performance.tsx b/client/hosting/performance/site-performance.tsx
@@ -1,4 +1,6 @@
 import page from '@automattic/calypso-router';
+import { useQueryClient } from '@tanstack/react-query';
+import { Button } from '@wordpress/components';
 import { useDebouncedInput } from '@wordpress/compose';
 import { translate } from 'i18n-calypso';
 import moment from 'moment';
@@ -15,7 +17,7 @@ import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import { PageSelector } from './components/PageSelector';
 import { PerformanceReport } from './components/PerformanceReport';
 import { DeviceTabControls, Tab } from './components/device-tab-control';
-import { useSitePages } from './hooks/useSitePages';
+import { getSitePagesQueryKey, useSitePages } from './hooks/useSitePages';
 
 import './style.scss';
 
@@ -93,6 +95,17 @@ export const SitePerformance = () => {
 		[ pages, currentPageId ]
 	);
 
+	const queryClient = useQueryClient();
+
+	const retestPage = () => {
+		// TODO: Trigger new test
+
+		queryClient.invalidateQueries( {
+			queryKey: getSitePagesQueryKey( { siteId, query } ),
+			exact: true,
+		} );
+	};
+
 	const performanceReport = usePerformanceReport( currentPage?.wpcom_performance_url, activeTab );
 
 	return (
@@ -101,14 +114,42 @@ export const SitePerformance = () => {
 				<NavigationHeader
 					className="site-performance__navigation-header"
 					title={ translate( 'Performance' ) }
-					subtitle={ translate(
-						'Optimize your site for lightning-fast performance. {{link}}Learn more.{{/link}}',
-						{
-							components: {
-								link: <InlineSupportLink supportContext="site-monitoring" showIcon={ false } />,
-							},
-						}
-					) }
+					subtitle={
+						performanceReport.performanceReport
+							? translate( 'Tested on %(testedDate)s. {{button}}Test again{{/button}}', {
+									args: {
+										testedDate: moment( performanceReport.performanceReport.timestamp ).format(
+											'MMMM Do, YYYY h:mm:ss A'
+										),
+									},
+									components: {
+										button: (
+											<Button
+												css={ {
+													textDecoration: 'none !important',
+													':hover': {
+														textDecoration: 'underline !important',
+													},
+													fontSize: 'inherit',
+													whiteSpace: 'nowrap',
+												} }
+												variant="link"
+												onClick={ retestPage }
+											/>
+										),
+									},
+							  } )
+							: translate(
+									'Optimize your site for lightning-fast performance. {{link}}Learn more.{{/link}}',
+									{
+										components: {
+											link: (
+												<InlineSupportLink supportContext="site-monitoring" showIcon={ false } />
+											),
+										},
+									}
+							  )
+					}
 				/>
 				<PageSelector
 					onFilterValueChange={ setQuery }