Stats: remove the Traffic page settings onboarding tour (#113271)

The tooltip copy promised "all your Jetpack Stats settings" behind the
gear icon, but the icon only toggles module visibility; the copy was
written for widget features that never shipped. Remove the tour Popover,
the traffic_page_settings notice wiring, and the now-unused
withNoticeHook/delay logic left in StatsNavigation from when the toggler
lived there.

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: dognose24

client/assets/stylesheets/shared/functions/_z-index.scss

@@ -133,7 +133,6 @@ $z-layers: (
 		".drop-zone__content": 1010,
 		".tooltip.popover": 100000,
 		".tooltip.popover.page-modules-settings-popover": 175,
-		".tooltip.popover.highlight-card__settings-tooltip": 170,
 		".fullscreen-overlay": 100005,
 		"#wp_editbtns": 100020,
 		"#wp-fullscreen-body": 100010,

client/blocks/stats-navigation/index.jsx

@@ -11,8 +11,6 @@ import QueryJetpackModules from 'calypso/components/data/query-jetpack-modules';
 import SectionNav from 'calypso/components/section-nav';
 import NavItem from 'calypso/components/section-nav/item';
 import NavTabs from 'calypso/components/section-nav/tabs';
-import useNoticeVisibilityMutation from 'calypso/my-sites/stats/hooks/use-notice-visibility-mutation';
-import { useNoticeVisibilityQuery } from 'calypso/my-sites/stats/hooks/use-notice-visibility-query';
 import { canCurrentUser } from 'calypso/state/selectors/can-current-user';
 import isGoogleMyBusinessLocationConnectedSelector from 'calypso/state/selectors/is-google-my-business-location-connected';
 import isJetpackModuleActive from 'calypso/state/selectors/is-jetpack-module-active';
@@ -42,29 +40,6 @@ import './style.scss';
  * }} StatsNavItem
  */
 
-// Use HOC to wrap hooks of `react-query` for fetching the notice visibility state.
-function withNoticeHook( HookedComponent ) {
-	return function WrappedComponent( props ) {
-		const { data: showSettingsTooltip, refetch: refetchNotices } = useNoticeVisibilityQuery(
-			props.siteId,
-			'traffic_page_settings'
-		);
-
-		const { mutateAsync: mutateNoticeVisbilityAsync } = useNoticeVisibilityMutation(
-			props.siteId,
-			'traffic_page_settings'
-		);
-
-		return (
-			<HookedComponent
-				{ ...props }
-				showSettingsTooltip={ showSettingsTooltip }
-				refetchNotices={ refetchNotices }
-				mutateNoticeVisbilityAsync={ mutateNoticeVisbilityAsync }
-			/>
-		);
-	};
-}
 /**
  * @param { { navItems: StatsNavItem[], selectedItemName: keyof typeof allNavItems, isLegacy: boolean, interval: string, pathTemplate: string } } props
  */
@@ -166,7 +141,6 @@ class StatsNavigation extends Component {
 		isLegacy: PropTypes.bool,
 		adminUrl: PropTypes.string,
 		showLock: PropTypes.bool,
-		delayTooltipPresentation: PropTypes.bool,
 	};
 
 	isValidItem = ( item ) => {
@@ -271,25 +245,6 @@ class StatsNavigation extends Component {
 	}
 }
 
-function shouldDelayTooltipPresentation( state, siteId ) {
-	// Check the 'created_at' time stamp.
-	// Can return null (Redux hydration?) which we'll treat as a delay.
-	const siteCreatedTimeStamp = getSiteOption( state, siteId, 'created_at' );
-	if ( siteCreatedTimeStamp === null ) {
-		return true;
-	}
-
-	// Check if the site is less than one week old.
-	const WEEK_IN_MILLISECONDS = 7 * 1000 * 3600 * 24;
-	const siteIsLessThanOneWeekOld =
-		new Date( siteCreatedTimeStamp ) > new Date( Date.now() - WEEK_IN_MILLISECONDS );
-	if ( siteIsLessThanOneWeekOld ) {
-		return true;
-	}
-
-	return false;
-}
-
 export default connect(
 	( state, { siteId, selectedItem } ) => {
 		return {
@@ -307,8 +262,7 @@ export default connect(
 			siteId,
 			pageModuleToggles: getModuleToggles( state, siteId, [ selectedItem ] ),
 			adminUrl: getSiteAdminUrl( state, siteId ),
-			delayTooltipPresentation: shouldDelayTooltipPresentation( state, siteId ),
 		};
 	},
 	{ requestModuleToggles, updateModuleToggles }
-)( localize( withNoticeHook( StatsNavigation ) ) );
+)( localize( StatsNavigation ) );

client/blocks/stats-navigation/page-module-toggler.tsx

