diff --git a/client/hosting/performance/hooks/useSitePages.ts b/client/hosting/performance/hooks/useSitePages.ts
index 01f176166d415..505289209c30d 100644
--- a/client/hosting/performance/hooks/useSitePages.ts
+++ b/client/hosting/performance/hooks/useSitePages.ts
@@ -31,6 +31,14 @@ const getPages = ( siteId: number, query = '' ) => {
} );
};
+export const getSitePagesQueryKey = ( {
+ siteId,
+ query,
+}: {
+ siteId?: number | null;
+ query: string;
+} ) => [ 'useSitePages', siteId, query ];
+
export const useSitePages = ( { query = '' } ) => {
const { __ } = useI18n();
@@ -38,7 +46,7 @@ export const useSitePages = ( { query = '' } ) => {
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
index 7c0c00f7a3d1a..5a04dafdcc894 100644
--- 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 = () => {
,
- },
- }
- ) }
+ 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: (
+
+ ),
+ },
+ } )
+ : translate(
+ 'Optimize your site for lightning-fast performance. {{link}}Learn more.{{/link}}',
+ {
+ components: {
+ link: (
+
+ ),
+ },
+ }
+ )
+ }
/>