Add the authorization Step for the Application Passwords #96891

valterlorran · 2024-11-28T16:50:12Z

Related to #

Proposed Changes

Adds the new Authorization Step to allow us to capture the Application Password authorization. This step gives the user the possibility to authorize our application so we can use the credentials for the automate checks and tasks.

I also added the possibility of adding notices to the Step. I updated the StepContainer to accept a new prop: notice. And it is displayed before the Formatted Header.

Default view

Rejected the Authorization

Error trying to store the Authorization credentials

Why are these changes being made?

This is an attempt to improve the low success rates of users credentials. Most of the credentials that the users inputs are not valid and we can proceed with many automated processes that would save a great deal of time for the HEs. More context on: paYKcK-5B6-p2

Testing Instructions

Visual inspection should be enough, as I added some tests to cover the cases.

To test it manually follow the steps:

Use calypso live to avoid the SSL error when trying to authenticate.
Go through the migration process until you reach the Credentials step.
Then update the URL to point to the /setup/site-migration/site-migration-application-password-authorization path. Keep the current parameters, and add the authorizationUrl, which could be a valid authorization URL for the Application Passwords: https://example.com/wp-admin/authorize-application.php&app_id=1083d914-d9f8-47ec-b49b-55d206104730&app_name=Test
You should see the default view, inviting the user to Authorize. Click on the "Authorize" button.
You should be redirected to your test site.
Reject the request, and you should be redirected to the Authorization step with an alert.
Click again on the "Authorize" button, and this time approve the request.
You should be redirected to the Authorization step and should see a loading state.
After the loading state, you'll probably see the Authorization step with an error message, because the endpoint that stores the Password will fail because you don't have the ticket.
So far this should be enough to test.

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-28T16:50:24Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-11-28T16:59:58Z

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

Sections (~245 bytes added 📈 [gzipped])

name                           parsed_size           gzip_size
site-migration-flow                 +597 B  (+0.7%)      +98 B  (+0.6%)
hosted-site-migration-flow          +597 B  (+0.7%)      +98 B  (+0.6%)
update-design-flow                   +38 B  (+0.0%)      +12 B  (+0.0%)
entrepreneur-flow                    +38 B  (+0.0%)      +16 B  (+0.1%)
with-theme-assembler-flow            +27 B  (+0.0%)       +5 B  (+0.0%)
update-options-flow                  +27 B  (+0.0%)       +6 B  (+0.1%)
trial-wooexpress-flow                +27 B  (+0.0%)       +6 B  (+0.1%)
tailored-ecommerce-flow              +27 B  (+0.0%)       +6 B  (+0.1%)
site-setup-wg                        +27 B  (+0.0%)       +3 B  (+0.0%)
site-setup-flow                      +27 B  (+0.0%)       +3 B  (+0.0%)
readymade-template-flow              +27 B  (+0.0%)       +7 B  (+0.0%)
migration-signup                     +27 B  (+0.0%)       +4 B  (+0.0%)
migration-flow                       +27 B  (+0.0%)       +6 B  (+0.0%)
import-flow                          +27 B  (+0.0%)       +7 B  (+0.1%)
free-post-setup-flow                 +27 B  (+0.0%)       +4 B  (+0.1%)
assembler-first-flow                 +27 B  (+0.0%)       +5 B  (+0.0%)
ai-assembler-flow                    +27 B  (+0.0%)       +6 B  (+0.0%)
write-flow                           +11 B  (+0.0%)       +8 B  (+0.0%)
transferring-hosted-site-flow        +11 B  (+0.0%)       +8 B  (+0.0%)
plugin-bundle-flow                   +11 B  (+0.0%)      +10 B  (+0.0%)
plans                                +11 B  (+0.0%)       +8 B  (+0.0%)
newsletter-post-setup-flow           +11 B  (+0.0%)       +8 B  (+0.0%)
link-in-bio-tld-flow                 +11 B  (+0.0%)       +8 B  (+0.0%)
link-in-bio-post-setup-flow          +11 B  (+0.0%)       +8 B  (+0.0%)
import-hosted-site-flow              +11 B  (+0.0%)      +10 B  (+0.0%)
domain-user-transfer-flow            +11 B  (+0.0%)       +8 B  (+0.0%)
copy-site-flow                       +11 B  (+0.0%)      +10 B  (+0.0%)
build-flow                           +11 B  (+0.0%)       +8 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 (~16 bytes added 📈 [gzipped])

