#7892175 Jetpack Pro Dashboard: implement add for backup expandable content

Related to 1203940061556608-as-1204268265552043

Proposed Changes

This PR

• adds a new prop showLinkIcon to the <Card /> component
• implements add functionality to the backup expandable card
• adds focus logic and styles to the card
• handles redirecting click events when the backup is failed

Testing Instructions

Prerequisites

Since these changes are made specifically for agencies, you must set yourself(partner) as an agency – 2c49b-pb. Make sure to switch it back to the previous type.

NOTE: You can always append the live link URL with ?flags=jetpack/pro-dashboard-expandable-block to test these changes using the live link.

Instructions

1. Run add/implement-add-for-backup-expandable-content and yarn start-jetpack-cloud
2. Open http://jetpack.cloud.localhost:3000/, and you’ll be redirected to the /dashboard.
3. Expand any card where Backup is not enabled. Click on the card which says Add Backup to see your backup and verify it is getting selected. Clicking again should unselect it, and clicking on Add on any other product in the columns should add/remove the product from the list of selected products.

4. Use the keyboard to add/remove product by focusing on the card. Verify that click events are triggered only with the “Enter” & “Space” keys. The card should be focused/clickable only when the backup is not added or failed.

5. Clicking on a card with a failed backup should redirect the user to the backup page of that site.

6. We will handle the multisite scenario here – 1203940061556608-as-1204256456240543

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the “[Status] String Freeze” label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the “[Status] Needs Privacy Updates” label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?