Business Tools: Add categories bar and filter

[epeicher]

Resolves https://github.com/Automattic/dotcom-forge/issues/9655

Proposed Changes

• Adds a categories tab group to filter the cards by category

Why are these changes being made?

• To improve the usability of the Business Tools page

Testing Instructions

• Apply this patch and navigate to /marketing/tools/:siteId page
• Check there is a categories tab that works as expected

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 UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• [ ] 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[bot]]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

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

• notifications
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/business-tools-categories on your sandbox.

[matticbot]

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

App Entrypoints (~102 bytes removed 📉 [gzipped])

``` name parsed_size gzip_size entry-subscriptions +441 B (+0.0%) -12 B (-0.0%) entry-login +441 B (+0.0%) -17 B (-0.0%) entry-domains-landing +441 B (+0.1%) -12 B (-0.0%) entry-browsehappy +441 B (+0.2%) -12 B (-0.0%) entry-stepper -334 B (-0.0%) -102 B (-0.0%) entry-main -334 B (-0.0%) -95 B (-0.0%) ``` Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~76772 bytes added 📈 [gzipped])

``` name parsed_size gzip_size marketing +186441 B (+27.4%) +59555 B (+29.9%) site-marketing +11722 B (+0.8%) +3535 B (+0.8%) hosting -698 B (-0.0%) +946 B (+0.2%) stats +564 B (+0.1%) -2194 B (-0.7%) hosting-features +350 B (+0.0%) -123 B (-0.0%) github-deployments +337 B (+0.0%) -27 B (-0.0%) sites-dashboard +221 B (+0.0%) -89 B (-0.0%) site-profiler -206 B (-0.1%) +55 B (+0.1%) jetpack-cloud-settings -206 B (-0.0%) -41 B (-0.0%) home -196 B (-0.0%) -1137 B (-0.2%) staging-site +180 B (+0.0%) -192 B (-0.0%) settings-writing -170 B (-0.0%) -785 B (-0.5%) settings-security -170 B (-0.0%) -932 B (-0.6%) settings-performance -170 B (-0.0%) -1125 B (-0.7%) settings-newsletter -170 B (-0.0%) -990 B (-0.6%) settings-discussion -170 B (-0.0%) -994 B (-0.8%) site-performance -116 B (-0.0%) +71 B (+0.0%) a8c-for-agencies-settings -103 B (-0.1%) +53 B (+0.1%) a8c-for-agencies-plugins -103 B (-0.1%) +53 B (+0.1%) a8c-for-agencies-landing -103 B (-0.1%) -8 B (-0.0%) a8c-for-agencies-agency-tier -103 B (-0.0%) +53 B (+0.1%) site-settings -93 B (-0.0%) -629 B (-0.1%) people -77 B (-0.0%) +66 B (+0.0%) settings -65 B (-0.0%) -242 B (-0.1%) site-tools +64 B (+0.0%) +33 B (+0.0%) import-hosted-site-flow -64 B (-0.0%) -60 B (-0.0%) theme +26 B (+0.0%) -39 B (-0.0%) settings-reading +26 B (+0.0%) -5 B (-0.0%) settings-podcast +26 B (+0.0%) +97 B (+0.1%) a8c-for-agencies-team -26 B (-0.0%) +94 B (+0.0%) a8c-for-agencies-referrals -26 B (-0.0%) +94 B (+0.0%) a8c-for-agencies-overview -26 B (-0.0%) +94 B (+0.0%) a8c-for-agencies-migrations -26 B (-0.0%) +94 B (+0.0%) switch-site -13 B (-0.0%) +2 B (+0.0%) pages +13 B (+0.0%) +131 B (+0.1%) import -13 B (-0.0%) +0 B ``` 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 (~422 bytes added 📈 [gzipped])

``` name parsed_size gzip_size async-load-automattic-search +732 B (+2.4%) +297 B (+2.8%) async-load-design-playground -26 B (-0.0%) +3 B (+0.0%) async-load-design-wordpress-components-gallery -13 B (-0.0%) -2 B (-0.0%) async-load-calypso-layout-command-palette -13 B (-0.0%) +2 B (+0.0%) async-load-automattic-help-center -13 B (-0.0%) +80 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.