Site-kit-wp: Expose new Analytics All Traffic widget in production

[felixarntz]

Once ready the new DashboardAllTrafficWidgetV2 widget should replace the DashboardAllTrafficWidget widget and be exposed in production.

---

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

Acceptance criteria

• The DashboardAllTrafficWidget component and any sub-components that are only used by that one should be removed. All references to that widget should be removed too, including tests, Storybook etc.
• The DashboardAllTrafficWidgetV2 should be renamed to DashboardAllTrafficWidget, all references should be updated accordingly. Its widget registration should be updated to drop the v2 indicator from the widget slug as well.
• The heading of both *AllTraffic widget areas should be updated to: _Your Traffic at a Glance_
• Pending on whether the widget API is not live yet, we'll need to also replace the legacy All Traffic widget with the new component (outside of the widget API) and updated the area heading and description.

Implementation Brief

Widgets

• Remove DashboardAllTrafficWidget component
• Remove AcquisitionSources component
• Remove AcquisitionPieChart component
• Rename DashboardAllTrafficWidgetV2 to DashboardAllTrafficWidget, change <Widget>'s slug to analyticsAllTraffic and update all the references accordingly.
• Remove analyticsAllTrafficV2 widget registration in assets/js/modules/analytics/index.js. Update analyticsAllTraffic registration to use the new DashboardAllTrafficWidget

Stories

• Remove Analytics Module/Components/Page Dashboard/All Traffic Widget
• Rename Analytics Module/Components/Dashboard/All Traffic Widget V2 to Analytics Module/Components/Dashboard/All Traffic Widget and update the Component to use the new DashboardAllTrafficWidget
• Update Analytics Module/Components/Page Dashboard/All Traffic Widget to use the newer v2 of DashboardAllTrafficWidget

Language Strings

• Update title for AREA_DASHBOARD_ALL_TRAFFIC and AREA_PAGE_DASHBOARD_ALL_TRAFFIC to Your Traffic at a Glance in assets/js/googlesitekit/widgets/register-defaults.js

For legacy support:

• Add a LegacyAllTraffic component in assets/js/modules/analytics/components/dashboard/DashboardAllTrafficWidget.
• Using the code from assets/js/modules/pagespeed-insights/components/dashboard/LegacyDashboardSpeed.js as reference, create a wrapper around the new DashboardAllTrafficWidget.
  
  
  
  • Omit the conditionals around description, it will be used as a hard coded value.
  
  
  • The title will be Your Traffic at a Glance and the description will be How people found your site.
  
  
• Add a filter in assets/js/modules/analytics/index.legacy.js to display the DashboardAllTraffic component.
  js const legacyDashboardAllTraffic = createAddToFilter( <LegacyDashboardAllTraffic /> );

```js
addFilter( 'googlesitekit.DashboardModule',  
 'googlesitekit.Analytics',  
 legacyDashboardAllTraffic, 8 );
```

Test Coverage

• No new tests to be added

Visual Regression Changes

• The references to All Traffic Widget V2 must be removed and references to All Traffic Widget be replaced with the newer v2 references.

QA Brief

• All Traffic Widget story under Dashboard and Page Dashboard must be replaced with the v2 of the widget.
• All Traffic Widget V2 story under Dashboard must be removed.
• On the dashboard, the All Traffic Widget must be updated to the v2 and All Traffic heading must be changed to Your Traffic at a Glance

Changelog entry

[aaemnnosttv]

@kostyalmm would you please add an estimate?

[felixarntz]

@kostyalmm The IB looks good in terms of exposing the new All Traffic widget as a replacement for the old one within the new widgets API. However, the widgets API is still behind a feature flag, and that is gonna remain like that for a while. So we need to also expose the new components _outside_ of the widgets API, integrated into the (messy) legacy infrastructure, so that it is also displayed in a production build (npm run build). We're doing something similar with the PageSpeed Insights widget, where the reused component DashboardPageSpeed is wrapped in another component which is then added to the legacy infrastructure via addFilter.

[felixarntz]

IB ✅

[felixarntz]

@benbowler Just wanted to mention: While this is technically blocked by #2422 which is still being worked on, I believe you only need to touch the outer DashboardAllTrafficWidgetV2 component for this issue, so probably you can already start the PR (just being aware that the area of the widget that will contain the graph is currently still empty).

[felixarntz]

@benbowler @aaemnnosttv There are a couple UI pieces to still address before we launch the new widget in production. I'll open issues for those pieces, and this one is now for 1.25.0. Let's still address the final quirks here, afterwards we can have it wait in CR until the widget has been approved for launch.

[felixarntz]

@benbowler Opened the necessary follow-up issues to get the widget ready for production. I've added them as blockers here. They're technically only merge blockers, the code for this issue shouldn't be affected.

[benbowler]

Thanks @felixarntz, I'll track those blockers and come back to this ticket when ready to get it back into Code Review.

[benbowler]

There is a remaining issue to get this pushed, I've spent some time investigating but I haven't been able to resolve it, @eugene-manuilov / @aaemnnosttv can you take a look at this comment

I've tried adding keys to the Tab bar and chart elements as well as GoogleCharts as well as using useEffect to force re-rendering without luck.

[benbowler]

Issue fixed and ready for review.

[benbowler]

Update use of useInstanceID.

[benbowler]

Added chartID to the onReady useCallback dependencies list.