Protect Meets Core: Home Page Scan Report Data Adjustments (#40616)

Author: nateweller

projects/js-packages/components/components/scan-report/index.tsx

@@ -216,7 +216,10 @@ export default function ScanReport( { dataSource, data, onChangeSelection } ): J
 	 *
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#getitemid-function
 	 */
-	const getItemId = useCallback( ( item: ScanReportExtension ) => item.id.toString(), [] );
+	const getItemId = useCallback(
+		( item: ScanReportExtension ) => `${ item.type }_${ item.slug }_${ item.version }`,
+		[]
+	);
 
 	return (
 		<DataViews

projects/plugins/protect/src/js/routes/home/index.jsx

@@ -1,4 +1,5 @@
 import { AdminSection, Container, Col, ScanReport } from '@automattic/jetpack-components';
+import { useMemo } from 'react';
 import AdminPage from '../../components/admin-page';
 import useScanStatusQuery from '../../data/scan/use-scan-status-query';
 import HomeAdminSectionHero from './home-admin-section-hero';
@@ -13,16 +14,24 @@ import styles from './styles.module.scss';
  */
 const HomePage = () => {
 	const { data: status } = useScanStatusQuery( { usePolling: true } );
-	const { core, plugins, themes, files } = status;
 
-	const data = [
-		core,
-		...plugins,
-		...themes,
-		{ checked: true, threats: files, type: 'files' },
-	].map( ( item, index ) => {
-		return { id: index + 1, ...item };
-	} );
+	const data = useMemo(
+		() => [
+			...( Object.keys( status.core ).length ? [ status.core ] : [] ),
+			...status.plugins,
+			...status.themes,
+			...( status.dataSource === 'scan_api'
+				? [
+						{
+							checked: !! status.lastChecked,
+							threats: status.files,
+							type: 'files',
+						},
+				  ]
+				: [] ),
+		],
+		[ status ]
+	);
 
 	return (
 		<AdminPage>