-
Notifications
You must be signed in to change notification settings - Fork 798
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 Last scan time (with tooltip) based on plugin state. #38091
Conversation
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
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. Jetpack plugin: The Jetpack plugin has different release cadences depending on the platform:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Backup plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Boost plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Search plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Social plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Starter Plugin plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Protect plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Videopress plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Migration plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
With the Popover component, it doesn't close when I click outside of it, and it does close when I click inside of it. The useOutsideAlerter hook is good to handle this
popover-issuue.mov
Additionally, the testing instructions say to make sure it works correctly. I am not sure if this encompasses the content of the Popover but the numbers inside are incorrect
We might want to hide the "Last scanned" text entirely until we have a scan time to show 🤔
I'm seeing a responsiveness issue on medium-sized screen:
We might want to increase the minimum width of these cards as we add more information to them. It's a grid so it should scale nicely if we do that
projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/index.tsx
Outdated
Show resolved
Hide resolved
...ages/my-jetpack/_inc/components/product-cards-section/protect-card/protect-value-section.tsx
Outdated
Show resolved
Hide resolved
...ages/my-jetpack/_inc/components/product-cards-section/protect-card/protect-value-section.tsx
Outdated
Show resolved
Hide resolved
...ages/my-jetpack/_inc/components/product-cards-section/protect-card/protect-value-section.tsx
Outdated
Show resolved
Hide resolved
...ages/my-jetpack/_inc/components/product-cards-section/protect-card/protect-value-section.tsx
Outdated
Show resolved
Hide resolved
projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/style.scss
Outdated
Show resolved
Hide resolved
projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/style.scss
Outdated
Show resolved
Hide resolved
projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/style.scss
Outdated
Show resolved
Hide resolved
projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/style.scss
Outdated
Show resolved
Hide resolved
Thanks for the excellent review @CodeyGuyDylan, I've addressed all feedback. 🙌 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for all of the changes! It works much better for me. I did have some more comments but not nearly as many as last time 🤔 I think this is very close
Also I know we talked in slack but putting here for visibility that I'm not sure we should show the plugins & themes
data in the event that the user has Protect active but no scan data is available due to lack of site connection or if the initial scan is still running
...ages/my-jetpack/_inc/components/product-cards-section/protect-card/protect-value-section.tsx
Show resolved
Hide resolved
...ages/my-jetpack/_inc/components/product-cards-section/protect-card/protect-value-section.tsx
Outdated
Show resolved
Hide resolved
const hideTooltip = useCallback( () => { | ||
// Don't hide the tooltip here if it's the toolTip button that was clicked (the button | ||
// becoming the document's activeElement). Instead let toggleTooltip() handle the closing. | ||
if ( useTooltipRef.current && ! useTooltipRef.current.contains( document.activeElement ) ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks pretty similar to the useOutsideAlerter
hook that already exists in this project, was there a reason it didn't work for this use-case?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, there is a feature already built into the Popover that detects when the focus is triggered outside of the popover, and when that happens, the onClose
function is fired. The onClose
is a user defined function via the onClose
prop of the Popover.
So in other words, the feature is already built into the Popover, I just had to modify the onClose
behavior slightly by telling it to not treat clicking the info-icon button as an outside focus event.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah ok I see, thank you for taking care of that!
projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/style.scss
Outdated
Show resolved
Hide resolved
), | ||
}, | ||
scanThreatsTooltip: | ||
hasProtectPaidPlan && numThreats |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I know this isn't going to be implemented until the next PR, but we'll want a case for a user that does not have the protect paid plan but does have threats. Right now if that were the case, the tooltip would say that all appears well even though they have threats
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah yes thanks. Yeah, this will implemented in the next PR. 👍
Thanks @CodeyGuyDylan! Yeah, I've addressed your additional feedback items, and I removed the "Plugins & Themes" text when the plugin is active but there is no scan data available (b/c initial scan in progress or site disconnected, etc). 👍 |
const hideTooltip = useCallback( () => { | ||
// Don't hide the tooltip here if it's the toolTip button that was clicked (the button | ||
// becoming the document's activeElement). Instead let toggleTooltip() handle the closing. | ||
if ( useTooltipRef.current && ! useTooltipRef.current.contains( document.activeElement ) ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah ok I see, thank you for taking care of that!
text: sprintf( | ||
/* translators: %1$d is the number of plugins and %2$d is the number of themes installed on the site. */ | ||
__( | ||
'Your site has %1$d plugins and %2$d themes lacking security measures. Improve your site’s safety by adding protection at no cost.', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This PR is the first PR in a series that will add/show various pieces of information on the Protect product card in My Jetpack. In this PR we will show:
See Design P2: p1HpG7-rFA-p2 (Figma link is within the post)
Screenshots:
Protect plugin Not active:
Protect plugin Active:
Note: The "Scan", "Auto-Firewall", and "Logins-Blocked" sections are currently empty and not functional. Those will be added to in upcoming PR's.
Proposed changes:
window.myJetpackInitialState
object.protectStatus
property to thewindow.myJetpackInitialState
object.protect-status
package.Other information:
Jetpack product discussion
Project Thread: pbNhbs-aP6-p2
Does this pull request change what data or activity we track or use?
No
Testing instructions: