Logged in Performance Profiler: Update page selector to include searc…

…h icon (#94919) * update page selector to include search icon and match design more closely * disable tab control when loading * fix metric tab layout shift * fix search icon size and color * header alignment issues * disable controls when site unlaunched * move inline css to css class
Automattic · Sep 27, 2024 · de352cb · de352cb
1 parent 4a73ddf
commit de352cb
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 39 deletions.
diff --git a/client/hosting/performance/components/PageSelector.tsx b/client/hosting/performance/components/PageSelector.tsx
@@ -1,4 +1,6 @@
 import { SearchableDropdown } from '@automattic/components';
+import { Icon } from '@wordpress/components';
+import { search } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import { ComponentProps } from 'react';
 
@@ -10,24 +12,35 @@ export const PageSelector = ( props: ComponentProps< typeof SearchableDropdown >
 			<div css={ { alignSelf: 'stretch', display: 'flex', alignItems: 'center' } }>
 				{ translate( 'Page' ) }
 			</div>
-			<SearchableDropdown
-				{ ...props }
-				className="site-performance__page-selector-drowdown"
-				__experimentalRenderItem={ ( { item } ) => (
-					<div
-						aria-label={ item.label }
-						css={ {
-							display: 'flex',
-							flexDirection: 'column',
-							paddingInline: '16px',
-							paddingBlock: '8px',
-						} }
-					>
-						<span>{ item.label }</span>
-						<span>{ item.path }</span>
-					</div>
-				) }
-			/>
+			<div className="site-performance__page-selector-container">
+				<SearchableDropdown
+					{ ...props }
+					className="site-performance__page-selector-drowdown"
+					__experimentalRenderItem={ ( { item } ) => (
+						<div
+							aria-label={ item.label }
+							css={ {
+								display: 'flex',
+								flexDirection: 'column',
+								paddingInline: '16px',
+								paddingBlock: '8px',
+								fontSize: '0.875rem',
+								gap: '4px',
+							} }
+						>
+							<span>{ item.label }</span>
+							<span>{ item.path }</span>
+						</div>
+					) }
+				/>
+				<div className="site-performance__page-selector-search-icon">
+					<Icon
+						icon={ search }
+						size={ 24 }
+						style={ { fill: props.disabled ? 'var(--studio-gray-20)' : 'var(--color-neutral-50)' } }
+					/>
+				</div>
+			</div>
 		</div>
 	);
 };
diff --git a/client/hosting/performance/components/device-tab-control/index.tsx b/client/hosting/performance/components/device-tab-control/index.tsx
@@ -1,4 +1,5 @@
 import { SegmentedControl } from '@automattic/components';
+import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 
 import './style.scss';