name                                                 parsed_size           gzip_size
async-load-signup-steps-initial-intent                     +11 B  (+0.0%)       +9 B  (+0.0%)
async-load-automattic-onboarding-src-step-container        +11 B  (+0.1%)       +7 B  (+0.2%)

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.

matticbot · 2024-12-03T23:46:49Z

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 add/authorize-step-application-password on your sandbox.

andres-blanco

Here's a bunch of small design differences that doesn't match the figma file:

Spacing between the title and the paragraph below
The site URL should be bold
Spacing between paragraph and CTA button
The weight of the Share credentials instead link is different
Spacing between Share credentials instead link and Here's what else you're getting title is different
Spacing between Here's what else you're getting title and the description box is different
The description box items have icons in the figma
Font size of the description box items is different

Also, the Need help? Let us guide you link in the top right is missing.

Please tackle the easy fixes and leave the rest for a subsequent PR.

andres-blanco · 2024-12-04T12:43:13Z

@valterlorran the CTA en the Figma reads Authorize access, in the PR is Authorize

andres-blanco · 2024-12-04T12:48:29Z

Screen.Recording.2024-12-04.at.9.46.24.AM.mov

When I click authorize I get redirected to the first step of the flow. Based on the undefined that appears on the URL this might be related to the site_url vs from parameter

valterlorran · 2024-12-04T13:11:02Z

@andres-blanco

Spacing between the title and the paragraph below

We should not override these values to not create inconsistencies with other steps. We should use the default behavior of the component.

The site URL should be bold

Fixed

Spacing between paragraph and CTA button

I’m assuming this means the space between the We're ready to migrate… subtitle and the Authorize access button: Again the space added between is default of the header and the step container, reducing that would be different from other steps.

The weight of the Share credentials instead link is different

I’m using the default link that we have been using in other steps. I think if we decide to tackle that, we should do a refactor.

Spacing between Share credentials instead link and Here's what else you're getting title is different

Fixed

Spacing between Here's what else you're getting title and the description box is different

Fixed

The description box items have icons in the figma

Isn’t that showing up for you? Can you share a screen shot?

Font size of the description box items is different

I used the $font-body-small instead of hardcoding the site and to have consistence.

… to the step approprieally

andres-blanco · 2024-12-04T16:31:31Z

Isn’t that showing up for you? Can you share a screen shot?

Figma: F8foKv974Gc5dTHSh0i0Wo-fi-648_7452

andres-blanco

The code overall looks good and the happy path seems to be working correctly. I found a couple of blockers.

When I get redirected to the wp-admin screen to authorize there's no Application Name pre-filled (we should user the app_name query param specified here https://make.wordpress.org/core/2020/11/05/application-passwords-integration-guide/)

The let us guide you in the top right is still missing

andres-blanco · 2024-12-04T16:46:20Z

...ps-repository/site-migration-application-password-authorization/components/authorization.tsx

