Dashboard: Replace decentralized feature functions with centralized object. #103793

StevenDufresne · 2025-05-29T04:41:07Z

Proposed Changes

This presents an option for centralizing feature checks for sites.

Why are these changes being made?

We currently check the object directly like so site.is_wpcom_atomic.

Since we don't have an agreed-upon strategy, we're starting to see local functions wrapping that call and being exported.

Example:

import { canUpdateDefensiveMode } from '../sites/settings-defensive-mode';
import { canUpdatePHPVersion } from '../sites/settings-php/utils';
import { canGetPrimaryDataCenter } from '../sites/settings-primary-data-center';
import { canSetStaticFile404Handling } from '../sites/settings-static-file-404';
import { canUpdateWordPressVersion } from '../sites/settings-wordpress/utils';

Testing Instructions

N/A

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-29T04:41:19Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2025-05-29T04:41:50Z

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

App Entrypoints (~87055 bytes removed 📉 [gzipped])

name                    parsed_size            gzip_size
entry-dashboard-dotcom    -575878 B  (-33.2%)  -129079 B  (-26.6%)
entry-dashboard-a4a       -575878 B  (-33.5%)  -128899 B  (-26.8%)
entry-stepper               +8300 B   (+0.6%)    +2963 B   (+0.7%)
entry-domains-landing       +8179 B   (+1.2%)    +2239 B   (+1.1%)
entry-reauth-required       +8080 B   (+0.4%)    +2275 B   (+0.4%)
entry-browsehappy           +8019 B   (+4.0%)    +1932 B   (+3.2%)
entry-login                 +7993 B   (+0.4%)    +2279 B   (+0.4%)
entry-subscriptions         +7956 B   (+0.4%)    +2790 B   (+0.5%)
entry-main                  +7690 B   (+0.3%)    +2102 B   (+0.4%)

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

Sections (~6295 bytes removed 📉 [gzipped])

