Jetpack Checklist: Make task list dynamic #31547

tyxla · 2019-03-19T10:37:52Z

Currently, the Jetpack checklist has static tasks. While we'll still have static copy and actions for each task, this PR updates the task list to use the tasks as fetched from the server.

Changes proposed in this Pull Request

Make the Jetpack checklist dynamic.

Preview

Some tasks finished:

Akismet setting up:

Akismet finished:

Akismet task not available for free plan:

Testing instructions

Checkout this branch.
Create a JN site with the latest bleeding edge.
Connect a Jetpack site (add &calypso_env=development to the connection URL to point it to Calypso).
Buy a plan.
You'll end up in the My plan page with the checklist and the plan setup screen.
Verify the backups, monitor, plugin updates and WP.com sign in tasks work well and reflect the current state of the task.
Verify Akismet task is in progress while Akismet is being setup, and it gets to a finished state when it finishes installing.
Test with a site with a free plan and verify Akismet task isn't shown.

Next steps

There are still some unfinished things, bugs and edge cases to iron out, for example:

The VP task doesn't work well yet and needs to be implemented differently for non-Rewind sites.
Task state gets cached and doesn't get reflected upon uncompletion.

Those will be fixed subsequently in further PRs and diffs.

matticbot · 2019-03-19T10:37:54Z

Test live: https://calypso.live/?branch=update/jetpack-checklist-dynamic-tasks

keoshi

This worked great in my testing! The tasklist was automatically updated after completing the tasks on it.

The only I noticed is that the progress bar doesn't auto update when turning off features, though the number does:

tyxla · 2019-03-25T13:58:52Z

Thanks for testing @keoshi!

The only I noticed is that the progress bar doesn't auto update when turning off features, though the number does:

I've tried this, and while the number took a little more to update, it eventually did update a couple of seconds after coming back to the checklist page. Any chance you just didn't wait enough for it to update?

keoshi · 2019-03-25T23:19:58Z

@tyxla Maybe I wasn't clear enough, sorry about that. What I mean is that the complete portion on the progress bar (green part) did not update after turning off features. The number (3/6) was updated correctly once I opened the task list, but the progress bar was updated only after a page refresh. The second GIF captures this scenario.

tyxla · 2019-03-26T15:06:37Z

@keoshi nice catch! This is caused by the 2 tasks that remain static. I'd very much like to make them dynamic, but that can happen after we land #31684 and have accurate information about VP/AK the setup status and progress. So that'll be addressed in a follow up PR.

keoshi · 2019-03-26T17:48:43Z

Makes total sense, Marin! 👍

tyxla · 2019-04-04T09:50:44Z

Now that we have information for the progress of the AK/VP tasks, I'll work on making those dynamic as well.

tyxla · 2019-04-04T13:34:54Z

The VP task is still under some discussion, but I've just made the Akismet one dynamic by:

Adding a QueryJetpackProductInstallStatus query component.
Making the Akismet task in progress or completed, based on the installation status:

Akismet setting up:

Akismet Finished:

Making the Akismet task available only for paid plans:

tyxla · 2019-04-04T13:49:20Z

This is ready for code and design review.

I'm satisfied with this PR - while there are things to fix and iterate on, they'll be addressed in future PRs (this is under a feature flag).

jeffgolenski · 2019-04-04T15:11:41Z

This is looking great, @tyxla. As promised, here's a quick video walkthrough. the functionality is great, I just make note of some visual changes I think we can make to improve the clarity of the checklist.

https://cloudup.com/cYvYFPwMpWH

I'll create issues with some designs for that stuff later.

enejb · 2019-04-05T04:02:13Z

@jeffgolenski Just watched the walk though. Some great work there @tyxla and @jeffgolenski!

One thing that stood out to me is that there was an activity in the activity log that looked weird. I think it had something to do with the user being added...

Do you mind creating an issue for it. Any some steps you took. Would love to be able to replicate it and fix it. Thank you @jeffgolenski

client/my-sites/plans/current-plan/jetpack-checklist/constants.js

simison · 2019-04-05T08:32:36Z

When I landed at the checklist, I wanted to turn on monitoring first:

"Do it" brought me to the setting, I toggled it on
Then it said congrats or similar, and I pressed the ping button to get back to the checklist
The checklist was still suggesting to do the monitor step
So I did... ending up to settings where monitor is toggled already on:
So I returned to the checklist as prompted, and this time I could see the monitor checked:

simison · 2019-04-05T08:34:21Z

I completed the last item on the checklist (single sign-in), and it jumped above the other un-finished items. Suppose this is expected, just thought to mention:

simison

Left a couple minor language notes and some UX observations.

Code looks good!

simison · 2019-04-05T08:42:46Z

client/my-sites/plans/current-plan/jetpack-checklist/index.js

