Guided Tours: Add Jetpack Plugin Autoupdate Tour #25474

ockham · 2018-06-13T14:08:09Z

Adds the tour.

Waits for plugins to be loaded with some magic. See notes. Existing tools don't seem to be applicable because plugin store is not redux and the wait may be too long.

Try rolling back f7170ea01ee3b09c0f8392ad6aab6074e3bb4102 while testing.
Ensure you test with clean application state and with already loaded plugin data in state. Should display the tour under all conditions.

Testing

Visit the checklist for a new Jetpack site and click the plugin auto-update step.

Closes #25458

matticbot · 2018-06-13T14:08:11Z

Test live: https://calypso.live/plans/my-plan?branch=add/jetpack-plugin-update-tour

sirreal

Left some implementation notes.

sirreal · 2018-07-13T12:49:30Z

client/layout/guided-tours/config-elements/step.js

@@ -377,10 +381,10 @@ export default class Step extends Component {

 		const style = { ...this.props.style, ...stepCoords };

-		return (
+		return ContentComponent ? (


Don't render and empty tour if no children are provided.

sirreal · 2018-07-13T12:49:49Z

client/layout/guided-tours/config-elements/step.js

+				'Step#componentWillMount: stepSection: %s, name: %s',
+				this.stepSection,
+				this.props.name
+			);


Probably should rollback, I don't think Steps remount.

sirreal · 2018-07-13T12:50:19Z

client/layout/guided-tours/tours/jetpack-plugin-updates-tour.js

+			target=".plugin-item.is-placeholder"
+			onTargetDisappear={ ( { next } ) => next() }
+			next="onLoaded"
+		/>


Magic, exhibit 1 (wait for placeholders to disappear)…

👏 Well played, Jon.

sirreal · 2018-07-13T12:51:18Z

client/layout/guided-tours/tours/jetpack-plugin-updates-tour.js

+			name="onLoaded"
+			wait={ () => !! query( '.plugin-item-jetpack .form-toggle:enabled' ).length }
+			target=".plugin-item-jetpack .form-toggle__switch"
+			onTargetDisappear={ /** Errors if missing */ () => {} }


Magic, exhibit 2.

I think GT are buggy, while waiting it seems that the target appears and disappears. Ideally none of the logic would occur until wait passes.

Without onTargetDisappear, this errors as the component appears.

Might want to add a code comment above this whole step, too.

/cc @lsinger for GT bugginess

sirreal · 2018-07-13T12:51:49Z

client/my-sites/plans/current-plan/index.jsx

-						! isAutomatedTransfer && <ChecklistShow /> }
+						! isAutomatedTransfer && (
+							<Fragment>
+								<QueryJetpackPlugins siteIds={ [ selectedSiteId ] } />


Query 'em early. As long as this query finishes, the guided tour should display immediately.

sirreal · 2018-07-13T12:55:17Z

client/layout/guided-tours/tours/jetpack-plugin-updates-tour.js

+						) }
+					</p>
+					<ButtonRow>
+						<SiteLink isButton href={ '/plans/my-plan/:site' }>


ockham · 2018-07-13T14:22:44Z

client/layout/guided-tours/tours/jetpack-plugin-updates-tour.js

+		<Step
+			name="onLoaded"
+			wait={ () => !! query( '.plugin-item-jetpack .form-toggle:enabled' ).length }
+			target=".plugin-item-jetpack .form-toggle__switch"


I added the 'plugin-item-' + plugin.slug class to plugin-item.jsx (see below) so the GT could easily query the JP plugin toggle. However, there's already an id we might be able to use

