A4A: Sites Dashboard - Update Dataviews version to latest

[gogdzl]

Related to https://github.com/Automattic/automattic-for-agencies-dev/issues/311

Proposed Changes

• This PR updates wordpress/dataviews to the latest version (v1.0.0).
  • List of issues fixed:
    • Fixed status filter behavior, which changed in this version
    • Fixed dataviews styling when preview pane is open
    • Fixed scrolling

Testing Instructions

• One of our components changed, so run yarn install to make sure everything is set-up properly.
• Run yarn start-a8c-for-agencies
• Go to http://agencies.localhost:3000/sites
• Verify that the new version of our dashboard's dataview component is functioning properly in A4A. There have been some changes compared to our current version, which are outlined below, along with one known issue that we must disregard during testing.

Changes:

Filter selection

Previous Version:

Latest:

When Preview Pane is open, filters now show multiple lines

Previews Version:

Latest:

Known Issue - Please ignore this one for now

When the Preview Pane is open and pagination is visible, the page's alignment looks off.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md 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)?

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-stepper              -1647 B  (-0.1%)      +74 B  (+0.0%)
entry-main                  -918 B  (-0.0%)     +124 B  (+0.0%)
entry-login                 +829 B  (+0.1%)     +142 B  (+0.0%)
entry-subscriptions         +753 B  (+0.0%)      +95 B  (+0.0%)
entry-domains-landing       -225 B  (-0.0%)      -32 B  (-0.0%)
entry-browsehappy           -225 B  (-0.2%)      -32 B  (-0.1%)

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

Sections (~14230 bytes removed 📉 [gzipped])

name                             parsed_size            gzip_size
jetpack-cloud-agency-sites-v2      +153999 B   (+9.8%)   +51051 B  (+11.6%)
a8c-for-agencies-sites             +153577 B  (+10.8%)   +50672 B  (+12.8%)
site-monitoring                     +20796 B   (+2.1%)    +5774 B   (+1.8%)
hosting                             +20796 B   (+1.7%)    +5941 B   (+1.5%)
github-deployments                  +20796 B   (+2.1%)    +6180 B   (+2.0%)
sites-dashboard                     +20703 B   (+2.4%)    +5625 B   (+2.1%)
dev-tools-promo                     +20703 B   (+2.4%)    +5625 B   (+2.1%)
import-flow                          +2294 B   (+0.1%)     -169 B   (-0.0%)
patterns                             +2046 B   (+0.1%)     -202 B   (-0.0%)
update-design-flow                   -1405 B   (-0.1%)     -569 B   (-0.2%)
link-in-bio-tld-flow                 -1189 B   (-0.1%)     -579 B   (-0.2%)
signup                               -1020 B   (-0.4%)      -40 B   (-0.1%)
plugins                               -375 B   (-0.0%)     -610 B   (-0.1%)
with-theme-assembler-flow             -216 B   (-0.4%)      +21 B   (+0.2%)
update-options-flow                   -216 B   (-0.6%)      +17 B   (+0.4%)
trial-wooexpress-flow                 -216 B   (-0.6%)      +17 B   (+0.3%)
site-setup-flow                       -216 B   (-0.4%)      +11 B   (+0.1%)
site-migration-flow                   -216 B   (-0.5%)      +18 B   (+0.3%)
migration-signup                      -216 B   (-0.5%)      +17 B   (+0.3%)
free-post-setup-flow                  -216 B   (-0.6%)      +13 B   (+0.3%)
free-flow                             -216 B   (-0.5%)      +14 B   (+0.2%)
entrepreneur-flow                     -216 B   (-0.5%)      +14 B   (+0.2%)
assembler-first-flow                  -216 B   (-0.4%)      +13 B   (+0.1%)
ai-assembler-flow                     -216 B   (-0.3%)      +11 B   (+0.1%)
home                                  +170 B   (+0.0%)     +402 B   (+0.1%)
videopress-flow                       -169 B   (-0.0%)     -539 B   (-0.3%)
subscribers                           -169 B   (-0.0%)     -560 B   (-0.3%)
stats                                 -169 B   (-0.0%)     -539 B   (-0.2%)
sensei-flow                           -169 B   (-0.0%)     -539 B   (-0.4%)
podcasts-flow                         -169 B   (-0.0%)     -539 B   (-0.4%)
marketplace                           -169 B   (-0.0%)     -539 B   (-0.2%)
import-hosted-site-flow               -169 B   (-0.0%)     -539 B   (-0.2%)
copy-site-flow                        -169 B   (-0.0%)     -539 B   (-0.3%)
a8c-for-agencies-marketplace          -169 B   (-0.0%)     -539 B   (-0.3%)
woocommerce                           -162 B   (-0.0%)      -10 B   (-0.0%)
hundred-year-plan                     -162 B   (-0.5%)      -10 B   (-0.1%)
themes                                -156 B   (-0.0%)     -544 B   (-0.2%)
domains                               -156 B   (-0.0%)     -544 B   (-0.1%)
theme                                  -81 B   (-0.0%)      -11 B   (-0.0%)
tailored-ecommerce-flow                -81 B   (-0.8%)      -11 B   (-0.3%)
start-writing-flow                     -81 B   (-0.4%)      -14 B   (-0.3%)
reblogging-flow                        -81 B   (-1.0%)      -11 B   (-0.4%)
newsletter-flow                        -81 B   (-0.5%)      -10 B   (-0.2%)
link-in-bio-flow                       -81 B   (-0.5%)       -9 B   (-0.2%)
devdocs                                +81 B   (+0.0%)      +62 B   (+0.1%)
design-first-flow                      -81 B   (-0.4%)      -13 B   (-0.3%)
comments                               -81 B   (-0.0%)      -12 B   (-0.0%)
reader                                 -76 B   (-0.0%)     -376 B   (-0.1%)
jetpack-cloud-plugin-management        -76 B   (-0.0%)     -276 B   (-0.1%)
earn                                   -76 B   (-0.0%)      -18 B   (-0.0%)
site-purchases                         +13 B   (+0.0%)       +6 B   (+0.0%)
purchases                              +13 B   (+0.0%)       +8 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 (~41 bytes added 📈 [gzipped])