-						title={ translate( 'WordPress.com sign in' ) }
-					/>
+					{ isPaidPlan && productInstallStatus && (
+						<Task


As a future iteration, it might make sense to try get this into JETPACK_CHECKLIST_TASKS so that there's only one place where to look for these.

tyxla · 2019-04-05T08:59:12Z

Do you mind creating an issue for it. Any some steps you took. Would love to be able to replicate it and fix it.

Sure thing @enejb - see #32060.

tyxla · 2019-04-05T08:59:45Z

Thanks for the reviews and testing everyone 🙌

Going to address some minor suggestions by Mikael and then ship.

tyxla · 2019-04-05T09:26:49Z

When I landed at the checklist, I wanted to turn on monitoring first:

"Do it" brought me to the setting, I toggled it on

Then it said congrats or similar, and I pressed the ping button to get back to the checklist

The checklist was still suggesting to do the monitor step

So I did... ending up to settings where monitor is toggled already on:

So I returned to the checklist as prompted, and this time I could see the monitor checked:

Yeah, good catch. I've seen that too, with other tasks - seems like there are some caching problems with the existing tasks - I'm going to look at resolving those in another PR.

tyxla added Jetpack [Pri] Normal Schedule for the next available opportuinity. [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. NUX Checklist [Type] Feature progress labels Mar 19, 2019

tyxla self-assigned this Mar 19, 2019

tyxla requested a review from a team March 19, 2019 10:37

keoshi reviewed Mar 25, 2019

View reviewed changes

tyxla force-pushed the update/jetpack-checklist-dynamic-tasks branch from f89f5e8 to 6b867c6 Compare April 4, 2019 09:48

tyxla added [Status] In Progress and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Apr 4, 2019

Jetpack Checklist: Make task list dynamic

7e13f66

tyxla force-pushed the update/jetpack-checklist-dynamic-tasks branch from 6b867c6 to 7e13f66 Compare April 4, 2019 12:56

tyxla added 3 commits April 4, 2019 16:21

Components: Add QueryJetpackProductInstallStatus query component

427867c

Jetpack Checklist: Make Akismet task dynamic

dff20e0

Jetpack Checklist: Display akismet task only for paid plans

365f4dc

tyxla added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR and removed [Status] In Progress labels Apr 4, 2019

tyxla requested a review from a team April 4, 2019 13:48

jeffgolenski approved these changes Apr 4, 2019

View reviewed changes

tyxla 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 Apr 4, 2019

simison reviewed Apr 5, 2019

View reviewed changes

client/my-sites/plans/current-plan/jetpack-checklist/constants.js Outdated Show resolved Hide resolved

simison reviewed Apr 5, 2019

View reviewed changes

client/my-sites/plans/current-plan/jetpack-checklist/constants.js Outdated Show resolved Hide resolved

simison approved these changes Apr 5, 2019

View reviewed changes

simison reviewed Apr 5, 2019

View reviewed changes

tyxla mentioned this pull request Apr 5, 2019

Activity Log: Empty "user created" action upon fresh Jetpack connection #32060

Closed

tyxla added 2 commits April 5, 2019 12:09

Jetpack Checklist: Add context to translations

817726c

Jetpack Checklist: Rename Jetpack Monitor

0c11570

tyxla 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 Apr 5, 2019

tyxla merged commit 003bdd3 into master Apr 5, 2019

tyxla deleted the update/jetpack-checklist-dynamic-tasks branch April 5, 2019 10:05

matticbot removed the [Status] Ready to Merge label Apr 5, 2019

This was referenced Apr 15, 2019

Jetpack Checklist: Move all tasks to constants #32272

Merged

Checklist: Add 'pending' State to steps #25935

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Jetpack Checklist: Make task list dynamic #31547

Jetpack Checklist: Make task list dynamic #31547

tyxla commented Mar 19, 2019 •

edited

Loading

matticbot commented Mar 19, 2019

keoshi left a comment

tyxla commented Mar 25, 2019

keoshi commented Mar 25, 2019

tyxla commented Mar 26, 2019

keoshi commented Mar 26, 2019

tyxla commented Apr 4, 2019

tyxla commented Apr 4, 2019

tyxla commented Apr 4, 2019

jeffgolenski commented Apr 4, 2019

enejb commented Apr 5, 2019

simison commented Apr 5, 2019

simison commented Apr 5, 2019

simison left a comment •

edited

Loading

simison Apr 5, 2019

tyxla Apr 5, 2019

tyxla commented Apr 5, 2019

tyxla commented Apr 5, 2019

tyxla commented Apr 5, 2019

Jetpack Checklist: Make task list dynamic #31547

Jetpack Checklist: Make task list dynamic #31547

Conversation

tyxla commented Mar 19, 2019 • edited Loading

Changes proposed in this Pull Request

Preview

Testing instructions

Next steps

matticbot commented Mar 19, 2019

keoshi left a comment

Choose a reason for hiding this comment

tyxla commented Mar 25, 2019

keoshi commented Mar 25, 2019

tyxla commented Mar 26, 2019

keoshi commented Mar 26, 2019

tyxla commented Apr 4, 2019

tyxla commented Apr 4, 2019

tyxla commented Apr 4, 2019

jeffgolenski commented Apr 4, 2019

enejb commented Apr 5, 2019

simison commented Apr 5, 2019

simison commented Apr 5, 2019

simison left a comment • edited Loading

Choose a reason for hiding this comment

simison Apr 5, 2019

Choose a reason for hiding this comment

tyxla Apr 5, 2019

Choose a reason for hiding this comment

tyxla commented Apr 5, 2019

tyxla commented Apr 5, 2019

tyxla commented Apr 5, 2019

tyxla commented Mar 19, 2019 •

edited

Loading

simison left a comment •

edited

Loading