Implement new “site cannot be accessed” flow #42682

delan · 2020-05-27T06:33:27Z

Changes proposed

This pull request implements the new call-to-action and flow for the “site cannot be accessed” indicator on non-Atomic sites (as described in this internal post).

On such sites, the CTA changes to “I’d like to fix this now”, and it points to a new page that replaces the disconnect survey with some options that are more helpful for the situation. The indicator on Atomic sites and the disconnect button on the Manage Connection page remain unchanged.

There are some differences between these changes and the design, as well as some known problems, so I’ve added comments for them below. Let me know if these changes need any automated tests.

Testing instructions

1. Site indicator

Open this branch on calypso.live, click My Sites, then click Switch Site if necessary
If you have any Atomic Jetpack sites with the red exclamation mark, click that icon, verify that the call-to-action reads Remove Site, click that link, then go to step 2.3
If you have any non-Atomic Jetpack sites with the red exclamation mark, click that icon, verify that the call-to-action reads I’d like to fix this now, click that link, then go to step 3.3

2. Old page

Open this branch on calypso.live, click My Sites, then click Switch Site if necessary
Click any Jetpack site, go to Manage > Settings > Manage your connection, then click Disconnect from Wordpress.com
Verify that you see the old disconnect survey, then click Skip for now
Verify that you see the Confirm Disconnection page, then click Back
Verify that you see the old disconnect survey

3. New page

Open this branch on calypso.live, click My Sites, then click Switch Site if necessary
Click any Jetpack site, go to Manage > Settings > Manage your connection > Disconnect from Wordpress.com, then append ?type=down to the end of your URL
Verify that you see the new page, then click Confirm your site is loading
Verify that the site opens in a new tab or window, close it, then click Troubleshoot Jetpack
Verify that the Fixing Jetpack Connection Issues page opens in the same tab or window, go back, then click Disconnect Jetpack
Verify that you see the Confirm Disconnection page, then click Back
Verify that you see the new page

Screenshots

matticbot · 2020-05-27T06:33:29Z

Test live: https://calypso.live/?branch=add/site-cannot-be-accessed-flow

matticbot · 2020-05-27T06:45:01Z

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

