Stats: Release Navigation Improvements (#103367)

* flip the flag

* Fix stats-navigation tab selectors for tests

* Stats: Fix e2e tests by handling new selectors for the new nav header (#103384)

* Add a new utility function for clicking on new navigation

* Handle selectors for the new navigation header in e2e tests

* Don't update the selector for other tests apart from stats

* Adjust styling for summary nav on mobile (#103363)

* Remove `preventWidows` from `client/components` (#103187)

* Remove `preventWidows` from `client/components`

* CardHeading

* VisibleDaysLimitUpsell

* Add new site for A4A and add styles

* Remove preventWidows and disablePreventWidows from FormattedHeader

* Happiness support

* BackupGettingStarted

* JetpackProductCardFeaturesItem

* JetpackProductCard

* Jetpack backups

* Backup successful

* IntroPricingBanner

* JetpackDisconnected

* JetpackDisconnectedWPCOM

* LicensingActivation

* PurchaseDetail

* SeoPreviewNudge

* Add new site popover

* theme collection

* Update test snapshots

* Fix Storybook compilation in components package (#103362)

* Add conditionNames for Storybook Webpack build

* Editor: Stop preloading section (#103334)

* Editor: Stop preloading section

* Get rid of actionHoverCallback

* Breadcrumbs: Add `renderItemLink ` prop (#103321)

* SummaryButton: Add `renderLink` prop

* Rename to renderItemLink, split Item vs BreadcrumbsItemProps, refactor implementation

* Prevent flickering in Storybook when opning menu in compact mode

* Add open for extension to docs

* add a test and console.log in story

* feedback

---------

Co-authored-by: Marco Ciampini <[email protected]>

* Update different A4A labels to sentence case (#103238)

* Update different A4A labels to sentence case

* Fix one more occurence

* Showing multiple domain selection on new-hosted-site flow (#103359)

* E2E Auth: Fix apple login flow to wpcom and woo (#103357)

* Encript updated path

* E2E auth apple: fix wpcom and woo auth flows

* Follow up of #103321 (#103382)

* WooCoreProfilerMasterbar: fix useSelector and useTranslate usages (#103373)

* Fix/stop import redirect after failed wix (#103358)

* Redirect to the correct step when a wix migration fails

* remove hardcoded true

---------

Co-authored-by: Andrés Blanco <[email protected]>

* Notifications settings: change Publicized copy  (#103265)

* change copy for Jetpack Social notification setting (formerly Publicized)

* do not translate brand name

* Improves the design for the Migration Requested page (#103183)

* Improves the design for the Migration Requested page

* Remove card borders

* A4A: Fix the background color (#103389)

* Revert "Notifications settings: change Publicized copy  (#103265)" (#103392)

This reverts commit c320da3.

* Apps: Fix Odyssey translation extraction. (#103393)

* change Publicized copy to Jetpack Social brand, add translators comment (#103395)

* Fix e2e onboarding new hosted site tests (#103383)

* Upgrade importers to container v2 (#103024)

* Upgrade importers to container v2

* remove test string

* show title inside the import drag if not using container v2

* fix heading wp importer

* fix progressbar

* hacky but working

* apply Gabriel's suggestions

---------

Co-authored-by: Andrés Blanco <[email protected]>

* Apps: Fix Odyssey widget reactivity. (#103400)

* STATS-64: Don't dispatch legacy country data (#103376)

* STATS-67 - Don't navigate to the current tab if we are already on the current tab (#103379)

* STATS-67: Don't reload page if current tab is already the selected tab

* Add comment as to why the tab selected conditionally

* Stats: Fix styling on Odyssey Stats for Navigation Improvement (#103369)

* Fix main navigation mobile dropdown item padding

* Make mobile summary nav dropdown 100% width

* Fix Locations summary mobile item list label padding

* Fix stats-navigation tab selectors for tests

* Stats: Fix e2e tests by handling new selectors for the new nav header (#103384)

* Add a new utility function for clicking on new navigation

* Handle selectors for the new navigation header in e2e tests

* Don't update the selector for other tests apart from stats

* remove has-fixed-nav when new nav enabled

* avoid loading style conflicts

---------

Co-authored-by: Nikhil <[email protected]>
Co-authored-by: Dognose <[email protected]>
Co-authored-by: Dognose <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: Andrew Duthie <[email protected]>
Co-authored-by: Marin Atanasov <[email protected]>
Co-authored-by: Nik Tsekouras <[email protected]>
Co-authored-by: Marco Ciampini <[email protected]>
Co-authored-by: Wojtek Naruniec <[email protected]>
Co-authored-by: Paulo Marcos Trentin <[email protected]>
Co-authored-by: Bogdan Nikolic <[email protected]>
Co-authored-by: Jarda Snajdr <[email protected]>
Co-authored-by: Andrés Blanco <[email protected]>
Co-authored-by: Andrés Blanco <[email protected]>
Co-authored-by: Christian Gastrell <[email protected]>
Co-authored-by: valterlorran <[email protected]>
Co-authored-by: arthur791004 <[email protected]>
Co-authored-by: sdnunca <[email protected]>

Author: 18 people

client/blocks/stats-navigation/index.js

@@ -99,7 +99,9 @@ const SelectNav = ( {
 						}
 						return (
 							<NavItem
-								className={ className }
+								className={ clsx( className, {
+									'is-active': selectedItem === item,
+								} ) }
 								key={ item }
 								path={ itemPath }
 								selected={ selectedItem === item }
@@ -131,7 +133,7 @@ const TabNav = ( { validNavItems, interval, slugPath, adminUrl, selectedItem, sh
 		return {
 			name: item,
 			title: navItem.label + ( navItem.paywall && showLock ? ' 🔒' : '' ),
-			className: 'stats-navigation__' + item,
+			className: clsx( 'stats-navigation__' + item, 'navigation-tab' ),
 			path: itemPath,
 		};
 	} );

client/components/section-nav/item.jsx

@@ -56,7 +56,11 @@ class NavItem extends PureComponent {
 				<a
 					href={ this.props.path }
 					target={ target }
-					className={ 'section-nav-' + itemClassPrefix + '__link' }
+					className={ clsx(
+						'section-nav-' + itemClassPrefix + '__link',
+						this.props.className,
+						'navigation-tab'
+					) }
 					onClick={ onClick }
 					onMouseEnter={ this.preload }
 					tabIndex={ this.props.tabIndex || 0 }

client/my-sites/stats/stats-email-detail/index.jsx

@@ -232,7 +232,11 @@ class StatsEmailDetail extends Component {
 
 		return (
 			<>
-				<Main className="has-fixed-nav stats__email-detail stats">
+				<Main
+					className={ clsx( 'stats', 'stats__email-detail', {
+						'has-fixed-nav': ! config.isEnabled( 'stats/navigation-improvement' ),
+					} ) }
+				>
 					<QueryPosts siteId={ siteId } postId={ postId } />
 					<QueryPostStats siteId={ siteId } postId={ postId } />
 					<QueryEmailStats
@@ -395,7 +399,7 @@ class StatsEmailDetail extends Component {
 							</div>
 						</>
 					) : (
-						<Spinner />
+						<Spinner baseClassName="calypso-spinner" />
 					) }
 				</Main>
 			</>

client/my-sites/stats/stats-email-summary/index.jsx

@@ -1,5 +1,6 @@
 import config from '@automattic/calypso-config';
 import { formatNumber } from '@automattic/number-formatters';
+import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { useMemo } from 'react';
 import JetpackColophon from 'calypso/components/jetpack-colophon';
@@ -71,7 +72,12 @@ const StatsEmailSummary = ( { period, query } ) => {
 	};
 
 	return (
-		<Main className="has-fixed-nav" fullWidthLayout>
+		<Main
+			className={ clsx( {
+				'has-fixed-nav': ! config.isEnabled( 'stats/navigation-improvement' ),
+			} ) }
+			fullWidthLayout
+		>
 			<PageViewTracker path="/stats/emails/:site" title="Stats > Emails" />
 			<div className="stats stats-summary-view">
 				{ isStatsNavigationImprovementEnabled && (

client/my-sites/stats/stats-email-top-row/top-card.jsx

@@ -10,7 +10,7 @@ const TopCardValue = ( { value, isLoading } ) => {
 	const isNumber = Number.isFinite( value );
 
 	if ( isLoading ) {
-		return <Spinner />;
+		return <Spinner baseClassName="calypso-spinner" />;
 	}
 	if ( value === null ) {
 		return <span className="highlight-card-count-value">-</span>;

client/my-sites/stats/stats-module/placeholder.tsx

@@ -20,7 +20,7 @@ const StatsModulePlaceholder: React.FC< StatsModulePlaceholderProps > = ( {
 
 	return (
 		<div className={ classes }>
-			<Spinner />
+			<Spinner baseClassName="calypso-spinner" />
 		</div>
 	);
 };

client/my-sites/stats/stats-post-detail/index.jsx

@@ -203,8 +203,9 @@ class StatsPostDetail extends Component {
 		}
 
 		const isWPAdmin = config.isEnabled( 'is_odyssey' );
-		const postDetailPageClasses = clsx( 'stats has-fixed-nav', {
+		const postDetailPageClasses = clsx( 'stats', {
 			'is-odyssey-stats': isWPAdmin,
+			'has-fixed-nav': ! config.isEnabled( 'stats/navigation-improvement' ),
 		} );
 
 		// TODO: Refactor navigationItems to a single object with backLink and title attributes.

client/my-sites/stats/stats-subscribers-highlight-section/index.tsx

@@ -104,7 +104,7 @@ function SubscriberHighlightsStandard( {
 
 function SubscriberHighlightsMobile( { highlights, isLoading }: SubscriberHighlightsRenderProps ) {
 	if ( isLoading ) {
-		return <Spinner />;
+		return <Spinner baseClassName="calypso-spinner" />;
 	}
 
 	return <MobileHighlightCardListing highlights={ highlights } />;

config/horizon.json

@@ -127,7 +127,7 @@
 		"stats/empty-module-traffic": true,
 		"stats/paid-wpcom-v2": true,
 		"stats/real-time-tab": false,
-		"stats/navigation-improvement": false,
+		"stats/navigation-improvement": true,
 		"subscriber-importer": true,
 		"subscribers-helper-library": true,
 		"themes/block-theme-previews-premium-and-woo": true,

config/production.json

@@ -163,7 +163,7 @@
 		"stats/paid-wpcom-v2": true,
 		"stats/paid-wpcom-v3": true,
 		"stats/real-time-tab": false,
-		"stats/navigation-improvement": false,
+		"stats/navigation-improvement": true,
 		"subscriber-importer": true,
 		"subscribers-helper-library": true,
 		"themes/block-theme-previews-premium-and-woo": true,

config/stage.json

@@ -158,7 +158,7 @@
 		"stats/paid-wpcom-v2": true,
 		"stats/paid-wpcom-v3": true,
 		"stats/real-time-tab": false,
-		"stats/navigation-improvement": false,
+		"stats/navigation-improvement": true,
 		"subscriber-importer": true,
 		"subscribers-helper-library": true,
 		"themes/block-theme-previews-premium-and-woo": true,

config/test.json

@@ -117,7 +117,7 @@
 		"ssr/prefetch-timebox": true,
 		"stats/chart-library": true,
 		"stats/empty-module-traffic": true,
-		"stats/navigation-improvement": false,
+		"stats/navigation-improvement": true,
 		"subscribers-helper-library": true,
 		"themes/premium": true,
 		"upgrades/redirect-payments": true,

config/wpcalypso.json

@@ -160,7 +160,7 @@
 		"stats/paid-wpcom-v2": true,
 		"stats/paid-wpcom-v3": true,
 		"stats/real-time-tab": false,
-		"stats/navigation-improvement": false,
+		"stats/navigation-improvement": true,
 		"subscriber-importer": true,
 		"subscribers-helper-library": true,
 		"themes/block-theme-previews-premium-and-woo": true,

packages/calypso-e2e/src/element-helper.ts

@@ -1,13 +1,16 @@
 import { Locator, Page, Frame } from 'playwright';
 import envVariables from './env-variables';
 
-const navTabParent = 'div.section-nav';
+const navTabParent = 'div.stats-navigation__tabs';
+const legacyNavTabParent = 'div.section-nav';
 
 const selectors = {
 	// clickNavTab
 	navTabItem: ( { name = '', selected = false }: { name?: string; selected?: boolean } = {} ) =>
-		`${ navTabParent } a[aria-current="${ selected }"]:has(span:has-text("${ name }"))`,
-	navTabMobileToggleButton: `${ navTabParent } button.section-nav__mobile-header`,
+		envVariables.VIEWPORT_NAME === 'mobile'
+			? `${ legacyNavTabParent } a[aria-current="${ selected }"]:has(span:has-text("${ name }"))`
+			: `${ navTabParent } button[aria-selected="${ selected }"]:has-text("${ name }")`,
+	navTabMobileToggleButton: `${ legacyNavTabParent } button.section-nav__mobile-header`,
 };
 
 /**
@@ -59,41 +62,62 @@ export async function clickNavTab(
 	page: Page,
 	name: string,
 	{ force }: { force?: boolean } = {}
+): Promise< void > {
+	await clickNavTabBase( page, name, selectors.navTabItem, selectors.navTabMobileToggleButton, {
+		force,
+	} );
+}
+
+/**
+ * Locates and clicks on a specified tab on the NavTab.
+ *
+ * NavTabs are used throughout calypso to contain sub-pages within the parent page.
+ * For instance, on the Media gallery page a NavTab is used to filter the gallery to
+ * show a specific category of gallery items.
+ *
+ * @param {Page} page Underlying page on which interactions take place.
+ * @param {string} name Name of the tab to be clicked.
+ * @throws {Error} If the tab name is not the active tab.
+ */
+export async function clickNavTabBase(
+	page: Page,
+	name: string,
+	tabSelector: ( params: { name?: string; selected?: boolean } ) => string,
+	tabSelectorMobile: string,
+	{ force }: { force?: boolean } = {}
 ): Promise< void > {
 	// Short circuit operation if the active tab and target tabs are the same.
 	// Strip numerals from the extracted tab name to account for the slightly
 	// different implementation in PostsPage.
-	const selectedTabLocator = page.locator( selectors.navTabItem( { selected: true } ) );
+	const selectedTabLocator = page.locator( tabSelector( { selected: true } ) );
 	const selectedTabName = await selectedTabLocator.innerText();
 	if ( selectedTabName.replace( /[0-9]|,/g, '' ) === name ) {
 		return;
 	}
 
 	// If force option is specified, force click using a `dispatchEvent`.
 	if ( force ) {
-		return await page.dispatchEvent( selectors.navTabItem( { name: name } ), 'click' );
+		return await page.dispatchEvent( tabSelector( { name: name } ), 'click' );
 	}
 
 	// Mobile view - navtabs become a dropdown and thus it must be opened first.
 	if ( envVariables.VIEWPORT_NAME === 'mobile' ) {
 		// Open the Navtabs which now act as a pseudo-dropdown menu.
-		const navTabsButtonLocator = page.locator( selectors.navTabMobileToggleButton );
+		const navTabsButtonLocator = page.locator( tabSelectorMobile );
 		await navTabsButtonLocator.click( { noWaitAfter: true } );
 
-		const navTabIsOpenLocator = page.locator( `${ navTabParent }.is-open` );
+		const navTabIsOpenLocator = page.locator( `${ legacyNavTabParent }.is-open` );
 		await navTabIsOpenLocator.waitFor();
 	}
 
 	// Click on the intended item and wait for navigation to finish.
-	const navTabItem = page.locator( selectors.navTabItem( { name: name, selected: false } ) );
+	const navTabItem = page.locator( tabSelector( { name: name, selected: false } ) );
 
 	const regex = new RegExp( `.*/${ name.toLowerCase() }/.*` );
 	await Promise.all( [ page.waitForURL( regex ), navTabItem.click() ] );
 
 	// Final verification, check that we are now on the expected navtab.
-	const newSelectedTabLocator = page.locator(
-		selectors.navTabItem( { name: name, selected: true } )
-	);
+	const newSelectedTabLocator = page.locator( tabSelector( { name: name, selected: true } ) );
 	const newSelectedTabName = await newSelectedTabLocator.innerText();
 
 	if ( newSelectedTabName.replace( /[0-9]|,/g, '' ) !== name ) {

packages/calypso-e2e/src/lib/pages/stats-page.ts

@@ -1,7 +1,7 @@
 import { Locator, Page } from 'playwright';
 import { envVariables } from '../..';
 import { getCalypsoURL } from '../../data-helper';
-import { clickNavTab } from '../../element-helper';
+import { clickNavTab } from '../utils';
 
 export type StatsTabs = 'Traffic' | 'Insights' | 'Subscribers' | 'Store';
 type TrafficActivityType = 'Views' | 'Visitors' | 'Likes' | 'Comments';

packages/calypso-e2e/src/lib/utils/click-nav-tab.ts

@@ -0,0 +1,33 @@
+import { Page } from 'playwright';
+import { clickNavTabBase } from '../../element-helper';
+
+const navTabParent = '.stats-navigation';
+
+const selectors = {
+	navTabItem: ( { name = '', selected = false }: { name?: string; selected?: boolean } = {} ) =>
+		`${ navTabParent } .navigation-tab${ selected ? '.is-active' : '' }:has-text("${ name }")`,
+	navTabMobileToggleButton: `${ navTabParent } button.section-nav__mobile-header`,
+};
+
+/**
+ * Locates and clicks on a specified tab on the NavTab.
+ *
+ * NavTabs are used throughout calypso to contain sub-pages within the parent page.
+ * For instance, on the Media gallery page a NavTab is used to filter the gallery to
+ * show a specific category of gallery items.
+ *
+ * @param {Page} page Underlying page on which interactions take place.
+ * @param {string} name Name of the tab to be clicked.
+ * @throws {Error} If the tab name is not the active tab.
+ */
+async function clickNavTab(
+	page: Page,
+	name: string,
+	{ force }: { force?: boolean } = {}
+): Promise< void > {
+	await clickNavTabBase( page, name, selectors.navTabItem, selectors.navTabMobileToggleButton, {
+		force,
+	} );
+}
+
+export { clickNavTab };

packages/calypso-e2e/src/lib/utils/index.ts

@@ -3,6 +3,7 @@ export * from './validate-translations';
 export * from './get-test-account-by-feature';
 export * from './translate';
 export * from './social-connections-manager';
+export * from './click-nav-tab';
 
 // Other items are exported for unit testing, we only care about the manager class.
 export { EditorTracksEventManager } from './editor-tracks-event-manager';

packages/components/src/spinner/style.scss

@@ -4,7 +4,7 @@
 	}
 }
 
-.spinner {
+.calypso-spinner, .spinner {
 	display: flex;
 	align-items: center;
 }