diff --git a/client/a8c-for-agencies/sections/sites/site-set-favorite/index.tsx b/client/a8c-for-agencies/sections/sites/site-set-favorite/index.tsx index fb0573040e9f1..e080db0f35dc8 100644 --- a/client/a8c-for-agencies/sections/sites/site-set-favorite/index.tsx +++ b/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 ] : [] ), ]; diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx index a66156bf83702..2fcf769db95ac 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx +++ b/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, } ); diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss b/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss index dbe0b1cbeed6d..0d7e1a8fadb64 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss +++ b/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; diff --git a/client/components/dataviews/style.scss b/client/components/dataviews/style.scss index 7900c8c52da51..cc07bce78d4d6 100644 --- a/client/components/dataviews/style.scss +++ b/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; } diff --git a/client/hosting/performance/site-performance.tsx b/client/hosting/performance/site-performance.tsx index 52f30fc1c66ce..e7e407d4f59fe 100644 --- a/client/hosting/performance/site-performance.tsx +++ b/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 = () => { /> { 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' ); } diff --git a/client/hosting/sites/components/sites-dataviews/index.tsx b/client/hosting/sites/components/sites-dataviews/index.tsx index 2f014031e7516..866179f8f5f82 100644 --- a/client/hosting/sites/components/sites-dataviews/index.tsx +++ b/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: ( - <> + { __( 'Stats' ) } - + ), render: ( { item }: { item: SiteExcerptData } ) => , enableHiding: false, diff --git a/client/hosting/sites/components/sites-dataviews/style.scss b/client/hosting/sites/components/sites-dataviews/style.scss index 3b95622b54d3d..eabdeac155385 100644 --- a/client/hosting/sites/components/sites-dataviews/style.scss +++ b/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; +}