Additional work

projects/js-packages/components/components/threats-data-view/index.tsx

@@ -85,7 +85,7 @@ export default function ThreatsDataView( {
 					return (
 						<div>
 							<Text mb={ 1 } className={ styles.threat__subtitle }>
-								<Icon icon={ getThreatIcon( item ) } size={ 18 } />
+								<Icon icon={ getThreatIcon( item ) } size={ 20 } />
 								{ getThreatSubtitle( item ) }
 							</Text>
 							<Text variant="body" className={ styles.threat__title }>

projects/js-packages/components/components/threats-data-view/styles.module.scss

@@ -1,5 +1,11 @@
 @import '@wordpress/dataviews/build-style/style.css';
 
+:global {
+    .dataviews-view-table td, .dataviews-view-table th {
+        white-space: initial;
+    }
+}
+
 .icon-check {
 	fill: var( --jp-green-40 );
 }
@@ -21,17 +27,19 @@
 .threat__subtitle {
 	display: flex;
 	align-items: center;
-	gap: 4px;
+	gap: 6px;
+	font-size: 0.75rem; // 12px
+	line-height: 1.25rem; // 20px 
 	color: var( --jp-gray-80 );
-	font-size: 0.875rem;
+	font-weight: 400;
 }
 
 .threat__title {
 	color: var( --jp-gray-80 );
+	font-size: 0.875rem; // 14px
+	font-weight: 510;
 }
 
-:global {
-    .dataviews-view-table td, .dataviews-view-table th {
-        white-space: initial;
-    }
+.threat__description {
+	color: var( --jp-gray-80 );
 }

projects/js-packages/components/components/threats-data-view/utils.ts

@@ -1,86 +1,7 @@
-import { Filter, View } from '@wordpress/dataviews';
 import { code, color, grid, plugins, shield, wordpress } from '@wordpress/icons';
 import { DataViewThreat } from './types';
 
-const applyFilter = ( data: Record< string, unknown >, filter: Filter ): boolean => {
-	const value = data[ filter.field ];
-
-	if ( value === undefined || filter.value === undefined ) {
-		return true;
-	}
-
-	switch ( filter.operator ) {
-		case 'is':
-			return value === filter.value;
-		case 'isNot':
-			return value !== filter.value;
-		case 'isAny':
-			return filter.value.includes( value );
-		case 'isNone':
-			return ! filter.value.includes( value );
-		case 'isAll':
-			return filter.value.every( ( filterValue: unknown ) => filterValue === value );
-		case 'isNotAll':
-			return ! filter.value.every( ( filterValue: unknown ) => filterValue === value );
-		default:
-			return true;
-	}
-};
-
-/**
- * Filter function for determining whether a threat should be displayed, based on a DataView view.
- *
- * @example data.filter( threat => filterThreatByView( threat, view ) )
- *
- * @param {Array}  threat - Threat data.
- * @param {object} view   - DataView view.
- *
- * @return {boolean} Whether the threat should be displayed.
- */
-export function filterThreatByView( threat: DataViewThreat, view: View ): boolean {
-	if ( ! view.filters.every( filter => applyFilter( threat, filter ) ) ) {
-		return false;
-	}
-
-	if ( view.search ) {
-		const searchStr =
-			threat.title.toLowerCase() +
-			threat.description.toLowerCase() +
-			threat.signature.toLowerCase();
-
-		if ( searchStr.indexOf( view.search.toLowerCase() ) === -1 ) {
-			return false;
-		}
-	}
-
-	return true;
-}
-
-/**
- * Sort function for comparing two threats, based on a DataView view.
- *
- * @example data.sort( ( a, b ) => sortThreatsByView( a, b, view ) )
- *
- * @param {object} a    - Threat A.
- * @param {object} b    - Threat B.
- * @param {object} view - DataView view.
- *
- * @return {number} Sort order.
- */
-export function sortThreatsByView( a: Threat, b: Threat, view: View ): number {
-	const field = view.sort.field;
-
-	const direction = view.sort.direction === 'asc' ? 1 : -1;
-	if ( a[ field ] < b[ field ] ) {
-		return -1 * direction;
-	}
-	if ( a[ field ] > b[ field ] ) {
-		return 1 * direction;
-	}
-	return 0;
-}
-
-export const getThreatIcon = ( threat: Threat ) => {
+export const getThreatIcon = ( threat: DataViewThreat ) => {
 	const type = getThreatType( threat );
 
 	switch ( type ) {