Plugin Management: Implement single-site(large screen) view for the plugin management

[yashwin]

Proposed Changes

This PR is built on top of #66219

This PR implements the large screen view(>1080px) for single-site plugin management. The small screen view(<1080px) will be implemented in a different PR.

Testing Instructions

Prerequisites

Since this change is made specifically for agencies, you must set yourself(partner) as an agency - 2c49b-pb. Make sure to switch it back to the previous type.

Instructions

1. Run git checkout add/plugin-management-single-site-large-screen-view and yarn start-jetpack-cloud-p
2. Open http://jetpack.cloud.localhost:3001/, and you'll be redirected to the /dashboard.
3. Click on Switch Site -> Select any site -> Click on Plugins -> Verify the plugins are shown as shown below.

4. Clicking on Update should redirect the user to the plugin details page.

5. Verify Active and Autoupdate toggle buttons works as expected.
6. Verify search works as expected.
7. Click on all the tabs - All, Active, Inactive & Updates and verify the plugins are shown as per the filter and the URL is changing accordingly.
8. Verify these changes have not affected anything in Calypso Blue.

NOTE: The more actions icon(...) is just a placeholder and will be updated later in a different PR. We are reusing <PluginActivateToggle /> and <PluginAutoupdateToggle /> components which is being used in WP.com

Pre-merge Checklist

Complete applicable items on this checklist before merging into the trunk. Inapplicable items can be left unchecked.

The PR author and reviewer are responsible for completing the checklist.

• Have you written new tests for your changes? Will be added later - 1202518759611394-as-1202627702018877
• Have you tested the feature in Simple, Atomic, and self-hosted Jetpack sites?
• Have you checked for TypeScript, React, or other console errors?
• Are we memoizing when appropriate (for expensive computations)? More info in Our Approach to Data and Memoizing with create-selector and Using memoizing selectors
• Have we sent any new strings for translation ASAP?

Related to 1202518759611394-as-1202673439327762

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

Sections (~263 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
plugins                              +1004 B  (+0.1%)     +263 B  (+0.1%)
jetpack-cloud-plugin-management      +1004 B  (+0.1%)     +263 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

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.

[rcanepa]

The checkboxes are not vertically aligned due to a 5px margin bottom pushing them up (I'm not 100% sure this is the reason).

[rcanepa]

Fantastic job, Yashwin.

I think we can move forward with these changes once we fix the minor alignment issue I mentioned in a comment.

[yashwin]

Thanks for the review, @rcanepa. I have fixed the alignment issue.

[rcanepa]

Thanks for the review, @rcanepa. I have fixed the alignment issue.

Looks great now. I think you can !

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.