Jetpack Cloud: Create ActivityCardList component and integrate into backups

[rcoll]

Changes proposed in this Pull Request

• This PR creates a new component to replace the Activity List on the main backups page. The new component is easily reusable and will be integrated into several other places that this list is utilized.
• Also ... translate a few strings that were not done earlier

Testing instructions

• Load up the main backups page, and click the calendar icon at the top to select a date range. Once you select a range, the view should switch to a list of activity cards.
• Play with the filterbar. Does everything work as expected? Great!

[matticbot]

Test live: https://calypso.live/?branch=add/jetpack-cloud-activity-list

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~248 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
backups      +1071 B  (+0.3%)     +248 B  (+0.3%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[enejb]

I am having a hard time reviewing the PR. Thing that would help are

• Screnshots what am I supposed be looking for.
• What URL so I start at?
  I am not sure how to know if things look correct or not.

I never managed to see a filter bar :(
I also saw the following error

TypeError: siteCapabilities.includes is not a function

Going to http://jetpack.cloud.localhost:3000/activity/example.com produced a 404 page?
Is that still expected?

This also happends after I click on the Search icon and refresh the page.

[cleacos]

It works as expected. I've selected a range, and I was able to see the list of the activities in that range. I found minor style issues in the DatePicker component when we select the 'to' date, but we can fix all the styles issues in other PR.

I left some comments

[cleacos]

This message was temporal. We could remove it and substitute it with a better design while we are waiting as Calypso does in other sections.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/3203789

Hi @rcoll, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:

• Find a backup or restore point
• This is the complete event history for your site. Filter by date range and/ or activity type.

Thank you in advance!

[a8ci18n]

Translation for this Pull Request has now been finished.