Plugin Management: update style for plugin action confirmation modal popups

[yashwin]

Proposed Changes

This PR makes UI enhancements to the plugin actions confirmation modal popups.

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 update/plugin-action-popup-style-enhancement and yarn start-jetpack-cloud.
2. Open http://jetpack.cloud.localhost:3000/, and you'll be redirected to the /dashboard.
3. Click on Plugins in the sidebar -> Click on Edit all and test all the possible scenarios as mentioned below

1 plugin, 1 site	n plugins, 1 site	1 plugin, n sites	n plugins, n sites
Activate Plugin
Deactivate Plugin
Enable Autoupdate
Disable Autoupdate
Update Plugins
Remove Plugin

4. Go to plugin details and click on Remove on any site and verify the confirmation popup is as below.

5. Test the same in Calypso blue and verify that everything looks good.

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? Not needed
• 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-1202967461339771

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

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

name           parsed_size           gzip_size
entry-stepper        +63 B  (+0.0%)       -2 B  (-0.0%)

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

Sections (~394 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
marketplace                          +1368 B  (+0.2%)     +345 B  (+0.2%)
plugins                               -301 B  (-0.0%)      -31 B  (-0.0%)
jetpack-cloud-plugin-management       -301 B  (-0.0%)      -31 B  (-0.0%)
themes                                 +63 B  (+0.0%)      +12 B  (+0.0%)
theme                                  +63 B  (+0.0%)      +17 B  (+0.0%)
settings                               +63 B  (+0.0%)      +11 B  (+0.0%)
security                               +63 B  (+0.0%)      +12 B  (+0.0%)
people                                 +63 B  (+0.0%)      +11 B  (+0.0%)
migrate                                +63 B  (+0.0%)      +13 B  (+0.0%)
media                                  +63 B  (+0.0%)      +15 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 (~350 bytes added 📈 [gzipped])

name                                               parsed_size           gzip_size
async-load-design-playground                           +1431 B  (+0.1%)     +335 B  (+0.1%)
async-load-design                                      +1431 B  (+0.1%)     +335 B  (+0.1%)
async-load-calypso-post-editor-media-modal               +63 B  (+0.0%)      +15 B  (+0.0%)
async-load-calypso-post-editor-editor-media-modal        +63 B  (+0.0%)      +15 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.

[vitozev]

I'm curious if we need such a level of abstraction here:

getPluginActionDailogMessage( allSites, selectedPlugins, heading, 'update' ),

It looks like the fourth parameter is also included in the translations, but I can think of some limitations that this approach brings:

• What if we need to display a custom message in the dialog?
• Without having the full context, it's quite difficult to translate the string. If we add another action this could be easily missed for translation because it doesn't have an explicit translate() call in the code.

I'd say we should stick to the previous approach here, but I'd love to hear your thoughts on this one.

[yashwin]

I'd say we should stick to the previous approach here, but I'd love to hear your thoughts on this one.

I didn't change the approach here, it is similar to what we had earlier. I just got rid of actionPreposition: actionPreposition which was also being sent as a parameter. I agree with what you are saying. I have created a ticket to address this later - 1202619025189113-as-1202978931490015

[vitozev]

All changes works as described in both Jetpack Cloud and Calypso Blue.

LGTM!

[grbicsanja]

LGTM!
The styling looks great, I wonder if it would be an easy switch to have the plugin name in all the titles that say "[Remove, deactivate, etc] 1 plugin"?

[vitozev]

LGTM! I tested the flows one more time after the latest commit, and everything is working as expected.

[yashwin]

LGTM! The styling looks great, I wonder if it would be an easy switch to have the plugin name in all the titles that say "[Remove, deactivate, etc] 1 plugin"?

@grbicsanja, the changes are done 👍

[a8ci18n]

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

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.