Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Subscribers: Add subscribers-dataviews flag and component #97946

Merged
merged 10 commits into from
Jan 14, 2025

Conversation

allilevine
Copy link
Member

@allilevine allilevine commented Jan 3, 2025

Related to https://github.com/Automattic/loop/issues/291

Proposed Changes

  • Add DataViews subscribers table behind flag subscribers-dataviews.
Screen Shot 2025-01-09 at 6 09 26 PM

Why are these changes being made?

  • pe7F0s-2oe-p2

Testing Instructions

  • Go to /subscribers/{ site id }?flags=subscribers-dataviews
  • Check that the pagination works.
  • Check that you change the number of items per page using the gear icon.
  • Check that you can search by name, username, or email.
  • Check that you can sort by name or since (but only descending).

Note: I tested with paid subscribers and we're not currently returning plans data from the endpoint used here.

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)?

@allilevine allilevine self-assigned this Jan 3, 2025
@matticbot
Copy link
Contributor

matticbot commented Jan 3, 2025

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

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

name                   parsed_size           gzip_size
entry-subscriptions        +1995 B  (+0.1%)     +504 B  (+0.1%)
entry-domains-landing      +1828 B  (+0.3%)     +357 B  (+0.2%)
entry-browsehappy          +1828 B  (+0.9%)     +357 B  (+0.6%)
entry-login                +1737 B  (+0.1%)     +314 B  (+0.1%)
entry-stepper              +1082 B  (+0.1%)     +178 B  (+0.0%)
entry-main                  +860 B  (+0.0%)     +393 B  (+0.1%)

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

Sections (~38319 bytes added 📈 [gzipped])

