Protect card: Add the Scan/Threats status column (with tooltip) #38165

elliottprogrammer · 2024-07-02T20:17:36Z

This PR populates the Scan/Threats section on the My Jetpack Protect card with the current scan status from Protect.

See Design P2: p1HpG7-rFA-p2 (Figma link is within the post)

Screenshots are shown below in the testing instructions.

Proposed changes:

Move the info tooltip into it's own component.
Create a component for the Scan/Threats section, rendering the current Protect scan status, per Figma design

Note: Adding a "loading/currently scanning" state in the My Jetpack Protect product card is not included in this PR and will be handled in a future PR. We need to add the Scan API js-package first.

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Project Thread: pbNhbs-aP6-p2

Does this pull request change what data or activity we track or use?

No

Testing instructions:

You can reference the link to the Figma design in the design P2 post: p1HpG7-rFA-p
(tampermonkey does not shorthand the direct Figma link for some reason, so you'll need to get it from the design post).

Checkout this branch via the Jetpack Beta plugin or your local dev environment (In this case I would suggest Jetpack Beta so you can more easily start with a fresh site)
- In the Jetpack Beta plugin, run this branch on the Jetpack plugin and the Protect Plugin
Open your JN site to get the SSH credentials, then SSH into the JN site.
OR: Edit the plugin file in the editor by going to: /wp-admin/plugin-editor.php
Edit the Akismet plugin file to trigger a threat:
- Edit the akismet.php file: vim htdocs/wp-content-plugins/akismet/akismet.php
- In the top comment section, change the "Version:" to: 3.1.4
- Also on line 40, change it to: define( 'AKISMET_VERSION', '3.1.4' );
Open the My Jetpack page.
Look at the Protect product card. The "Scan" status column should show "Off", since the site is not connected: (See screenshot):
Click "Protect" in the Jetpack menu to go to the Protect page. Select the Free plan and wait for the scan to complete.
Note: Adding a "loading/currently scanning" state in the My Jetpack Protect product card is not included in this PR and will be handled in a future PR.
Once the scan has completed, go to My Jetpack (or refresh the My Jetpack page).
You should see 1 Threat in the Protect product card and it should match the Figma design.
Now edit the Akismet plugin file again (akismet.php):
Add the following line anywhere inside the file, and then save:
- $eicar = "X5O!P%@AP[4\PZX54(P^)7CC)7}$EICAR-CRITICAL-ANTIVIRUS-TEST-FILE!$H+H*";
Go to the Protect page. Click "Upgrade Jetpack Protect now" and purchase with credits.
After upgrade purchased, Protect should be scanning the site again. Wait for the scan to complete.
Again note: adding a "loading/currently scanning" state in the My Jetpack Protect product card is not included in this PR and will be handled in a future PR.
Once scan is completed, go to My Jetpack and view the Protect card. It should show 1 threat (1 Critical threat), with a tooltip. (See screenshot):
Go to the protect page, and click to "Auto fix" the threat. Wait for the threat fix to complete successfully.
Once the threat is fixed, go to the My Jetpack page. View the protect card. It should show "Secure". (See screenshot):
Go to wordpress.com Store Admin and remove the Scan subscription you purchased for the site.
Go back to the My Jetpack page and view the Protect card. It should say "Partial" with tooltip (See screenshot):
Go to the Plugins page, and deactivate Protect.
Go back to My Jetpack and the Protect card should Show "Off" (See screenshot):

…tate.

…licked.

github-actions · 2024-07-02T20:18:21Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the add/my-protect-card-scan-threats branch.

To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/my-protect-card-scan-threats

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2024-07-02T20:18:30Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Once your PR is ready for review, check one last time that all required checks appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team Review" label and ask someone from your team review the code. Once reviewed, it can then be merged.
If you need an extra review from someone familiar with the codebase, you can update the labels from "[Status] Needs Team Review" to "[Status] Needs Review", and in that case Jetpack Approvers will do a final review of your PR.

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen daily.
WoA releases happen weekly.
Releases to self-hosted sites happen monthly. The next release is scheduled for August 6, 2024 (scheduled code freeze on August 5, 2024).