Update plugin action modals #96880

candy02058912 · 2024-11-28T12:59:00Z

Fixes https://github.com/Automattic/dotcom-forge/issues/9728

Proposed Changes

Before	After

Changed the title as well because there are lots of plugins with long names, for example:
Updated the action buttons

Why are these changes being made?

Align design more with Core Modal

Testing Instructions

Go to /plugins/manage
Try all actions:
- Update
- Activate/Deactivate
- Enable auto-update/Disable auto-update
- Remove
Test with the sites-per-plugin Modal as well
Test in calypso and jetpack cloud

Note

If you clicked around and see that the action menu is messed up, that's a bug to be addressed in a separate PR as production currently has the same behavior. Opened issue https://github.com/Automattic/dotcom-forge/issues/9995
to track.

bug.mp4

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 · 2024-11-28T12:59:17Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-11-28T13:08:38Z

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

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

name                   parsed_size           gzip_size
entry-main                  +406 B  (+0.0%)      -36 B  (-0.0%)
entry-stepper               +297 B  (+0.0%)      -66 B  (-0.0%)
entry-subscriptions          -94 B  (-0.0%)      -34 B  (-0.0%)
entry-login                  -94 B  (-0.0%)      -49 B  (-0.0%)
entry-domains-landing        -94 B  (-0.0%)      -34 B  (-0.0%)
entry-browsehappy            -94 B  (-0.0%)      -34 B  (-0.1%)

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

Sections (~8896 bytes added 📈 [gzipped])

name                                parsed_size           gzip_size
security                               +20334 B  (+2.0%)    +5303 B  (+1.9%)
migrate                                +17623 B  (+4.9%)    +6345 B  (+5.9%)
people                                 +17189 B  (+2.6%)    +5182 B  (+2.7%)
backup                                 +16868 B  (+1.4%)    +5260 B  (+1.6%)
media                                  +16528 B  (+1.1%)    +5486 B  (+1.3%)
settings                                 +851 B  (+0.1%)     +187 B  (+0.1%)
themes                                   +643 B  (+0.1%)     +137 B  (+0.0%)
theme                                    +643 B  (+0.1%)     +137 B  (+0.1%)
site-settings                            +643 B  (+0.0%)     +172 B  (+0.0%)
jetpack-cloud-agency-sites-v2            +643 B  (+0.0%)     +319 B  (+0.1%)
import-hosted-site-flow                  +643 B  (+0.1%)     +154 B  (+0.1%)
a8c-for-agencies-sites                   +643 B  (+0.0%)     +270 B  (+0.0%)
update-design-flow                       -608 B  (-0.1%)     -215 B  (-0.1%)
signup                                   -440 B  (-0.2%)      -17 B  (-0.0%)
link-in-bio-tld-flow                     -390 B  (-0.0%)      -58 B  (-0.0%)
jetpack-cloud-plugin-management          +269 B  (+0.0%)     +120 B  (+0.0%)
plugins                                  +256 B  (+0.0%)     +142 B  (+0.0%)
settings-podcast                         +208 B  (+0.0%)      +27 B  (+0.0%)
tailored-ecommerce-flow                  -153 B  (-0.3%)      -26 B  (-0.4%)
domains                                  -137 B  (-0.0%)      +83 B  (+0.0%)
with-theme-assembler-flow                -134 B  (-0.2%)      -28 B  (-0.2%)
update-options-flow                      -134 B  (-0.2%)      -27 B  (-0.4%)
trial-wooexpress-flow                    -134 B  (-0.2%)      -26 B  (-0.3%)
start-writing-flow                       -134 B  (-0.5%)      -17 B  (-0.3%)
site-setup-wg                            -134 B  (-0.1%)      -29 B  (-0.1%)
site-setup-flow                          -134 B  (-0.1%)      -29 B  (-0.1%)
site-migration-flow                      -134 B  (-0.2%)      -27 B  (-0.2%)
reblogging-flow                          -134 B  (-2.2%)      -15 B  (-0.8%)
readymade-template-flow                  -134 B  (-0.1%)      -28 B  (-0.1%)
onboarding-flow                          -134 B  (-0.7%)      -18 B  (-0.3%)
newsletter-flow                          -134 B  (-0.6%)      -17 B  (-0.3%)
new-hosted-site-flow                     -134 B  (-1.4%)      -26 B  (-0.9%)
migration-signup                         -134 B  (-0.2%)      -30 B  (-0.4%)
migration-flow                           -134 B  (-0.2%)      -27 B  (-0.2%)
import-flow                              -134 B  (-0.2%)      -27 B  (-0.3%)
hundred-year-plan                        -134 B  (-0.4%)      -21 B  (-0.2%)
hosted-site-migration-flow               -134 B  (-0.2%)      -27 B  (-0.2%)
free-post-setup-flow                     -134 B  (-0.2%)      -28 B  (-0.5%)
entrepreneur-flow                        -134 B  (-0.1%)      -27 B  (-0.1%)
design-first-flow                        -134 B  (-0.5%)      -25 B  (-0.4%)
assembler-first-flow                     -134 B  (-0.2%)      -26 B  (-0.2%)
ai-assembler-flow                        -134 B  (-0.2%)      -27 B  (-0.2%)
devdocs                                  +130 B  (+0.1%)       -8 B  (-0.0%)
copy-site-flow                           -129 B  (-0.0%)     +269 B  (+0.1%)
hundred-year-domain                      -115 B  (-0.2%)      -31 B  (-0.2%)
gutenberg-editor                         +104 B  (+0.0%)      -21 B  (-0.0%)
site-purchases                           -103 B  (-0.0%)      -28 B  (-0.0%)
purchases                                -103 B  (-0.0%)      -28 B  (-0.0%)
jetpack-connect                          -103 B  (-0.0%)     -488 B  (-0.1%)
a8c-for-agencies-team                     +62 B  (+0.0%)       -3 B  (-0.0%)
a8c-for-agencies-referrals                +62 B  (+0.0%)      +44 B  (+0.0%)
a8c-for-agencies-migrations               +62 B  (+0.0%)      +66 B  (+0.0%)
new-hosted-site-flow-user-included        -19 B  (-0.3%)       +2 B  (+0.1%)
connect-domain                            -19 B  (-0.1%)       +9 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.

