Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 40 commits into from
Jul 12, 2024

Conversation

elliottprogrammer
Copy link
Contributor

@elliottprogrammer elliottprogrammer commented Jul 2, 2024

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):
    Screen Shot on 2024-07-05 at 11-22-27
  • 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.
    Screen Shot on 2024-07-10 at 23-36-40
  • 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):
    Screen Shot on 2024-07-04 at 15-03-56
  • 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):
    Screen Shot on 2024-07-05 at 12-37-54
  • 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):
    Screen Shot on 2024-07-05 at 12-45-42
  • Go to the Plugins page, and deactivate Protect.
  • Go back to My Jetpack and the Protect card should Show "Off" (See screenshot):
    Screen Shot on 2024-07-05 at 12-50-39

@elliottprogrammer elliottprogrammer self-assigned this Jul 2, 2024
Copy link
Contributor

github-actions bot commented Jul 2, 2024

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

Copy link
Contributor

github-actions bot commented Jul 2, 2024

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).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.


Backup plugin:

  • Next scheduled release: August 6, 2024.
  • Scheduled code freeze: July 29, 2024.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.


Boost plugin:

  • Next scheduled release: August 6, 2024.
  • Scheduled code freeze: July 29, 2024.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.


Search plugin:

  • Next scheduled release: August 6, 2024.
  • Scheduled code freeze: July 29, 2024.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.


Social plugin:

  • Next scheduled release: August 6, 2024.
  • Scheduled code freeze: July 29, 2024.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.


Starter Plugin plugin:

  • Next scheduled release: August 6, 2024.
  • Scheduled code freeze: July 29, 2024.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.


Protect plugin:

  • Next scheduled release: August 6, 2024.
  • Scheduled code freeze: July 29, 2024.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.


Videopress plugin:

  • Next scheduled release: August 6, 2024.
  • Scheduled code freeze: July 29, 2024.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.


Migration plugin:

  • Next scheduled release: August 6, 2024.
  • Scheduled code freeze: July 29, 2024.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

@github-actions github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Jul 2, 2024
@elliottprogrammer
Copy link
Contributor Author

For the testing plan: we can also modify plugin files in WP Admin directly (/wp-admin/plugin-editor.php)

Oh nice! I forgot about that! Ok, thanks! 👍

I think we can remove that sentence from the component (the product description), I don't see it anywhere in designs: !

Ok yeah, I was initially going to handle that in a future PR, but I went ahead and removed it in this PR. 👍

For the free state card, the upgrade button is missing, but I'm not sure whether it should be part of this PR:

Yeah, I was also going to tackle that in a future PR too, but I went ahead and handled it here is this PR too. 👍

I couldn't get free version to show "Treats" information (following the testing plan) - I only see "Partial" information. Have I done something wrong or is it expected? If so, can we add point in the testing plan to be able to see one Treat in free version card?

No that is not expected. I updated the testing instructions slightly to first only change the Akismet version (for the free scan), and then add the $eicar signature to trigger a critical threat (for the paid scan). I performed the updated steps myself and it worked as expected.

Generally the PR tests well, and I see how complex it is to operate on these data. If it would help, we could move some of the logic that happens in the component to separate hook or class-initializer.php to make the view part simpler - what are your thoughts on this?

Yeah sure, I agree we could try to further simplify, but I think the effort should be applied after I get most all the overall functionality & logic of the entire card in place. You see, I say this just because while I'm building this out, I'm often changing or even simplifying some things from the PR before it, and additionally, my main goal at first is to try to get a basic MVP done and in front of users as quickly as possible. Then after that, we can iterate and improve on it, over and over as much as we want. Thats was my thinking anyway. 🤷‍♂️ 😉


Thanks so much for the review @robertsreberski! I've addressed all your feedback. Would you mind taking a look again to confirm you don't see any other issues? Much appreciated! 🙌

Copy link
Contributor

@robertsreberski robertsreberski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks a lot better thanks!

Lovely that you collaborated with @CodeyGuyDylan on translation strings - the final idea is really neat!

I've left a bit more comments, but the code is almost there 🏁

