The "Performance over the last x days" widget on the AdSense 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 ModuleOverviewWidget should be added in assets/js/modules/adsense/components/module/ModuleOverviewWidget.js.
• It should be implemented as a functional, hook-based, datastore-driven widget component that renders the existing "Performance over the last x days" block on the AdSense module page, in a refactored way.
  • In other words, it should replicate what the legacy AdSenseDashboardWidgetOverview and AdSenseDashboardWidgetSiteStats components display. These components were already refactored at a previous point so the new component should be able to reuse most of the code. The main things to change is to create the API requests themselves instead of receiving data via props, as well as to use Widget* components via props.
  • Sub-components can be implemented as necessary. If reusable, they should go into assets/js/modules/adsense/components/common. Otherwise (if specific to just this widget), they should go into a new assets/js/modules/adsense/components/module/ModuleOverviewWidget directory; in this case, the main widget component should go into the index.js file within that directory.
• The AdSenseDashboardWidgetOverview and AdSenseDashboardWidgetSiteStats components should be renamed, receiving a Legacy* prefix.
• The new component should be used to register a new widget in assets/js/modules/adsense/index.js (for testing, requires to enable the widgets.moduleScreens feature flag):
  • slug: adsenseModuleOverview
  • width: WIDGET_WIDTHS.FULL
  • priority: 1
  • wrapWidget: false (since it needs to render Widget manually to add the Header prop
  • widget area: AREA_MODULE_ADSENSE_MAIN

Implementation Brief

• Create a new file assets/js/modules/adsense/components/module/ModuleOverviewWidget.js which will export the ModuleOverviewWidget functional component.
• ModuleOverviewWidget should have the following props: Widget, WidgetReportZero and WidgetReportError, similar to what is done in assets/js/modules/search-console/components/dashboard/DashboardPopularKeywordsWidget.js.
• ModuleOverviewWidget should take most of the code from the following files:
  • assets/js/modules/adsense/components/dashboard/AdSensePerformanceWidget.js with the following changes:
    • Remove the handleDataSuccess and handleDataError props usage.
    • Remove usage of the AdSenseDashboardWidgetOverview and AdSenseDashboardWidgetSiteStats.
  • assets/js/modules/adsense/components/dashboard/AdSenseDashboardWidgetOverview.js with the following changes:
    • Remove the handleDataSuccess and handleDataError props usage.
  • assets/js/modules/adsense/components/dashboard/AdSenseDashboardWidgetSiteStats.js with the following changes:
    • Remove the handleDataSuccess and handleDataError props usage.
  • If there are any errors in the getReport queries, render the WidgetReportError component, passing adsense as value for the moduleSlug prop and the error as well.
  • If there is no data for any getReport queries, render the WidgetReportZero component instead of ReportZero component, passing adsense as value for the moduleSlug prop.
• Create a new file assets/js/googlesitekit/widgets/components/WidgetHeaderTitle which will export the WidgetHeaderTitle functional component.
  • WidgetHeaderTitle should have only 1 prop, title which is a string and render the same markup as the title of the legacy component (For e.g Performance over the last 28 days) without any grid markup/class names.
• Create a new file assets/js/googlesitekit/widgets/components/WidgetHeaderCTA which will export the WidgetHeaderCTA functional component.
  • WidgetHeaderCTA should have the following props:
    • href: String
    • label: String
    • external: bool (default: true)
  • and it should use the Link component to render the external CTA leading to a module's service frontend. For e.g See full stats in AdSense.
• ModuleOverviewWidget should render the same markup from AdSensePerformanceWidget and AdSenseDashboardWidgetSiteStats combined, wrapped within the Widget component, similar to how it's done in DashboardPopularKeywordsWidget but with the following change:
  • Update the usage of the Widget component to add the Header prop. The value of the Header prop is a function which returns the title (for e.g Performance over the last 28 days) using the newly added WidgetHeaderTitle component and the CTA (See full stats in AdSense) using the WidgetHeaderCTA component. The function should only render 2 child elements since flexbox is going to be used to space them out in the header. Refer to the legacy components on how the values for the title and CTA are set.
• Using assets/sass/widgets/_widgets.scss,
  • Edit the .googlesitekit-widget__header class name to use flexbox, with the justify-content set to space-between.
  • Remove margins from headings within the .googlesitekit-widget__header class name.
  • Make sure children within the .googlesitekit-widget__header class name stack properly on small screens, with a margin of 16px between the child elements.
• Edit assets/js/modules/adsense/index.js and register a new widget with the following properties:
  • Component: ModuleOverviewWidget,
  • slug: adsenseModuleOverview
  • width: WIDGET_WIDTHS.FULL
  • priority: 1
  • wrapWidget: false
  • widget area: AREA_MODULE_ADSENSE_MAIN
• Edit /stories/module-adsense-components.stories.js to add a new stories for the ModuleOverviewWidget under the AdSense Module/Components/Module Page/ group, showing the following states:
  • When the data is loading.
  • When there is no data.
  • When there is an error.
  • When data has loaded.
• The AdSenseDashboardWidgetSiteStats and AdSenseDashboardWidgetOverview components should be renamed, receiving a Legacy* prefix and references should be updated.

Test Coverage

• N/A

Visual Regression Changes

• N/A

QA Brief

• Visit the "AdSense" dashboard where the new widget should be displayed above the legacy one.
• Both widgets should function the same way and display the same data.

Changelog entry

• Migrate AdSense module page overview widget to use Widget API.