[Jetpack Full Plugin] Install flow UI tweaks by thomashorta · Pull Request #18040 · wordpress-mobile/WordPress-Android

thomashorta · 2023-03-02T22:05:55Z

Fixes #18005

This PR implements the tweaks proposed by the design team here: qk5s4q4mZsXknwhMWo2vIY-fi-9811%3A21323

Demos

"Jetpack Full Plugin install" flow with tweaks - Success

issue-18005-jp-install-tweaks-full-plugin-v2.mp4

"Jetpack Full Plugin install" flow with tweaks - Error

issue-18005-jp-install-tweaks-full-plugin-error-v2.mp4

To test

Set up a self-hosted site that has only individual Jetpack plugins enabled and connect it to a WP.com account.

Install Jetpack app
Log in with the same WP.com account
Restart the app (so the site appears in the site list)
Select the self-hosted site from the site list
The dialog asking to install the full plugin should appear AND/OR the card on the Dashboard
Testing the error state
1. Turn on Airplane mode
2. Start the Full Plugin Install Flow
3. Verify the UI is updated according to expectations
Testing the install flow
1. Close the Full Plugin Install flow
2. Turn off Airplane mode
3. Start the Full Plugin Install Flow
4. Verify the UI is updated according to expectations
5. Verify everything worked and the Jetpack plugin was installed

Regression Notes

Potential unintended areas of impact
Behavior / installation issues.
What I did to test those areas of impact (or what existing automated tests I relied on)
Manual testing.
What automated tests I added (or what prevented me from doing so)
Updated existing tests only, most changes were just on UI.

PR submission checklist:

I have completed the Regression Notes.
I have considered adding accessibility improvements for my changes.
I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

thomashorta · 2023-03-02T22:19:52Z

@osullivanchris can you do a Design Review on this one? I added some high-resolution videos to help as well.

wpmobilebot · 2023-03-02T22:24:15Z

📲 You can test these changes on Jetpack by downloading jetpack-installable-build-pr18040-d1e7a6f.apk

	💡 Scan this QR code with your Android phone to download and install the APK directly on it.
	App	`Jetpack`
	Build Flavor	`Jalapeno`
	Build Type	`Debug`
	Commit	`d1e7a6f`

Note: This installable build uses the JalapenoDebug build flavor, and does not support Google Login.

wpmobilebot · 2023-03-02T22:25:11Z

📲 You can test these changes on WordPress by downloading wordpress-installable-build-pr18040-d1e7a6f.apk

	💡 Scan this QR code with your Android phone to download and install the APK directly on it.
	App	`WordPress`
	Build Flavor	`Jalapeno`
	Build Type	`Debug`
	Commit	`d1e7a6f`

Note: This installable build uses the JalapenoDebug build flavor, and does not support Google Login.

Add an "easier" way of providing the ContentAlpha for the required emphasis based on Material guidelines, adding ContentAlphaProvider component: https://developer.android.com/jetpack/compose/designsystems/material#emphasis

osullivanchris

I'm trying to setup a site with the correct conditions to test this properly in different sizes, landscape mode etc. But might be a couple hours before I can come back to it. For now based on the videos provided it looks good.

The only suggestion I would make (and I had same on iOS) was to change how the text and icon are positioned so that they don't jump depending whether there is 1 or 2 buttons. If the position of the icon/text was defined from the top of the screen, rather than centred within the area minus buttons, then the icon and title would be in the same place for the error state too. Very minor and optional change though.

thomashorta · 2023-03-06T15:47:43Z

The only suggestion I would make (and I had same on iOS) was to change how the text and icon are positioned so that they don't jump depending whether there is 1 or 2 buttons.

Good point @osullivanchris. I just sent a commit changing that. Here are the videos after the change.

Success

issue-18005-jp-install-tweaks-full-plugin-v3.mp4

Error

issue-18005-jp-install-tweaks-full-plugin-error-v3.mp4

osullivanchris · 2023-03-06T17:03:22Z

@thomashorta nice one! thanks for the quick fix. I got the build working and tried dark mode, landscape. All seems good!

… into issue/18005-jp-full-plugin-ui-tweaks

RenanLukas

Thanks for the changes, @thomashorta . It's working as expected.

I've left a couple of optional suggestions but they're only details.

LGTM

WordPress/src/main/java/org/wordpress/android/ui/compose/components/buttons/ButtonSize.kt

WordPress/src/main/java/org/wordpress/android/ui/compose/components/buttons/PrimaryButton.kt

