Logged-in Performance Profiler: Add Header section (#94460)

* create device tab component * add page selector and device selector to header section * do not show tab
Automattic · Sep 12, 2024 · 62f150c · 62f150c
1 parent 94c74f1
commit 62f150c
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 6 deletions.
diff --git a/client/hosting/sites/components/site-preview-pane/dotcom-preview-pane.tsx b/client/hosting/sites/components/site-preview-pane/dotcom-preview-pane.tsx
@@ -1,4 +1,3 @@
-import config from '@automattic/calypso-config';
 import { useHasEnTranslation } from '@automattic/i18n-utils';
 import { SiteExcerptData } from '@automattic/sites';
 import { useI18n } from '@wordpress/react-i18n';
@@ -96,7 +95,7 @@ const DotcomPreviewPane = ( {
 			},
 			{
 				label: __( 'Performance' ),
-				enabled: isActiveAtomicSite && config.isEnabled( 'performance-profiler/logged-in' ),
+				enabled: false,
 				featureIds: [ DOTCOM_SITE_PERFORMANCE ],
 			},
 			{

diff --git a/client/site-performance/components/PageSelector.tsx b/client/site-performance/components/PageSelector.tsx
@@ -1,6 +1,7 @@
 import page from '@automattic/calypso-router';
 import { SearchableDropdown } from '@automattic/components';
 import { useDebouncedInput } from '@wordpress/compose';
+import { translate } from 'i18n-calypso';
 import { useSelector } from 'calypso/state';
 import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
 import { useSitePages } from '../hooks/useSitePages';
@@ -11,7 +12,16 @@ export const PageSelector = () => {
 	const pages = useSitePages( { query } );
 
 	return (
-		<>
+		<div
+			css={ {
+				display: 'flex',
+				alignItems: 'center',
+				flexGrow: 1,
+				justifyContent: 'flex-end',
+				gap: '10px',
+			} }
+		>
+			<div>{ translate( 'Page' ) }</div>
 			<SearchableDropdown
 				onFilterValueChange={ setQuery }
 				options={ pages }
@@ -29,6 +39,7 @@ export const PageSelector = () => {
 				} }
 				css={ {
 					maxWidth: '240px',
+					minWidth: '240px',
 					'.components-form-token-field__suggestions-list': { maxHeight: 'initial !important' },
 					'.components-form-token-field__suggestions-list li': { padding: '0 !important' },
 				} }
@@ -47,6 +58,6 @@ export const PageSelector = () => {
 					</div>
 				) }
 			/>
-		</>
+		</div>
 	);
 };
diff --git a/client/site-performance/components/device-tab-control/index.tsx b/client/site-performance/components/device-tab-control/index.tsx
@@ -0,0 +1,51 @@
+import { SegmentedControl } from '@automattic/components';
+import { useTranslate } from 'i18n-calypso';
+import { useState } from 'react';
+
+import './style.scss';
+
+type DeviceTabControlsProps = {
+	onDeviceTabChange: ( tab: string ) => void;
+};
+
+export const DeviceTabControls = ( { onDeviceTabChange }: DeviceTabControlsProps ) => {
+	const translate = useTranslate();
+	const [ selectedOption, setSelectedOption ] = useState( 'mobile' );
+
+	const handleOptionClick = ( newSelectedOption: string ) => {
+		setSelectedOption( newSelectedOption );
+
+		onDeviceTabChange( newSelectedOption );
+	};
+
+	const options = [
+		{
+			value: 'mobile',
+			label: translate( 'Mobile' ),
+		},
+		{
+			value: 'desktop',
+			label: translate( 'Desktop' ),
+		},
+	];
+
+	return (
+		<div className="site-performance-device-tab__container">
+			<div className="site-performance-device-tab__heading">{ translate( 'Device' ) }</div>
+			<SegmentedControl className="site-performance-device-tab__controls">
+				{ options.map( ( option ) => {
+					return (
+						<SegmentedControl.Item
+							key={ option.value }
+							value={ option.value }
+							selected={ selectedOption === option.value }
+							onClick={ () => handleOptionClick( option.value ) }
+						>
+							{ option.label }
+						</SegmentedControl.Item>
+					);
+				} ) }
+			</SegmentedControl>
+		</div>
+	);
+};
diff --git a/client/site-performance/components/device-tab-control/style.scss b/client/site-performance/components/device-tab-control/style.scss
@@ -0,0 +1,40 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
+.site-performance-device-tab__controls {
+	flex-grow: 1;
+	&.segmented-control .segmented-control__item:first-of-type .segmented-control__link {
+		border-top-left-radius: 4px;
+		border-bottom-left-radius: 4px;
+	}
+	&.segmented-control .segmented-control__item:last-of-type .segmented-control__link {
+		border-top-right-radius: 4px;
+		border-bottom-right-radius: 4px;
+	}
+	&.segmented-control .segmented-control__item.is-selected .segmented-control__link {
+		background-color: var(--color-link);
+		border-color: var(--color-link);
+	}
+	@include break-medium {
+		max-width: 329px;
+	}
+}
+
+.site-performance-device-tab__container {
+	display: flex;
+	justify-content: flex-end;
+	align-self: flex-start;
+	flex-direction: column;
+	gap: 10px;
+	flex-grow: 1;
+	@include break-medium {
+		flex-direction: row;
+		align-items: center;
+	}
+}
+
+.site-performance-device-tab__heading {
+	font-weight: 400;
+	font-size: 0.875rem;
+	line-height: 20px;
+}
diff --git a/client/site-performance/controller.tsx b/client/site-performance/controller.tsx
@@ -1,7 +1,7 @@
 import config from '@automattic/calypso-config';
 import page from '@automattic/calypso-router';
 import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
-import { PageSelector } from './components/PageSelector';
+import { SitePerformance } from './site-performance';
 import type { Context as PageJSContext } from '@automattic/calypso-router';
 
 export function sitePerformance( context: PageJSContext, next: () => void ) {
@@ -13,7 +13,7 @@ export function sitePerformance( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<>
 			<PageViewTracker path="/site-performance/:site" title="Site Performance" />
-			<PageSelector />
+			<SitePerformance />
 		</>
 	);
 

diff --git a/client/site-performance/site-performance.tsx b/client/site-performance/site-performance.tsx
@@ -0,0 +1,30 @@
+import { translate } from 'i18n-calypso';
+import InlineSupportLink from 'calypso/components/inline-support-link';
+import NavigationHeader from 'calypso/components/navigation-header';
+import { PageSelector } from './components/PageSelector';
+import { DeviceTabControls } from './components/device-tab-control';
+import './style.scss';
+
+export const SitePerformance = () => {
+	return (
+		<div className="site-performance">
+			<div className="site-performance-device-tab-controls__container">
+				<NavigationHeader
+					className="site-performance__navigation-header"
+					title={ translate( 'Performance' ) }
+					subtitle={ translate(
+						'Optimize your site for lightning-fast performance. {{link}}Learn more.{{/link}}',
+						{
+							components: {
+								link: <InlineSupportLink supportContext="site-monitoring" showIcon={ false } />,
+							},
+						}
+					) }
+				/>
+				<PageSelector />
+				<DeviceTabControls onDeviceTabChange={ () => {} } />
+			</div>
+			<div>Peformance insights</div>
+		</div>
+	);
+};
diff --git a/client/site-performance/style.scss b/client/site-performance/style.scss
@@ -0,0 +1,29 @@
+@use "sass:math";
+@import "@wordpress/base-styles/breakpoints";
+
+$section-max-width: 1224px;
+
+.site-performance {
+	padding: 0 max(calc(50% - #{math.div( $section-max-width, 2 )}), 32px);
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.site-performance-device-tab-controls__container {
+	display: flex;
+	gap: 24px;
+	flex-wrap: wrap;
+	align-items: start;
+	justify-content: space-between;
+}
+
+.site-performance__navigation-header.navigation-header {
+	width: auto;
+	padding-bottom: 0;
+	margin-bottom: 16px;
+
+	@media (max-width: $break-medium) {
+		margin-bottom: 8px;
+	}
+}