Sync: Update Studio URL scheme to open sync after hosted site flow

[gavande1]

Part of STU-936

Proposed Changes

• Update Studio deeplink URL scheme from wpcom-local-dev:// to wp-studio:// while maintaining backward compatibility for older versions.

Why are these changes being made?

• We have decided to update the URL scheme to be more inclusive.

Testing Instructions

Apologies for the long test instructions.

• Check out this PR or use the Calypso live link. Copy and keep the link for now.
• Open the Studio app on the trunk branch.
• Go to the Sync tab and click Connect Site.
• Click Create a new WordPress.com site.
• Follow the domain flow and complete the checkout process.
• You should land on a URL similar to:
  /home/250259110?studioSiteId=d67f9e58-97da-41d9-b99d-561d9f0b841d
  It must contain the studioSiteId query parameter.
• At this point, the web will attempt to open the Studio app.
• Copy the URL fragment from the link similar to above.
• Open the same link in local Calypso or in the Calypso live link.
• The page should open the Studio app.
• Close the Studio app.
• Check out the branch from Studio: Update Studio deeplink URL scheme from wpcom-local-dev to wp-studio studio#2029.
• Run the Studio app again.
• Refresh the page on local Calypso or the Calypso live link. Ensure the URL still contains the studioSiteId parameter.
• It should still attempt to open the Studio app.

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 tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• 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]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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 stu-936-update-studio-deeplink-url-scheme-for-sync-actions on your sandbox.

[ivan-ottinger]

Nice. The changes look good and work as expected. 👌🏼

Tested with both Studio trunk and the Automattic/studio#2029 branch. In both cases, the new WPCOM site got connected correctly.

---

I see we are not handling a case where the user does not have the Studio app installed, but that is very edge case - since user gets into this flow with the app already opened. Plus, we haven't addressed this edge case before either.

---

Thanks for the clear step-by-step testing instructions.

I left one comment below, but I think we are good merging the PR as-is.

[ivan-ottinger]

Looking at other possible solutions, we could also consider listening to the blur event that should trigger when the browser tries to open the link. If this event isn't triggered, that could be a signal for the fallback URL to be used.

However, I believe that the current solution should be sufficient.

[gavande1]

Thanks for the suggestion, @ivan-ottinger. I had also tried that approach, if I recall correctly. It was not reliably opening the Studio with the fallback link.

[ivan-ottinger]

Thanks! Makes sense. 👍🏼

[gavande1]

I see we are not handling a case where the user does not have the Studio app installed, but that is very edge case - since user gets into this flow with the app already opened. Plus, we haven't addressed this edge case before either.

Yes. That is intentional. As far as I understand, these links are only used in the flow that originates from Studio. So we can safely assume the user has Studio installed.