Specifically, we might use label[for=autoupdates-jetpack-:site] .form-toggle__switch as selector (which means adding some more silly :site replacements to GT -- there's precedent).

Not sure it's worth it 🤷‍♂️

ockham · 2018-07-13T14:23:04Z

client/my-sites/plugins/plugin-item/plugin-item.jsx

@@ -343,7 +343,9 @@ class PluginItem extends Component {
 			pluginActions = this.renderActions();
 		}

-		const pluginItemClasses = classNames( 'plugin-item', { disabled } );
+		const pluginItemClasses = classNames( 'plugin-item', 'plugin-item-' + plugin.slug, {


See https://github.com/Automattic/wp-calypso/pull/25474/files#r202366288

ockham · 2018-07-13T14:29:17Z

😖 Seeing some bugginess if landing directly at calypso.localhost:3000/plans/my-plan/<jpSite>:

Click plugin auto-update step's 'Do it'
Behold the plugins page. No GT 🙁
Click the browser's 'Back' button, taking you back to the checklist. GT bubble appears... somewhere?!

sirreal · 2018-07-16T10:22:45Z

Thanks @ockham, I'll dig into this more. @lsinger if you have any thoughts, would be great to hear them.

The difficulty here is waiting for a non-Redux data store to finish loading (and the relevant toggles to render) before starting the tour.

Aligns with #26043

sirreal · 2018-07-19T13:37:36Z

Thanks @joanrho, I can confirm a positioning issue. I'll try to determine whether that's introduced by this PR or an existing bug.

If you expand your viewport a bit, it should be on the right toggle. A workaround would be to change the popover so the box is positioned on the other side and the sidebar provides some room.

sirreal · 2018-07-19T13:43:35Z

Workaround fail 😂

sirreal · 2018-07-19T15:55:39Z

@joanrho These seem to be positioning bugs present in the guided tours.

@ockham @joanrho Shall we merge this and worry about the positioning before this can be put into production, possibly as part of #25933 or #25932

joanrho · 2018-07-19T19:41:10Z

@sirreal Yes, let's merge and move forward for now, since the Issue has already been captured. Thanks!

ockham added Jetpack [Status] In Progress [Feature] Plugins Features related to plugins on WordPress.com, including search, management, and installation. Checklist labels Jun 13, 2018

ockham self-assigned this Jun 13, 2018

ockham force-pushed the add/jetpack-plugin-update-tour branch from 0cc4a97 to 7e28953 Compare June 18, 2018 14:12

ockham force-pushed the add/jetpack-plugin-update-tour branch from 8fa54a2 to 3ade47e Compare July 3, 2018 17:11

ockham mentioned this pull request Jul 10, 2018

Plans: Add Checklist to My Plan page (JP) #25870

Merged

sirreal added the [Type] Feature progress label Jul 13, 2018

sirreal assigned sirreal and unassigned ockham Jul 13, 2018

sirreal force-pushed the add/jetpack-plugin-update-tour branch 2 times, most recently from 339baa0 to d2fc725 Compare July 13, 2018 10:20

sirreal requested a review from a team July 13, 2018 12:48

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] In Progress labels Jul 13, 2018

sirreal reviewed Jul 13, 2018

View reviewed changes

sirreal requested review from joanrho and a team July 13, 2018 12:54

sirreal reviewed Jul 13, 2018

View reviewed changes

sirreal requested a review from a team July 13, 2018 12:55

sirreal added the Guided Tours label Jul 13, 2018

ockham commented Jul 13, 2018

View reviewed changes

sirreal added the [Status] In Progress label Jul 16, 2018

ockham and others added 17 commits July 19, 2018 09:44

Jetpack Checklist: Trigger Plugin Updates Tour

3d0434a

Plugins: Add ID to Plugin Item

a2e44fb

JetpackPluginUpdatesTour: Update Copy

289c95b

Add No thanks button, change CTA label

67a6a2d

Remove obsolete props

c7cf58f

Use className instead of ID

4ee2402

Use "My Plans" for Jetpack checklist return

c9427ac

Aligns with #26043

Wait and show tour

3bf168f

Query Plugins early

29324cb

Add required title props

d620eb4

DROPME: Add step update debug

7fa4f93

It's wait, not waitUntil 🤦

450a355

Use when and pluginStore to start tour

f19e4d7

Revert step changes

93d50fd

Working tour start. Committing before I break it

d9a91cc

Drop redundant JSX braces

42b3d09

Use title over completedTitle + empty title

6a7a07a

sirreal force-pushed the add/jetpack-plugin-update-tour branch from 5291247 to 6a7a07a Compare July 19, 2018 07:45

sirreal added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jul 19, 2018

sirreal approved these changes Jul 19, 2018

View reviewed changes

sirreal merged commit a3cac49 into master Jul 20, 2018

sirreal deleted the add/jetpack-plugin-update-tour branch July 20, 2018 08:48

matticbot removed the [Status] Ready to Merge label Jul 20, 2018

sirreal mentioned this pull request Aug 15, 2018

Guided Tours: Unsafe usage of onTargetDisappear #26706

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Guided Tours: Add Jetpack Plugin Autoupdate Tour #25474

Guided Tours: Add Jetpack Plugin Autoupdate Tour #25474

ockham commented Jun 13, 2018 •

edited by sirreal

Loading

matticbot commented Jun 13, 2018 •

edited by sirreal

Loading

sirreal left a comment

sirreal Jul 13, 2018

sirreal Jul 13, 2018

sirreal Jul 13, 2018

ockham Jul 13, 2018

sirreal Jul 13, 2018

ockham Jul 13, 2018

sirreal Jul 13, 2018

sirreal Jul 13, 2018

ockham Jul 13, 2018 •

edited

Loading

ockham Jul 13, 2018

ockham commented Jul 13, 2018

sirreal commented Jul 16, 2018 •

edited

Loading

sirreal commented Jul 19, 2018

sirreal commented Jul 19, 2018

sirreal commented Jul 19, 2018

joanrho commented Jul 19, 2018

Guided Tours: Add Jetpack Plugin Autoupdate Tour #25474

Guided Tours: Add Jetpack Plugin Autoupdate Tour #25474

Conversation

ockham commented Jun 13, 2018 • edited by sirreal Loading

Testing

matticbot commented Jun 13, 2018 • edited by sirreal Loading

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

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

ockham Jul 13, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ockham commented Jul 13, 2018

sirreal commented Jul 16, 2018 • edited Loading

sirreal commented Jul 19, 2018

sirreal commented Jul 19, 2018

sirreal commented Jul 19, 2018

joanrho commented Jul 19, 2018

ockham commented Jun 13, 2018 •

edited by sirreal

Loading

matticbot commented Jun 13, 2018 •

edited by sirreal

Loading

ockham Jul 13, 2018 •

edited

Loading

sirreal commented Jul 16, 2018 •

edited

Loading