STATS-74: Don't navigate the history for date navigation using the arrow navigation (#103728)

* Don't navigate the history for date navigation using the arrow navigation

* Add comment as to why using page.redirect instead of page()

* Set the NAVIGATION_METHOD_ARROW as a const instead of repeating the text

* Update inline comment for page.redirect usage

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Don't clean up drill down flag

The drill down flag is cleared only after clicking on back button

* cs fixes

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: Nikschavan

client/my-sites/stats/constants.ts

@@ -88,3 +88,5 @@ export const STATS_FEATURE_UTM_STATS = 'stats_utm';
 export const STATS_DO_YOU_LOVE_JETPACK_STATS_NOTICE = 'DoYouLoveJetpackStatsNotice';
 
 export const DATE_FORMAT = 'YYYY-MM-DD';
+
+export const NAVIGATION_METHOD_ARROW = 'arrow';

client/my-sites/stats/stats-date-picker/date-label-drill/index.tsx

@@ -15,8 +15,6 @@ const DateLabelDrill = ( { children, previousDisplayDate }: DateLabelDrillProps
 
 	useEffect( () => {
 		setIsAnimated( true );
-		// Remove the flag after the drill-up action button is shown.
-		sessionStorage.removeItem( 'jetpack_stats_date_range_is_drilling_down' );
 	}, [] );
 
 	const goBack = () => {

client/my-sites/stats/stats-date-picker/index.jsx

@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import { getShortcuts } from 'calypso/components/date-range/use-shortcuts';
 import { withLocalizedMoment } from 'calypso/components/localized-moment';
 import memoizeLast from 'calypso/lib/memoize-last';
+import { NAVIGATION_METHOD_ARROW } from 'calypso/my-sites/stats/constants';
 import { getMomentSiteZone } from 'calypso/my-sites/stats/hooks/use-moment-site-zone';
 import {
 	getSiteStatsQueryDate,
@@ -212,6 +213,12 @@ class StatsDatePicker extends Component {
 		const dateHistory = JSON.parse(
 			sessionStorage.getItem( 'jetpack_stats_date_range_is_drilling_down_date_history' ) || '[]'
 		);
+		const isArrowNavigation = this.props?.queryParams?.navigation === NAVIGATION_METHOD_ARROW;
+
+		// For the arrow navigation, we want to replace the last element with the new date.
+		if ( isArrowNavigation ) {
+			dateHistory.pop();
+		}
 
 		// Only update history if the date is new
 		if ( ! dateHistory.includes( displayDate ) ) {

client/my-sites/stats/stats-period-navigation/index.jsx

@@ -14,6 +14,7 @@ import StatsDateControl from 'calypso/components/stats-date-control';
 import {
 	STATS_FEATURE_DATE_CONTROL,
 	STATS_FEATURE_INTERVAL_DROPDOWN,
+	NAVIGATION_METHOD_ARROW,
 } from 'calypso/my-sites/stats/constants';
 import { recordGoogleEvent as recordGoogleEventAction } from 'calypso/state/analytics/actions';
 import { isJetpackSite } from 'calypso/state/sites/selectors';
@@ -242,11 +243,14 @@ class StatsPeriodNavigation extends PureComponent {
 
 		const path = `/stats/${ period }/${ slug }`;
 		const url = getPathWithUpdatedQueryString(
-			{ chartStart, chartEnd, navigation: 'arrow' },
+			{ chartStart, chartEnd, navigation: NAVIGATION_METHOD_ARROW },
 			path
 		);
 
-		page( url );
+		// Redirect to the page by replacing the current history entry,
+		// rather than pushing a new one. This ensures the navigation
+		// does not create an additional entry in the browser's history stack.
+		page.redirect( url );
 	};
 
 	queryParamsForPreviousDate = ( previousDay ) => {