Sections (~2078 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
settings                    +2974 B  (+0.7%)     +758 B  (+0.6%)
zoninator                     +17 B  (+0.0%)      +24 B  (+0.0%)
wp-super-cache                +17 B  (+0.0%)      +24 B  (+0.0%)
woocommerce                   +17 B  (+0.0%)      +24 B  (+0.0%)
themes                        +17 B  (+0.0%)      +24 B  (+0.0%)
theme                         +17 B  (+0.0%)      +24 B  (+0.0%)
stats                         +17 B  (+0.0%)      +24 B  (+0.0%)
sites                         +17 B  (+0.0%)      +24 B  (+0.1%)
site-blocks                   +17 B  (+0.0%)      +24 B  (+0.0%)
settings-writing              +17 B  (+0.0%)      +24 B  (+0.0%)
settings-security             +17 B  (+0.0%)      +24 B  (+0.0%)
settings-performance          +17 B  (+0.0%)      +24 B  (+0.0%)
settings-jetpack              +17 B  (+0.0%)      +24 B  (+0.0%)
settings-discussion           +17 B  (+0.0%)      +24 B  (+0.1%)
sensei                        +17 B  (+0.0%)      +24 B  (+0.1%)
security                      +17 B  (+0.0%)      +24 B  (+0.0%)
scan                          +17 B  (+0.0%)      +24 B  (+0.0%)
reader                        +17 B  (+0.0%)      +24 B  (+0.0%)
purchases                     +17 B  (+0.0%)      +24 B  (+0.0%)
privacy                       +17 B  (+0.0%)      +24 B  (+0.0%)
preview                       +17 B  (+0.0%)      +24 B  (+0.1%)
posts-custom                  +17 B  (+0.0%)      +24 B  (+0.0%)
posts                         +17 B  (+0.0%)      +24 B  (+0.0%)
post-editor                   +17 B  (+0.0%)      +24 B  (+0.0%)
plugins                       +17 B  (+0.0%)      +24 B  (+0.0%)
plans                         +17 B  (+0.0%)      +24 B  (+0.0%)
people                        +17 B  (+0.0%)      +24 B  (+0.0%)
pages                         +17 B  (+0.0%)      +24 B  (+0.0%)
notification-settings         +17 B  (+0.0%)      +24 B  (+0.0%)
migrate                       +17 B  (+0.0%)      +24 B  (+0.1%)
media                         +17 B  (+0.0%)      +24 B  (+0.0%)
me                            +17 B  (+0.0%)      +24 B  (+0.0%)
marketing                     +17 B  (+0.0%)      +24 B  (+0.0%)
jetpack-connect               +17 B  (+0.0%)      +24 B  (+0.0%)
jetpack-cloud-settings        +17 B  (+0.0%)      +24 B  (+0.1%)
import                        +17 B  (+0.0%)      +24 B  (+0.0%)
hosting                       +17 B  (+0.0%)      +24 B  (+0.0%)
home                          +17 B  (+0.0%)      +24 B  (+0.0%)
help                          +17 B  (+0.0%)      +24 B  (+0.0%)
hello-dolly                   +17 B  (+0.0%)      +24 B  (+0.1%)
happychat                     +17 B  (+0.0%)      +24 B  (+0.0%)
gutenberg-editor              +17 B  (+0.0%)      +24 B  (+0.0%)
google-my-business            +17 B  (+0.0%)      +24 B  (+0.0%)
feature-upsell                +17 B  (+0.0%)      +24 B  (+0.1%)
export                        +17 B  (+0.0%)      +24 B  (+0.0%)
email                         +17 B  (+0.0%)      +24 B  (+0.0%)
earn                          +17 B  (+0.0%)      +24 B  (+0.0%)
domains                       +17 B  (+0.0%)      +24 B  (+0.0%)
customize                     +17 B  (+0.0%)      +24 B  (+0.0%)
concierge                     +17 B  (+0.0%)      +24 B  (+0.0%)
comments                      +17 B  (+0.0%)      +24 B  (+0.0%)
checkout                      +17 B  (+0.0%)      +24 B  (+0.0%)
backup                        +17 B  (+0.0%)      +24 B  (+0.0%)
activity                      +17 B  (+0.0%)      +24 B  (+0.0%)
account-close                 +17 B  (+0.0%)      +24 B  (+0.0%)
account                       +17 B  (+0.0%)      +24 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 (~120 bytes added 📈 [gzipped])

name                                         parsed_size           gzip_size
async-load-signup-steps-site-picker                +17 B  (+0.0%)      +24 B  (+0.2%)
async-load-design-blocks                           +17 B  (+0.0%)      +24 B  (+0.0%)
async-load-components-web-preview-component        +17 B  (+0.0%)      +24 B  (+0.0%)
async-load-components-sites-popover                +17 B  (+0.0%)      +24 B  (+0.1%)
async-load-blocks-inline-help-popover              +17 B  (+0.0%)      +24 B  (+0.0%)

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.

client/my-sites/site-settings/disconnect-site/style.scss

client/my-sites/site-settings/disconnect-site/index.jsx

delan · 2020-05-28T10:41:12Z

client/my-sites/site-settings/disconnect-site/index.jsx

+							<FormattedHeader
+								isSecondary
+								align="left"
+								headerText={ translate( 'Confirm your site is loading' ) }
+								subHeaderText={ translate(
+									'As a first step, we suggest trying to open your site to ensure it’s loading correctly.'
+								) }
+							/>


i’ve used FormattedHeader here because CardHeading yields uneven spacing that’s annoying to fix, and i didn’t find a more appropriate component than those

client/my-sites/site-settings/disconnect-site/index.jsx

delan · 2020-05-28T11:32:09Z

client/my-sites/site-settings/disconnect-site/index.jsx

+	site: { name: siteName, URL: siteUrl },
+	translate,
+} ) => {
+	const confirmHref = `/settings/disconnect-site/confirm/${ siteSlug }?type=down`;

 	let backHref = '/settings/manage-connection/' + siteSlug;


bug: the Back buttons on both old and new pages always take you back to Manage Connection (don’t worry about the reason branch below, it looks like a red herring), but if you used the CTA, that’s not necessarily where you came from

should i make this onClick history.back + preventDefault and keep the href as a fallback, or is there a way to get the previous URL out of the router and set href to that?

I would be pretty cool if we can actually make it go back in history rather than dropping them in the Manage Connection page. Even though they won't be able to do much since the connection is broken, it would be nice that all the <- Back links would behave in an expectable way.

A simple

import page from 'page'; page.back();

should be enough to go back.

Or window.history.back(). The difference is that page.back() will never navigate out of Calypso (i.e., to another page that was previously opened in the same tab.

If you want to construct a full <a href="..."/> with a valid link, then the getPreviousRoute( state ) Redux selector will return the previous URL.

All of the above will work only if there is some navigation history to work with. If you got to the page by opening a direct link (from email, from chat, ...), clicking on the "back" arrow will do nothing.

wow there are more options than i realised, and we could combine them in several ways, plus there’s also the question of whether this NavigationLink should go back through history (enabling the browser forward button) or push forward to a new history entry… does calypso have a convention i can defer to here?

does calypso have a convention i can defer to here?

I don't think so. Each of the techniques I described is used at least once in the codebase. 🙂

keoshi

First off, thanks for rocking this PR out so quickly and efficiently, @delan ! Awesome work. Thank you for all your suggestions too!

This is looking really good to me, and only have a few notes:

Design-wise, your color and styling changes make total sense to me.
After testing this out, noticed that the copy at the top had the potential to be slightly confusing. Added a quick suggestion and also want to loop in @Automattic/editorial to ask for a quick validation on what we have here.
I still have some questions about what options should open in new tabs and consequently what icons we should have there. Curious to know what others think about this, but it shouldn't hold us back. Let's ship and iterate afterwards.
Mobile: the note at the bottom doesn't have any padding, stretching out to the edges of the frame (image 1).
Mobile: I believe this might be the first time we're adding icons like this, so the margins on smaller screens look weird. On image 2 I added margin-left: 0 to .disconnect-site__actions .card .formatted-header.
Kudos for using real apostrophes! 🙌

Really awesome job, thanks for making this happen!

Image 1

Image 2

Before	After

client/my-sites/site-settings/disconnect-site/index.jsx

sirreal

I've inspected the code and I don't see any blocking issues. Nice attention to detail 👍

sirreal · 2020-05-29T09:48:11Z

client/my-sites/site-indicator/index.jsx

-						{ translate( 'Remove Site' ) }
+						{ siteIsAutomatedTransfer
+							? translate( 'Remove Site' )
+							: translate( 'I’d like to fix this now' ) }


Nice ’ punctuation!

sirreal · 2020-05-29T09:53:24Z

client/my-sites/site-settings/disconnect-site/confirm.jsx

+
+		const backHref =
+			`/settings/disconnect-site/${ siteSlug }` +
+			( type ? `?type=${ encodeURIComponent( type ) }` : '' );


Nice use of encodeURIComponent on the type variable 👍

client/my-sites/site-settings/disconnect-site/index.jsx

client/my-sites/site-indicator/index.jsx

client/my-sites/site-settings/disconnect-site/index.jsx

jsnajdr · 2020-05-29T11:38:27Z

client/my-sites/site-settings/disconnect-site/index.jsx

+	site: { name: siteName, URL: siteUrl },
+	translate,
+} ) => {
+	const confirmHref = `/settings/disconnect-site/confirm/${ siteSlug }?type=down`;

 	let backHref = '/settings/manage-connection/' + siteSlug;


A simple

import page from 'page'; page.back();

should be enough to go back.

Or window.history.back(). The difference is that page.back() will never navigate out of Calypso (i.e., to another page that was previously opened in the same tab.

If you want to construct a full <a href="..."/> with a valid link, then the getPreviousRoute( state ) Redux selector will return the previous URL.

All of the above will work only if there is some navigation history to work with. If you got to the page by opening a direct link (from email, from chat, ...), clicking on the "back" arrow will do nothing.

client/my-sites/site-settings/disconnect-site/index.jsx

sirreal

@jsnajdr has left some good suggestions that would be nice to address. As far as I can tell this is working well.

I've done some smoke testing and things work well.

I'm not sure how to get a disconnected Atomic site so did not test any of those flows.
Atomic sites are redirected away from /settings/disconnect-site.
Simple sites are redirected away from /settings/disconnect-site.
The disconnected Jetpack flows worked well in my testing.

Two experience notes:

If a Jetpack site is properly connected, there's no indication of that in the disconnect site view. This is an edge case and may not be worth addressing in this iteration, but an indication when a site appears to be properly connected would be nice.
The only support option seems to be a link to a documentation page. Even for sites with a page plan, an opportunity to contact Happiness seems to be missing.

Co-authored-by: Filipe Varela <keoshi@keoshi.com>

delan · 2020-06-09T08:27:36Z

Thanks for the feedback everyone! Once the PR is good to go and the builds are green, could someone please help me with the deployment side of things (maybe @sirreal or @jsnajdr)?

client/my-sites/site-settings/disconnect-site/down-flow.jsx

keoshi · 2020-06-09T08:45:45Z

Thanks for all those changes, @delan !

One question that popped in my head when looking at this was if it would be possible to add tracking to the different options before merging this PR?

client/my-sites/site-settings/disconnect-site/down-flow.jsx

delan · 2020-06-10T13:58:47Z

One question that popped in my head when looking at this was if it would be possible to add tracking to the different options before merging this PR?

Done in f37a7cc!

calypso_jetpack_site_indicator_disconnect_start for the call-to-action (previously existed)
calypso_jetpack_site_indicator_disconnect_confirm for “confirm that your site loads”
calypso_…_disconnect_troubleshoot for “troubleshoot” (queued for next pageview)
calypso_…_disconnect_disconnect for “disconnect” (the “confirm disconnect” screen)

keoshi · 2020-06-10T14:25:08Z

You're the best, @delan !! 🙌

sirreal · 2020-06-10T14:47:51Z

Thanks for the feedback everyone! Once the PR is good to go and the builds are green, could someone please help me with the deployment side of things (maybe @sirreal or @jsnajdr)?

Documentation on the deployment process: PCYsg-5XR-p2

Feel free to reach out to me when you're ready and I'll help with the deployment 👍

nsakaimbo

👋 Hi, @delan! If it isn't already, could you please rebase this branch on latest Calypso master prior to merging? There were some fixes merged a couple days ago that got ci/wp-desktop tests working again (after a long series of breakages). The tests should be passing now, and we're just trying to be pro-active about making sure tests are ✅ before merging new changes.

client/my-sites/site-settings/disconnect-site/down-flow.jsx

delan · 2020-06-11T09:56:07Z

@nsakaimbo Thanks for the heads up! ci/wp-desktop is now green on this branch.

jsnajdr

Seems that all issues were addressed. Thank you for working on this!

Test is no longer failing.

a8ci18n · 2020-06-12T09:20:41Z

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

Hi @delan, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:

I’d like to fix this now
Your site, {{strong}}%(siteName)s{{/strong}}, cannot be accessed
Jetpack wasn’t able to connect to {{strong}}%(siteSlug)s{{/strong}}.{{br/}}Let’s figure out why — there are a few things to try.
Confirm that your site loads
Visit your site to make sure it loads properly. If there’s an issue, fix your site before worrying about Jetpack! That may resolve this error.
Troubleshoot Jetpack
If you’re no longer using Jetpack and/or WordPress for your site, or you’ve taken your site down, it’s time to disconnect Jetpack.
Note: You may be seeing this error because you don’t have admin permissions for this site.{{br/}}If you think you should, contact your site administrator.
If your site is loading but you’re still seeing this error, this guide will help you troubleshoot the Jetpack connection.

Thank you in advance!

a8ci18n · 2020-08-04T15:28:24Z

Translation for this Pull Request has now been finished.

Add new CTA to site-indicator for non-Atomic sites

c399f5c

delan added 6 commits May 27, 2020 16:49

Render new empty flow when ?type=down is given (as in new CTA)

cc04e31

Add low-fidelity content for new flow

d269bbf

Plumb site name and slug into FormattedHeader

35832bf

Flesh out cards, except for their icons

5dab4d2

Remove the RTL code I added (RTLCSS already handles this for us)

b110984

Add permissions footer note

fb1a342

delan force-pushed the add/site-cannot-be-accessed-flow branch from 6f3937d to fb1a342 Compare May 27, 2020 11:33

delan added 2 commits May 27, 2020 21:39

Make the confirm screen’s Back button go back to the correct flow

114a356

Add icons to action cards

6b4e178

delan force-pushed the add/site-cannot-be-accessed-flow branch from af12044 to 6b4e178 Compare May 27, 2020 12:46

delan commented May 28, 2020

View reviewed changes

delan marked this pull request as ready for review May 28, 2020 11:56

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

Fix incorrect links on old disconnect survey page

5fe00d4

keoshi added the [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR label May 28, 2020

keoshi requested a review from a team May 28, 2020 12:05

sirreal requested review from sirreal and a team May 28, 2020 13:00

keoshi approved these changes May 29, 2020

View reviewed changes

client/my-sites/site-settings/disconnect-site/index.jsx Outdated Show resolved Hide resolved

sirreal reviewed May 29, 2020

View reviewed changes

keoshi removed the [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR label May 29, 2020

jsnajdr reviewed May 29, 2020

View reviewed changes

sirreal added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. Jetpack and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels May 29, 2020

sirreal reviewed May 29, 2020

View reviewed changes

Use addQueryArgs when URL being modified isn’t a literal

af627f3

delan and others added 3 commits June 9, 2020 18:17

Apply @michelleweber’s suggestions

435b089

Co-authored-by: Filipe Varela <keoshi@keoshi.com>

Apply @michelleweber’s suggestions

15880b8

Update copy for confirm action (h/t @michelleweber)

a211cca

delan requested review from jsnajdr and sirreal June 9, 2020 08:27

a8ci18n reviewed Jun 9, 2020

View reviewed changes

client/my-sites/site-settings/disconnect-site/down-flow.jsx Show resolved Hide resolved

Add tracks events for actions on new flow

f37a7cc

a8ci18n reviewed Jun 10, 2020

View reviewed changes

client/my-sites/site-settings/disconnect-site/down-flow.jsx Show resolved Hide resolved

sirreal added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jun 10, 2020

nsakaimbo self-requested a review June 10, 2020 15:15

nsakaimbo previously requested changes Jun 10, 2020

View reviewed changes

merge from origin/master

6c828d6

a8ci18n reviewed Jun 11, 2020

View reviewed changes

client/my-sites/site-settings/disconnect-site/down-flow.jsx Show resolved Hide resolved

delan requested a review from nsakaimbo June 11, 2020 09:56

jsnajdr approved these changes Jun 11, 2020

View reviewed changes

sirreal added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jun 11, 2020

delan merged commit d547130 into master Jun 12, 2020

delan deleted the add/site-cannot-be-accessed-flow branch June 12, 2020 07:25

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 12, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement new “site cannot be accessed” flow #42682

Implement new “site cannot be accessed” flow #42682

delan commented May 27, 2020 •

edited

matticbot commented May 27, 2020

matticbot commented May 27, 2020 •

edited

delan May 28, 2020

delan May 28, 2020

delan May 28, 2020

keoshi May 29, 2020

jsnajdr May 29, 2020

delan May 29, 2020

jsnajdr Jun 10, 2020

delan Jun 12, 2020

keoshi left a comment

sirreal left a comment

sirreal May 29, 2020

sirreal May 29, 2020

jsnajdr May 29, 2020

sirreal left a comment

delan commented Jun 9, 2020

keoshi commented Jun 9, 2020

delan commented Jun 10, 2020

keoshi commented Jun 10, 2020

sirreal commented Jun 10, 2020

nsakaimbo left a comment

delan commented Jun 11, 2020

jsnajdr left a comment

a8ci18n commented Jun 12, 2020 •

edited

a8ci18n commented Aug 4, 2020

Implement new “site cannot be accessed” flow #42682

Implement new “site cannot be accessed” flow #42682

Conversation

delan commented May 27, 2020 • edited

Changes proposed

Testing instructions

1. Site indicator

2. Old page

3. New page

Screenshots

matticbot commented May 27, 2020

matticbot commented May 27, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

keoshi left a comment

Choose a reason for hiding this comment

Image 1

Image 2

sirreal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sirreal left a comment

Choose a reason for hiding this comment

delan commented Jun 9, 2020

keoshi commented Jun 9, 2020

delan commented Jun 10, 2020

keoshi commented Jun 10, 2020

sirreal commented Jun 10, 2020

nsakaimbo left a comment

Choose a reason for hiding this comment

delan commented Jun 11, 2020

jsnajdr left a comment

Choose a reason for hiding this comment

a8ci18n commented Jun 12, 2020 • edited

a8ci18n commented Aug 4, 2020

delan commented May 27, 2020 •

edited

matticbot commented May 27, 2020 •

edited

a8ci18n commented Jun 12, 2020 •

edited