@@ -31,7 +31,7 @@ type ScanItem = {
checked: boolean;
name: string;
slug: string;
threats: string[];
threats: object[];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we define the object here, or the structure is unknown?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, will do. 👍


&__status-text {
margin-right: 1px;
letter-spacing: -0.24px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need such specific spacing?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was exactly per the design. I'll leave a comment. 👍


&__heading {
font-size: var(--font-body-extra-small);
color: var(--jp-gray-100);
font-weight: 500;
margin-bottom: 10px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we reuse --spacing-base?

};

const noDescription = useCallback( () => null, [] );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can leave a comment for the future reference that if we gonna remove description to more cards, we should consider extending <ProductCard /> functionality to support that.

Clever workaround here though! 🙌

if ( is_array( $purchases_data ) && ! empty( $purchases_data ) ) {
foreach ( $purchases_data as $purchase ) {
// Protect is available as jetpack_scan product and as part of the Security or Complete plan.
if ( strpos( $purchase->product_slug, 'jetpack_scan' ) !== false || str_starts_with( $purchase->product_slug, 'jetpack_security' ) || str_starts_with( $purchase->product_slug, 'jetpack_complete' ) ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do we use strpos() for jetpack_scan product slug, but str_starts_with() for others?

Also, we could break the condition down to multiple lines, can be more readable that way 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do we use strpos() for jetpack_scan product slug, but str_starts_with() for others?

I'm not quite sure, to be honest... This is just exactly how it is also done in many other of the product classes, so I just copied it over and did the same (just to play it safe). More specifically, the classes for Anti-spam, Boost, Creator, Search, Social, Stats, VideoPress, and now Protect all do it exactly like this in the has_paid_plan_for_product() function. 🤷‍♂️

Yes good idea, I'll break it down to be more readable. 👍

@robertsreberski
Copy link
Contributor

Also, thank you @elliottprogrammer for clarifying the instructions regarding testing. I do get 1 treat now on the free version.
However, I do have a question. When I upgrade, and the initial scan is ongoing, should I see "Secure" state in the Protect card?

CleanShot 2024-07-11 at 14 01 35@2x

From what I understand, the previous treat (wrong version of Akismet) still persists on the website, why is it secure then?

It might be a question to the Scan team, but maybe you have an idea 🤔

@elliottprogrammer
Copy link
Contributor Author

Also, thank you @elliottprogrammer for clarifying the instructions regarding testing. I do get 1 treat now on the free version. However, I do have a question. When I upgrade, and the initial scan is ongoing, should I see "Secure" state in the Protect card?

(See image above)

From what I understand, the previous treat (wrong version of Akismet) still persists on the website, why is it secure then?

It might be a question to the Scan team, but maybe you have an idea 🤔

@robertsreberski,
Yeah, I'm not quite sure why it does this.
However, in an upcoming future PR when we incorporate a realtime loading/currently-scanning state and realtime data update, I believe the behavior you describe will no longer be apparent. 👍

@elliottprogrammer
Copy link
Contributor Author

Code looks a lot better thanks!

Lovely that you collaborated with @CodeyGuyDylan on translation strings - the final idea is really neat!

I've left a bit more comments, but the code is almost there 🏁

Thanks again for the review @robertsreberski! I've addressed your additional feedback. Let me know if you see anything else or have any other suggestions for improvement. Thanks Robert!! 🙌

Copy link
Contributor

@robertsreberski robertsreberski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on the updates @elliottprogrammer ! They look very good, and the PR tests well. 🟢

Base automatically changed from add/mj-protect-card-last-scan-time to trunk July 12, 2024 14:30
@elliottprogrammer elliottprogrammer dismissed robertsreberski’s stale review July 12, 2024 14:30

The base branch was changed.

@github-actions github-actions bot added [Plugin] Backup A plugin that allows users to save every change and get back online quickly with one-click restores. [Plugin] Boost A feature to speed up the site and improve performance. [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Plugin] Migration [Plugin] Protect A plugin with features to protect a site: brute force protection, security scanning, and a WAF. [Plugin] Search A plugin to add an instant search modal to your site to help visitors find content faster. [Plugin] Social Issues about the Jetpack Social plugin [Plugin] Starter Plugin [Plugin] VideoPress A standalone plugin to add high-quality VideoPress videos to your site. labels Jul 12, 2024
@elliottprogrammer elliottprogrammer merged commit 3f7b2cd into trunk Jul 12, 2024
70 checks passed
@elliottprogrammer elliottprogrammer deleted the add/my-protect-card-scan-threats branch July 12, 2024 14:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] My Jetpack [Plugin] Backup A plugin that allows users to save every change and get back online quickly with one-click restores. [Plugin] Boost A feature to speed up the site and improve performance. [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Plugin] Migration [Plugin] Protect A plugin with features to protect a site: brute force protection, security scanning, and a WAF. [Plugin] Search A plugin to add an instant search modal to your site to help visitors find content faster. [Plugin] Social Issues about the Jetpack Social plugin [Plugin] Starter Plugin [Plugin] VideoPress A standalone plugin to add high-quality VideoPress videos to your site.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants