Protect: Add/apply shared AdminSectionHero component (#39702)

projects/plugins/protect/changelog/add-protect-header-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Adds and applies a shared Header component

projects/plugins/protect/src/js/routes/scan/scan-section-notices.tsx → projects/plugins/protect/src/js/components/admin-section-hero/admin-section-hero-notices.tsx

@@ -1,15 +1,8 @@
-import { Col, Container } from '@automattic/jetpack-components';
-import { ConnectionError, useConnectionErrorNotice } from '@automattic/jetpack-connection';
+import { Container, Col } from '@automattic/jetpack-components';
+import { useConnectionErrorNotice, ConnectionError } from '@automattic/jetpack-connection';
 import styles from './styles.module.scss';
 
-/**
- * Scan Section Notices
- *
- * Component that renders the connection error notice and the Jetpack admin notices.
- *
- * @return {Component} The component.
- */
-export default function ScanSectionNotices() {
+const AdminSectionHeroNotices: React.FC = () => {
 	const { hasConnectionError } = useConnectionErrorNotice();
 
 	return (
@@ -24,4 +17,6 @@ export default function ScanSectionNotices() {
 			</Col>
 		</Container>
 	);
-}
+};
+
+export default AdminSectionHeroNotices;

projects/plugins/protect/src/js/components/admin-section-hero/index.tsx

@@ -0,0 +1,64 @@
+import {
+	AdminSectionHero as JetpackAdminSectionHero,
+	H3,
+	getIconBySlug,
+} from '@automattic/jetpack-components';
+import SeventyFiveLayout from '../seventy-five-layout';
+import AdminSectionHeroNotices from './admin-section-hero-notices';
+import styles from './styles.module.scss';
+
+interface AdminSectionHeroProps {
+	main: React.ReactNode;
+	secondary?: React.ReactNode;
+	preserveSecondaryOnMobile?: boolean;
+}
+
+interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
+	Heading: React.FC< { children: React.ReactNode; showIcon?: boolean } >;
+	Subheading: React.FC< { children: React.ReactNode } >;
+}
+
+const AdminSectionHero: AdminSectionHeroComponent = ( {
+	main,
+	secondary,
+	preserveSecondaryOnMobile = true,
+} ) => {
+	return (
+		<JetpackAdminSectionHero>
+			<AdminSectionHeroNotices />
+			<SeventyFiveLayout
+				spacing={ 7 }
+				gap={ 0 }
+				main={ main }
+				mainClassName={ styles[ 'header-main' ] }
+				secondary={ secondary }
+				secondaryClassName={ styles[ 'header-secondary' ] }
+				preserveSecondaryOnMobile={ preserveSecondaryOnMobile }
+				fluid={ false }
+			/>
+		</JetpackAdminSectionHero>
+	);
+};
+
+AdminSectionHero.Heading = ( {
+	children,
+	showIcon = false,
+}: {
+	children: React.ReactNode;
+	showIcon?: boolean;
+} ) => {
+	const Icon = getIconBySlug( 'protect' );
+
+	return (
+		<H3 className={ styles.heading } mt={ 2 } mb={ 2 }>
+			{ children }
+			{ showIcon && <Icon className={ styles[ 'heading-icon' ] } size={ 32 } /> }
+		</H3>
+	);
+};
+
+AdminSectionHero.Subheading = ( { children }: { children: React.ReactNode } ) => {
+	return <div className={ styles.subheading }>{ children }</div>;
+};
+
+export default AdminSectionHero;

projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx

@@ -0,0 +1,22 @@
+import { Status, Text } from '@automattic/jetpack-components';
+import AdminSectionHero from '..';
+import inProgressImage from '../../../../../assets/images/in-progress.png';
+
+export default {
+	title: 'Plugins/Protect/AdminSectionHero',
+	component: AdminSectionHero,
+};
+
+export const Default = args => <AdminSectionHero { ...args } />;
+Default.args = {
+	main: (
+		<>
+			<Status status={ 'active' } label={ 'Active' } />
+			<AdminSectionHero.Heading showIcon>{ 'No threats found' }</AdminSectionHero.Heading>
+			<AdminSectionHero.Subheading>
+				<Text>{ 'Most recent results' }</Text>
+			</AdminSectionHero.Subheading>
+		</>
+	),
+	secondary: <img src={ inProgressImage } alt="" />,
+};

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

@@ -0,0 +1,26 @@
+.header-main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.header-secondary {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+}
+
+.heading-icon {
+    margin-left: var( --spacing-base ); // 8px
+    margin-bottom: calc( var( --spacing-base ) / 2 * -1 ); // -4px
+}
+
+.subheading {
+    width: fit-content;
+}
+
+.connection-error-col {
+	margin-top: calc( var( --spacing-base ) * 3 + 1px ); // 25px
+}

projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx

@@ -0,0 +1,51 @@
+import { Text } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import { Icon, warning } from '@wordpress/icons';
+import inProgressImage from '../../../../assets/images/in-progress.png';
+import AdminSectionHero from '../admin-section-hero';
+import ScanNavigation from '../scan-navigation';
+import styles from './styles.module.scss';
+
+interface ErrorAdminSectionHeroProps {
+	baseErrorMessage: string;
+	errorMessage?: string;
+	errorCode?: string;
+}
+
+const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( {
+	baseErrorMessage,
+	errorMessage,
+	errorCode,
+} ) => {
+	let displayErrorMessage = errorMessage ? `${ errorMessage } (${ errorCode }).` : baseErrorMessage;
+	displayErrorMessage += ' ' + __( 'Try again in a few minutes.', 'jetpack-protect' );
+
+	return (
+		<AdminSectionHero
+			main={
+				<>
+					<AdminSectionHero.Heading>
+						<div className={ styles.heading }>
+							<Icon className={ styles.warning } icon={ warning } size={ 54 } />
+							{ __( 'An error occurred', 'jetpack-protect' ) }
+						</div>
+					</AdminSectionHero.Heading>
+					<AdminSectionHero.Subheading>
+						<Text>{ displayErrorMessage }</Text>
+					</AdminSectionHero.Subheading>
+					<div className={ styles[ 'scan-navigation' ] }>
+						<ScanNavigation />
+					</div>
+				</>
+			}
+			secondary={
+				<div className={ styles.illustration }>
+					<img src={ inProgressImage } alt="" />
+				</div>
+			}
+			preserveSecondaryOnMobile={ false }
+		/>
+	);
+};
+
+export default ErrorAdminSectionHero;

projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss

@@ -0,0 +1,27 @@
+.heading {
+	display: flex;
+	align-items: center;
+}
+
+.warning {
+    width: 54px;
+    height: 54px;
+    fill: var( --jp-red );
+    margin-left: -8px;
+    margin-right: var( --spacing-base ); // 8px
+}
+
+.illustration {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	img {
+		// let's fit images
+		object-fit: cover;
+		width: 100%;
+	}
+}
+
+.scan-navigation {
+	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
+}