The "Top search queries over the last x days" widget on the Search Console 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 ModulePopularKeywordsWidget should be added in assets/js/modules/search-console/components/module/ModulePopularPagesWidget.js.
• It should be implemented as a functional, hook-based, datastore-driven widget component that renders the existing "Top search queries over the last x days" block on the Search Console module page, in a refactored way.
  • In other words, it should replicate what the legacy LegacySearchConsoleDashboardWidgetKeywordTable component displays.
  • Sub-components can be implemented as necessary. If reusable, they should go into assets/js/modules/search-console/components/common. Otherwise (if specific to just this widget), they should go into a new assets/js/modules/search-console/components/module/ModulePopularKeywordsWidget 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/search-console/index.js (for testing, requires to enable the widgets.moduleScreens feature flag):
  • slug: searchConsoleModulePopularKeywords
  • width: WIDGET_WIDTHS.FULL
  • priority: 2
  • wrapWidget: false (since it needs to render Widget manually to add the Header prop
  • widget area: AREA_MODULE_SEARCH_CONSOLE_MAIN

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

Implementation Brief

• Create a new file assets/js/modules/search-console/components/module/ModulePopularPagesWidget.js which will export the ModulePopularPagesWidget functional component.
• ModulePopularPagesWidget should have the following props: Widget, WidgetReportZero and WidgetReportError, similar to what is done in assets/js/modules/search-console/components/dashboard/DashboardPopularKeywordsWidget.js.
• ModulePopularPagesWidget should take most of the code from assets/js/modules/search-console/components/dashboard/LegacySearchConsoleDashboardWidgetKeywordTable.js with the following changes:
  • Remove the use of the withData HOC. Instead, to get the report data, query the data store using the getReport selector. The parameters for the selector can be the following object. We already have the values for startDate and endDate.

     const reportArgs = {
     	startDate,
     	endDate,
     	dimensions: 'query',
     	limit: 10,
     };

  • Check if the data report from getReport is available via the hasFinishedResolution selector of the module's data store and if it's not available, render the <PreviewTable padding /> component.
  • Check if there is an error for the getReport selector via the getErrorForSelector selector of the module's data store. If there is an error, then render the WidgetReportError component, passing search-console as value for the moduleSlug prop and the error as well.
  • Check if we don't have any data for the report via the imported isZeroReport function from assets/js/modules/search-console/util/is-zero-report.js. If this is the case, render the WidgetReportZero passing search-console as value for the moduleSlug prop.
  • Instead of using the getDataTableFromData function to render the table, use the newly added ReportTable component. Introduce ReportTable component #2249
  • ModulePopularPagesWidget should render the data table wrapped within the Widget component, similar to how it's done in DashboardPopularKeywordsWidget
• Edit assets/js/modules/search-console/index.js and register a new widget with the following properties:
  • Component: ModulePopularPagesWidget,
  • slug: searchConsoleModulePopularKeywords
  • width: WIDGET_WIDTHS.FULL
  • priority: 2
  • wrapWidget: false
  • widget area: AREA_MODULE_SEARCH_CONSOLE_MAIN
• Edit /stories/module-search-console-components.stories.js to add a new stories for the ModulePopularPagesWidget under the Search Console 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.

Test Coverage

• N/A

Visual Regression Changes

• N/A

QA Brief

• Go to the Search Console module page (wp-admin/admin.php?page=googlesitekit-module-search-console), with the widgets.moduleScreens feature enabled
• You should see the 'Top search queries over last 28 days' widget replicated at the top of the page. This is the new widget.
• The new widget should be identical to the legacy 'Top search queries over last 28 days' widget further down the page.
• There should be a corresponding new story in storybook under Search Console > Components > Module Page > Popular Pages Widget

Changelog entry

• Migrate Search Console module page popular keywords widget to use Widget API.