Revert "Performance Profiler: logged-out profiler uses the same compo…

…nents as…" (#95175) This reverts commit 3ceec73.
Automattic · Oct 6, 2024 · 1015539 · 1015539
1 parent 3ceec73
commit 1015539
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 164 deletions.
diff --git a/client/hosting/performance/components/PerformanceReport.tsx b/client/hosting/performance/components/PerformanceReport.tsx
@@ -43,8 +43,9 @@ export const PerformanceReport = ( {
 			performanceReport={ performanceReport }
 			url={ url }
 			hash={ hash }
-			overallScoreIsTab
+			showV2
 			filter={ filter }
+			displayThumbnail={ false }
 			displayNewsletterBanner={ false }
 			displayMigrationBanner={ false }
 			onRecommendationsFilterChange={ onFilterChange }

diff --git a/...erformance-profiler/components/core-web-vitals-accordion/core-web-vitals-accordion-v2.tsx b/...erformance-profiler/components/core-web-vitals-accordion/core-web-vitals-accordion-v2.tsx
@@ -16,7 +16,6 @@ type Props = Record< Metrics, number > & {
 	activeTab: Metrics | null;
 	setActiveTab: ( tab: Metrics | null ) => void;
 	children: React.ReactNode;
-	showOverall?: boolean;
 };
 type HeaderProps = {
 	displayName: string;
@@ -53,7 +52,7 @@ const CardHeader = ( props: HeaderProps ) => {
 };
 
 export const CoreWebVitalsAccordionV2 = ( props: Props ) => {
-	const { activeTab, setActiveTab, children, showOverall } = props;
+	const { activeTab, setActiveTab, children } = props;
 	const translate = useTranslate();
 
 	const onClick = ( key: Metrics ) => {
@@ -72,8 +71,7 @@ export const CoreWebVitalsAccordionV2 = ( props: Props ) => {
 	const overallEntry = entries.find( ( [ key ] ) => key === 'overall' );
 	const otherEntries = entries.filter( ( [ key ] ) => key !== 'overall' );
 
-	const reorderedEntries =
-		showOverall && overallEntry ? [ overallEntry, ...otherEntries ] : otherEntries;
+	const reorderedEntries = overallEntry ? [ overallEntry, ...otherEntries ] : otherEntries;
 
 	return (
 		<div className="core-web-vitals-accordion-v2">

diff --git a/client/performance-profiler/components/core-web-vitals-display/index.tsx b/client/performance-profiler/components/core-web-vitals-display/index.tsx
@@ -1,52 +1,60 @@
 import { useDesktopBreakpoint } from '@automattic/viewport-react';
+import clsx from 'clsx';
 import { useState } from 'react';
 import {
 	Metrics,
 	PerformanceMetricsHistory,
 	PerformanceMetricsItemQueryResponse,
 } from 'calypso/data/site-profiler/types';
+import { CoreWebVitalsAccordion } from '../core-web-vitals-accordion';
 import { CoreWebVitalsAccordionV2 } from '../core-web-vitals-accordion/core-web-vitals-accordion-v2';
+import { MetricTabBar } from '../metric-tab-bar';
 import MetricTabBarV2 from '../metric-tab-bar/metric-tab-bar-v2';
+import { CoreWebVitalsDetails } from './core-web-vitals-details';
 import { CoreWebVitalsDetailsV2 } from './core-web-vitals-details_v2';
 import './style.scss';
 
 type CoreWebVitalsDisplayProps = Record< Metrics, number > & {
 	history: PerformanceMetricsHistory;
 	audits: Record< string, PerformanceMetricsItemQueryResponse >;
 	recommendationsRef: React.RefObject< HTMLDivElement > | null;
-	overallScoreIsTab?: boolean;
+	showV2?: boolean;
 	onRecommendationsFilterChange?: ( filter: string ) => void;
 };
 
 export const CoreWebVitalsDisplay = ( props: CoreWebVitalsDisplayProps ) => {
-	const defaultTab = props.overallScoreIsTab ? 'overall' : 'fcp';
+	const defaultTab = props.showV2 ? 'overall' : 'fcp';
 	const [ activeTab, setActiveTab ] = useState< Metrics | null >( defaultTab );
 	const isDesktop = useDesktopBreakpoint();
 
-	if ( isDesktop ) {
-		return (
-			<div className="core-web-vitals-display core-web-vitals-display-v2">
-				<MetricTabBarV2
-					activeTab={ activeTab ?? defaultTab }
-					setActiveTab={ setActiveTab }
-					showOverall={ props.overallScoreIsTab }
-					{ ...props }
-				/>
-				<CoreWebVitalsDetailsV2 activeTab={ activeTab } { ...props } />
-			</div>
-		);
-	}
+	const MetricBar = props.showV2 ? MetricTabBarV2 : MetricTabBar;
+	const CoreWebVitalsDetail = props.showV2 ? CoreWebVitalsDetailsV2 : CoreWebVitalsDetails;
+
+	const Accordion = props.showV2 ? CoreWebVitalsAccordionV2 : CoreWebVitalsAccordion;
 
 	return (
-		<div className="core-web-vitals-display">
-			<CoreWebVitalsAccordionV2
-				activeTab={ activeTab }
-				setActiveTab={ setActiveTab }
-				showOverall={ props.overallScoreIsTab }
-				{ ...props }
-			>
-				<CoreWebVitalsDetailsV2 activeTab={ activeTab } { ...props } />
-			</CoreWebVitalsAccordionV2>
-		</div>
+		<>
+			{ isDesktop && (
+				<div
+					className={ clsx( 'core-web-vitals-display', {
+						[ 'core-web-vitals-display-v2' ]: props.showV2,
+					} ) }
+				>
+					<MetricBar
+						activeTab={ activeTab ?? defaultTab }
+						setActiveTab={ setActiveTab }
+						{ ...props }
+					/>
+					<CoreWebVitalsDetail activeTab={ activeTab } { ...props } />
+				</div>
+			) }
+			{ ! isDesktop && (
+				<div className="core-web-vitals-display">
+					<Accordion activeTab={ activeTab } setActiveTab={ setActiveTab } { ...props }>
+						<CoreWebVitalsDetail activeTab={ activeTab } { ...props } />
+					</Accordion>
+				</div>
+			) }
+		</>
 	);
 };
diff --git a/client/performance-profiler/components/dashboard-content/index.tsx b/client/performance-profiler/components/dashboard-content/index.tsx
@@ -22,7 +22,7 @@ type PerformanceProfilerDashboardContentProps = {
 	displayNewsletterBanner?: boolean;
 	displayMigrationBanner?: boolean;
 	activeTab?: TabType;
-	overallScoreIsTab?: boolean;
+	showV2?: boolean;
 	onRecommendationsFilterChange?: ( filter: string ) => void;
 };
 
@@ -31,10 +31,11 @@ export const PerformanceProfilerDashboardContent = ( {
 	url,
 	hash,
 	filter,
+	displayThumbnail = true,
 	displayNewsletterBanner = true,
 	displayMigrationBanner = true,
 	activeTab = TabType.mobile,
-	overallScoreIsTab = false,
+	showV2 = false,
 	onRecommendationsFilterChange,
 }: PerformanceProfilerDashboardContentProps ) => {
 	const {
@@ -56,18 +57,20 @@ export const PerformanceProfilerDashboardContent = ( {
 	return (
 		<div className="performance-profiler-content">
 			<div className="l-block-wrapper container">
-				{ ! overallScoreIsTab && (
+				{ ! showV2 && (
 					<div className="top-section">
 						<PerformanceScore
 							value={ overall_score * 100 }
 							recommendationsQuantity={ Object.keys( audits ).length }
 							recommendationsRef={ insightsRef }
 						/>
-						<ScreenshotThumbnail
-							alt={ translate( 'Website thumbnail' ) }
-							src={ screenshots?.[ screenshots.length - 1 ].data }
-							activeTab={ activeTab }
-						/>
+						{ displayThumbnail && (
+							<ScreenshotThumbnail
+								alt={ translate( 'Website thumbnail' ) }
+								src={ screenshots?.[ screenshots.length - 1 ].data }
+								activeTab={ activeTab }
+							/>
+						) }
 					</div>
 				) }
 				<CoreWebVitalsDisplay
@@ -78,7 +81,7 @@ export const PerformanceProfilerDashboardContent = ( {
 					ttfb={ ttfb }
 					tbt={ tbt }
 					overall={ overall_score * 100 }
-					overallScoreIsTab={ overallScoreIsTab }
+					showV2={ showV2 }
 					history={ history }
 					audits={ audits }
 					recommendationsRef={ insightsRef }
@@ -106,6 +109,7 @@ export const PerformanceProfilerDashboardContent = ( {
 						ref={ insightsRef }
 						hash={ hash }
 						filter={ filter }
+						isLoggedInVersion={ showV2 }
 						onRecommendationsFilterChange={ onRecommendationsFilterChange }
 					/>
 				) }

diff --git a/client/performance-profiler/components/insights-section/index.tsx b/client/performance-profiler/components/insights-section/index.tsx
@@ -1,7 +1,4 @@
 import { SelectDropdown } from '@automattic/components';
-import { useDesktopBreakpoint } from '@automattic/viewport-react';
-import styled from '@emotion/styled';
-import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { ForwardedRef, forwardRef, useCallback, useEffect, useState } from 'react';
 import {
@@ -21,39 +18,14 @@ type InsightsSectionProps = {
 	isWpcom: boolean;
 	hash: string;
 	filter?: string;
+	isLoggedInVersion?: boolean;
 	onRecommendationsFilterChange?: ( filter: string ) => void;
 };
 
-const AIBadge = styled.span`
-	padding: 0 8px;
-	margin-left: 8px;
-	width: fit-content;
-	border-radius: 4px;
-	float: right;
-	font-size: 12px;
-	line-height: 20px;
-	color: var( --studio-gray-100 );
-	background: linear-gradient(
-			0deg,
-			rgba( 255, 255, 255, 0.95 ) 0%,
-			rgba( 255, 255, 255, 0.95 ) 100%
-		),
-		linear-gradient( 90deg, #4458e4 0%, #069e08 100% );
-
-	&.is-mobile {
-		float: none;
-		display: block;
-		margin-left: 0;
-		margin-top: 8px;
-	}
-`;
-
 export const InsightsSection = forwardRef(
 	( props: InsightsSectionProps, ref: ForwardedRef< HTMLDivElement > ) => {
 		const translate = useTranslate();
-		const isMobile = ! useDesktopBreakpoint();
-		const { audits, fullPageScreenshot, isWpcom, hash, filter, onRecommendationsFilterChange } =
-			props;
+		const { audits, fullPageScreenshot, isWpcom, hash, filter } = props;
 		const [ selectedFilter, setSelectedFilter ] = useState( filter ?? 'all' );
 
 		const sumMetricSavings = ( key: string ) =>
@@ -65,39 +37,58 @@ export const InsightsSection = forwardRef(
 		const filteredAudits = Object.keys( audits )
 			.filter( ( key ) => filterRecommendations( selectedFilter, audits[ key ] ) )
 			.sort( sortInsightKeys );
-		const onFilter = useCallback(
-			( option: { label: string; value: string } ) => {
-				recordTracksEvent( 'calypso_performance_profiler_recommendations_filter_change', {
-					filter: option.value,
-				} );
-				setSelectedFilter( option.value );
-				if ( onRecommendationsFilterChange ) {
-					onRecommendationsFilterChange( option.value );
-				} else {
-					updateQueryParams( { filter: option.value }, true );
-				}
-			},
-			[ onRecommendationsFilterChange ]
-		);
+		const onFilter = useCallback( ( option: { label: string; value: string } ) => {
+			recordTracksEvent( 'calypso_performance_profiler_recommendations_filter_change', {
+				filter: option.value,
+			} );
+			setSelectedFilter( option.value );
+			if ( props.onRecommendationsFilterChange ) {
+				props.onRecommendationsFilterChange( option.value );
+			} else {
+				updateQueryParams( { filter: option.value }, true );
+			}
+		}, [] );
 
 		useEffect( () => {
 			if ( filter && filter !== selectedFilter ) {
 				setSelectedFilter( filter );
 			}
 		}, [ selectedFilter, filter ] );
-
+		const siteOrPageSubtitle = props.isLoggedInVersion
+			? translate( 'your page' )
+			: translate( 'your site' );
 		return (
 			<div className="performance-profiler-insights-section" ref={ ref }>
 				<div className="header">
 					<div>
 						<h2 className="title">
-							{ translate( 'Personalized Recommendations' ) }
-							<AIBadge className={ clsx( { 'is-mobile': isMobile } ) }>
-								{ translate( 'Generated with AI' ) }
-							</AIBadge>
+							{ props.isLoggedInVersion
+								? translate( 'Recommendations' )
+								: translate( 'Improve your site‘s performance' ) }
 						</h2>
 						<p className="subtitle">
-							{ getSubtitleText( selectedFilter, filteredAudits.length, translate ) }
+							{ filteredAudits.length
+								? translate(
+										'We found %(quantity)d thing you can do for improving %(metric)s.',
+										'We found %(quantity)d things you can do for improving %(metric)s.',
+										{
+											args: {
+												quantity: filteredAudits.length,
+												metric:
+													selectedFilter === 'all'
+														? siteOrPageSubtitle
+														: metricsNames[ selectedFilter as keyof typeof metricsNames ]?.name,
+											},
+											count: filteredAudits.length,
+										}
+								  )
+								: translate( "Great job! We didn't find any recommendations for improving %s.", {
+										args: [
+											selectedFilter === 'all'
+												? translate( 'the speed of your site' )
+												: metricsNames[ selectedFilter as keyof typeof metricsNames ]?.name,
+										],
+								  } ) }
 						</p>
 					</div>
 					<div className="filter">
@@ -147,45 +138,3 @@ export const InsightsSection = forwardRef(
 		);
 	}
 );
-
-function getSubtitleText(
-	selectedFilter: string,
-	numRecommendations: number,
-	translate: ReturnType< typeof useTranslate >
-) {
-	if ( numRecommendations ) {
-		if ( selectedFilter === 'all' ) {
-			return translate(
-				'We found %(numRecommendations)d thing you can do for improving your page.',
-				'We found %(numRecommendations)d things you can do for improving your page.',
-				{
-					args: { numRecommendations },
-					count: numRecommendations,
-				}
-			);
-		}
-		return translate(
-			'We found %(numRecommendations)d thing you can do for improving %(metric)s.',
-			'We found %(numRecommendations)d things you can do for improving %(metric)s.',
-			{
-				args: {
-					numRecommendations,
-					metric: metricsNames[ selectedFilter as keyof typeof metricsNames ]?.name,
-				},
-				count: numRecommendations,
-			}
-		);
-	}
-
-	if ( selectedFilter === 'all' ) {
-		return translate(
-			"Great job! We didn't find any recommendations for improving the speed of your page."
-		);
-	}
-
-	return translate( "Great job! We didn't find any recommendations for improving %(metric)s.", {
-		args: {
-			metric: metricsNames[ selectedFilter as keyof typeof metricsNames ]?.name,
-		},
-	} );
-}
diff --git a/client/performance-profiler/components/insights-section/style.scss b/client/performance-profiler/components/insights-section/style.scss
@@ -22,7 +22,6 @@
 		font-size: 1rem;
 		font-weight: 500;
 		margin-bottom: 8px;
-		width: fit-content;
 	}
 
 	.subtitle {