Close sync modal when creating new site

[sejas]

Related issues

• Fixes STU-254

Proposed Changes

• Close Connect Sites Sync modal after connecting any site, including when the connection comes from a deep link.

Testing Instructions

TEST DEEP LINK

• Run npm start
• Select the Sync tab
• Click on Connect Site
• Click on "Create a new WordPress.com site"
• Observe the browser opens
• Observe the modal is still open, in case the user wants to go back to pick another site
• Follow the process of purchase or access any atomic site home: https://wordpress.com/home/${WPCOM_SITE_SLUG}?studioSiteId=${YOUR_STUDIO_SITE_ID}
• Click on the deep link
• Observe Studio focus correctly, and the Sync modal closes
• Observe the site is correctly connected

close-modal-after-deeplink.mp4

TEST REGULAR CONNECTION

• Run npm start
• Select the Sync tab
• Click on Connect Site
• Select a valid site
• Click on connect
• Observe the modal closes
• Observe the site is correctly connected

connect-site-regular-flow.mp4

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[wojtekn]

I've tested it using the HTML file:

<a href="wpcom-local-dev://sync-connect-site?remoteSiteId=206672177&studioSiteId=2a1d3553-1ee1-4fe5-9297-4aeff02d9248">Connect</a>

1. Edit the file and fill out both site IDs
2. Open the file in the browser
3. Open Studio
4. Make the other site than the one defined in the test file active, open the Sync tab and then the 'Connect site' window
5. Click the Connect link in the test file

The PR doesn't fix this case. It seems that in this PR, we are changing the code to close the connection dialog immediately after the link is clicked. I'm unsure if it's the best approach, as the action the user just started is not yet finished, and keeping the dialog open would make more sense. User can change their mind, close the browser, and choose another site to connect in the connection dialog.

Should we update the sync-connect-site handle to close the dialog when the deep link is executed? And even further, to close any other dialog that could be open, e.g., 'Add site' or Settings?

[sejas]

@wojtekn, Thanks for testing the PR. This PR was made after exploring the other solution and it was an effort to find the simplest direct solution that solves user's pain.
I'll update this PR with the second approach, so the modal will still be open until the user finish the site connection.
I detailed both alternatives in STU-254 before implementing them, but in the end I thought to create the PR with the simple solution.

And even further, to close any other dialog that could be open, e.g., 'Add site' or Settings?

I see this a bit excessive at this moment. It would require a big refactor centralizing all the modals in the same Redux store. If you think it's necessary we can create a separate issue.

[wojtekn]

I see this a bit excessive at this moment. It would require a big refactor centralizing all the modals in the same Redux store. If you think it's necessary we can create a separate issue.

Agreed, I don't think we need that at this point.

[sejas]

This PR is ready for another review.

[wojtekn]

Works as expected.