Site Profiler: Wrap logic inside a AdvancedMetrics component (#90765)

Automattic · May 16, 2024 · 83167b8 · 83167b8
1 parent e2f6bc1
commit 83167b8
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 41 deletions.
diff --git a/client/site-profiler/components/advanced-metrics/index.tsx b/client/site-profiler/components/advanced-metrics/index.tsx
@@ -0,0 +1,56 @@
+import { useTranslate } from 'i18n-calypso';
+import { MetricsInsightsList } from 'calypso/site-profiler/components/metrics-insights-list';
+import { MetricsSection } from 'calypso/site-profiler/components/metrics-section';
+
+interface AdvancedMetricsProps {
+	performanceMetricsRef?: React.RefObject< HTMLObjectElement >;
+	healthScoresRef?: React.RefObject< HTMLObjectElement >;
+}
+
+export const AdvancedMetrics: React.FC< AdvancedMetricsProps > = ( props ) => {
+	const translate = useTranslate();
+	const { performanceMetricsRef, healthScoresRef } = props;
+
+	return (
+		<>
+			<MetricsSection
+				name={ translate( 'Performance Metrics' ) }
+				title={ translate(
+					"Your site {{success}}performs well{{/success}}, but there's always room to be faster and smoother for your visitors.",
+					{
+						components: {
+							success: <span className="success" />,
+							alert: <span className="alert" />,
+						},
+					}
+				) }
+				subtitle={ translate( "Boost your site's performance" ) }
+				ref={ performanceMetricsRef }
+			>
+				<MetricsInsightsList
+					insights={ Array( 10 ).fill( {
+						header:
+							'Your site reveals first content slower than 76% of peers, affecting first impressions.',
+						description: 'This is how you can improve it',
+					} ) }
+				/>
+			</MetricsSection>
+			<MetricsSection
+				name={ translate( 'Health Scores' ) }
+				title={ translate(
+					"Your site's health scores {{alert}}suggest critical area{{/alert}} but need attention to prevent low performance.",
+					{
+						components: {
+							success: <span className="success" />,
+							alert: <span className="alert" />,
+						},
+					}
+				) }
+				subtitle={ translate( "Optimize your site's health" ) }
+				ref={ healthScoresRef }
+			>
+				<MetricsInsightsList locked />
+			</MetricsSection>
+		</>
+	);
+};
diff --git a/client/site-profiler/components/metrics-menu/index.tsx b/client/site-profiler/components/metrics-menu/index.tsx
@@ -21,9 +21,9 @@ const SectionNavbar = styled( SectionNav )`
 
 interface MetricsMenuProps {
 	basicMetricsRef?: React.RefObject< HTMLObjectElement >;
-	onCTAClick: () => void;
 	performanceMetricsRef?: React.RefObject< HTMLObjectElement >;
 	healthScoresRef?: React.RefObject< HTMLObjectElement >;
+	onCTAClick: () => void;
 }
 
 interface MenuItem {

diff --git a/client/site-profiler/components/site-profiler.tsx b/client/site-profiler/components/site-profiler.tsx
@@ -16,16 +16,15 @@ import useScrollToTop from '../hooks/use-scroll-to-top';
 import useSiteProfilerRecordAnalytics from '../hooks/use-site-profiler-record-analytics';
 import { getValidUrl } from '../utils/get-valid-url';
 import { normalizeWhoisField } from '../utils/normalize-whois-entry';
+import { AdvancedMetrics } from './advanced-metrics';
 import { BasicMetrics } from './basic-metrics';
 import DomainAnalyzer from './domain-analyzer';
 import DomainInformation from './domain-information';
 import { GetReportForm } from './get-report-form';
 import HeadingInformation from './heading-information';
 import HostingInformation from './hosting-information';
 import HostingIntro from './hosting-intro';
-import { MetricsInsightsList } from './metrics-insights-list';
 import { MetricsMenu } from './metrics-menu';
-import { MetricsSection } from './metrics-section';
 import './styles.scss';
 
 const debug = debugFactory( 'apps:site-profiler' );
@@ -173,44 +172,10 @@ export default function SiteProfiler( props: Props ) {
 								onCTAClick={ () => setIsGetReportFormOpen( true ) }
 							/>
 							<BasicMetrics ref={ basicMetricsRef } basicMetrics={ basicMetrics.basic } />
-							<MetricsSection
-								name={ translate( 'Performance Metrics' ) }
-								title={ translate(
-									"Your site {{success}}performs well{{/success}}, but there's always room to be faster and smoother for your visitors.",
-									{
-										components: {
-											success: <span className="success" />,
-											alert: <span className="alert" />,
-										},
-									}
-								) }
-								subtitle={ translate( "Boost your site's performance" ) }
-								ref={ performanceMetricsRef }
-							>
-								<MetricsInsightsList
-									insights={ Array( 10 ).fill( {
-										header:
-											'Your site reveals first content slower than 76% of peers, affecting first impressions.',
-										description: 'This is how you can improve it',
-									} ) }
-								/>
-							</MetricsSection>
-							<MetricsSection
-								name={ translate( 'Health Scores' ) }
-								title={ translate(
-									"Your site's health scores {{alert}}suggest critical area{{/alert}} but need attention to prevent low performance.",
-									{
-										components: {
-											success: <span className="success" />,
-											alert: <span className="alert" />,
-										},
-									}
-								) }
-								subtitle={ translate( "Optimize your site's health" ) }
-								ref={ healthScoresRef }
-							>
-								<MetricsInsightsList locked />
-							</MetricsSection>
+							<AdvancedMetrics
+								performanceMetricsRef={ performanceMetricsRef }
+								healthScoresRef={ healthScoresRef }
+							/>
 						</LayoutBlockSection>
 					) }
 				</LayoutBlock>