Dashboard v2: Implement Settings -> Caching #103826

fushar · 2025-05-30T08:33:40Z

Proposed Changes

This PR implements the Settings -> Caching as follows:

Simple	Atomic

Out of scope

I've scoped out these features for future follow-ups:

DOTCOM-13374 Caching: Implement rate limiting for clearing edge and object caches

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2025-05-30T08:33:54Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-146479

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-146479&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-146479&env=a8c-for-agencies

matticbot · 2025-05-30T08:43:53Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~80268 bytes added 📈 [gzipped])

name                    parsed_size            gzip_size
entry-dashboard-dotcom    +570408 B  (+49.3%)  +127095 B  (+35.6%)
entry-dashboard-a4a       +570408 B  (+49.8%)  +127071 B  (+36.0%)
entry-main                  -4541 B   (-0.2%)    -1271 B   (-0.2%)
entry-stepper               -4369 B   (-0.3%)    -1938 B   (-0.5%)
entry-domains-landing       -4248 B   (-0.6%)    -1212 B   (-0.6%)
entry-reauth-required       -4149 B   (-0.2%)    -1248 B   (-0.2%)
entry-browsehappy           -4088 B   (-2.0%)     -905 B   (-1.5%)
entry-login                 -4062 B   (-0.2%)    -1252 B   (-0.2%)
entry-subscriptions         -4025 B   (-0.2%)    -1763 B   (-0.3%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~3142 bytes removed 📉 [gzipped])

name                                parsed_size           gzip_size
site-settings                           +5206 B  (+0.3%)     +639 B  (+0.1%)
hosting                                 +5206 B  (+0.3%)     +661 B  (+0.1%)
github-deployments                      +4304 B  (+0.3%)     +415 B  (+0.1%)
sites-dashboard                         +3981 B  (+0.3%)     +413 B  (+0.1%)
site-performance                        +3981 B  (+0.3%)     +413 B  (+0.1%)
site-logs                               +3942 B  (+0.3%)     +315 B  (+0.1%)
overview                                +3942 B  (+0.1%)     +315 B  (+0.0%)
domains                                 +3942 B  (+0.1%)     +315 B  (+0.0%)
reader                                  +3937 B  (+0.1%)     +276 B  (+0.0%)
subscribers                             +3933 B  (+0.3%)     +236 B  (+0.1%)
jetpack-cloud-plugin-management         +3933 B  (+0.2%)     +235 B  (+0.0%)
a8c-for-agencies-plugins                +3933 B  (+0.2%)     +235 B  (+0.0%)
site-purchases                          +3920 B  (+0.2%)     +186 B  (+0.0%)
purchases                               +3920 B  (+0.1%)     +186 B  (+0.0%)
plugins                                 +3920 B  (+0.1%)     +169 B  (+0.0%)
plans                                   +3904 B  (+0.2%)     +407 B  (+0.1%)
site-monitoring                         +3878 B  (+0.3%)     +349 B  (+0.1%)
staging-site                            +3851 B  (+0.3%)     +362 B  (+0.1%)
a8c-for-agencies-woopayments            +3847 B  (+0.4%)     +208 B  (+0.1%)
a8c-for-agencies-team                   +3847 B  (+0.4%)     +208 B  (+0.1%)
a8c-for-agencies-sites                  +3847 B  (+0.1%)     +208 B  (+0.0%)
a8c-for-agencies-referrals              +3847 B  (+0.4%)     +208 B  (+0.1%)
a8c-for-agencies-overview               +3847 B  (+0.3%)     +208 B  (+0.1%)
a8c-for-agencies-migrations             +3847 B  (+0.4%)     +208 B  (+0.1%)
a8c-for-agencies-client                 +3782 B  (+0.2%)     +298 B  (+0.0%)
patterns                                +3599 B  (+0.2%)     +107 B  (+0.0%)
google-my-business                       -186 B  (-0.0%)     -553 B  (-0.3%)
stats                                    -171 B  (-0.0%)     -191 B  (-0.1%)
jetpack-cloud                            +162 B  (+0.0%)       +9 B  (+0.0%)
jetpack-cloud-agency-dashboard           +153 B  (+0.0%)     +378 B  (+0.1%)
a8c-for-agencies-settings                +153 B  (+0.1%)     +317 B  (+0.4%)
a8c-for-agencies-feedback                +153 B  (+0.1%)     +316 B  (+0.4%)
a8c-for-agencies-agency-tier             +153 B  (+0.1%)     +312 B  (+0.3%)
jetpack-cloud-partner-portal             +151 B  (+0.0%)     -134 B  (-0.0%)
a8c-for-agencies-marketplace              +76 B  (+0.0%)     -317 B  (-0.1%)
theme                                     -60 B  (-0.0%)      -44 B  (-0.0%)
a8c-for-agencies-partner-directory        +50 B  (+0.0%)     +406 B  (+0.2%)
settings-writing                          -43 B  (-0.0%)      -19 B  (-0.0%)
settings-security                         -43 B  (-0.0%)       -6 B  (-0.0%)
settings-reading                          -43 B  (-0.0%)      -16 B  (-0.0%)
settings-podcast                          -43 B  (-0.0%)      -23 B  (-0.0%)
settings-performance                      -43 B  (-0.0%)      -20 B  (-0.0%)
settings-newsletter                       -43 B  (-0.0%)      -19 B  (-0.0%)
settings-discussion                       -43 B  (-0.0%)      -13 B  (-0.0%)
jetpack-cloud-overview                    -34 B  (-0.0%)     -776 B  (-0.6%)
comments                                  -34 B  (-0.0%)      -11 B  (-0.0%)
security                                  -26 B  (-0.0%)       -4 B  (-0.0%)
account                                   -26 B  (-0.0%)      -26 B  (-0.0%)
woocommerce-installation                  -17 B  (-0.0%)       -8 B  (-0.0%)
themes                                    -17 B  (-0.0%)      -26 B  (-0.0%)
settings-jetpack                          -17 B  (-0.0%)       -8 B  (-0.0%)
settings                                  -17 B  (-0.0%)      -18 B  (-0.0%)
scan                                      -17 B  (-0.0%)       -8 B  (-0.0%)
promote-post-i2                           -17 B  (-0.0%)       -8 B  (-0.0%)
posts-custom                              -17 B  (-0.0%)       -8 B  (-0.0%)
posts                                     -17 B  (-0.0%)       -8 B  (-0.0%)
people                                    -17 B  (-0.0%)      -13 B  (-0.0%)
pages                                     -17 B  (-0.0%)       -8 B  (-0.0%)
migrate                                   -17 B  (-0.0%)       -8 B  (-0.0%)
media                                     -17 B  (-0.0%)       -7 B  (-0.0%)
marketplace                               -17 B  (-0.0%)       -8 B  (-0.0%)
marketing                                 -17 B  (-0.0%)      -13 B  (-0.0%)
jetpack-social                            -17 B  (-0.0%)       -8 B  (-0.0%)
jetpack-search                            -17 B  (-0.0%)       -8 B  (-0.0%)
jetpack-connect                           -17 B  (-0.0%)       -8 B  (-0.0%)
jetpack-cloud-settings                    -17 B  (-0.0%)       -8 B  (-0.0%)
jetpack-cloud-pricing                     -17 B  (-0.0%)       -8 B  (-0.0%)
jetpack-cloud-features-comparison         -17 B  (-0.0%)       -8 B  (-0.0%)
import                                    -17 B  (-0.0%)       -8 B  (-0.0%)
home                                      -17 B  (-0.0%)       -8 B  (-0.0%)
gutenberg-editor                          -17 B  (-0.0%)       -8 B  (-0.0%)
export                                    -17 B  (-0.0%)       -8 B  (-0.0%)
email                                     -17 B  (-0.0%)       -7 B  (-0.0%)
earn                                      -17 B  (-0.0%)       -7 B  (-0.0%)
customize                                 -17 B  (-0.0%)       -8 B  (-0.0%)
concierge                                 -17 B  (-0.0%)       -8 B  (-0.0%)
checkout                                  -17 B  (-0.0%)       -8 B  (-0.0%)
backup                                    -17 B  (-0.0%)       -8 B  (-0.0%)
add-ons                                   -17 B  (-0.0%)       -8 B  (-0.0%)
activity                                  -17 B  (-0.0%)       -8 B  (-0.0%)
a8c-for-agencies-landing                  -17 B  (-0.0%)      -54 B  (-0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~8210 bytes removed 📉 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-automattic-global-styles-src-components-global-styles-variations           +4247 B  (+0.2%)     +393 B  (+0.1%)
async-load-comment-block-editor                                                       +3949 B  (+0.1%)     +260 B  (+0.0%)
async-load-design-wordpress-components-gallery                                        +3930 B  (+0.5%)     +654 B  (+0.3%)
async-load-store-app-store-stats-listview                                              -143 B  (-0.1%)      -10 B  (-0.0%)
async-load-calypso-jetpack-cloud-sections-sidebar-navigation-manage-selected-...        -17 B  (-0.0%)     -327 B  (-0.8%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

StevenDufresne · 2025-06-02T04:13:44Z

Is it expected that the "Clear all" cache button is busy when we clear a specific cache?

fushar · 2025-06-02T04:17:26Z

Is it expected that the "Clear all" cache button is busy when we clear a specific cache?

It's just disabled; not busy. It seems to be the behavior in v1.

client/dashboard/sites/settings-caching/index.tsx

StevenDufresne · 2025-06-02T04:20:55Z

client/dashboard/sites/settings-caching/index.tsx

+		? createInterpolateElement(
+				__( 'Manage your site’s server-side caching. <learnMoreLink />.' ),
+				{
+					learnMoreLink: <a href="#learn-more">{ __( 'Learn more' ) }</a>,


I assume this is waiting for the help center to land?

Yup, we have this placeholder all over the place, we should clean this up when help center is ready.

StevenDufresne · 2025-06-02T04:34:16Z

Is it expected that the "Clear all" cache button is busy when we clear a specific cache?

It's just disabled; not busy. It seems to be the behavior in v1.

It would be nice to sort that out. It's a bit distracting for that to change states. It's also a tad confusing as to why the "Clear all" button would be disabled and not the other cache (although I can understand the underlying technical reason).

fushar · 2025-06-02T06:14:17Z

It's a bit distracting for that to change states.

Yeah, I agree. Updated to not disable the Clear all button when clearing individual caches.

taipeicoder · 2025-06-02T08:24:31Z

client/dashboard/sites/settings-caching/index.tsx

+					learnMoreLink: <a href="#learn-more">{ __( 'Learn more' ) }</a>,
+				}
+		  )
+		: '';


There's also a description for the upsell 🙂

The description in this upsell situation is not accurate when the site is Business but not Atomic-transferrred yet. I talked more this in DOTCOM-13376. Let's solve it separately

taipeicoder · 2025-06-02T08:56:32Z

@fushar sorry if I missed this, but is the use case where non-public sites cannot enable Global edge cache implemented?

We can follow-up in a later PR if it's not.

taipeicoder

LGTM 👍
There's a scenario that we might have missed which was mentioned in #103826 (comment). We can follow up in a separate PR.

taipeicoder · 2025-06-02T09:13:37Z

client/dashboard/sites/settings-caching/index.tsx

+	fields: [ 'active' ],
+};
+
+export function canUpdateCaching( site: Site ) {


We can now move this to https://github.com/Automattic/wp-calypso/blob/trunk/client/dashboard/utils/site-features.ts 😀

Co-authored-by: Steven Dufresne <[email protected]>

fushar · 2025-06-02T10:10:03Z

is the use case where non-public sites cannot enable Global edge cache implemented?

Oops I totally missed it 🤦 will follow up later!

a8ci18n · 2025-06-02T11:22:07Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17534577

Some locales (Hebrew) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @fushar for including a screenshot in the description! This is really helpful for our translators.

fushar marked this pull request as ready for review May 30, 2025 08:45

fushar requested review from youknowriad and a team as code owners May 30, 2025 08:45

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels May 30, 2025

fushar self-assigned this May 30, 2025

StevenDufresne reviewed Jun 2, 2025

View reviewed changes

client/dashboard/sites/settings-caching/index.tsx Outdated Show resolved Hide resolved

StevenDufresne reviewed Jun 2, 2025

View reviewed changes

fushar force-pushed the settings-caching branch from f4309da to e5a26e4 Compare June 2, 2025 04:29

taipeicoder reviewed Jun 2, 2025

View reviewed changes

taipeicoder approved these changes Jun 2, 2025

View reviewed changes

fushar and others added 3 commits June 2, 2025 16:57

Dashboard v2: Implement Settings -> Caching

6b0a563

Update client/dashboard/sites/settings-caching/index.tsx

1913a00

Co-authored-by: Steven Dufresne <[email protected]>

Don't disable Clear all when clearing individual caches

c7c9fdf

fushar force-pushed the settings-caching branch from 2963f47 to c7c9fdf Compare June 2, 2025 10:07

fushar merged commit f435b0f into trunk Jun 2, 2025
11 checks passed

fushar deleted the settings-caching branch June 2, 2025 10:22

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 2, 2025

fushar mentioned this pull request Jun 3, 2025

Dashboard v2: disable edge cache if site is not public #103906

Merged

8 tasks

Dashboard v2: Implement Settings -> Caching #103826

Dashboard v2: Implement Settings -> Caching #103826

Uh oh!

Conversation

fushar commented May 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Out of scope

Pre-merge Checklist

Uh oh!

github-actions bot commented May 30, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented May 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

StevenDufresne commented Jun 2, 2025

Uh oh!

fushar commented Jun 2, 2025

Uh oh!

Uh oh!

StevenDufresne Jun 2, 2025

Choose a reason for hiding this comment

Uh oh!

fushar Jun 2, 2025

Choose a reason for hiding this comment

Uh oh!

StevenDufresne commented Jun 2, 2025

Uh oh!

fushar commented Jun 2, 2025

Uh oh!

taipeicoder Jun 2, 2025

Choose a reason for hiding this comment

Uh oh!

fushar Jun 2, 2025

Choose a reason for hiding this comment

Uh oh!

taipeicoder commented Jun 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

taipeicoder left a comment

Choose a reason for hiding this comment

Uh oh!

taipeicoder Jun 2, 2025

Choose a reason for hiding this comment

Uh oh!

fushar commented Jun 2, 2025

Uh oh!

Uh oh!

a8ci18n commented Jun 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

fushar commented May 30, 2025 •

edited

Loading

github-actions bot commented May 30, 2025 •

edited by matticbot

Loading

matticbot commented May 30, 2025 •

edited

Loading

taipeicoder commented Jun 2, 2025 •

edited

Loading

a8ci18n commented Jun 2, 2025 •

edited

Loading