Checklist: Untangle server and client list merging

[ockham]

Simpler version of #25924 that retains using arrays for tasks (since @sirreal convinced me it's safer to use arrays for ordered lists 😉 ). This also has the benefit of being less invasive.

Rationale: We're going to want to insert 'pending' state for individual checklist items for https://github.com/Automattic/wp-calypso/projects/70, so it helps to be able to inject those at connect() level. This PR untangles things somewhat to prepare for that.

Note that both onboardingChecklist.js and jetpack-checklist.js (yes, we should harmonize filenames, too) had a function duplicated (named onboardingTasks and jetpackTasks(), respectively). At closer look, that function was essentially merging two objects, and sorting them by key according to an array. I've reshuffled that functionality so that it makes more sense now IMO.

Testing Instructions

(Copied from #25924 -- relevant bits only)

Verify that the checklist still works, both for WP.com, and JP sites

• Navigate to http://calypso.localhost:3000/checklist/:site
• Verify that the loading state (pulsating placeholders) works fine: no errors, and it's only transient 🙂
• Try completing a couple of steps. Verify that they are correctly marked as complete afterwards, and that their completions status persists across a reload.
• For WP.com sites (!), verify that you can also tick off tasks even without actually completing them by clicking the circle on the left hand side (which will turn into a green checkmark). Verify that this also persists across a reload.

Verify that the ChecklistBanner component (in the stats section) still works:

(WP.com only)

Apply the following patch below for easier testing

diff --git a/client/my-sites/stats/checklist-banner/index.jsx b/client/my-sites/stats/checklist-banner/index.jsx
index d405a13..0cfedd0 100644
--- a/client/my-sites/stats/checklist-banner/index.jsx
+++ b/client/my-sites/stats/checklist-banner/index.jsx
@@ -154,10 +154,6 @@ export class ChecklistBanner extends Component {
                const task = this.getNextTask();
                const percentage = Math.round( ( completed / total ) * 100 ) || 0;
 
-               if ( ! this.canShow() ) {
-                       return null;
-               }
-
                return (
                        <Card className="checklist-banner">
                                { siteId && <QuerySiteChecklist siteId={ siteId } /> }

Navigate to http://calypso.localhost:3000/stats/day/:site

Click the 'Do It' button, and verify that it takes you to the correct destination and starts a Guided Tour.
Click the 'View your checklist' link, and verify that it takes you to the checklist.

[matticbot]

Test live: https://calypso.live/?branch=simplify/checklist-steps

[ockham]

Thanks for a21fbd4! I guess we should probably do the same with onboardingChecklist.js...

[sirreal]

Why is this prop connected? It's not clear to me how it's used here.

[ockham]

Ouch, this whole file shouldn't even be here!

[sirreal]

Thanks for a21fbd4! I guess we should probably do the same with onboardingChecklist.js...

👍 Yep, I think so. Didn't have time and wanted to run it by you first.

[sirreal]

I think this is good to go. I'm writing up the results of some related discussion as an issue and will share soon. Maybe we should get some testing help from other folks as I've gotten my hands dirty here.