Adding DataViews to Plugin Management

[paulopmt1]

Related to https://github.com/Automattic/dotcom-forge/issues/9364

Proposed Changes

• We're adding DataViews to the /plugins/manage screen:

Why are these changes being made?

Testing Instructions

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 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]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-main                 -1569 B  (-0.1%)     +165 B  (+0.0%)
entry-stepper              -1255 B  (-0.1%)     +218 B  (+0.0%)
entry-login                 +414 B  (+0.0%)     +131 B  (+0.0%)
entry-domains-landing       +414 B  (+0.1%)     +128 B  (+0.1%)
entry-browsehappy           +414 B  (+0.2%)     +128 B  (+0.2%)
entry-subscriptions         +311 B  (+0.0%)      -32 B  (-0.0%)

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

Sections (~15878 bytes removed 📉 [gzipped])

name                                parsed_size            gzip_size
jetpack-cloud-plugin-management       +388552 B  (+19.1%)   +86327 B  (+14.5%)
plugins                               +367289 B  (+12.5%)   +79739 B   (+9.5%)
site-migration-flow                      -545 B   (-0.7%)     -191 B   (-1.2%)
migration-flow                           -545 B   (-0.7%)     -191 B   (-1.4%)
hosted-site-migration-flow               -545 B   (-0.7%)     -191 B   (-1.2%)
update-design-flow                       -419 B   (-0.0%)     +351 B   (+0.1%)
with-theme-assembler-flow                -373 B   (-0.5%)      -21 B   (-0.2%)
update-options-flow                      -373 B   (-0.7%)      -22 B   (-0.4%)
trial-wooexpress-flow                    -373 B   (-0.7%)      -28 B   (-0.4%)
tailored-ecommerce-flow                  -373 B   (-0.7%)      -27 B   (-0.4%)
site-setup-wg                            -373 B   (-0.4%)      -33 B   (-0.2%)
site-setup-flow                          -373 B   (-0.4%)      -33 B   (-0.2%)
readymade-template-flow                  -373 B   (-0.3%)      -23 B   (-0.1%)
migration-signup                         -373 B   (-0.6%)      -31 B   (-0.4%)
import-flow                              -373 B   (-0.6%)      -33 B   (-0.3%)
free-post-setup-flow                     -373 B   (-0.7%)      -19 B   (-0.3%)
free-flow                                -373 B   (-0.6%)      -30 B   (-0.3%)
entrepreneur-flow                        -373 B   (-0.3%)      -23 B   (-0.1%)
assembler-first-flow                     -373 B   (-0.5%)      -30 B   (-0.2%)
ai-assembler-flow                        -373 B   (-0.5%)      -27 B   (-0.2%)
theme                                    -364 B   (-0.0%)     -483 B   (-0.2%)
settings-jetpack                         +299 B   (+0.1%)    +1566 B   (+1.0%)
jetpack-cloud-settings                   +299 B   (+0.0%)    +1566 B   (+0.8%)
media                                    +239 B   (+0.0%)     +549 B   (+0.1%)
account                                  -232 B   (-0.0%)    -1006 B   (-0.3%)
sensei-flow                              +231 B   (+0.0%)     +555 B   (+0.3%)
reader                                   -230 B   (-0.0%)    -1056 B   (-0.3%)
devdocs                                  +222 B   (+0.1%)      +28 B   (+0.0%)
domain-user-transfer-flow                -206 B   (-0.1%)      -53 B   (-0.1%)
home                                     -198 B   (-0.0%)    -1062 B   (-0.2%)
jetpack-cloud-pricing                    +196 B   (+0.0%)    +1183 B   (+0.5%)
jetpack-cloud-features-comparison        +196 B   (+0.0%)    +1038 B   (+0.5%)
import-hosted-site-flow                  +196 B   (+0.0%)     +962 B   (+0.4%)
backup                                   +196 B   (+0.0%)     +984 B   (+0.3%)
activity                                 +196 B   (+0.0%)     +469 B   (+0.2%)
a8c-for-agencies-settings                -196 B   (-0.1%)     -519 B   (-0.9%)
a8c-for-agencies-plugins                 -196 B   (-0.1%)     -394 B   (-0.8%)
a8c-for-agencies-landing                 -196 B   (-0.2%)     -502 B   (-1.7%)
settings-reading                         -183 B   (-0.0%)     -313 B   (-0.2%)
jetpack-connect                          +183 B   (+0.0%)    +1296 B   (+0.4%)
import                                   -183 B   (-0.0%)     -275 B   (-0.1%)
marketplace                              -177 B   (-0.0%)    -1206 B   (-0.4%)
checkout                                 +167 B   (+0.0%)      +83 B   (+0.0%)
link-in-bio-tld-flow                     -149 B   (-0.0%)     +264 B   (+0.0%)
signup                                   -148 B   (-0.1%)       +6 B   (+0.0%)
settings-podcast                         +148 B   (+0.0%)      +33 B   (+0.0%)
videopress-flow                          +138 B   (+0.0%)      +23 B   (+0.0%)
settings                                 +132 B   (+0.0%)     +210 B   (+0.1%)
jetpack-cloud-partner-portal             +124 B   (+0.0%)     -120 B   (-0.0%)
domains                                  +124 B   (+0.0%)     +998 B   (+0.2%)
site-purchases                           -121 B   (-0.0%)     -944 B   (-0.2%)
hosting                                  -118 B   (-0.0%)     -181 B   (-0.0%)
videopress-tv-flow                       -113 B   (-0.2%)     +451 B   (+1.8%)
start-writing-flow                       -109 B   (-0.4%)       -6 B   (-0.1%)
google-transfer                          -108 B   (-2.5%)      -20 B   (-1.4%)
domain-transfer                          -108 B   (-2.7%)      -20 B   (-1.5%)
security                                 -106 B   (-0.0%)     -755 B   (-0.3%)
settings-security                        -103 B   (-0.0%)       +4 B   (+0.0%)
settings-discussion                      -103 B   (-0.0%)      -10 B   (-0.0%)
scan                                     +103 B   (+0.0%)      -48 B   (-0.0%)
newsletter-post-setup-flow               -103 B   (-0.1%)      -24 B   (-0.1%)
link-in-bio-post-setup-flow              -103 B   (-0.1%)      -24 B   (-0.1%)
themes                                    +97 B   (+0.0%)     -157 B   (-0.1%)
stats                                     +94 B   (+0.0%)      +64 B   (+0.0%)
site-blocks                               -93 B   (-0.0%)     -844 B   (-0.4%)
privacy                                   -93 B   (-0.0%)     -836 B   (-0.4%)
notification-settings                     -93 B   (-0.0%)     -818 B   (-0.3%)
me                                        -93 B   (-0.0%)     -844 B   (-0.4%)
help                                      -93 B   (-0.0%)     -830 B   (-0.4%)
developer                                 -93 B   (-0.0%)     -836 B   (-0.4%)
account-close                             -93 B   (-0.0%)     -842 B   (-0.4%)
a8c-for-agencies-migrations               -93 B   (-0.0%)     -493 B   (-0.8%)
a8c-for-agencies-marketplace              +93 B   (+0.0%)     +833 B   (+0.4%)
a8c-for-agencies-agency-tier              -93 B   (-0.0%)     -538 B   (-0.9%)
site-performance                          -91 B   (-0.0%)     +209 B   (+0.0%)
site-monitoring                           -91 B   (-0.0%)     +175 B   (+0.0%)
site-logs                                 -91 B   (-0.0%)     +175 B   (+0.0%)
a8c-for-agencies-client                   +83 B   (+0.0%)    +1000 B   (+0.3%)
staging-site                              +78 B   (+0.0%)      +85 B   (+0.0%)
settings-newsletter                       +78 B   (+0.0%)      +24 B   (+0.0%)
gutenberg-editor                          +74 B   (+0.0%)      +25 B   (+0.0%)
settings-writing                          +65 B   (+0.0%)      -22 B   (-0.0%)
github-deployments                        +64 B   (+0.0%)     +252 B   (+0.1%)
earn                                      +62 B   (+0.0%)      +46 B   (+0.0%)
subscribers                               +60 B   (+0.0%)     -217 B   (-0.1%)
a8c-for-agencies-team                     +45 B   (+0.0%)     +798 B   (+0.3%)
a8c-for-agencies-sites                    +45 B   (+0.0%)    +1135 B   (+0.2%)
a8c-for-agencies-referrals                +45 B   (+0.0%)    +1022 B   (+0.4%)
a8c-for-agencies-overview                 +45 B   (+0.0%)     +926 B   (+0.3%)
sites-dashboard                           -39 B   (-0.0%)      +82 B   (+0.0%)
hosting-features                          -39 B   (-0.0%)     +240 B   (+0.1%)
new-hosted-site-flow-user-included        -36 B   (-0.6%)       +1 B   (+0.1%)
new-hosted-site-flow                      -36 B   (-0.6%)       +2 B   (+0.1%)
connect-domain                            -36 B   (-0.1%)       -1 B   (-0.0%)
hundred-year-plan                         +35 B   (+0.1%)       +7 B   (+0.1%)
hundred-year-domain                       +35 B   (+0.1%)      +14 B   (+0.1%)
copy-site-flow                            +35 B   (+0.0%)      -11 B   (-0.0%)
posts-custom                              +32 B   (+0.0%)     +343 B   (+0.2%)
posts                                     +32 B   (+0.0%)     +343 B   (+0.2%)
migrate                                   +32 B   (+0.0%)      +12 B   (+0.0%)
comments                                  -23 B   (-0.0%)     -176 B   (-0.1%)
a8c-for-agencies-purchases                -23 B   (-0.0%)     -165 B   (-0.1%)
patterns                                  -13 B   (-0.0%)      +12 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 (~4947 bytes added 📈 [gzipped])

name                                                                         parsed_size           gzip_size
async-load-design-blocks                                                          +164 B  (+0.0%)    +1038 B  (+0.2%)
async-load-design-playground                                                      +162 B  (+0.0%)     +484 B  (+0.1%)
async-load-design                                                                 +162 B  (+0.0%)     +498 B  (+0.1%)
async-load-calypso-post-editor-media-modal                                        +136 B  (+0.0%)     +725 B  (+0.2%)
async-load-calypso-post-editor-editor-media-modal                                 +136 B  (+0.0%)     +662 B  (+0.2%)
async-load-comment-block-editor                                                   -116 B  (-0.0%)       +4 B  (+0.0%)
async-load-signup-steps-theme-selection                                           -103 B  (-0.0%)       -7 B  (-0.0%)
async-load-signup-steps-site-options                                              -103 B  (-0.2%)      -27 B  (-0.2%)
async-load-quick-language-switcher                                                -103 B  (-0.1%)      -17 B  (-0.0%)
async-load-calypso-lib-account-settings-helper                                    -103 B  (-0.1%)      +25 B  (+0.0%)
async-load-automattic-design-preview                                               -64 B  (-0.0%)      +68 B  (+0.0%)
async-load-signup-steps-plans-theme-preselected                                    -36 B  (-0.0%)     +451 B  (+0.3%)
async-load-signup-steps-plans                                                      -36 B  (-0.0%)     +451 B  (+0.3%)
async-load-signup-steps-domains                                                    +35 B  (+0.0%)       +5 B  (+0.0%)
async-load-design-wordpress-components-gallery                                     -13 B  (-0.0%)      +12 B  (+0.0%)
async-load-automattic-global-styles-src-components-global-styles-variations        -13 B  (-0.0%)      +12 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]

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

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

• notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/plugin-manage-with-data-viewsV2 on your sandbox.

[nuriapenya]

Cool! That's heading in the right direction, @ paulopmt1!

There are some design tweaks that we need to do to accommodate this component into the layout:

From current POC:

We should adjust the margins on the header to match the table layout, like they do in A4A.

• Checkboxes should use Blueberry, not Green.
• I couldn't properly test the search or sorting functions - not sure if they work?
• Labels should be simpler (avoid "is any" + counter "-x") *need to check with core
• We might need to find better icons for "activate" or "deactivate" because I think they are a bit confusing. *need to check with core
  

Some other improvements

One of the biggest changes is that we lost the tabs on the header, which provide one-click access to the filters. As I think the "Update available" filter is crucial, we could consider adding a section on the left bar:

This is how A4A treats "Urgent" actions on their side, too:

As we use the bulk functionality, we might want to add the "Update" action on the bottom bar too:

*need to check icon with core**

There are few things I should double-check in terms of design/alignment with Core. In the meantime, I prepared some designs here to keep things rolling: 3MWZP41sHmyYHPJbUFLAXT-fi-2901_116637

[nuriapenya]

And as @zaguiini mentioned elsewhere, if the loading of the plugins is fast enough, we could consider showing all the plugins instead of pagination... tbd I guess!