Wp-calypso: Activity & Backups: add a simple guide to highlight how to change the filter

[lancewillett]

Add a simple "onboarding" guide to the page that highlights how to filter the contents of the page.

Context: #40058 changes the sidebar menu label to "Activity & Backups" and filters the view to only Backups.

This guide will help people understand how to undo the filter, or change it to view other types of activity items for their Atomic site.

Suggested by @annezazu

[gwwar]

What do we mean by guide here @lancewillett ?

If folks take this one, feel free to ping @automattic/manage for design/eng help

[lancewillett]

This is what I believe Anne M imagined, as an overlay on the page to guide the user to the right place in the UI to click:

I believe the simplest solution currently in Calypso might be a Guided Tour, with an arrow pointing to the active filter.

[lancewillett]

I haven't played with JITMs (just in time messages) yet — could be something there to explore, also.

[lancewillett]

An even simpler change might be to update the text in the "Welcome banner" itself — or use the same banner mechanism with a different message.

Code: https://github.com/Automattic/wp-calypso/tree/master/client/my-sites/activity/activity-log-banner/

Example:

[gwwar]

A guided tour could work, though they tend to be fragile.

I would probably avoid JITMs here since those are mostly built for upsells/misc notices, and are a bit difficult to work with if we need to update functionality past that. cc @Automattic/dotcom-manage-design if you had any thoughts here

[jancavan]

Is there any reason why we want to highlight the use of this filter?

I think, in general, the filter's look and behavior feels off. If we make it right, I don't think we need some explainer.

1. The dismiss icon looks like it'll dismiss the entire card. I think the little dismiss icons within the pills already do the job:
   

2. It looks like the filter is already being applied even though I haven't even clicked on the "Apply" button yet:

1. Why is there a "Select all"? Doesn't deselecting all yield the same results?
   

2. In general, it feels like the filter is disconnected from the results below it because it's enclosed inside a separate card.