+				<h3>{ translate( "Here's what else you're getting" ) }</h3>
+				<AuthorizationBenefits
+					benefits={ [
+						translate( 'Uninterrupted service throughout the entire migration experience.' ),


where this strings added to the string freeze PR we where using for having translations ready earliear?

valterlorran · 2024-12-04T17:50:00Z

When I get redirected to the wp-admin screen to authorize there's no Application Name pre-filled (we should user the app_name query param specified here

This should be working, the thing is that on the testing instructions I didn't add the App ID and App Name, but this should come from the endpoint. In order for that to work just add the app_id and the app_name params to your authorizationUrl:

Please see: fbhepr%2Skers%2Sjcpbz%2Sjc%2Qpbagrag%2Syvo%2Szvtengvba%2Snhgbzngrq%2Qzvtengvba%2Qgbbyf.cuc%3Se%3Q9r16q365%231171%2Q1178-og

andres-blanco

Based on this comment I think this is in a good state for merging.

a8ci18n · 2024-12-04T21:31:05Z

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

Some locales (Hebrew, Japanese) 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 @valterlorran for including a screenshot in the description! This is really helpful for our translators.

* Add the authorization Step for the Application Passwords * Add the notice when the authorization is request and add the texts * Apply the style to the component * Added the submit logic for the new step * Add the tests * Add the action to skip the error on storing the credentials * Add the redirect to the fallback step * Fix the authorizationUrl parameter name * Try fix the errors * Fix tests * Add the back button logic * Fix the from param * Fix design issues * Fix button test * We should encode the success_url to allow the source site to redirect to the step approprieally * Fix the authorizationUrl parameter

a8ci18n · 2024-12-08T18:30:31Z

Translation for this Pull Request has now been finished.

valterlorran self-assigned this Dec 2, 2024

valterlorran requested a review from a team December 3, 2024 23:24

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

valterlorran marked this pull request as ready for review December 3, 2024 23:35

valterlorran requested a review from a team as a code owner December 3, 2024 23:35

valterlorran added 6 commits December 3, 2024 20:36

Add the authorization Step for the Application Passwords

f9ae282

Add the notice when the authorization is request and add the texts

a045d7b

Apply the style to the component

5aacf80

Added the submit logic for the new step

904a860

Add the tests

fb0316c

Add the action to skip the error on storing the credentials

228b6f3

valterlorran force-pushed the add/authorize-step-application-password branch from 0bd4911 to 228b6f3 Compare December 3, 2024 23:37

Add the redirect to the fallback step

e7c3fd6

valterlorran added 2 commits December 3, 2024 20:59

Fix the authorizationUrl parameter name

0349e4f

Try fix the errors

4a0deb8

valterlorran force-pushed the add/authorize-step-application-password branch from c0268d0 to 4a0deb8 Compare December 4, 2024 00:32

Fix tests

93a7874

valterlorran mentioned this pull request Dec 4, 2024

AP: Fix the back button on the Fallback Credentials step #97039

Merged

8 tasks

Add the back button logic

f213398

andres-blanco requested changes Dec 4, 2024

View reviewed changes

Fix the from param

0aa14a1

valterlorran added 3 commits December 4, 2024 11:49

Fix design issues

bff33e2

Fix button test

0ce0f81

We should encode the success_url to allow the source site to redirect…

e55dca2

… to the step approprieally

andres-blanco requested changes Dec 4, 2024

View reviewed changes

andres-blanco approved these changes Dec 4, 2024

View reviewed changes

Fix the authorizationUrl parameter

8b8ca48

valterlorran merged commit cf6e517 into trunk Dec 4, 2024
11 checks passed

valterlorran deleted the add/authorize-step-application-password branch December 4, 2024 19:07

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add the authorization Step for the Application Passwords #96891

Add the authorization Step for the Application Passwords #96891

valterlorran 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 Dec 3, 2024 •

edited

Loading

andres-blanco left a comment

andres-blanco commented Dec 4, 2024

andres-blanco commented Dec 4, 2024

valterlorran commented Dec 4, 2024

andres-blanco commented Dec 4, 2024

andres-blanco left a comment

andres-blanco Dec 4, 2024

valterlorran commented Dec 4, 2024

andres-blanco left a comment

a8ci18n commented Dec 4, 2024

a8ci18n commented Dec 8, 2024

Add the authorization Step for the Application Passwords #96891

Add the authorization Step for the Application Passwords #96891

Conversation

valterlorran commented Nov 28, 2024 • edited Loading

Proposed Changes

Default view

Rejected the Authorization

Error trying to store the Authorization credentials

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

matticbot commented Dec 3, 2024 • edited Loading

andres-blanco left a comment

Choose a reason for hiding this comment

andres-blanco commented Dec 4, 2024

andres-blanco commented Dec 4, 2024

valterlorran commented Dec 4, 2024

andres-blanco commented Dec 4, 2024

andres-blanco left a comment

Choose a reason for hiding this comment

andres-blanco Dec 4, 2024

Choose a reason for hiding this comment

valterlorran commented Dec 4, 2024

andres-blanco left a comment

Choose a reason for hiding this comment

a8ci18n commented Dec 4, 2024

a8ci18n commented Dec 8, 2024

valterlorran 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 Dec 3, 2024 •

edited

Loading