Add a First View introduction overlay to the Stats section

[mjuhasz]

This PR adds a First View introduction overlay to the Stats section.

The First View introduction overlay is shown to users when they first visit the Stats section.

Clicking the "Got it!" button will hide the First View and show the Stats section.

If the "Don't show this again" checkbox is checked, the First View will never been shown to the user again. If it is not checked, the First View will be shown whenever the user visits the Stats section again.

If the "Don't show this again" checkbox was checked, you can delete the calypso_store IndexedDB table in order to reset the Redux state and allow the First View to be shown again.

Testing notes:

• All browsers (desktop and mobile) should work
• Either navigating to the stats section via the sidebar or directly accessing a /stats URL will show the first view
• Clicking "Got it!" should hide the first view
  • If the "Don't show this again" checkbox is checked, the first view will never reappear (even after a reload of Calypso)
  • If the "Don't show this again" checkbox is not checked, the first view will reappear the next time the stats section is viewed
• Navigating away to a different section and then back to stats without clicking "Got it!" should show the first view again

Support for other sections will be possible once #6651 is completed (Reduxifying <Main>).

Test live: https://calypso.live/?branch=add/stats-first-view

[shaunandrews]

I pushed some design changes that look like this:

I'm still not done with it (I gotta figure out what to do with the illustration), but I think using a card really improves the contrast and legibility of the text.

[mattsherman]

Okay, small update... the "half-loaded" state issue that @shaunandrews found only happens in Safari Private Mode. I believe this is because IndexedDB and localStorage are not available when in private mode.

[shaunandrews]

Here's where I ended up with the design changes:

[ehg]

👍 from me, @mcsf could you have a quick look at the actionLog bits, to make sure we're not going to break anything with #6417 :)

[mcsf]

We should be using the proper ROUTE_SET constant from action-types, rather than the string representation.

While we're here: if lodash's filter is only used in its filter( collection, predicate ) form, then it could be replaced with the native implementation: getActionLog( state ).filter( entry => … ). An other usage would be the convenient: filter( getActionLog( state ), { type: ROUTE_SET } ).

[mjuhasz]

Good point, fixed!

[mcsf]

could you have a quick look at the actionLog bits, to make sure we're not going to break anything

Nothing jumps out. This PR merely consumes getActionLog, and #6417's intervention to action-log/reducer ended up only allowing overrides but not implementing any for ROUTE_SET — meaning we keep collecting the same actions that this PR expects.

[ehg]

localStorage is on the window object, so this would break SSR constraints. Do we actually want to test for localStorage here? We use localForage, I wonder if there's an established way to check elsewhere in Calypso.

Also, putting this in the selector worries me.

[mattsherman]

@ehg We will pull this back out of the PR and tackle it in a separate PR where we can discuss more and come to the best solution, taking into account things like SSR. Thanks for pointing this out and questioning it!

[mjuhasz]

Marking this as Ready to Merge as per feedback (thumbs-up) from reviewers above. Thank you for your contribution!