Adjust approach to bringing label prop to the FixAllThreatsModal

Automattic · Jul 12, 2024 · a45b5d6 · a45b5d6
1 parent 3f5e9bf
commit a45b5d6
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 51 deletions.
diff --git a/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx b/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx
@@ -7,7 +7,7 @@ import ThreatFixHeader from '../threat-fix-header';
 import UserConnectionGate from '../user-connection-gate';
 import styles from './styles.module.scss';
 
-const FixThreatModal = ( { id, fixable, title, icon, severity } ) => {
+const FixThreatModal = ( { id, fixable, label, icon, severity } ) => {
 	const { setModal, fixThreats } = useDispatch( STORE_ID );
 	const threatsUpdating = useSelect( select => select( STORE_ID ).getThreatsUpdating() );
 
@@ -39,7 +39,7 @@ const FixThreatModal = ( { id, fixable, title, icon, severity } ) => {
 
 				<div className={ styles.list }>
 					<ThreatFixHeader
-						threat={ { id, fixable, title, icon, severity } }
+						threat={ { id, fixable, label, icon, severity } }
 						fixAllDialog={ false }
 					/>
 				</div>

diff --git a/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx b/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx
@@ -69,7 +69,7 @@ export default function ThreatFixHeader( { threat, fixAllDialog, onCheckFix } )
 				<Icon icon={ threat.icon } className={ styles.threat__icon } />
 				<div className={ styles.threat__summary }>
 					<Text className={ styles.threat__summary__label } mb={ 1 }>
-						{ threat.title }
+						{ threat.label }
 					</Text>
 					<Text className={ styles.threat__summary__title }>
 						{ getFixerMessage( threat.fixable ) }

diff --git a/projects/plugins/protect/src/js/components/threats-list/free-list.jsx b/projects/plugins/protect/src/js/components/threats-list/free-list.jsx
@@ -9,16 +9,14 @@ import styles from './styles.module.scss';
 
 const ThreatAccordionItem = ( {
 	description,
-	filename,
 	fixedIn,
 	icon,
 	id,
+	label,
 	name,
 	source,
-	table,
 	title,
 	type,
-	version,
 } ) => {
 	const { adminUrl } = window.jetpackProtectInitialState || {};
 	const { run } = useProductCheckoutWorkflow( {
@@ -36,32 +34,10 @@ const ThreatAccordionItem = ( {
 		</Button>
 	) : null;
 
-	/**
-	 * Get Label
-	 *
-	 * @returns {string} Threat label based on the assumed threat type (extension, file, database, etc).
-	 */
-	const getLabel = useCallback( () => {
-		if ( name && version ) {
-			// Extension threat i.e. "Woocommerce (3.0.0)"
-			return `${ name } (${ version })`;
-		}
-
-		if ( filename ) {
-			// File threat i.e. "index.php"
-			return filename.split( '/' ).pop();
-		}
-
-		if ( table ) {
-			// Database threat i.e. "wp_posts"
-			return table;
-		}
-	}, [ filename, name, table, version ] );
-
 	return (
 		<FreeAccordionItem
 			id={ id }
-			label={ getLabel() }
+			label={ label }
 			title={ title }
 			icon={ icon }
 			onOpen={ useCallback( () => {
@@ -111,12 +87,25 @@ const FreeList = ( { list } ) => {
 	return (
 		<FreeAccordion>
 			{ list.map(
-				( { description, fixedIn, icon, id, name, source, table, title, type, version } ) => (
+				( {
+					description,
+					fixedIn,
+					icon,
+					id,
+					label,
+					name,
+					source,
+					table,
+					title,
+					type,
+					version,
+				} ) => (
 					<ThreatAccordionItem
 						description={ description }
 						fixedIn={ fixedIn }
 						icon={ icon }
 						id={ id }
+						label={ label }
 						key={ id }
 						name={ name }
 						source={ source }

diff --git a/projects/plugins/protect/src/js/components/threats-list/paid-list.jsx b/projects/plugins/protect/src/js/components/threats-list/paid-list.jsx
@@ -53,7 +53,7 @@ const ThreatAccordionItem = ( {
 			event.preventDefault();
 			setModal( {
 				type: 'FIX_THREAT',
-				props: { id, fixable, title, icon, severity },
+				props: { id, fixable, label, icon, severity },
 			} );
 		};
 	};
@@ -155,25 +155,6 @@ const PaidList = ( { list } ) => {
 
 	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
 
-	const getLabel = threat => {
-		if ( threat.name && threat.version ) {
-			// Extension threat i.e. "Woocommerce (3.0.0)"
-			return `${ threat.name } (${ threat.version })`;
-		}
-
-		if ( threat.filename ) {
-			// File threat i.e. "index.php"
-			return threat.filename.split( '/' ).pop();
-		}
-
-		if ( threat.table ) {
-			// Database threat i.e. "wp_posts"
-			return threat.table;
-		}
-	};
-
-	list = list.map( threat => ( { label: getLabel( threat ), ...threat } ) );
-
 	return (
 		<>
 			{ ! isSmall && (

diff --git a/projects/plugins/protect/src/js/components/threats-list/use-threats-list.js b/projects/plugins/protect/src/js/components/threats-list/use-threats-list.js
@@ -110,8 +110,27 @@ const useThreatsList = () => {
 		};
 	}, [ core, database, files, plugins, selected, themes ] );
 
+	const getLabel = threat => {
+		if ( threat.name && threat.version ) {
+			// Extension threat i.e. "Woocommerce (3.0.0)"
+			return `${ threat.name } (${ threat.version })`;
+		}
+
+		if ( threat.filename ) {
+			// File threat i.e. "index.php"
+			return threat.filename.split( '/' ).pop();
+		}
+
+		if ( threat.table ) {
+			// Database threat i.e. "wp_posts"
+			return threat.table;
+		}
+	};
+
 	const list = useMemo( () => {
-		return [ ...unsortedList ].sort( sortThreats );
+		return unsortedList
+			.sort( sortThreats )
+			.map( threat => ( { label: getLabel( threat ), ...threat } ) );
 	}, [ unsortedList ] );
 
 	return {