@@ -9,12 +10,14 @@ type DeviceTabControlsProps = {
 	onDeviceTabChange: ( tab: Tab ) => void;
 	value: Tab;
 	showTitle?: boolean;
+	disabled?: boolean;
 };
 
 export const DeviceTabControls = ( {
 	onDeviceTabChange,
 	value,
 	showTitle,
+	disabled,
 }: DeviceTabControlsProps ) => {
 	const translate = useTranslate();
 
@@ -34,7 +37,9 @@ export const DeviceTabControls = ( {
 			{ showTitle && (
 				<div className="site-performance-device-tab__heading">{ translate( 'Device' ) }</div>
 			) }
-			<SegmentedControl className="site-performance-device-tab__controls">
+			<SegmentedControl
+				className={ clsx( 'site-performance-device-tab__controls', { [ 'disabled' ]: disabled } ) }
+			>
 				{ options.map( ( option ) => {
 					return (
 						<SegmentedControl.Item

diff --git a/client/hosting/performance/components/device-tab-control/style.scss b/client/hosting/performance/components/device-tab-control/style.scss
@@ -18,12 +18,28 @@
 	@include break-medium {
 		max-width: 329px;
 	}
+
+	&.disabled {
+		.segmented-control__item {
+			pointer-events: none;
+			.segmented-control__link {
+				color: var(--studio-gray-20);
+				border-color: var(--studio-gray-20);
+			}
+
+			&.is-selected .segmented-control__link {
+				background-color: transparent;
+				color: var(--studio-gray-20);
+				border-color: var(--studio-gray-20);
+				border-right: unset;
+			}
+		}
+	}
 }
 
 .site-performance-device-tab__container {
 	display: flex;
 	justify-content: flex-end;
-	align-self: flex-start;
 	flex-direction: column;
 	gap: 10px;
 	flex-grow: 1;

diff --git a/client/hosting/performance/site-performance.tsx b/client/hosting/performance/site-performance.tsx
@@ -201,13 +201,14 @@ export const SitePerformance = () => {
 	};
 
 	const isMobile = ! useDesktopBreakpoint();
+	const disableControls = performanceReport.isLoading || isInitialLoading || ! isSitePublic;
 
 	const pageSelector = (
 		<PageSelector
 			onFilterValueChange={ setQuery }
 			allowReset={ false }
 			options={ pageOptions }
-			disabled={ isInitialLoading || performanceReport.isLoading }
+			disabled={ disableControls }
 			onChange={ ( page_id ) => {
 				const url = new URL( window.location.href );
 
@@ -278,6 +279,7 @@ export const SitePerformance = () => {
 				<DeviceTabControls
 					showTitle={ ! isMobile }
 					onDeviceTabChange={ setActiveTab }
+					disabled={ disableControls }
 					value={ activeTab }
 				/>
 			</div>

diff --git a/client/hosting/performance/style.scss b/client/hosting/performance/style.scss
@@ -82,16 +82,17 @@ $section-max-width: 1224px;
 	display: flex;
 	gap: 24px;
 	flex-wrap: wrap;
-	align-items: start;
+	align-items: center;
 	justify-content: space-between;
+	margin-bottom: 16px;
 
 	.site-performance__page-selector {
 		display: flex;
 		align-items: flex-start;
 		flex-grow: 1;
 		justify-content: flex-end;
 		gap: 10px;
-		max-height: 40px;
+		max-height: 36px;
 
 		@media (max-width: $break-medium) {
 			flex-direction: column;
@@ -104,19 +105,37 @@ $section-max-width: 1224px;
 				width: 100%;
 			}
 		}
+
+
+	}
+
+	.components-base-control {
+		margin: 0 !important;
 	}
 
 	.navigation-header-title {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 	}
+
+	.site-performance__page-selector-search-icon {
+		position: absolute;
+		right: 10px;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-self: start;
+		z-index: 2;
+		height: 100%;
+		margin-top: 6px;
+		pointer-events: none;
+	}
 }
 
 .site-performance__navigation-header.navigation-header {
 	width: auto;
 	padding-bottom: 0;
-	margin-bottom: 16px;
 
 	.gridicon {
 		fill: var(--color-neutral-100);
@@ -139,15 +158,28 @@ $section-max-width: 1224px;
 .site-performance__page-selector-drowdown {
 	max-width: 240px;
 	min-width: 240px;
+	margin: 0;
 
 	.components-combobox-control__suggestions-container {
 		position: relative;
 		z-index: 1;
 		background: var(--color-surface);
+
+		.components-flex {
+			height: 36px;
+		}
+
+	}
+
+	input.components-combobox-control__input[type="text"] {
+		height: 34px;
+		padding-right: 30px;
+		font-size: 0.875rem;
 	}
 
 	.components-form-token-field__suggestions-list {
 		max-height: initial !important;
+		box-shadow: inset 0 -1px 0 0 var(--color-neutral-50);
 	}
 
 	.components-form-token-field__suggestions-list li {
@@ -158,3 +190,12 @@ $section-max-width: 1224px;
 		max-width: unset;
 	}
 }
+
+.site-performance__page-selector-container {
+	position: relative;
+	display: flex;
+
+	@media (max-width: $break-medium) {
+		width: 100%;
+	}
+}
diff --git a/client/performance-profiler/components/metric-tab-bar/style_v2.scss b/client/performance-profiler/components/metric-tab-bar/style_v2.scss
@@ -13,6 +13,7 @@ $blueberry-color: #3858e9;
 	button {
 		color: inherit;
 	}
+
 }
 
 .metric-tab-bar-v2__tab {
@@ -22,25 +23,33 @@ $blueberry-color: #3858e9;
 	flex-grow: 1;
 	padding: 16px 22px 16px 22px;
 	width: 100%;
-
+	border: 1px solid transparent;
 	&:not(.active) {
 		border-bottom: 1px solid var(--gutenberg-gray-100, #f0f0f0);
 
+		&:not(:nth-child(-n+2)) {
+			border-top-color: transparent;
+		}
+
 		&:last-child {
-			border-bottom: unset;
+			border-bottom-color: transparent;
+		}
+
+		&.metric-tab-bar-v2__performance {
+			border-bottom-color: transparent;
 		}
+
 	}
 
 	&.active {
 		/* stylelint-disable-next-line scales/radii */
 		border-radius: 6px;
-		border: 1.5px solid $blueberry-color;
+		border-color: transparent;
+		outline: 1.5px solid $blueberry-color;
 		position: relative;
-		margin-left: -1px;
-		width: 101%;
 
 		& + .metric-tab-bar-v2__tab {
-			border-top: none;
+			border-top-color: transparent;
 		}
 	}
 
@@ -87,14 +96,7 @@ $blueberry-color: #3858e9;
 	margin-bottom: 16px;
 	/* stylelint-disable-next-line scales/radii */
 	border-radius: 6px;
-	border: 1px solid var(--studio-gray-5);
-	&:not(.active) {
-		border-color: var(--studio-gray-5);
-	}
-	&.active {
-		width: 100%;
-		margin-left: unset;
-	}
+	outline: 1px solid var(--studio-gray-5);
 }
 
 .metric-tab-bar-v2__tab-container {
@@ -103,6 +105,6 @@ $blueberry-color: #3858e9;
 	border-radius: 6px;
 
 	.metric-tab-bar-v2__tab:has(+ .metric-tab-bar-v2__tab.active) {
-		border-bottom: none;
+		border-bottom-color: transparent;
 	}
 }