Sites Management Dashboard: add search mechanism

[zaguiini]

Proposed Changes

This PR adds the basic search mechanism used throughout Calypso on the SMD.

It's a starting point for searching sites and will be iterated upon by follow-up PRs, most likely #65501, and a future PR that allows customizing the search icon and removing the input fade (described in the comments).

Testing Instructions

Check out this branch, open SMD, and try inputting substring values for the URL, domain, name, or slug.

No search	With result	No result

The "no result" state will be fixed in a follow-up issue.

Related to #65169.

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

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

name           parsed_size           gzip_size
entry-stepper       +116 B  (+0.0%)      +30 B  (+0.0%)
entry-main          +108 B  (+0.0%)       +6 B  (+0.0%)

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

Sections (~3305 bytes added 📈 [gzipped])

name                            parsed_size            gzip_size
sites-dashboard                    +24502 B  (+18.5%)    +9004 B  (+20.8%)
woocommerce-installation             +116 B   (+0.0%)      +34 B   (+0.0%)
woocommerce                          +116 B   (+0.0%)      +34 B   (+0.0%)
themes                               +116 B   (+0.0%)      +34 B   (+0.0%)
theme                                +116 B   (+0.0%)      +34 B   (+0.0%)
stats                                +116 B   (+0.0%)      +34 B   (+0.0%)
sites                                +116 B   (+0.1%)      +34 B   (+0.0%)
site-purchases                       +116 B   (+0.0%)      +27 B   (+0.0%)
settings-writing                     +116 B   (+0.0%)      +34 B   (+0.0%)
settings-security                    +116 B   (+0.0%)      +34 B   (+0.0%)
settings-performance                 +116 B   (+0.0%)      +34 B   (+0.0%)
settings-jetpack                     +116 B   (+0.0%)      +34 B   (+0.0%)
settings-discussion                  +116 B   (+0.0%)      +34 B   (+0.0%)
settings                             +116 B   (+0.0%)      +34 B   (+0.0%)
scan                                 +116 B   (+0.0%)      +34 B   (+0.0%)
reader                               +116 B   (+0.0%)      +34 B   (+0.0%)
purchases                            +116 B   (+0.0%)      +27 B   (+0.0%)
purchase-product                     +116 B   (+0.1%)      +45 B   (+0.1%)
preview                              +116 B   (+0.0%)      +34 B   (+0.0%)
posts-custom                         +116 B   (+0.0%)      +34 B   (+0.0%)
posts                                +116 B   (+0.0%)      +34 B   (+0.0%)
plugins                              +116 B   (+0.0%)      +34 B   (+0.0%)
plans                                +116 B   (+0.0%)      +34 B   (+0.0%)
people                               +116 B   (+0.0%)      +34 B   (+0.0%)
pages                                +116 B   (+0.0%)      +34 B   (+0.0%)
migrate                              +116 B   (+0.0%)      +34 B   (+0.0%)
media                                +116 B   (+0.0%)      +38 B   (+0.0%)
marketplace                          +116 B   (+0.0%)      +39 B   (+0.0%)
marketing                            +116 B   (+0.0%)      +34 B   (+0.0%)
jetpack-social                       +116 B   (+0.0%)      +34 B   (+0.0%)
jetpack-search                       +116 B   (+0.0%)      +34 B   (+0.0%)
jetpack-connect                      +116 B   (+0.0%)      +34 B   (+0.0%)
jetpack-cloud-settings               +116 B   (+0.0%)      +34 B   (+0.0%)
jetpack-cloud-pricing                +116 B   (+0.0%)      +34 B   (+0.0%)
jetpack-cloud-agency-dashboard       +116 B   (+0.0%)      +34 B   (+0.0%)
jetpack-cloud                        +116 B   (+0.0%)      +34 B   (+0.0%)
import                               +116 B   (+0.0%)      +34 B   (+0.0%)
hosting                              +116 B   (+0.0%)      +34 B   (+0.0%)
home                                 +116 B   (+0.0%)      +34 B   (+0.0%)
help                                 +116 B   (+0.0%)      +34 B   (+0.0%)
gutenberg-editor                     +116 B   (+0.0%)      +34 B   (+0.0%)
google-my-business                   +116 B   (+0.0%)      +34 B   (+0.0%)
export                               +116 B   (+0.0%)      +34 B   (+0.0%)
email                                +116 B   (+0.0%)      +34 B   (+0.0%)
earn                                 +116 B   (+0.0%)      +34 B   (+0.0%)
domains                              +116 B   (+0.0%)      +34 B   (+0.0%)
customize                            +116 B   (+0.0%)      +34 B   (+0.0%)
concierge                            +116 B   (+0.0%)      +34 B   (+0.0%)
comments                             +116 B   (+0.0%)      +34 B   (+0.0%)
checkout                             +116 B   (+0.0%)      +21 B   (+0.0%)
backup                               +116 B   (+0.0%)      +34 B   (+0.0%)
add-ons                              +116 B   (+0.0%)      +34 B   (+0.0%)
activity                             +116 B   (+0.0%)      +34 B   (+0.0%)
account                              +116 B   (+0.0%)      +33 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 (~55 bytes added 📈 [gzipped])

name                                                 parsed_size           gzip_size
async-load-signup-steps-site-picker                       +116 B  (+0.1%)      +34 B  (+0.1%)
async-load-signup-steps-difm-site-picker                  +116 B  (+0.1%)      +34 B  (+0.1%)
async-load-design-blocks                                  +116 B  (+0.0%)      +21 B  (+0.0%)
async-load-calypso-components-web-preview-component       +116 B  (+0.0%)      +34 B  (+0.0%)
async-load-calypso-components-sites-popover               +116 B  (+0.1%)      +34 B  (+0.1%)
async-load-calypso-blocks-inline-help-popover             +116 B  (+0.0%)      +34 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.

[danielbachhuber]

Works great in my testing!

Nothing blocking, but a few thoughts:

1. It would be nice if the search term were added to the URL: /sites-dashboard?search=<term>
2. It would be nice if the search term persisted between tabs.
3. It would be nice if search updated the site count in the tabs.

[zaguiini]

Nothing blocking, but a few thoughts

That's fair. All three points will be worked on separated tasks since they're not really related to adding the search functionality.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7439092

Thank you @zaguiini for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.