ThreatsDataViews: Add ToggleGroupControl #39901
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: minor | ||
| Type: changed | ||
|
|
||
| Add ToggleGroupControl to ThreatsDataViews for easily toggling between Active and Historical threats |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
There was a problem hiding this comment. Minor - we could update the |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -42,7 +42,6 @@ const data = [ | |
| type: 'plugin' as const, | ||
| }, | ||
| fixedIn: '3.2.4', | ||
| }, | ||
| ]; | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| import { type Threat, type ThreatStatus } from '@automattic/jetpack-scan'; | ||
| import { | ||
| __experimentalToggleGroupControl as ToggleGroupControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis | ||
| __experimentalToggleGroupControlOption as ToggleGroupControlOption, // eslint-disable-line @wordpress/no-unsafe-wp-apis | ||
| } from '@wordpress/components'; | ||
| import { type View } from '@wordpress/dataviews'; | ||
| import { useMemo, useCallback } from '@wordpress/element'; | ||
| import { __, sprintf } from '@wordpress/i18n'; | ||
| import styles from './styles.module.scss'; | ||
|
|
||
| /** | ||
| * ToggleGroupControl component for filtering threats by status. | ||
| * @param {object} props - Component props. | ||
| * @param { Threat[]} props.data - Threats data. | ||
| * @param { View } props.view - The current view. | ||
| * @param { Function } props.onChangeView - Callback function to handle view changes. | ||
| * @return {JSX.Element|null} The component or null. | ||
| */ | ||
| export default function ThreatsStatusToggleGroupControl( { | ||
| data, | ||
| view, | ||
| onChangeView, | ||
| }: { | ||
| data: Threat[]; | ||
| view: View; | ||
| onChangeView: ( newView: View ) => void; | ||
| } ): JSX.Element { | ||
| /** | ||
| * Compute values from the provided threats data. | ||
| * | ||
| * @member {number} activeThreatsCount - Count of active threats. | ||
| * @member {number} historicThreatsCount - Count of historic threats. | ||
| */ | ||
| const { | ||
| activeThreatsCount, | ||
| historicThreatsCount, | ||
| }: { | ||
| activeThreatsCount: number; | ||
| historicThreatsCount: number; | ||
| } = useMemo( () => { | ||
| return data.reduce( | ||
| ( acc, threat ) => { | ||
| if ( threat.status ) { | ||
| if ( threat.status === 'current' ) { | ||
| acc.activeThreatsCount++; | ||
| } else { | ||
| acc.historicThreatsCount++; | ||
| } | ||
| } | ||
| return acc; | ||
| }, | ||
| { | ||
| activeThreatsCount: 0, | ||
| historicThreatsCount: 0, | ||
| } | ||
| ); | ||
| }, [ data ] ); | ||
|
|
||
| /** | ||
| * Callback function to handle the status change filter. | ||
| * | ||
| * @param {string} newStatus - The new status filter value. | ||
| */ | ||
| const onStatusFilterChange = useCallback( | ||
| ( newStatus: string ) => { | ||
| const updatedFilters = view.filters.filter( filter => filter.field !== 'status' ); | ||
|
|
||
| if ( newStatus === 'active' ) { | ||
| updatedFilters.push( { | ||
| field: 'status', | ||
| operator: 'isAny', | ||
| value: [ 'current' ], | ||
| } ); | ||
| } else if ( newStatus === 'historic' ) { | ||
| updatedFilters.push( { | ||
| field: 'status', | ||
| operator: 'isAny', | ||
| value: [ 'fixed', 'ignored' ], | ||
| } ); | ||
| } | ||
|
|
||
| onChangeView( { | ||
| ...view, | ||
| filters: updatedFilters, | ||
| } ); | ||
| }, | ||
| [ view, onChangeView ] | ||
| ); | ||
|
|
||
| /** | ||
| * Memoized function to determine if a status filter is selected. | ||
| * | ||
| * @param {Array} threatStatuses - List of threat statuses. | ||
| */ | ||
| const isStatusFilterSelected = useMemo( | ||
| () => ( threatStatuses: ThreatStatus[] ) => | ||
| view.filters.some( | ||
| filter => | ||
| filter.field === 'status' && | ||
| Array.isArray( filter.value ) && | ||
| filter.value.length === threatStatuses.length && | ||
| threatStatuses.every( threatStatus => filter.value.includes( threatStatus ) ) | ||
| ), | ||
| [ view.filters ] | ||
| ); | ||
|
|
||
| try { | ||
| if ( ! ( activeThreatsCount + historicThreatsCount ) ) { | ||
| return null; | ||
| } | ||
|
|
||
| let selectedValue = ''; | ||
| if ( isStatusFilterSelected( [ 'current' ] ) ) { | ||
| selectedValue = 'active'; | ||
| } else if ( isStatusFilterSelected( [ 'fixed', 'ignored' ] ) ) { | ||
| selectedValue = 'historic'; | ||
| } | ||
|
|
||
dkmyta marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| return ( | ||
| <ToggleGroupControl | ||
| className={ styles[ 'toggle-group-control' ] } | ||
| value={ selectedValue } | ||
| onChange={ onStatusFilterChange } | ||
| __nextHasNoMarginBottom | ||
| > | ||
| <ToggleGroupControlOption | ||
| value="active" | ||
| label={ | ||
| <span className={ styles[ 'toggle-group-control__option' ] }> | ||
| { sprintf( | ||
| /* translators: %d: number of active threats */ __( | ||
| 'Active threats (%d)', | ||
| 'jetpack' | ||
| ), | ||
| activeThreatsCount | ||
| ) } | ||
| </span> | ||
| } | ||
| /> | ||
| <ToggleGroupControlOption | ||
| value="historic" | ||
| label={ | ||
| <span className={ styles[ 'toggle-group-control__option' ] }> | ||
| { sprintf( | ||
| /* translators: %d: number of historic threats */ | ||
| __( 'History (%d)', 'jetpack' ), | ||
| historicThreatsCount | ||
| ) } | ||
| </span> | ||
| } | ||
| /> | ||
| </ToggleGroupControl> | ||
| ); | ||
| } catch ( error ) { | ||
| return null; | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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[]andview: Viewproperties, and compute/memoize its own values for counts/selected/etc.It could also accept the existing
onChangeView: ( newView: View ) => voidcallback, 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/catchor 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.