name                                parsed_size           gzip_size
site-settings                         -124591 B  (-7.0%)   -35536 B  (-7.1%)
hosting                               -124591 B  (-6.2%)   -35588 B  (-6.3%)
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%)
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%)
reader                                  -3911 B  (-0.1%)     -241 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%)     -372 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                                -3573 B  (-0.2%)      -72 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%)      +43 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%)       +9 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 (~7652 bytes added 📈 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-automattic-global-styles-src-components-global-styles-variations           -4221 B  (-0.2%)     -358 B  (-0.1%)
async-load-comment-block-editor                                                       -3923 B  (-0.1%)     -225 B  (-0.0%)
async-load-design-wordpress-components-gallery                                        -3917 B  (-0.5%)     -678 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.

arthur791004

We've had some discussions here: pgz0xU-1q-p2. I'm okay with centralizing these functions in one place for now, and we can continue to iterate on it as we work toward a more comprehensive solution.

BTW, I’m not sure if /sites/utils is the best place for this, since we might need to check features outside the context of /sites as well.

client/dashboard/utils/site-features.ts

StevenDufresne · 2025-05-29T06:06:40Z

BTW, I’m not sure if /sites/utils is the best place for this, since we might need to check features outside the context of /sites as well.

I have it at the root utils folder in contrast to the comment in the file.

ntsekouras · 2025-05-29T10:13:12Z

You have probably discussed this elsewhere, but why not just map the site response object to contain these values? Why do you consider the approach of separate functions better?

In my mind eventually the dashboard would have a common interface and consumers (.com, a4a, etc..) will have to map their API responses to that common interface. So for example if we can update PHP version, a site should have this info from the REST API. Unless I missing something.

fushar

Left some comments. I agree with the direction, because it's very easy currently to be inconsistent with hosting feature gating in individual features. For example, we all forgot that we need to check for plan expiration as well, not just whether a site is Atomic 🥲 see original logic in v1:

wp-calypso/client/sites/hosting/features.ts

Lines 9 to 14 in 5f1524c

    
           export function areHostingFeaturesSupported( site?: SiteExcerptData | null ) { 
        
           	const isAtomicSite = !! site?.is_wpcom_atomic || !! site?.is_wpcom_staging_site; 
        
           	const isPlanExpired = site?.plan?.expired; 
        
           	return isAtomicSite && ! isPlanExpired; 
        
           }

client/dashboard/utils/site-features.ts

matticbot · 2025-05-30T00:20:05Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

help-center
notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug try/share-features-util on your sandbox.

fushar

Looks good, we can keep improving how these work!

fushar · 2025-05-30T08:57:37Z

You have probably discussed this elsewhere, but why not just map the site response object to contain these values? Why do you consider the approach of separate functions better?

In my mind eventually the dashboard would have a common interface and consumers (.com, a4a, etc..) will have to map their API responses to that common interface. So for example if we can update PHP version, a site should have this info from the REST API. Unless I missing something.

@ntsekouras: we had discussed this here: pgz0xU-1q-p2

We haven't agreed on a good way to organize this in the backend, so in the meantime we'll try to do it from the frontend side.

arthur791004

Looks good to me! We can continue to iterate this in the future 🙂

StevenDufresne requested review from youknowriad and a team as code owners May 29, 2025 04:41

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

arthur791004 reviewed May 29, 2025

View reviewed changes

client/dashboard/utils/site-features.ts Outdated Show resolved Hide resolved

client/dashboard/utils/site-features.ts Outdated Show resolved Hide resolved

client/dashboard/utils/site-features.ts Outdated Show resolved Hide resolved

fushar reviewed May 29, 2025

View reviewed changes

client/dashboard/utils/site-features.ts Outdated Show resolved Hide resolved

client/dashboard/utils/site-features.ts Outdated Show resolved Hide resolved

client/dashboard/utils/site-features.ts Outdated Show resolved Hide resolved

fushar approved these changes May 30, 2025

View reviewed changes

arthur791004 approved these changes Jun 2, 2025

View reviewed changes

centralize functions.

155b9e2

StevenDufresne force-pushed the try/share-features-util branch from d78d12c to 155b9e2 Compare June 2, 2025 06:22

StevenDufresne merged commit 6a82453 into trunk Jun 2, 2025
11 checks passed

StevenDufresne deleted the try/share-features-util branch June 2, 2025 06:59

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Dashboard: Replace decentralized feature functions with centralized object. #103793

Dashboard: Replace decentralized feature functions with centralized object. #103793

Uh oh!

StevenDufresne commented May 29, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 29, 2025 •

edited by matticbot

Loading

Uh oh!

matticbot commented May 29, 2025 •

edited

Loading

Uh oh!

arthur791004 left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

StevenDufresne commented May 29, 2025

Uh oh!

ntsekouras commented May 29, 2025

Uh oh!

fushar left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

matticbot commented May 30, 2025 •

edited

Loading

Uh oh!

fushar left a comment

Uh oh!

fushar commented May 30, 2025 •

edited

Loading

Uh oh!

arthur791004 left a comment

Uh oh!

Uh oh!

Uh oh!

	export function areHostingFeaturesSupported( site?: SiteExcerptData \| null ) {
	const isAtomicSite = !! site?.is_wpcom_atomic \|\| !! site?.is_wpcom_staging_site;
	const isPlanExpired = site?.plan?.expired;

	return isAtomicSite && ! isPlanExpired;
	}

Dashboard: Replace decentralized feature functions with centralized object. #103793

Dashboard: Replace decentralized feature functions with centralized object. #103793

Uh oh!

Conversation

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

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

arthur791004 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

StevenDufresne commented May 29, 2025

Uh oh!

ntsekouras commented May 29, 2025

Uh oh!

fushar left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

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!

fushar left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

arthur791004 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

StevenDufresne commented May 29, 2025 •

edited

Loading

github-actions bot commented May 29, 2025 •

edited by matticbot

Loading

matticbot commented May 29, 2025 •

edited

Loading

matticbot commented May 30, 2025 •

edited

Loading

fushar commented May 30, 2025 •

edited

Loading