Async-loaded Components (~100 bytes removed 📉 [gzipped])

name                                               parsed_size           gzip_size
async-load-calypso-post-editor-media-modal            +16425 B  (+1.3%)    +5152 B  (+1.5%)
async-load-design-playground                          +16370 B  (+1.2%)    +4839 B  (+1.4%)
async-load-design                                     +16370 B  (+1.1%)    +4839 B  (+1.2%)
async-load-calypso-post-editor-editor-media-modal     +15372 B  (+1.1%)    +4856 B  (+1.3%)
async-load-signup-steps-theme-selection                 +643 B  (+0.2%)     +187 B  (+0.2%)
async-load-design-blocks                                +643 B  (+0.0%)      +36 B  (+0.0%)
async-load-signup-steps-domains                         -203 B  (-0.0%)     -671 B  (-0.4%)

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.

candy02058912 · 2024-11-28T13:15:22Z

@lucasmendes-design, could you do a design review of this?
I'm still fixing the tests, but the modal design is updated and ready for a review.

lucasmendes-design · 2024-11-28T13:28:38Z

could you do a design review of this?

Of course.

lucasmendes-design · 2024-11-28T14:04:37Z

Not sure what I'm doing wrong, but once I click on the Calypso live link and go to the global view -> Plugins -> Manage. The modal stays the same.

candy02058912 · 2024-11-28T14:07:34Z

Not sure what I'm doing wrong, but once I click on the Calypso live link and go to the global view -> Plugins -> Manage. The modal stays the same.

@lucasmendes-design here's what it looks like on my end, can you share a recording of what it looks like on your end? Thanks 🙏

calypso.mp4

lucasmendes-design · 2024-11-28T18:51:44Z

Got it! LGTM!

lucasmendes-design

