diff --git a/projects/js-packages/components/components/threats-data-view/index.tsx b/projects/js-packages/components/components/threats-data-view/index.tsx index a418efa84ce86..506dd8ad0042c 100644 --- a/projects/js-packages/components/components/threats-data-view/index.tsx +++ b/projects/js-packages/components/components/threats-data-view/index.tsx @@ -27,19 +27,19 @@ import { getThreatIcon, getThreatSubtitle, getThreatType } from './utils'; /** * ToggleGroupControl component for filtering threats by status. - * @param {object} props - Component props. - * @param {Array} props.data - Array of threats data with status values. - * @param {string} props.value - The current filter value. - * @param {Function} props.onChange - Callback function to change the filter value. + * @param {object} props - Component props. + * @param {Array} props.data - Array of threats data with status values. + * @param {string} props.value - The current filter value. + * @param {Function} props.onStatusChange - Callback function to change the filter value. * @return {JSX.Element|null} The component or null. */ export function ThreatsStatusFilter( { value, - onChange, + onStatusChange, data, }: { value: string; - onChange: ( newValue: string ) => void; + onStatusChange: ( newValue: string ) => void; data: DataViewThreat[]; } ): JSX.Element { const activeCount = useMemo( @@ -60,7 +60,7 @@ export function ThreatsStatusFilter( { ( 'active' ); const [ filteredData, setFilteredData ] = useState< DataViewThreat[] >( activeData ); - const onChange = useCallback( + const onStatusChange = useCallback( ( newValue: string ) => { - view.filters = []; // TODO: Only reset status filters? - setView( { ...view } ); setStatus( newValue ); + // Reset status filters + const updatedFilters = view.filters.filter( filter => filter.field !== 'status' ); + setView( { + ...view, + filters: updatedFilters, + } ); + if ( newValue === 'active' ) { setFilteredData( activeData ); } else if ( newValue === 'historic' ) { @@ -606,7 +611,9 @@ export default function ThreatsDataView( { onChangeView={ onChangeView } paginationInfo={ paginationInfo } view={ view } - header={ } + header={ + + } /> ); }