Protect: Restore HistoryAdminSectionHero (#40551)

* Init project branch * Protect: Add Go to Cloud and Scan now button to Protect primary header (#40057) Co-authored-by: Nate Weller <[email protected]> * Protect: Update Scan and History headers (#40058) * Update Scan and History section header structure/content * changelog * Update projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx Co-authored-by: Nate Weller <[email protected]> --------- Co-authored-by: Nate Weller <[email protected]> * Protect: de-emphasize cloud link by using link variant (#40211) * Protect: add ShieldIcon component * Protect: Add ShieldIcon Component (#40402) * Protect: Integrate ThreatsDataViews Component (#40076) * Components: Add ScanReport (#40419) * Fix type errors Protect: add HMR support Revert "Protect: add HMR support" This reverts commit 06497a0. * Protect: Refactor AdminSectionHero (#40516) * Restore history header * Pass status filter presets to consumer * Restore early return * Add plan level restrictions * Remove unneeded filter handling * Revert unnecessary threats data views updates * Fix import * Add size prop --------- Co-authored-by: Nate Weller <[email protected]> Co-authored-by: Nate Weller <[email protected]>
Automattic · Jan 4, 2025 · 61b5561 · 61b5561
1 parent f672f0a
commit 61b5561
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 0 deletions.
diff --git a/...packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx b/...packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
@@ -14,6 +14,7 @@ import styles from './styles.module.scss';
  * @param { Threat[]}  props.data         - Threats data.
  * @param { View }     props.view         - The current view.
  * @param { Function } props.onChangeView - Callback function to handle view changes.
+ *
  * @return {JSX.Element|null} The component or null.
  */
 export default function ThreatsStatusToggleGroupControl( {

diff --git a/projects/plugins/protect/src/js/routes/scan/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history-admin-section-hero.tsx
@@ -0,0 +1,78 @@
+import { Text } from '@automattic/jetpack-components';
+import { dateI18n } from '@wordpress/date';
+import { __, sprintf } from '@wordpress/i18n';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+import AdminSectionHero from '../../components/admin-section-hero';
+import ErrorAdminSectionHero from '../../components/error-admin-section-hero';
+import useHistoryQuery from '../../data/scan/use-history-query';
+import styles from './styles.module.scss';
+
+const HistoryAdminSectionHero: React.FC = ( {
+	size = 'normal',
+}: {
+	size?: 'normal' | 'large';
+} ) => {
+	const { data: history } = useHistoryQuery();
+	const numThreats = history ? history.threats.length : 0;
+
+	const oldestFirstDetected = useMemo( () => {
+		if ( ! history ) {
+			return null;
+		}
+
+		return history.threats.reduce( ( oldest, current ) => {
+			return new Date( current.firstDetected ) < new Date( oldest.firstDetected )
+				? current
+				: oldest;
+		} ).firstDetected;
+	}, [ history ] );
+
+	if ( history && history.error ) {
+		return (
+			<ErrorAdminSectionHero
+				baseErrorMessage={ __( 'We are having problems loading your history.', 'jetpack-protect' ) }
+				errorMessage={ history.errorMessage }
+				errorCode={ history.errorMessage }
+			/>
+		);
+	}
+
+	return (
+		<AdminSectionHero>
+			<AdminSectionHero.Main
+				className={ clsx( styles[ 'hero-main' ], {
+					[ styles[ 'hero-main--large' ] ]: size === 'large',
+				} ) }
+			>
+				{ ' ' }
+				<Text mb={ 2 }>
+					{ oldestFirstDetected ? (
+						<span className={ styles[ 'subheading-content' ] }>
+							{ sprintf(
+								/* translators: %s: Oldest first detected date */
+								__( '%s - Today', 'jetpack-protect' ),
+								dateI18n( 'F jS g:i A', oldestFirstDetected, false )
+							) }
+						</span>
+					) : (
+						__( 'Most recent results', 'jetpack-protect' )
+					) }
+				</Text>
+				<AdminSectionHero.Heading icon={ numThreats > 0 ? 'error' : 'success' }>
+					{ numThreats > 0
+						? sprintf(
+								/* translators: %s: Total number of threats  */
+								__( '%1$s previously active %2$s', 'jetpack-protect' ),
+								numThreats,
+								numThreats === 1 ? 'threat' : 'threats'
+						  )
+						: __( 'No previously active threats', 'jetpack-protect' ) }
+				</AdminSectionHero.Heading>
+				<Text>{ __( 'Here you can view all of your threats to date.', 'jetpack-protect' ) }</Text>
+			</AdminSectionHero.Main>
+		</AdminSectionHero>
+	);
+};
+
+export default HistoryAdminSectionHero;