jetpack icon indicating copy to clipboard operation
jetpack copied to clipboard

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

Open elliottprogrammer opened this issue 1 year ago • 2 comments

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)

Screenshot:

Screen Shot 2024-07-02 at 16 17 04

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

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?

Testing instructions:

  • TBD... Coming soon

elliottprogrammer avatar Jul 02 '24 20:07 elliottprogrammer

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[bot] avatar Jul 02 '24 20:07 github-actions[bot]

Thank you for your PR!

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

  • :white_check_mark: Include a description of your PR changes.
  • :white_check_mark: Add a "[Status]" label (In Progress, Needs Team Review, ...).
  • :white_check_mark: Add testing instructions.
  • :white_check_mark: Specify whether this PR includes any changes to data or privacy.
  • :white_check_mark: 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 :robot:


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[bot] avatar Jul 02 '24 20:07 github-actions[bot]

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

I think we can remove that sentence from the component, I don't see it anywhere in designs: CleanShot 2024-07-09 at 14 52 53@2x

For the free state card, the upgrade button is missing, but I'm not sure whether it should be part of this PR: CleanShot 2024-07-09 at 14 55 59@2x

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?

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?

robertsreberski avatar Jul 09 '24 13:07 robertsreberski

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! 🙌

elliottprogrammer avatar Jul 11 '24 04:07 elliottprogrammer

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 🤔

robertsreberski avatar Jul 11 '24 12:07 robertsreberski

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 avatar Jul 12 '24 04:07 elliottprogrammer

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!! 🙌

elliottprogrammer avatar Jul 12 '24 04:07 elliottprogrammer