name                                parsed_size            gzip_size
subscribers                           +539972 B  (+67.1%)  +124683 B  (+51.1%)
update-design-flow                      -1345 B   (-0.1%)     +542 B   (+0.1%)
signup                                  -1124 B   (-0.4%)      -16 B   (-0.0%)
link-in-bio-tld-flow                     -860 B   (-0.0%)    +1757 B   (+0.3%)
hundred-year-plan                        -663 B   (-0.3%)      -82 B   (-0.1%)
start-writing-flow                       -449 B   (-1.1%)     -162 B   (-1.7%)
design-first-flow                        -449 B   (-1.1%)     -140 B   (-1.5%)
newsletter-post-setup-flow               -404 B   (-0.1%)     -824 B   (-0.9%)
link-in-bio-post-setup-flow              -404 B   (-0.1%)     -824 B   (-0.9%)
checkout                                 +351 B   (+0.0%)    +1487 B   (+0.3%)
newsletter-flow                          -340 B   (-1.0%)     -111 B   (-1.2%)
settings                                 +300 B   (+0.0%)     +935 B   (+0.3%)
domain-user-transfer-flow                -298 B   (-0.1%)      +40 B   (+0.0%)
hosting                                  +297 B   (+0.0%)     -203 B   (-0.0%)
jetpack-cloud-partner-portal             +289 B   (+0.0%)    +1556 B   (+0.5%)
jetpack-cloud-agency-sites-v2            +289 B   (+0.0%)    +1342 B   (+0.2%)
people                                   -286 B   (-0.0%)     -539 B   (-0.2%)
patterns                                 +284 B   (+0.0%)      +93 B   (+0.0%)
domains                                  +239 B   (+0.0%)    +1064 B   (+0.2%)
site-purchases                           +209 B   (+0.0%)     -526 B   (-0.1%)
purchases                                +209 B   (+0.0%)     -524 B   (-0.1%)
stepper-user-step                        -208 B   (-0.1%)      -51 B   (-0.1%)
jetpack-cloud-manage-pricing             -208 B   (-0.1%)     -108 B   (-0.1%)
entrepreneur-flow                        -208 B   (-0.1%)      -31 B   (-0.0%)
promote-post-i2                          +206 B   (+0.0%)      +14 B   (+0.0%)
media                                    +206 B   (+0.0%)     +411 B   (+0.1%)
earn                                     +206 B   (+0.0%)      +70 B   (+0.0%)
backup                                   +206 B   (+0.0%)      +82 B   (+0.0%)
jetpack-cloud-pricing                    -196 B   (-0.0%)    -1104 B   (-0.5%)
jetpack-cloud-features-comparison        -196 B   (-0.0%)     -837 B   (-0.4%)
copy-site-flow                           -196 B   (-0.0%)     +143 B   (+0.0%)
write-flow                               +176 B   (+0.0%)    +1047 B   (+0.3%)
build-flow                               +176 B   (+0.0%)    +1042 B   (+0.3%)
import-hosted-site-flow                  +165 B   (+0.0%)     +167 B   (+0.0%)
stats                                    +153 B   (+0.0%)      -11 B   (-0.0%)
staging-site                             -144 B   (-0.0%)     -986 B   (-0.2%)
site-monitoring                          -144 B   (-0.0%)     -898 B   (-0.2%)
site-logs                                -144 B   (-0.0%)     -906 B   (-0.2%)
hosting-features                         -144 B   (-0.0%)     -893 B   (-0.2%)
jetpack-connect                          -136 B   (-0.0%)    -1039 B   (-0.3%)
site-tools                               -131 B   (-0.0%)     -924 B   (-0.2%)
site-overview                            -131 B   (-0.0%)     -861 B   (-0.2%)
theme                                    +125 B   (+0.0%)    -1184 B   (-0.5%)
reblogging-flow                          -123 B   (-1.6%)      -25 B   (-1.2%)
onboarding-flow                          -123 B   (-0.5%)       -4 B   (-0.1%)
new-hosted-site-flow                     -123 B   (-0.1%)      -22 B   (-0.0%)
hundred-year-domain                      -123 B   (-0.1%)      -35 B   (-0.1%)
sites-dashboard                          -118 B   (-0.0%)     -914 B   (-0.3%)
site-performance                         -118 B   (-0.0%)     -914 B   (-0.2%)
site-marketing                           -118 B   (-0.0%)     -914 B   (-0.2%)
github-deployments                       -118 B   (-0.0%)     -889 B   (-0.2%)
a8c-for-agencies-referrals               -118 B   (-0.0%)    -1483 B   (-0.5%)
a8c-for-agencies-overview                -118 B   (-0.0%)     -948 B   (-0.3%)
preview                                  -109 B   (-0.0%)      -68 B   (-0.1%)
posts-custom                             -109 B   (-0.0%)      -80 B   (-0.0%)
posts                                    -109 B   (-0.0%)      -80 B   (-0.0%)
pages                                    -109 B   (-0.0%)      -58 B   (-0.0%)
gutenberg-editor                         +108 B   (+0.0%)      +42 B   (+0.0%)
site-settings                            -105 B   (-0.0%)     -935 B   (-0.2%)
import                                   -105 B   (-0.0%)     -622 B   (-0.3%)
purchase-product                         -103 B   (-0.1%)      -49 B   (-0.1%)
jetpack-app                              -103 B   (-0.0%)     +529 B   (+0.4%)
account                                  -103 B   (-0.0%)     +469 B   (+0.2%)
a8c-for-agencies-client                   -93 B   (-0.0%)    -1005 B   (-0.3%)
switch-site                               -91 B   (-0.0%)     +148 B   (+0.3%)
jetpack-cloud-plugin-management           +89 B   (+0.0%)    +1202 B   (+0.2%)
settings-writing                          -84 B   (-0.0%)      -46 B   (-0.0%)
settings-podcast                          -84 B   (-0.0%)      -45 B   (-0.0%)
settings-newsletter                       -84 B   (-0.0%)      -46 B   (-0.0%)
themes                                    -79 B   (-0.0%)      -48 B   (-0.0%)
a8c-for-agencies-migrations               +78 B   (+0.0%)     -340 B   (-0.1%)
plugins                                   -66 B   (-0.0%)     +475 B   (+0.1%)
reader                                    +49 B   (+0.0%)      +93 B   (+0.0%)
home                                      +49 B   (+0.0%)     +218 B   (+0.0%)
jetpack-cloud-settings                    -39 B   (-0.0%)      -28 B   (-0.0%)
a8c-for-agencies-team                     -25 B   (-0.0%)      +73 B   (+0.0%)
devdocs                                   -18 B   (-0.0%)       +5 B   (+0.0%)
transferring-hosted-site-flow             -15 B   (-0.0%)       -9 B   (-0.0%)
plugin-bundle-flow                        -15 B   (-0.0%)      -66 B   (-0.0%)
new-hosted-site-flow-user-included        -15 B   (-0.0%)      -15 B   (-0.0%)
google-transfer                           -15 B   (-0.3%)       -9 B   (-0.6%)
domain-transfer                           -15 B   (-0.3%)       -8 B   (-0.5%)
connect-domain                            -15 B   (-0.0%)      -15 B   (-0.0%)

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 (~1892 bytes removed 📉 [gzipped])

name                                                                         parsed_size           gzip_size
async-load-design-blocks                                                          +418 B  (+0.0%)    +1336 B  (+0.2%)
async-load-calypso-my-sites-checkout-modal                                        +415 B  (+0.0%)    +1042 B  (+0.2%)
async-load-design                                                                 -338 B  (-0.0%)      -12 B  (-0.0%)
async-load-signup-steps-site-options                                              -311 B  (-0.4%)      -82 B  (-0.3%)
async-load-calypso-blocks-editor-checkout-modal                                   +209 B  (+0.0%)     +855 B  (+0.3%)
async-load-signup-steps-woocommerce-install-transfer                              -208 B  (-0.3%)      -38 B  (-0.2%)
async-load-signup-steps-woocommerce-install-step-store-address                    -208 B  (-0.2%)      -38 B  (-0.1%)
async-load-signup-steps-woocommerce-install-step-business-info                    -208 B  (-0.2%)      -39 B  (-0.1%)
async-load-signup-steps-woocommerce-install-confirm                               -208 B  (-0.2%)     -134 B  (-0.5%)
async-load-signup-steps-test-step                                                 -208 B  (-0.4%)      -43 B  (-0.2%)
async-load-signup-steps-social-profiles                                           -208 B  (-0.3%)      -37 B  (-0.2%)
async-load-signup-steps-site                                                      -208 B  (-0.3%)      -41 B  (-0.2%)
async-load-signup-steps-rewind-were-backing                                       -208 B  (-0.4%)      -38 B  (-0.2%)
async-load-signup-steps-rewind-form-creds                                         -208 B  (-0.2%)      -40 B  (-0.1%)
async-load-signup-steps-reader-landing                                            -208 B  (-0.4%)      -39 B  (-0.2%)
async-load-signup-steps-initial-intent                                            -208 B  (-0.2%)      -31 B  (-0.1%)
async-load-signup-steps-hosting-decider                                           -208 B  (-0.4%)      -39 B  (-0.2%)
async-load-signup-steps-emails                                                    -208 B  (-0.2%)      -39 B  (-0.1%)
async-load-signup-steps-creds-permission                                          -208 B  (-0.2%)      -40 B  (-0.1%)
async-load-signup-steps-creds-confirm                                             -208 B  (-0.2%)      -39 B  (-0.1%)
async-load-signup-steps-courses                                                   -208 B  (-0.2%)      -39 B  (-0.1%)
async-load-signup-steps-clone-start                                               -208 B  (-0.3%)      -39 B  (-0.2%)
async-load-signup-steps-clone-ready                                               -208 B  (-0.2%)      -42 B  (-0.2%)
async-load-signup-steps-clone-point                                               -208 B  (-0.1%)      -41 B  (-0.1%)
async-load-signup-steps-clone-destination                                         -208 B  (-0.3%)      -40 B  (-0.2%)
async-load-signup-steps-clone-credentials                                         -208 B  (-0.2%)      -41 B  (-0.1%)
async-load-signup-steps-clone-cloning                                             -208 B  (-0.3%)      -39 B  (-0.2%)
async-load-signup-steps-website-content                                           -206 B  (-0.1%)      -65 B  (-0.1%)
async-load-signup-steps-p2-complete-profile                                       -196 B  (-0.1%)     -839 B  (-1.6%)
async-load-automattic-help-center-stepper                                         -196 B  (-0.0%)     -388 B  (-0.1%)
async-load-automattic-help-center                                                 -196 B  (-0.0%)     -388 B  (-0.2%)
async-load-signup-steps-theme-selection                                           -178 B  (-0.1%)      -60 B  (-0.1%)
async-load-design-playground                                                      -136 B  (-0.0%)     +415 B  (+0.1%)
async-load-calypso-my-sites-stats-stats-post-detail                               -109 B  (-0.3%)      -58 B  (-0.6%)
async-load-calypso-my-sites-site-settings-seo-settings-form                       -109 B  (-0.0%)      -65 B  (-0.1%)
async-load-signup-steps-website-content-section-types                             -103 B  (-0.1%)      -15 B  (-0.0%)
async-load-calypso-signup-step-wrapper                                            -103 B  (-0.3%)      -51 B  (-0.4%)
async-load-signup-steps-design-picker                                             -100 B  (-0.1%)      +14 B  (+0.0%)
async-load-calypso-layout-command-palette                                          -91 B  (-0.0%)     +148 B  (+0.2%)
async-load-design-wordpress-components-gallery                                     +78 B  (+0.0%)      +72 B  (+0.0%)
async-load-comment-block-editor                                                    +78 B  (+0.0%)      +72 B  (+0.0%)
async-load-calypso-lib-account-settings-helper                                     +78 B  (+0.0%)     +441 B  (+0.8%)
async-load-automattic-global-styles-src-components-global-styles-variations        +78 B  (+0.0%)      +72 B  (+0.0%)
async-load-calypso-components-web-preview-component                                +57 B  (+0.0%)      +55 B  (+0.0%)

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.

