Protect: Add Scan tab threat count (#40056)

* Add threat count to scan tab

* changelog

projects/plugins/protect/changelog/add-protect-scan-tab-threat-count

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Adds threat count to Scan tab

projects/plugins/protect/src/js/components/admin-page/index.jsx

@@ -4,10 +4,11 @@ import {
 	JetpackProtectLogo,
 } from '@automattic/jetpack-components';
 import { useConnection } from '@automattic/jetpack-connection';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useNotices from '../../hooks/use-notices';
+import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
 import Notice from '../notice';
 import Tabs, { Tab } from '../tabs';
@@ -18,6 +19,11 @@ const AdminPage = ( { children } ) => {
 	const { isRegistered } = useConnection();
 	const { isSeen: wafSeen } = useWafData();
 	const navigate = useNavigate();
+	const {
+		counts: {
+			current: { threats: numThreats },
+		},
+	} = useProtectData();
 
 	// Redirect to the setup page if the site is not registered.
 	useEffect( () => {
@@ -38,7 +44,20 @@ const AdminPage = ( { children } ) => {
 			{ notice && <Notice floating={ true } dismissable={ true } { ...notice } /> }
 			<Container horizontalSpacing={ 0 }>
 				<Tabs className={ styles.navigation }>
-					<Tab link="/scan" label={ __( 'Scan', 'jetpack-protect' ) } />
+					<Tab
+						link="/scan"
+						label={
+							<span className={ styles.tab }>
+								{ numThreats > 0
+									? sprintf(
+											// translators: %d is the number of threats found.
+											__( 'Scan (%d)', 'jetpack-protect' ),
+											numThreats
+									  )
+									: __( 'Scan', 'jetpack-protect' ) }
+							</span>
+						}
+					/>
 					<Tab
 						link="/firewall"
 						label={

projects/plugins/protect/src/js/components/admin-page/styles.module.scss

@@ -1,3 +1,7 @@
+.tab {
+    white-space: nowrap;
+}
+
 .navigation {
     margin-top: calc( var( --spacing-base ) * 3 * -1 ); // -24px
 }