-
Notifications
You must be signed in to change notification settings - Fork 800
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
ThreatsDataViews: Add ToggleGroupControl #39901
ThreatsDataViews: Add ToggleGroupControl #39901
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. Follow this PR Review Process:
Still unsure? Reach out in #jetpack-developers for guidance! Protect plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. |
a2f44c1
to
cec6f1e
Compare
388600f
to
25fb234
Compare
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.
Idea - could we extract the <ThreatsStatusToggleGroupControl>
component into a separate file?
It could be passed data: Threats[]
and view: View
properties, and compute/memoize its own values for counts/selected/etc.
It could also accept the existing onChangeView: ( newView: View ) => void
callback, and call it with the full updated view objects on click.
The objective being to keep this main index file clean and straightforward, and isolate this custom functionality in its own file. Using the data/view/onChangeView properties directly essentially make it like a mini plugin/extension for the DataViews.
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.
Second idea - since these are experimental components, what do you think about wrapping this component with a try/catch
or React Error Boundary?
This will not help in the case of import errors, but if any breaking changes are missed, it will prevent the component from crashing the entire scan screen.
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.
Minor - we could update the filters
property passed to these story components to use the operator: 'is any'
and value: [ 'current' ]
approach, to ensure the filter is shown to be active on page load.
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.
Works well! Left comments on organizational approach but otherwise looks pretty much good to go 👍 👍
projects/js-packages/components/components/threats-data-views/index.tsx
Outdated
Show resolved
Hide resolved
projects/js-packages/components/components/threats-data-views/index.tsx
Outdated
Show resolved
Hide resolved
projects/js-packages/components/components/threats-data-views/index.tsx
Outdated
Show resolved
Hide resolved
header={ | ||
<ThreatsStatusToggleGroupControl | ||
data={ data } | ||
view={ view } | ||
onChangeView={ onChangeView } | ||
/> | ||
} |
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.
clean! 👍
...js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
Outdated
Show resolved
Hide resolved
Nice updates!
|
…index.tsx Co-authored-by: Nate Weller <[email protected]>
…index.tsx Co-authored-by: Nate Weller <[email protected]>
…index.tsx Co-authored-by: Nate Weller <[email protected]>
…threats-status-toggle-group-control.tsx Co-authored-by: Nate Weller <[email protected]>
Description
Adds a toggle control the
ThreatsDataViews
component header to allow for preset filters (easily toggling between active and historic threats).Proposed changes:
ToggleGroupControl
component to the header of theThreatsDataViews
Other information:
Jetpack product discussion
Does this pull request change what data or activity we track or use?
Testing instructions:
ToggleGroupControl
header content is positioned and styled according to designs in both Table and List views and that the filter are appropriately applied and unapplied when expected.Screenshots