Merge pull request #6376 from google/enhance/#6106-disable-psi-tabs

Enhance/6106 - Disable PSI widgets tabs when the test is running
google · Jan 5, 2023 · 5bdcc76 · 5bdcc76
2 parents 96d14d6 + 99f488c
commit 5bdcc76
Show file tree

Hide file tree

Showing 7 changed files with 210 additions and 26 deletions.
diff --git a/assets/js/components/DeviceSizeTabBar.js b/assets/js/components/DeviceSizeTabBar.js
@@ -37,6 +37,7 @@ import DeviceSizeDesktopIcon from '../../svg/icons/device-size-desktop-icon.svg'
 
 const DeviceSizeTabBar = ( {
 	activeTab,
+	disabled = false,
 	handleDeviceSizeUpdate,
 	deviceSizes = [
 		{
@@ -78,6 +79,7 @@ const DeviceSizeTabBar = ( {
 					<Tab
 						key={ `google-sitekit-device-size-tab-key-${ i }` }
 						aria-label={ label }
+						disabled={ disabled }
 						focusOnActivate={ false }
 					>
 						{ icon }
@@ -90,6 +92,7 @@ const DeviceSizeTabBar = ( {
 
 DeviceSizeTabBar.propTypes = {
 	activeTab: PropTypes.string,
+	disabled: PropTypes.bool,
 	deviceSizes: PropTypes.arrayOf(
 		PropTypes.shape( {
 			label: PropTypes.string,

diff --git a/assets/js/modules/pagespeed-insights/components/dashboard/DashboardPageSpeed.js b/assets/js/modules/pagespeed-insights/components/dashboard/DashboardPageSpeed.js
@@ -311,6 +311,7 @@ export default function DashboardPageSpeed() {
 							<Tab
 								focusOnActivate={ false }
 								aria-labelledby={ `googlesitekit-pagespeed-widget__data-src-tab-${ DATA_SRC_LAB }` }
+								disabled={ isFetching }
 							>
 								<span
 									id={ `googlesitekit-pagespeed-widget__data-src-tab-${ DATA_SRC_LAB }` }
@@ -322,6 +323,7 @@ export default function DashboardPageSpeed() {
 							<Tab
 								focusOnActivate={ false }
 								aria-labelledby={ `googlesitekit-pagespeed-widget__data-src-tab-${ DATA_SRC_FIELD }` }
+								disabled={ isFetching }
 							>
 								<span
 									id={ `googlesitekit-pagespeed-widget__data-src-tab-${ DATA_SRC_FIELD }` }
@@ -333,6 +335,7 @@ export default function DashboardPageSpeed() {
 							<Tab
 								focusOnActivate={ false }
 								aria-labelledby={ `googlesitekit-pagespeed-widget__data-src-tab-${ DATA_SRC_RECOMMENDATIONS }` }
+								disabled={ isFetching }
 							>
 								<span
 									id={ `googlesitekit-pagespeed-widget__data-src-tab-${ DATA_SRC_RECOMMENDATIONS }` }
@@ -349,6 +352,7 @@ export default function DashboardPageSpeed() {
 					<div className="googlesitekit-pagespeed-widget__device-size-tab-bar-wrapper">
 						<DeviceSizeTabBar
 							activeTab={ strategy }
+							disabled={ isFetching }
 							handleDeviceSizeUpdate={ updateActiveDeviceSize }
 						/>
 					</div>
@@ -397,6 +401,7 @@ export default function DashboardPageSpeed() {
 								'googlesitekit-pagespeed__recommendations-cta--hidden':
 									! recommendations?.length,
 							} ) }
+							disabled={ isFetching }
 							onClick={ () =>
 								updateActiveTab( TAB_INDEX_RECOMMENDATIONS )
 							}

diff --git a/assets/js/modules/pagespeed-insights/components/dashboard/DashboardPageSpeed.test.js b/assets/js/modules/pagespeed-insights/components/dashboard/DashboardPageSpeed.test.js
@@ -281,4 +281,120 @@ describe( 'DashboardPageSpeed', () => {
 
 		expect( queryByText( /Field data unavailable/i ) ).toBeInTheDocument();
 	} );
+
+	it( 'should disable the `How to improve` button when the test is running', async () => {
+		freezeFetch(
+			new RegExp(
+				'^/google-site-kit/v1/modules/pagespeed-insights/data/pagespeed'
+			)
+		);
+		// Needs second freezeFetch call, as one is for desktop and the other for mobile.
+		freezeFetch(
+			new RegExp(
+				'^/google-site-kit/v1/modules/pagespeed-insights/data/pagespeed'
+			)
+		);
+		const { getByRole } = render( <DashboardPageSpeed />, {
+			setupRegistry: setupRegistryNoFieldDataDesktop,
+		} );
+
+		const runTestAgainBtn = getByRole( 'button', {
+			name: /Run test again/i,
+		} );
+		const howToImproveBtn = getByRole( 'button', {
+			name: /How to improve/i,
+		} );
+
+		await act( async () => {
+			fireEvent.click( runTestAgainBtn );
+
+			await waitFor( () => {
+				// Verifies the `How to improve` button is disabled when the test is running.
+				expect( howToImproveBtn ).toBeDisabled();
+			} );
+		} );
+	} );
+
+	it( 'should disable the data source tabs when the test is running', async () => {
+		freezeFetch(
+			new RegExp(
+				'^/google-site-kit/v1/modules/pagespeed-insights/data/pagespeed'
+			)
+		);
+		// Needs second freezeFetch call, as one is for desktop and the other for mobile.
+		freezeFetch(
+			new RegExp(
+				'^/google-site-kit/v1/modules/pagespeed-insights/data/pagespeed'
+			)
+		);
+		const { getByRole } = render( <DashboardPageSpeed />, {
+			setupRegistry: setupRegistryNoFieldDataDesktop,
+		} );
+
+		const runTestAgainBtn = getByRole( 'button', {
+			name: /Run test again/i,
+		} );
+		// Data source tabs.
+		const inTheLabTab = getByRole( 'tab', {
+			name: /In the Lab/i,
+		} );
+		const inTheFieldTab = getByRole( 'tab', {
+			name: /In the Field/i,
+		} );
+		const howToImproveTab = getByRole( 'tab', {
+			name: /How to improve/i,
+		} );
+
+		await act( async () => {
+			fireEvent.click( runTestAgainBtn );
+
+			await waitFor( () => {
+				// Verifies the `In the Lab` tab is disabled.
+				expect( inTheLabTab ).toBeDisabled();
+				// Verifies the `In the Field` tab is disabled.
+				expect( inTheFieldTab ).toBeDisabled();
+				// Verifies the `How to improve` tab is disabled.
+				expect( howToImproveTab ).toBeDisabled();
+			} );
+		} );
+	} );
+
+	it( 'should disable the device size tabs when the test is running', async () => {
+		freezeFetch(
+			new RegExp(
+				'^/google-site-kit/v1/modules/pagespeed-insights/data/pagespeed'
+			)
+		);
+		// Needs second freezeFetch call, as one is for desktop and the other for mobile.
+		freezeFetch(
+			new RegExp(
+				'^/google-site-kit/v1/modules/pagespeed-insights/data/pagespeed'
+			)
+		);
+		const { getByRole } = render( <DashboardPageSpeed />, {
+			setupRegistry: setupRegistryNoFieldDataDesktop,
+		} );
+
+		const runTestAgainBtn = getByRole( 'button', {
+			name: /Run test again/i,
+		} );
+		// Device size tabs.
+		const mobileTab = getByRole( 'tab', {
+			name: /Mobile/i,
+		} );
+		const desktopTab = getByRole( 'tab', {
+			name: /Desktop/i,
+		} );
+
+		await act( async () => {
+			fireEvent.click( runTestAgainBtn );
+
+			await waitFor( () => {
+				// Verifies the device `Mobile` tab is disabled.
+				expect( mobileTab ).toBeDisabled();
+				// Verifies the device `Desktop` tab is disabled.
+				expect( desktopTab ).toBeDisabled();
+			} );
+		} );
+	} );
 } );
diff --git a/...ts/js/modules/pagespeed-insights/components/dashboard/DashboardPageSpeedWidget.stories.js b/...ts/js/modules/pagespeed-insights/components/dashboard/DashboardPageSpeedWidget.stories.js
@@ -97,6 +97,58 @@ Loading.args = {
 	},
 };
 
+export const TestRunningDisabled = Template.bind( {} );
+TestRunningDisabled.storyName = 'Test Running Disabled';
+TestRunningDisabled.args = {
+	setupRegistry: ( { dispatch } ) => {
+		freezeFetch(
+			new RegExp(
+				'^/google-site-kit/v1/modules/pagespeed-insights/data/pagespeed'
+			)
+		);
+		// Needs second freezeFetch call, as one is for desktop and the other for mobile.
+		freezeFetch(
+			new RegExp(
+				'^/google-site-kit/v1/modules/pagespeed-insights/data/pagespeed'
+			)
+		);
+
+		dispatch( MODULES_PAGESPEED_INSIGHTS ).receiveGetReport(
+			fixtures.pagespeedMobileNoFieldData,
+			{
+				url,
+				strategy: STRATEGY_MOBILE,
+			}
+		);
+		dispatch( MODULES_PAGESPEED_INSIGHTS ).finishResolution( 'getReport', [
+			url,
+			STRATEGY_MOBILE,
+		] );
+
+		dispatch( MODULES_PAGESPEED_INSIGHTS ).receiveGetReport(
+			fixtures.pagespeedDesktopNoFieldData,
+			{
+				url,
+				strategy: STRATEGY_DESKTOP,
+			}
+		);
+		dispatch( MODULES_PAGESPEED_INSIGHTS ).finishResolution( 'getReport', [
+			url,
+			STRATEGY_DESKTOP,
+		] );
+
+		// Invalidate the cached resolver to get the disabled state.
+		dispatch( MODULES_PAGESPEED_INSIGHTS ).invalidateResolution(
+			'getReport',
+			[ url, STRATEGY_DESKTOP ]
+		);
+		dispatch( MODULES_PAGESPEED_INSIGHTS ).invalidateResolution(
+			'getReport',
+			[ url, STRATEGY_MOBILE ]
+		);
+	},
+};
+
 export const NoRecommendations = Template.bind( {} );
 NoRecommendations.storyName = 'No Recommendations';
 NoRecommendations.args = {

diff --git a/assets/sass/components/global/_googlesitekit-DeviceSizeTabBar.scss b/assets/sass/components/global/_googlesitekit-DeviceSizeTabBar.scss
@@ -56,4 +56,9 @@
 			}
 		}
 	}
+
+	.mdc-tab--active[disabled] {
+		background-color: $c-jumbo;
+		opacity: 0.6;
+	}
 }
diff --git a/assets/sass/vendor/_mdc-tab.scss b/assets/sass/vendor/_mdc-tab.scss
@@ -1,20 +1,36 @@
 // Overrides for .mdc-tab
-.googlesitekit-plugin .mdc-tab {
+.googlesitekit-plugin {
 
-	@include mdc-tab-active-text-label-color($c-content-primary);
-	@include mdc-tab-states-color($c-content-primary);
+	.mdc-tab {
 
-	font-size: $fs-body-sm;
-	letter-spacing: $ls-xs;
-	line-height: 1;
-	text-transform: none;
+		@include mdc-tab-active-text-label-color($c-content-primary);
+		@include mdc-tab-states-color($c-content-primary);
 
-	&:hover {
-		text-decoration: none;
-	}
+		font-size: $fs-body-sm;
+		letter-spacing: $ls-xs;
+		line-height: 1;
+		text-transform: none;
+
+		&:hover {
+			text-decoration: none;
+		}
+
+		&:focus {
+			color: $c-content-primary;
+			outline: none;
+		}
+
+		&[disabled] {
+			cursor: default;
+		}
+
+		&[disabled] .mdc-tab__ripple {
+			display: none;
+		}
 
-	&:focus {
-		color: $c-content-primary;
-		outline: none;
+		&[disabled] .mdc-tab__text-label {
+			color: $c-jumbo;
+			opacity: 0.6;
+		}
 	}
 }
diff --git a/assets/sass/widgets/_googlesitekit-widget-analyticsAllTraffic.scss b/assets/sass/widgets/_googlesitekit-widget-analyticsAllTraffic.scss
@@ -66,19 +66,6 @@
 				margin: 0;
 				padding: 0 10px;
 			}
-
-			&[disabled] {
-				cursor: default;
-			}
-
-			&[disabled] .mdc-tab__ripple {
-				display: none;
-			}
-
-			&[disabled] .mdc-tab__text-label {
-				color: $c-jumbo;
-				opacity: 0.6;
-			}
 		}
 
 		.mdc-tab--active[disabled] .mdc-tab-indicator__content--underline {