Hook Sites Dashboard into All Sites selector

[wojtekn]

Proposed Changes

This PR replaces the current Sites component accessible by the "All My Sites" link with the new Sites Dashboard.

The feature is kept behind the build/sites-dashboard feature flag.

Testing Instructions

1. Pull branch, start the calypso
2. Click on "Switch Sites" in the sidebar
3. Click on "All My Sites" in the sidebar
4. Confirm that the new Sites Dashboard is displayed instead of the Sites component
5. Choose any site, confirm that the home for the selected site is loaded

Related to #65181

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-login                -2173 B  (-0.2%)     -596 B  (-0.2%)
entry-gutenboarding        -2158 B  (-0.1%)     -647 B  (-0.1%)
entry-domains-landing      -2151 B  (-0.4%)     -469 B  (-0.3%)
entry-browsehappy          -2151 B  (-2.3%)     -469 B  (-1.6%)
entry-stepper              -2126 B  (-0.1%)    -1635 B  (-0.2%)
entry-main                  -224 B  (-0.0%)     -560 B  (-0.2%)

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

Sections (~121004 bytes removed 📉 [gzipped])

name                            parsed_size            gzip_size
checkout                           +29464 B   (+1.8%)   +10689 B   (+2.4%)
theme                              +29204 B   (+6.0%)    +8409 B   (+5.9%)
gutenberg-editor                   +28445 B   (+5.2%)    +8919 B   (+5.3%)
site-purchases                     +28324 B   (+2.1%)    +9718 B   (+2.7%)
settings                           +28168 B   (+4.3%)    +6709 B   (+3.4%)
jetpack-search                     +28095 B   (+6.7%)    +8923 B   (+7.2%)
export                             +28095 B  (+10.4%)    +8948 B  (+10.3%)
plans                              +28093 B   (+3.3%)    +8698 B   (+3.6%)
marketplace                        +28090 B   (+3.8%)    +9078 B   (+4.2%)
woocommerce-installation           +28071 B   (+9.6%)    +8599 B   (+8.8%)
woocommerce                        +28071 B  (+10.6%)    +8557 B  (+10.0%)
sites                              +28071 B  (+12.7%)    +8474 B  (+11.6%)
migrate                            +28071 B   (+7.4%)    +8640 B   (+7.6%)
jetpack-cloud-settings             +28071 B   (+6.5%)    +8715 B   (+6.7%)
jetpack-cloud-pricing              +28071 B   (+5.5%)    +8446 B   (+5.5%)
jetpack-cloud                      +28071 B  (+11.4%)    +8488 B  (+10.3%)
google-my-business                 +28071 B   (+6.6%)    +9197 B   (+6.9%)
add-ons                            +28071 B   (+8.8%)    +8536 B   (+8.3%)
stats                              +28043 B   (+4.1%)    +8499 B   (+4.4%)
comments                           +28043 B   (+3.8%)    +8751 B   (+4.4%)
customize                          +28028 B   (+9.7%)    +8726 B   (+9.4%)
preview                            +28019 B  (+10.0%)    +8678 B   (+9.6%)
hosting                            +28019 B   (+5.4%)    +8525 B   (+5.4%)
concierge                          +28019 B   (+6.3%)    +8653 B   (+6.9%)
settings-discussion                +27964 B   (+8.3%)    +7787 B   (+7.4%)
settings-jetpack                   +27927 B   (+8.4%)    +7901 B   (+7.4%)
marketing                          +27924 B   (+4.2%)    +8064 B   (+4.3%)
scan                               +27904 B   (+3.8%)    +8105 B   (+3.9%)
jetpack-social                     +27899 B   (+7.7%)    +8050 B   (+7.2%)
settings-security                  +27896 B   (+6.2%)    +8558 B   (+6.4%)
jetpack-connect                    +27777 B   (+2.8%)    +8583 B   (+3.3%)
people                             +27417 B   (+5.3%)    +7405 B   (+4.8%)
settings-performance               +27291 B   (+4.9%)   +10269 B   (+6.3%)
import                             +26705 B   (+7.3%)    +8405 B   (+7.4%)
backup                             +25501 B   (+2.8%)    +9395 B   (+3.8%)
purchases                          +24776 B   (+1.6%)    +9236 B   (+2.2%)
home                               +24487 B   (+3.2%)    +7717 B   (+3.5%)
activity                           +24388 B   (+3.5%)    +7834 B   (+4.0%)
themes                             +23173 B   (+3.3%)    +7446 B   (+3.6%)
media                              +23163 B   (+1.1%)    +9678 B   (+1.9%)
domains                            +23099 B   (+1.4%)   +10099 B   (+2.4%)
posts-custom                       +23079 B   (+3.9%)    +8378 B   (+4.7%)
pages                              +22872 B   (+5.1%)    +7373 B   (+5.2%)
earn                               +22835 B   (+4.4%)    +7483 B   (+4.9%)
settings-writing                   +22784 B   (+3.3%)    +8608 B   (+4.5%)
email                              +22770 B   (+3.8%)    +7445 B   (+4.3%)
posts                              +22740 B   (+3.8%)    +8207 B   (+4.6%)
plugins                            +20699 B   (+2.6%)    +6750 B   (+2.9%)
sites-dashboard                     +1073 B   (+0.7%)    +1185 B   (+2.2%)
accept-invite                        -479 B   (-0.1%)     -868 B   (-1.0%)
signup                               -442 B   (-0.1%)     -298 B   (-0.4%)
notification-settings                +271 B   (+0.1%)    -1127 B   (-0.9%)
devdocs                              -203 B   (-0.1%)      -25 B   (-0.1%)
security                             +185 B   (+0.0%)     +771 B   (+0.5%)
incoming-redirect                    -159 B   (-0.7%)     -449 B   (-5.4%)
jetpack-cloud-agency-dashboard        -86 B   (-0.0%)      -21 B   (-0.0%)
help                                  +26 B   (+0.0%)      +86 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 (~5325 bytes added 📈 [gzipped])