name                                                                         parsed_size           gzip_size
async-load-automattic-design-preview                                             +2215 B  (+0.1%)     +337 B  (+0.1%)
async-load-comment-block-editor                                                  +2046 B  (+0.1%)     -202 B  (-0.0%)
async-load-automattic-global-styles-src-components-global-styles-variations      +2046 B  (+0.1%)     -202 B  (-0.0%)
async-load-signup-steps-theme-selection                                           -352 B  (-0.1%)     -840 B  (-0.7%)
async-load-design-wordpress-components-gallery                                    -271 B  (-0.0%)       +5 B  (+0.0%)
async-load-store-app-store-stats-listview                                         -169 B  (-0.1%)     -539 B  (-0.9%)
async-load-store-app-store-stats                                                  -169 B  (-0.1%)     -539 B  (-0.6%)
async-load-signup-steps-domains                                                   -169 B  (-0.0%)     -539 B  (-0.3%)
async-load-design                                                                 -169 B  (-0.0%)     -539 B  (-0.1%)

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]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[coder-karen]

Wow, nice work getting that filter dropdown to look as good as it does!

I found a couple of things when reviewing so will drop these here:

It looks like the border around the 'Add filter' button has a missing top border (when highlighted). Same with the Reset link after that has been pressed. It only shows briefly when testing locally - the effect is more visible testing on Horizon from what I can see.

Also, if I click on 'Needs Attention' from the sidebar, it opens up the filter dropdown (it does correctly select the right filter). That seems a bit of an odd experience, probably makes sense to hide that if we can? Maybe for a follow-up?

Another question I have is related to the dataviews related styles. Do we want to keep them all in one place, rather than across files? I would think so, purely because we're trying to decouple Jetpack / A4A styles from Dataviews generally. Most of these style additions look like they'd need to be linked with general Dataviews styles. This PR is relevant anyway - https://github.com/Automattic/wp-calypso/pull/89757/files - @cleacos do you know if it's better to merge one PR before the other and then sort out styles later? For example the decoupling PR first, then styles here can be moved into the new relevant files?

[cleacos]

I noticed the same issues that Karen's commented. The top border issue also happens in the pagination option:

This PR is relevant anyway - https://github.com/Automattic/wp-calypso/pull/89757/files - @cleacos do you know if it's better to merge one PR before the other and then sort out styles later? For example, when decoupling PR first, can styles here be moved into the new relevant files?

I'd say this PR needs some refinements or fixes before merging. We already have customers testing A4A, so we cannot proceed with these issues. That said, @coder-karen, your PR will go first, which means that after merging it, we will update any affected style in this PR.

[cleacos]

Karen comments:

• We have to fix those UX issues and the style ones.

I added some designers as reviewers in case we need some feedback about it or alternatives.

[cleacos]

@coder-karen, we have to update this comment too: https://github.com/Automattic/wp-calypso/pull/87979/files updating the lock version 1.0 and telling that we have to keep the @wordpress/dataviews package in the ignoreDeps. It will be there until the DataViews become more stable. We will update the package manually.

[coder-karen]

This should be ready for review again now. The remaining issue (dropdown display when clicking on 'Needs Attention' from the sidebar) has been added to an issue here: https://github.com/Automattic/automattic-for-agencies-dev/issues/351

[cleacos]

I'm reviewing this again

[cleacos]

I was waiting for the Dotcom team to finish their work before their CfT. On Monday, I'll check everything with the recent updates and I'll ping them for a review too.

[davemart-in]

On the Dotcom side, I punted this to after i2. If it lands before then, great! Just trying to clean our board up to get ready for final launch reviews beginning of next week.

[roo2]

I was hoping to get another commit in WordPress/gutenberg#61307 but had some delays getting it merged, I think I'll just have to update the package version again once this is merged.

[cleacos]

On the Dotcom side, I punted this to after i2. If it lands before then, great!

For now, this is on hold until we decide what to do. I'm finishing the P2-post to talk about it.

For Dotcom, the DataViews v1.1 breaks it a bit, more than A4A.

[cleacos]

Discussion about the DataViews future on: pe7F0s-1OO-p2

on hold...