Rename StatsDatePicker → StatsDateLabel and convert to functional component

[Copilot]

Related to STATS-219.

StatsDatePicker was a misnomer — it renders a formatted date title ("Stats for December 2017"), not an interactive picker. This implements the existing TODO comments calling for a rename and functional component refactor.

Changes

• Renamed stats-date-picker/ → stats-date-label/, class StatsDatePicker → function StatsDateLabel
• Converted class component to functional component, eliminating all class boilerplate
• Eliminated withIsDrillingDownHook HOC — its sessionStorage read is now a useMemo directly in the component (as its own TODO requested)
• Replaced memoizeLast with useMemo for previousDisplayDate computation; queryParams?.navigation is now correctly listed as a dependency
• Renamed CSS classes stats-date-picker__* → stats-date-label__*, updated stats-period-navigation/style.scss accordingly
• Updated 10 import sites across stats/ and store/app/store-stats/

Before (class + HOC chain):

export default flowRight(
  connectComponent,
  localize,
  withLocalizedMoment,
  withIsDrillingDownHook
)( StatsDatePicker );

After (functional, HOC removed):

export default flowRight(
  connectComponent,
  localize,
  withLocalizedMoment
)( StatsDateLabel );

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• downloads.sentry-cdn.com
  • Triggering command: /opt/hostedtoolcache/node/24.13.0/x64/bin/node /opt/hostedtoolcache/node/24.13.0/x64/bin/node ./scripts/install.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[matticbot]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-171159

Jetpack Cloud Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-171159&env=jetpack

Automattic for Agencies Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-171159&env=a8c-for-agencies

Dashboard Live (dotcom) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-171159&env=dashboard

Dashboard Live (CIAB) (direct link)

https://calypso.live/ciab?image=registry.a8c.com/calypso/app:build-171159&env=dashboard

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug copilot/refactor-datepicker-component-naming on your sandbox.

[dognose24]

Main refactor here.

[Copilot]

Pull request overview

This PR corrects a naming mismatch in the stats UI by renaming StatsDatePicker (which is a formatted date heading, not a picker) to StatsDateLabel, converting it to a functional component, and updating the related import paths and styles across the stats and store-stats surfaces.

Changes:

• Renamed the stats “date picker” component/module to stats-date-label and converted it from a class to a function component.
• Removed the withIsDrillingDownHook HOC and replaced memoizeLast usage with useMemo.
• Updated CSS class names and all relevant import sites to point at stats-date-label.

Reviewed changes

Copilot reviewed 15 out of 17 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
client/my-sites/store/app/store-stats/store-stats-period-nav/index.js	Updates store stats period nav import to the renamed date label module.
client/my-sites/store/app/store-stats/index.js	Updates store stats entry import to the renamed date label module.
client/my-sites/stats/wordads/index.jsx	Updates WordAds stats import to the renamed date label module.
client/my-sites/stats/videopress-stats-module/index.jsx	Updates VideoPress stats module import to the renamed date label module.
client/my-sites/stats/stats-post-summary/index.jsx	Updates post summary import to the renamed date label module.
client/my-sites/stats/stats-period-navigation/style.scss	Renames style selector from stats-date-picker__* to stats-date-label__*.
client/my-sites/stats/stats-period-navigation/index.jsx	Updates TODO path reference to the renamed module.
client/my-sites/stats/stats-module/index.jsx	Updates stats module import to the renamed date label module.
client/my-sites/stats/stats-module/all-time-nav.jsx	Updates all-time nav import to the renamed date label module.
client/my-sites/stats/stats-email-detail/index.jsx	Updates email detail import to the renamed date label module.
client/my-sites/stats/stats-date-picker/with-is-drilling-down-hook.tsx	Removes the drilling-down HOC implementation.
client/my-sites/stats/stats-date-label/style.scss	Renames date label-related CSS class selectors.
client/my-sites/stats/stats-date-label/index.jsx	Implements StatsDateLabel functional component, integrates drilling-down state logic, and replaces memoization approach.
client/my-sites/stats/stats-date-label/date-label-drill/index.tsx	Adds/updates drill-up UI wrapper with tooltip/popover behavior.
client/my-sites/stats/stats-date-label/date-label-drill/index.scss	Minor styling/whitespace update for the drill UI.
client/my-sites/stats/site.jsx	Updates stats page import to the renamed date label module.
client/my-sites/stats/overview.jsx	Updates overview import to the renamed date label module.

Comments suppressed due to low confidence (3)

client/my-sites/stats/stats-date-label/index.jsx:203

• This useMemo callback mutates sessionStorage (removeItem/setItem). useMemo is meant to be a pure derivation and can run during render/aborted renders (and twice in StrictMode), which can make the history state flaky. Please move sessionStorage mutations into a useEffect (or event handler) and keep memoization/read logic side-effect free.
  client/my-sites/stats/stats-date-label/index.jsx:39
• There is an unnecessary react-hooks/exhaustive-deps disable here. The dependency list already includes period and queryParams?.navigation, so the eslint-disable should be removed to avoid masking real dependency issues later.
  client/my-sites/stats/stats-date-label/index.jsx:278
• previousDisplayDate can be null (e.g., history length <= 1), but the drill UI is still rendered when isDrillingDown is truthy. This allows DateLabelDrill to run goBack with a null/empty date history entry. Consider rendering the drill wrapper only when previousDisplayDate is present, or make DateLabelDrill handle a missing previous date by disabling the action.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[kangzj]

Smoke tested and works well. Thanks for the refactoring 👍