name                                                            parsed_size           gzip_size
async-load-calypso-post-editor-editor-media-modal                   -5238 B  (-0.3%)    -1068 B  (-0.2%)
async-load-calypso-post-editor-media-modal                          -4068 B  (-0.2%)     -948 B  (-0.2%)
async-load-calypso-my-sites-checkout-modal                           -511 B  (-0.0%)     -519 B  (-0.1%)
async-load-calypso-blocks-editor-checkout-modal                      -352 B  (-0.0%)       -7 B  (-0.0%)
async-load-calypso-my-sites-current-site-domain-warnings             -159 B  (-0.4%)     -415 B  (-3.5%)
async-load-design-playground                                          +90 B  (+0.0%)    -1043 B  (-0.2%)
async-load-design                                                     +90 B  (+0.0%)    -1043 B  (-0.2%)
async-load-calypso-my-sites-sidebar                                   -86 B  (-0.1%)      -21 B  (-0.1%)
async-load-calypso-components-jetpack-sidebar                         -86 B  (-0.1%)      -21 B  (-0.1%)
async-load-design-blocks                                              +78 B  (+0.0%)     -111 B  (-0.0%)
async-load-signup-steps-theme-selection                               -77 B  (-0.0%)     -533 B  (-1.1%)
async-load-signup-steps-design-picker                                 -71 B  (-0.1%)      -26 B  (-0.1%)
async-load-signup-steps-rewind-form-creds                             -20 B  (-0.0%)      -48 B  (-0.1%)
async-load-signup-steps-clone-credentials                             -20 B  (-0.0%)      -47 B  (-0.1%)
async-load-signup-steps-woocommerce-install-step-business-info        -13 B  (-0.0%)      -16 B  (-0.0%)
async-load-signup-steps-p2-complete-profile                           +13 B  (+0.0%)      +13 B  (+0.0%)
async-load-signup-steps-user                                          -11 B  (-0.0%)      -46 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.

[danielbachhuber]

@wojtekn Code-wise, this seems fine to me.

When I go to the Site Selector and pick 'All My Sites', though, I see the Sites Dashboard at /home with an odd gray background color:

Is this intended? I expected the background color to be white.

[wojtekn]

When I go to the Site Selector and pick 'All My Sites', though, I see the Sites Dashboard at /home with an odd gray background color:
Is this intended? I expected the background color to be white.

Thanks for catching that. It's not intended. I've just adjusted the class name based on the section group name.

[danielbachhuber]

@wojtekn It looks like your change broke the styling on /sites-dashboard:

[wojtekn]

@danielbachhuber, I think we won't need that route if we hook Sites Dashboard into /home and /sites. We should remove this route if we proceed with this PR approach.

[zaguiini]

Why not redirect to /sites-dashboard instead of mounting the component? Is it better than redirecting to the actual page (which will run the controller for that page)?

[wojtekn]

@zaguiini I see that mounting component that way has disadvantages as it gets compiled into all sections. I tried the alternative redirect approach in #65524

[vykes-mac]

IMO this PR seems cleaner than this approach #65524. And since the Dashboard is similar to SitesComponent, it seems fitting they should be mounted the same place using feature flag to determine which to mount. If there are no other comments on this PR its good to go for me 👍

[vykes-mac]

Good to go for me but let's hear from others.

[wojtekn]

I've updated this PR:

• added support for contextual links e.g. if you navigate to "All My Sites" from /media on your site, you will land on /media in the new site.
• improved compatibility with query params like the status

[p-jackson]

Oh no! I accidentally pushed to your branch while I was trying something out. It should be back the way it was before (except I resolved a merge conflict due to SearchableSitesTable being added in #65505). Sorry about that 🙏

[p-jackson]

Left a few notes below. Sorry for flip flopping so much, but I'm a bit worried about increasing the bundle size so much. I had thought that it would have only increased the bundle for users who were navigating directly to /sites or /sites/:id, but in reality it's increasing the bundle for many many sections. So perhaps the #65524 option is better after all 😬.

I've implemented another idea in #65625 for your consideration:

• It is like Hook Sites Dashboard into /sites routing #65524 in that it changes the "All My Sites" link
• It leaves the /sites and /sites-dashboard routes as they are. I know that was one of the definitions of done in the Sites Management Dashboard: navigate to dashboard from the "All My Sites" button in the Calypso sidebar #65181 task, but I think trying to achieve that is making these PRs more tricky than they site to be
• It allows the dashboard to return users back to the place they came from (like /media or /plugins)

We still have some thinking to do with regards to the return URL, because the label for the link back is currently hardcoded as "Visit Dashboard" so I wonder whether we'd also need a way to have that change based on the return URL!

[wojtekn]

@p-jackson I think it may be a good consensus. If we go with the idea from the third PR, we won't' need to modify routing at all and we won't increase the bundle size for all sections.

It allows the dashboard to return users back to the place they came from (like /media or /plugins)
We still have some thinking to do with regards to the return URL, because the label for the link back is currently hardcoded as "Visit Dashboard" so I wonder whether we'd also need a way to have that change based on the return URL!

I've added some comments related to this under the PR. However, I have more thoughts about the contextual links and headings in our new Sites Dashboard, I've described them pdKhl6-vB-p2

[wojtekn]

Closing in favor of #65524.