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.

Sign up for GitHub

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

Jump to bottom

Sites Management Dashboard: add search mechanism #65505

Merged
merged 10 commits into from
Jul 14, 2022
Merged

Sites Management Dashboard: add search mechanism #65505

merged 10 commits into from
Jul 14, 2022

Conversation

zaguiini
Copy link
Contributor

@zaguiini zaguiini commented Jul 12, 2022 •
edited
Loading

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

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

Related to #65169.

@zaguiini zaguiini requested a review from a team July 12, 2022 18:39
@zaguiini zaguiini self-assigned this Jul 12, 2022
@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 Jul 12, 2022
@github-actions
Copy link

github-actions bot commented Jul 12, 2022 •
edited by matticbot
Loading

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
Copy link
Contributor

matticbot commented Jul 12, 2022 •
edited
Loading

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
danielbachhuber approved these changes Jul 12, 2022
View reviewed changes
Copy link
Contributor

@danielbachhuber danielbachhuber left a comment

Choose a reason for hiding this comment

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

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.

client/components/search-sites/utils.ts Outdated Show resolved Hide resolved
client/sites-dashboard/components/searchable-sites-table.tsx Outdated Show resolved Hide resolved
@danielbachhuber danielbachhuber mentioned this pull request Jul 12, 2022
Merged
@zaguiini zaguiini mentioned this pull request Jul 13, 2022
Merged
5 tasks
@zaguiini
Copy link
Contributor Author

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.

@zaguiini zaguiini merged commit 397541b into trunk Jul 14, 2022
@zaguiini zaguiini deleted the add/smd-simple-search branch July 14, 2022 14:02
@github-actions github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 14, 2022
@zaguiini zaguiini mentioned this pull request Jul 14, 2022
Merged
This was referenced Jul 14, 2022
Closed
Closed
Closed
Closed
Closed
@a8ci18n
Copy link

a8ci18n commented Jul 14, 2022

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.

@p-jackson p-jackson mentioned this pull request Jul 15, 2022
Closed
@a8ci18n
Copy link

a8ci18n commented Jul 21, 2022

Translation for this Pull Request has now been finished.

@p-jackson p-jackson added this to the Sites Management Page milestone Aug 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@danielbachhuber danielbachhuber danielbachhuber approved these changes

Assignees

@zaguiini zaguiini

Labels
Sites Management Page i1
Projects
None yet
Milestone
Sites Management Page i1
Development

Successfully merging this pull request may close these issues.
5 participants
@zaguiini @matticbot @a8ci18n @danielbachhuber @p-jackson