@matticbot
Copy link
Contributor

matticbot commented Jan 3, 2025

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

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

  • blaze-dashboard
  • command-palette-wp-admin
  • help-center
  • notifications
  • odyssey-stats
  • whats-new
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/subscribers-dataviews on your sandbox.

@arcangelini
Copy link
Contributor

One thing we will need to keep an eye on is the Jetpack cloud as well. I assume we want this section to be the same in Jetpack cloud?

Screen Shot 2025-01-07 at 10 37 20

@allilevine
Copy link
Member Author

One thing we will need to keep an eye on is the Jetpack cloud as well. I assume we want this section to be the same in Jetpack cloud?

@arcangelini Yes, thanks for the reminder! The same but with Jetpack Cloud styles and Jetpack support links. I'll open an issue, but let me know if we should fix anything in this initial merge.

@allilevine allilevine force-pushed the add/subscribers-dataviews branch 2 times, most recently from d5f6afc to 389e785 Compare January 10, 2025 18:56
setSortTerm,
} = useSubscribersPage();

const isSimple = useSelector( isSimpleSite );
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm preserving this empty view logic, but we could refactor or replace it.

onGiftSubscription={ onGiftSubscription }
onClickUnsubscribe={ onClickUnsubscribe }
/>
{ isEnabled( 'subscribers-dataviews' ) ? (
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm showing the new DataViews component when the flag is enabled. I repurposed a lot from the existing SubscriberListContainer component.

@allilevine allilevine marked this pull request as ready for review January 10, 2025 20:20
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 10, 2025
@allilevine allilevine force-pushed the add/subscribers-dataviews branch from 389e785 to 05c3240 Compare January 13, 2025 20:55
import './style.scss';

const SubscriptionTypeCell = ( { subscriber }: { subscriber: Subscriber } ) => {
const plans = useSubscriptionPlans( subscriber );
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found that we're not returning plans data from the endpoint used here. So this is how it works in the individual subscriber page, but it's not actually working yet.

Copy link
Contributor

@arcangelini arcangelini left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like a good start. Since this is just the foundation that is going to be behind a flag I say we ship. I tested for regressions and didn't run into any issue. There are a few things that need to be fixed but they are all covered in other issues (as far as I saw). 🚀 🚀

@arcangelini arcangelini added [Status] Ready to Merge Newsletters and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jan 13, 2025
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 13, 2025
@arcangelini arcangelini added the [Feature] Subscriptions All subscription-related things such as paid and unpaid, user management, and newsletter settings. label Jan 13, 2025
@allilevine allilevine merged commit f2a144b into trunk Jan 14, 2025
14 of 15 checks passed
@allilevine allilevine deleted the add/subscribers-dataviews branch January 14, 2025 14:19
@github-actions github-actions bot removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] Ready to Merge labels Jan 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Subscriptions All subscription-related things such as paid and unpaid, user management, and newsletter settings. Newsletters
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants