Merge branch 'trunk' into fix/layout-shift

client/a8c-for-agencies/sections/sites/site-set-favorite/index.tsx

@@ -50,13 +50,16 @@ export default function SiteSetFavorite( { isFavorite, siteId, siteUrl }: Props
 	}, [ dataViewsState.filters, showOnlyFavorites, showOnlyDevelopmentSites ] );
 	const search = dataViewsState.search;
 
+	// Temporarily set perPage to 100 on Development sites page due to unresolved ES issue (https://github.com/Automattic/dotcom-forge/issues/8806)
+	const sitesPerPage = showOnlyDevelopmentSites ? 100 : dataViewsState.perPage;
+
 	const queryKey = [
 		'jetpack-agency-dashboard-sites',
 		search,
 		currentPage,
 		filter,
 		dataViewsState.sort,
-		dataViewsState.perPage,
+		sitesPerPage,
 		...( agencyId ? [ agencyId ] : [] ),
 	];
 

client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx

@@ -118,13 +118,16 @@ export default function SitesDashboard() {
 		prevIsOnNeedsAttentionPageRef.current = isOnNeedsAttentionPage;
 	}, [ dataViewsState, setDataViewsState, showOnlyFavorites, showOnlyDevelopmentSites ] );
 
+	// Temporarily set perPage to 100 on Development sites page due to unresolved ES issue (https://github.com/Automattic/dotcom-forge/issues/8806)
+	const sitesPerPage = showOnlyDevelopmentSites ? 100 : dataViewsState.perPage;
+
 	const { data, isError, isLoading, refetch } = useFetchDashboardSites( {
 		isPartnerOAuthTokenLoaded: false,
 		searchQuery: dataViewsState?.search,
 		currentPage: dataViewsState.page ?? 1,
 		filter: agencyDashboardFilter,
 		sort: dataViewsState.sort,
-		perPage: dataViewsState.perPage,
+		perPage: sitesPerPage,
 		agencyId,
 	} );
 

client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss

@@ -50,6 +50,33 @@
 		border-radius: 4px;
 	}
 
+	.dataviews__view-actions,
+	.dataviews-filters__container {
+		padding: 16px;
+
+		@media (min-width: $break-small) {
+			padding: 16px 64px;
+		}
+	}
+
+	.dataviews-view-table tr td:first-child,
+	.dataviews-view-table tr th:first-child {
+		padding-left: 16px;
+
+		@media (min-width: $break-small) {
+			padding-left: 64px;
+		}
+	}
+
+	.dataviews-view-table tr td:last-child,
+	.dataviews-view-table tr th:last-child {
+		padding-right: 16px;
+
+		@media (min-width: $break-small) {
+			padding-right: 64px;
+		}
+	}
+
 	@media (min-width: $break-large) {
 		background: inherit;
 

client/components/dataviews/style.scss

@@ -116,13 +116,6 @@
 			text-transform: uppercase;
 		}
 
-		svg {
-			&:not(:last-child) {
-				margin-right: 4px;
-				vertical-align: middle;
-			}
-		}
-
 		.dataviews-view-table-header-button {
 			color: inherit;
 		}

client/hosting/performance/site-performance.tsx

@@ -114,10 +114,20 @@ export const SitePerformance = () => {
 	const currentPageId = queryParams?.page_id?.toString() ?? '0';
 	const filter = queryParams?.filter?.toString();
 	const [ recommendationsFilter, setRecommendationsFilter ] = useState( filter );
-	const currentPage = useMemo(
-		() => pages.find( ( page ) => page.value === currentPageId ),
-		[ pages, currentPageId ]
-	);
+	const [ currentPage, setCurrentPage ] = useState< ( typeof pages )[ number ] >();
+
+	useEffect( () => {
+		if ( pages && ! currentPage ) {
+			setCurrentPage( pages.find( ( page ) => page.value === currentPageId ) );
+		}
+	}, [ pages, currentPage, currentPageId ] );
+
+	const pageOptions = useMemo( () => {
+		return currentPage
+			? [ currentPage, ...orderedPages.filter( ( p ) => p.value !== currentPage.value ) ]
+			: orderedPages;
+	}, [ currentPage, orderedPages ] );
+
 	const [ wpcom_performance_report_url, setWpcom_performance_report_url ] = useState(
 		currentPage?.wpcom_performance_report_url
 	);
@@ -225,13 +235,16 @@ export const SitePerformance = () => {
 				/>
 				<PageSelector
 					onFilterValueChange={ setQuery }
-					options={ orderedPages }
+					allowReset={ false }
+					options={ pageOptions }
 					onChange={ ( page_id ) => {
 						const url = new URL( window.location.href );
 
 						if ( page_id ) {
+							setCurrentPage( pages.find( ( page ) => page.value === page_id ) );
 							url.searchParams.set( 'page_id', page_id );
 						} else {
+							setCurrentPage( undefined );
 							url.searchParams.delete( 'page_id' );
 						}
 

client/hosting/sites/components/sites-dataviews/index.tsx

@@ -161,10 +161,10 @@ const DotcomSitesDataViews = ( {
 				id: 'stats',
 				// @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements.
 				label: (
-					<>
+					<span className="sites-dataviews__stats-label">
 						<JetpackLogo size={ 16 } />
 						<span>{ __( 'Stats' ) }</span>
-					</>
+					</span>
 				),
 				render: ( { item }: { item: SiteExcerptData } ) => <SiteStats site={ item } />,
 				enableHiding: false,

client/hosting/sites/components/sites-dataviews/style.scss

@@ -134,3 +134,10 @@
 .sites-overview__content .dataviews-wrapper .dataviews-filters__view-actions .components-h-stack button:nth-of-type(3) {
 	display: none;
 }
+
+// Style the Stats label that includes the Jetpack logo
+.sites-dataviews__stats-label {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}