WordPress/src/main/java/org/wordpress/android/util/extensions/StringExtensions.kt

peril-wordpress-mobile · 2023-03-09T13:42:16Z

	Warnings
⚠️	PR has more than 300 lines of code changing. Consider splitting into smaller PRs if possible.

Generated by 🚫 dangerJS

Thomas Horta added 3 commits February 28, 2023 17:32

allow WP Compose buttons to ignore default margins

8963b54

update main text styles, button position, and spacing

7f68469

update installing state strings

5b313cd

thomashorta requested review from RenanLukas, develric and osullivanchris March 2, 2023 22:05

thomashorta self-assigned this Mar 2, 2023

thomashorta added Jetpack Install Full Plugin [Type] Enhancement labels Mar 2, 2023

thomashorta added this to the 21.9 milestone Mar 2, 2023

thomashorta marked this pull request as ready for review March 2, 2023 22:19

thomashorta added the [Status] Needs Design Review A designer needs to sign off on the implemented design. label Mar 2, 2023

thomashorta force-pushed the issue/18005-jp-full-plugin-ui-tweaks branch from e89a53f to b4c4fb5 Compare March 3, 2023 15:49

Thomas Horta added 6 commits March 3, 2023 15:30

hide close button in Installing and Done states

d9bb585

use material textstyle with emphasis

b2cfbf1

Add an "easier" way of providing the ContentAlpha for the required emphasis based on Material guidelines, adding ContentAlphaProvider component: https://developer.android.com/jetpack/compose/designsystems/material#emphasis

create large button variant for compose buttons

eebb64d

change weight of whitespace below message

5151049

replace warning icon with updated version

aa39936

fix failing test due to removal of old icon

e98584d

thomashorta force-pushed the issue/18005-jp-full-plugin-ui-tweaks branch from 791ef9c to e98584d Compare March 3, 2023 18:55

develric modified the milestones: 21.9, 22.0 Mar 3, 2023

osullivanchris approved these changes Mar 6, 2023

View reviewed changes

keep a fixed height spacer at the top to avoid content jumping

1cd1e3a

fix detekt issue

2057308

Thomas Horta added 3 commits March 6, 2023 15:09

adjust full plugin onboarding icon position

aac2cd9

fix single vs multiple text grammar

b6aa94a

Merge branch 'trunk' of github.com:wordpress-mobile/WordPress-Android…

e80bc07

… into issue/18005-jp-full-plugin-ui-tweaks

RenanLukas approved these changes Mar 9, 2023

View reviewed changes

Thomas Horta added 2 commits March 9, 2023 10:30

fix spacing in calculation

427dd86

make ButtonSize height non-null

d1e7a6f

thomashorta enabled auto-merge March 9, 2023 13:44

thomashorta merged commit 6a51f21 into trunk Mar 9, 2023

thomashorta deleted the issue/18005-jp-full-plugin-ui-tweaks branch March 9, 2023 14:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Jetpack Full Plugin] Install flow UI tweaks#18040

[Jetpack Full Plugin] Install flow UI tweaks#18040
thomashorta merged 16 commits intotrunkfrom
issue/18005-jp-full-plugin-ui-tweaks

thomashorta commented Mar 2, 2023 •

edited

Loading

Uh oh!

thomashorta commented Mar 2, 2023

Uh oh!

wpmobilebot commented Mar 2, 2023 •

edited

Loading

Uh oh!

wpmobilebot commented Mar 2, 2023 •

edited

Loading

Uh oh!

osullivanchris left a comment •

edited

Loading

Uh oh!

thomashorta commented Mar 6, 2023 •

edited

Loading

Uh oh!

osullivanchris commented Mar 6, 2023

Uh oh!

RenanLukas left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

peril-wordpress-mobile bot commented Mar 9, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

thomashorta commented Mar 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Demos

To test

Regression Notes

Uh oh!

thomashorta commented Mar 2, 2023

Uh oh!

wpmobilebot commented Mar 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wpmobilebot commented Mar 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

osullivanchris left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thomashorta commented Mar 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Success

Error

Uh oh!

osullivanchris commented Mar 6, 2023

Uh oh!

RenanLukas left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

peril-wordpress-mobile bot commented Mar 9, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

thomashorta commented Mar 2, 2023 •

edited

Loading

wpmobilebot commented Mar 2, 2023 •

edited

Loading

wpmobilebot commented Mar 2, 2023 •

edited

Loading

osullivanchris left a comment •

edited

Loading

thomashorta commented Mar 6, 2023 •

edited

Loading