The "Top content over the last x days" widget on the Analytics module page should be refactored as a new component that is registered and rendered using the Widget API.

The existing component should be untouched and only be renamed, giving it a Legacy prefix.

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

Acceptance criteria

• A new component ModulePopularPagesWidget should be added in assets/js/modules/analytics/components/module/ModulePopularPagesWidget.js.
• It should be implemented as a functional, hook-based, datastore-driven widget component that renders the existing "Top content over the last x days" block on the Analytics module page, in a refactored way.
  • In other words, it should replicate what the legacy AnalyticsDashboardWidgetTopPagesTable component displays.
  • Sub-components can be implemented as necessary. If reusable, they should go into assets/js/modules/analytics/components/common. Otherwise (if specific to just this widget), they should go into a new assets/js/modules/analytics/components/module/ModulePopularPagesWidget directory; in this case, the main widget component should go into the index.js file within that directory.
• The new component should be used to register a new widget in assets/js/modules/analytics/index.js (for testing, requires to enable the widgets.moduleScreens feature flag):
  • slug: analyticsModulePopularPages
  • width: WIDGET_WIDTHS.FULL
  • priority: 2
  • wrapWidget: false (since it needs to render Widget manually to add the Header prop
  • widget area: AREA_MODULE_ANALYTICS_MAIN
• AnalyticsDashboardWidgetTopPagesTable should be renamed to have a Legacy* prefix added.

Hint: For the implementation it might be useful to look at DashboardPopularPagesWidget which renders something very similar, just with less columns and different header/footer in the dashboard.

Implementation Brief

• Implement requirements defined in the AC

Test Coverage

• N/A

Visual Regression Changes

• N/A

QA Brief

• Set up sitekit and tester plugins on your local;
• Activate and connect the Analytics module;
• Enable the widgets.moduleScreens feature in the tester plugin settings;
• Go to the Analytics module page and make sure that you see the new Top Content widget above the legacy one. It should look and work the same as the legacy one.

Changelog entry

• Migrate Analytics module page popular pages widget to use Widget API.