Build the Recent activity tab #13681

Feature Description

Add the Recent activity tab to the Traffic Insights card: the tab registration, the fixed "since yesterday" date window that the rest of the epic's sections share, the section layout they slot into, the sources footer, and every whole-tab state.

The tab's date window is fixed and independent of the dashboard date range. It runs from the start of yesterday to right now: startDate is the reference date minus one day (minus two where a timezone offset would otherwise clip the window) and endDate is the reference date, both derived from getReferenceDate(). Changing the dashboard's date range changes nothing in this tab.

The tab renders four sections in order—the insight notice (TBD10), the fresh numbers (TBD9), what's affecting recent traffic (TBD11), and latest post performance (TBD12)—followed by "See all recent posts" (TBD13) and a Sources: Analytics, Search Console footer. This ticket builds the shell and the placeholders those tickets will implement later, so they can be worked on independently.

Figma Design: https://www.figma.com/design/QLUJoHfLnqjBIXkfOOCB3B/Fresh-Data?node-id=1-1456&t=WJQXrhodhKMdsLCF-4

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• A "Recent activity" tab appears in the Traffic Insights card when freshData is enabled, and does not appear when it is not. It should have a "Beta" label.
• Selecting it renders the tab panel with the four sections in the designed order:
  1. Insight Notice
  2. Fresh Numbers
  3. What's affecting recent traffic
  4. Latest post performance
  • (Sources footer)
• The tab computes one shared date window—start of yesterday (or the day before, where the site's timezone requires it) through the reference date—and exposes it to its sections.
• Changing the dashboard's date range does not change anything rendered in this tab.
• Analytics not connected: the tab still appears, and its body is replaced by an Analytics connect CTA, the same as the one used in SearchFunnelWidgetGA4.
• Analytics gathering data: the tab renders its gathering-data state rather than zeros.
• Zero traffic in the window: figures render as zero, and the insight notice is hidden.
• Site has no published posts: the latest post performance section, the "Top posts by visitors" column and "See all recent posts" are omitted; the rest of the tab renders.
• A report error in one section renders a ReportError in that section only, leaving the other sections intact.
• The panel is associated with its tab (role="tabpanel", aria-labelledby).

Implementation Brief

• Create file assets/js/modules/analytics-4/components/traffic-overview/tabs/RecentActivityPanel.tsx rendering the four sections in order plus the footer, handling the connect-CTA, gathering-data and no-published-posts cases, with role="tabpanel" and aria-labelledby matching the tab ID.
• Create file assets/js/modules/analytics-4/components/traffic-overview/hooks/useFreshDataDateRange.ts returning the fixed { startDate, endDate } window from getReferenceDate() and the site timezone, with the extra day of headroom where the timezone offset requires it.
• Create placeholder section components under assets/js/modules/analytics-4/components/traffic-overview/recent-activity/ — InsightNotice.tsx, FreshMetricsRow.tsx, RecentTrafficBreakdown.tsx, LatestPostPerformance.tsx — each rendering nothing but its container, to be filled by follow-up issues.
• Create file assets/js/modules/analytics-4/components/traffic-overview/recent-activity/RecentActivityFooter.tsx rendering the Sources: Analytics, Search Console line, following TrafficOverviewSourceLink.
• Update file assets/js/modules/analytics-4/components/traffic-overview/constants.ts with the Recent activity tab ID and label constants.
• Update file assets/js/modules/analytics-4/components/traffic-overview/widgets/TrafficOverviewWidget.tsx to contribute the tab descriptor under the freshData flag.
• Update file assets/sass/components/analytics-4/ (the traffic-overview partial) with the Recent activity panel layout.

Test Coverage

• Create assets/js/modules/analytics-4/components/traffic-overview/tabs/RecentActivityPanel.test.tsx asserting: the four sections and the footer render in order; the Analytics connect CTA replaces the body when Analytics is not connected while the tab still renders; the gathering-data state renders instead of zeros; the post-dependent sections are omitted when there are no published posts; and an error in one section does not remove the others.
• Create assets/js/modules/analytics-4/components/traffic-overview/hooks/useFreshDataDateRange.test.ts asserting the window is derived from the reference date and not from the dashboard date range — including a case that changes the dashboard range and asserts the window is unchanged — and covering the timezone-offset headroom.
• Update TrafficOverviewWidget.test.tsx to assert the tab appears only under freshData.
• Add Storybook stories for the panel's whole-tab states (ready, not connected, gathering data, no published posts) and VRT references for each.

QA Brief

• With freshData disabled, open the main dashboard and confirm the traffic insights card shows only its "Traffic overview" tab, with its chart and its "Source: Analytics" footer.
• Enable freshData, reload the dashboard, and confirm a "Recent activity" tab with a "Beta" badge appears after the "Traffic overview" tab. The card still opens on "Traffic overview".
• Select "Recent activity" and confirm the footer reads "Sources: Analytics Search Console", with one link to each service. The tab's sections are empty until their own issues land, so confirm them in the Elements panel of DevTools: googlesitekit-traffic-overview__panel--recent-activity holds the insight notice, the fresh metrics row, the recent traffic breakdown and the latest post performance containers, in that order.
• Change the dashboard date range between 7/14/28/90 days and confirm nothing in this tab changes. Both footer links keep the same two dates for every range. The end date is today, and the start date is yesterday, or two days back on the sites listed under Known behaviour.
• Disconnect Analytics and confirm the card shows the "Recent activity" tab alone, with the same Analytics setup CTA as the search traffic card in place of its body, and no "Sources" footer.
• Click Maybe later on that CTA and confirm the card is removed, and stays removed after a reload.
• On a property that is still gathering data, confirm the tab shows the No recent visitor data yet notice rather than zeros.
• On a site with no published posts, confirm in the Elements panel of DevTools that the latest post performance container is absent from the tab's panel, and that the footer still renders.
• Confirm a view-only (Dashboard Sharing) user with access to Analytics sees the tab, and does not see the "Sources" footer.
• At a phone width, select "Recent activity" and confirm the tab and its "Beta" badge show whole, and the footer stays on one line.
• With usage tracking enabled, click each footer link and confirm the Network tab lists one collect request with en=click_source_link for each click.
• Export the PDF report with the "Recent activity" tab selected and confirm its "Site traffic over time" section still shows the traffic chart and the three breakdowns.

Known behaviour

• On a site whose time zone is behind the browser's, both footer links start two days back. The tab widens its date range on purpose, so it never misses the site's own yesterday.
• On a site whose Timezone setting is a UTC offset, such as UTC+0, both footer links start two days back too. A new WordPress site in English has UTC+0. Site Kit gets no offset for such a site, so the tab cannot tell whether the site is behind the browser, and it widens its date range to be safe.

Changelog entry

• Add a "Recent activity" tab showing traffic and search performance since the day before yesterday.