@@ -12,8 +12,6 @@ import { AVAILABLE_PAGE_MODULES, ModuleToggleItem } from './constants';
 
 type PageModuleTogglerProps = {
 	moduleToggles: { [ name: string ]: boolean };
-	isTooltipShown: boolean;
-	onTooltipDismiss: () => void;
 	customToggleIcon?: React.ReactNode;
 	siteId: number;
 	selectedItem: string;
@@ -40,8 +38,6 @@ export default function PageModuleToggler( {
 	selectedItem,
 	moduleToggles,
 	siteId,
-	isTooltipShown,
-	onTooltipDismiss,
 	customToggleIcon = <Icon className="gridicon" icon={ cog } />,
 }: PageModuleTogglerProps ) {
 	const translate = useTranslate();
@@ -63,7 +59,6 @@ export default function PageModuleToggler( {
 	}, [] );
 
 	const toggleSettingsMenu = () => {
-		onTooltipDismiss();
 		setIsSettingsMenuVisible( ( isSettingsMenuVisible ) => {
 			return ! isSettingsMenuVisible;
 		} );
@@ -89,17 +84,6 @@ export default function PageModuleToggler( {
 			>
 				{ customToggleIcon }
 			</button>
-			<Popover
-				className="tooltip tooltip--darker highlight-card-tooltip highlight-card__settings-tooltip"
-				isVisible={ isTooltipShown }
-				position="bottom left"
-				context={ settingsActionElement }
-			>
-				<div className="highlight-card-tooltip-content">
-					<p>{ translate( 'Here’s where you can find all your Jetpack Stats settings.' ) }</p>
-					<button onClick={ onTooltipDismiss }>{ translate( 'Got it' ) }</button>
-				</div>
-			</Popover>
 			<Popover
 				className="tooltip highlight-card-popover page-modules-settings-popover"
 				isVisible={ isSettingsMenuVisible }

client/blocks/stats-navigation/test/page-module-toggler.test.tsx

@@ -62,8 +62,6 @@ jest.mock( '@wordpress/icons', () => ( {
 const defaultProps = {
 	selectedItem: 'traffic',
 	siteId: 123,
-	isTooltipShown: false,
-	onTooltipDismiss: jest.fn(),
 	customToggleIcon: <span>Settings</span>,
 };
 

client/my-sites/stats/components/highlight-cards/style.scss

@@ -201,11 +201,6 @@ $highlight-card-tooltip-font: Inter, $sans !default;
 		}
 	}
 
-	&.highlight-card__settings-tooltip {
-		// Make the popover under `.page-modules-settings-popover` of z-index: 175.
-		z-index: z-index("root", ".tooltip.popover.highlight-card__settings-tooltip");
-	}
-
 	// @TODO: Introduce the support for the border of white background arrows in the popover component.
 	// Set the border of the white background bottom arrows.
 	&.highlight-card-popover {
@@ -344,29 +339,6 @@ $highlight-card-tooltip-font: Inter, $sans !default;
 	color: var(--studio-gray-30);
 	font-size: $font-body-small;
 }
-.highlight-card__settings-tooltip {
-	.highlight-card-tooltip-content {
-		flex-direction: column;
-		align-items: flex-end;
-
-		p {
-			margin-bottom: 24px;
-		}
-
-		button {
-			font-family: $font-sf-pro-text;
-			font-weight: 600;
-			font-size: $font-body-extra-small;
-			line-height: 20px;
-			color: var(--studio-black);
-			padding: 4px 8px;
-			background-color: var(--studio-white);
-			border-radius: 4px;
-			cursor: pointer;
-		}
-	}
-}
-
 @media (max-width: $custom-mobile-breakpoint) {
 	.highlight-cards-heading {
 		margin-left: $font-body-small;

client/my-sites/stats/site.jsx

@@ -31,8 +31,6 @@ import {
 	STATS_PRODUCT_NAME,
 } from 'calypso/my-sites/stats/constants';
 import { useMomentInSite } from 'calypso/my-sites/stats/hooks/use-moment-site-zone';
-import useNoticeVisibilityMutation from 'calypso/my-sites/stats/hooks/use-notice-visibility-mutation';
-import { useNoticeVisibilityQuery } from 'calypso/my-sites/stats/hooks/use-notice-visibility-query';
 import { recordCurrentScreen } from 'calypso/my-sites/stats/hooks/use-stats-navigation-history';
 import { getChartRangeParams } from 'calypso/my-sites/stats/utils';
 import {
@@ -208,9 +206,6 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ...
 	const moduleToggles = useSelector( ( state ) => getModuleToggles( state, siteId, 'traffic' ) );
 	const momentInSite = useMomentInSite( siteId );
 	const hasVideoPress = useSelector( ( state ) => siteHasFeature( state, siteId, 'videopress' ) );
-	const [ isPageSettingsTooltipDismissed, setIsPageSettingsTooltipDismissed ] = useState(
-		!! localStorage.getItem( 'notices_dismissed__traffic_page_settings' )
-	);
 
 	// Determine module visibility based on user settings, VideoPress availability, AND defaults.
 	const moduleVisibility = useMemo(
@@ -548,25 +543,6 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ...
 		getJetpackStatsAdminVersion( state, siteId )
 	);
 
-	const { data: showSettingsTooltip, refetch: refetchNotices } = useNoticeVisibilityQuery(
-		siteId,
-		'traffic_page_settings'
-	);
-	const { mutateAsync: mutateNoticeVisbilityAsync } = useNoticeVisibilityMutation(
-		siteId,
-		'traffic_page_settings'
-	);
-
-	const onTooltipDismiss = () => {
-		if ( isPageSettingsTooltipDismissed || ! showSettingsTooltip ) {
-			return;
-		}
-
-		setIsPageSettingsTooltipDismissed( true );
-		localStorage.setItem( 'notices_dismissed__traffic_page_settings', 1 );
-		mutateNoticeVisbilityAsync().finally( refetchNotices );
-	};
-
 	// Module settings for Odyssey are not supported until stats-admin@0.9.0-alpha.
 	const isModuleSettingsSupported =
 		! config.isEnabled( 'is_running_in_jetpack_site' ) ||
@@ -610,8 +586,6 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ...
 									selectedItem="traffic"
 									moduleToggles={ moduleToggles }
 									siteId={ siteId }
-									isTooltipShown={ showSettingsTooltip && ! isPageSettingsTooltipDismissed }
-									onTooltipDismiss={ onTooltipDismiss }
 									customToggleIcon={ <Icon className="gridicon" icon={ settings } /> }
 								/>
 							)