diff --git a/projects/js-packages/components/components/threats-data-views/constants.ts b/projects/js-packages/components/components/threats-data-views/constants.ts index aac25cceb3243..78b51390c3d39 100644 --- a/projects/js-packages/components/components/threats-data-views/constants.ts +++ b/projects/js-packages/components/components/threats-data-views/constants.ts @@ -47,12 +47,12 @@ export const THREAT_FIELD_AUTO_FIX = 'auto-fix'; export const DEFAULT_TABLE_FIELDS = [ THREAT_FIELD_SEVERITY, - THREAT_FIELD_THREAT, - THREAT_FIELD_TYPE, - THREAT_FIELD_FIRST_DETECTED, - THREAT_FIELD_FIXED_ON, - THREAT_FIELD_STATUS, - THREAT_FIELD_AUTO_FIX, + // THREAT_FIELD_THREAT, + // THREAT_FIELD_TYPE, + // THREAT_FIELD_FIRST_DETECTED, + // THREAT_FIELD_FIXED_ON, + // THREAT_FIELD_STATUS, + // THREAT_FIELD_AUTO_FIX, ]; export const DEFAULT_LIST_FIELDS = [ diff --git a/projects/js-packages/components/components/threats-data-views/index.tsx b/projects/js-packages/components/components/threats-data-views/index.tsx index 908af8e1674ac..4e0ae5f3c6739 100644 --- a/projects/js-packages/components/components/threats-data-views/index.tsx +++ b/projects/js-packages/components/components/threats-data-views/index.tsx @@ -148,6 +148,14 @@ export default function ThreatsDataViews( { [ view.filters ] ); + const getFilterValues = useCallback( ( currentView: View, field: string ) => { + const filter = currentView.filters.find( f => f.field === field ); + if ( ! filter ) { + return []; + } + return Array.isArray( filter.value ) ? filter.value : [ filter.value ]; + }, [] ); + /** * Compute values from the provided threats data. * @@ -303,7 +311,7 @@ export default function ThreatsDataViews( { { id: THREAT_FIELD_STATUS, label: __( 'Status', 'jetpack-components' ), - enableHiding: false, + // enableHiding: false, elements: THREAT_STATUSES, getValue( { item }: { item: Threat } ) { if ( ! item.status ) { @@ -354,8 +362,7 @@ export default function ThreatsDataViews( { }, ] : [] ), - ...( dataFields.includes( 'firstDetected' ) && - ( statusFilters.includes( 'fixed' ) || statusFilters.includes( 'ignored' ) ) + ...( dataFields.includes( 'firstDetected' ) ? [ { id: THREAT_FIELD_FIRST_DETECTED, @@ -374,7 +381,7 @@ export default function ThreatsDataViews( { }, ] : [] ), - ...( dataFields.includes( 'fixedOn' ) && statusFilters.includes( 'fixed' ) + ...( dataFields.includes( 'fixedOn' ) ? [ { id: THREAT_FIELD_FIXED_ON, @@ -393,8 +400,7 @@ export default function ThreatsDataViews( { }, ] : [] ), - ...( dataFields.includes( 'fixable' ) && - ( statusFilters.includes( 'current' ) || ! statusFilters.length ) + ...( dataFields.includes( 'fixable' ) ? [ { id: THREAT_FIELD_AUTO_FIX, @@ -426,7 +432,7 @@ export default function ThreatsDataViews( { ]; return result; - }, [ dataFields, plugins, themes, signatures, onFixThreats, statusFilters ] ); + }, [ dataFields, plugins, themes, signatures, onFixThreats ] ); /** * DataView actions - collection of operations that can be performed upon each record. @@ -520,9 +526,35 @@ export default function ThreatsDataViews( { * * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#onchangeview-function */ - const onChangeView = useCallback( ( newView: View ) => { - setView( newView ); - }, [] ); + const onChangeView = useCallback( + ( newView: View ) => { + const customView = { ...newView }; + + setView( currentView => { + const currentStatusFilters = getFilterValues( currentView, THREAT_FIELD_STATUS ); + const newStatusFilters = getFilterValues( customView, THREAT_FIELD_STATUS ); + const currentIsVisible = + ! currentStatusFilters.length || + currentStatusFilters.includes( 'fixed' ) || + currentStatusFilters.includes( 'ignored' ); + const newIsVisible = + ! newStatusFilters.length || + newStatusFilters.includes( 'fixed' ) || + newStatusFilters.includes( 'ignored' ); + + if ( ! currentIsVisible && newIsVisible ) { + customView.fields.push( THREAT_FIELD_STATUS ); + } + + if ( currentIsVisible && ! newIsVisible ) { + customView.fields = customView.fields.filter( field => field !== THREAT_FIELD_STATUS ); + } + + return customView; + } ); + }, + [ getFilterValues ] + ); /** * DataView getItemId function - returns the unique ID for each record in the dataset.