👍🏽

matticbot · 2024-11-29T17:18:58Z

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

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

notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/plugin-action-modal on your sandbox.

p-jackson

I was surprised by the approach of continuing to use the acceptDialog function. It seems to handle modals in some old way like creating it's own React tree to hold the modal. Something that <Modal> already handles in it's own way. Since we're having to refactor so much of the code anyway, why not move away entirely from the acceptDialog function (from client/lib/accept).

That way we're not having to add useModal options flags to it.

And it means comments like remove after /plugins/manage details doesn't use Dialog aren't needed.

Maybe even the custom .accept__dialog-use-modal .accept__dialog-buttons CSS styles wouldn't be needed at all? 🤞

client/my-sites/plugins/plugin-management-v2/test/update-plugin.test.tsx

p-jackson · 2024-12-07T16:47:26Z

@candy02058912 Oh and since there's so many copy changes, should we add the string freeze label?

a8ci18n · 2024-12-08T19:20:22Z

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

Some locales (Hebrew) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

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

a8ci18n · 2024-12-12T16:32:23Z

Translation for this Pull Request has now been finished.

Update plugin action modals

98be974

candy02058912 requested a review from a team November 28, 2024 12:59

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Nov 28, 2024

candy02058912 requested a review from lucasmendes-design November 28, 2024 12:59

lucasmendes-design approved these changes Nov 28, 2024

View reviewed changes

candy02058912 added 4 commits November 30, 2024 00:11

Fix styles for Jetpack Cloud

7ca1e14

Revert heading wording for multiple plugins

ce04bd1

Update unit tests

a79f8a7

Fix unit test

24be304

Fix tests

67df0ca

candy02058912 marked this pull request as ready for review November 30, 2024 02:12

p-jackson reviewed Dec 7, 2024

View reviewed changes

client/my-sites/plugins/plugin-management-v2/test/update-plugin.test.tsx Show resolved Hide resolved

candy02058912 added the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Dec 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update plugin action modals #96880

Update plugin action modals #96880

candy02058912 commented Nov 28, 2024 •

edited

Loading

github-actions bot commented Nov 28, 2024 •

edited by matticbot

Loading

matticbot commented Nov 28, 2024 •

edited

Loading

candy02058912 commented Nov 28, 2024

lucasmendes-design commented Nov 28, 2024

lucasmendes-design commented Nov 28, 2024

candy02058912 commented Nov 28, 2024

lucasmendes-design commented Nov 28, 2024

lucasmendes-design left a comment

matticbot commented Nov 29, 2024 •

edited

Loading

p-jackson left a comment

p-jackson commented Dec 7, 2024 •

edited

Loading

a8ci18n commented Dec 8, 2024 •

edited

Loading

a8ci18n commented Dec 12, 2024

Update plugin action modals #96880

Are you sure you want to change the base?

Update plugin action modals #96880

Conversation

candy02058912 commented Nov 28, 2024 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Nov 28, 2024 • edited by matticbot Loading

matticbot commented Nov 28, 2024 • edited Loading

candy02058912 commented Nov 28, 2024

lucasmendes-design commented Nov 28, 2024

lucasmendes-design commented Nov 28, 2024

candy02058912 commented Nov 28, 2024

lucasmendes-design commented Nov 28, 2024

lucasmendes-design left a comment

Choose a reason for hiding this comment

matticbot commented Nov 29, 2024 • edited Loading

p-jackson left a comment

Choose a reason for hiding this comment

p-jackson commented Dec 7, 2024 • edited Loading

a8ci18n commented Dec 8, 2024 • edited Loading

a8ci18n commented Dec 12, 2024

candy02058912 commented Nov 28, 2024 •

edited

Loading

github-actions bot commented Nov 28, 2024 •

edited by matticbot

Loading

matticbot commented Nov 28, 2024 •

edited

Loading

matticbot commented Nov 29, 2024 •

edited

Loading

p-jackson commented Dec 7, 2024 •

edited

Loading

a8ci18n commented Dec 8, 2024 •

edited

Loading