Pass scoped Widget component to registered widget component function

[felixarntz]

Widgets that pass wrapWidget: false need to render the wrapping Widget component themselves. For this purpose, we right now export the Widget component publicly on googlesitekit.widgets.components.

Somewhat annoying here, components that render Widget on its own currently are required to pass the widget's slug to the component - duplicating that from where the widget is registered, making it error-prone.

We should change this so that we pass a scoped version of Widget to every registered component so that they don't need to import it and don't need to pass the slug prop. This follows the pattern established in #2252 where components already get access to special widget state components via props, such as WidgetReportZero.

---

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

Acceptance criteria

• The slug prop of Widget should be renamed to a more explicit widgetSlug, matching what other publicly usable Widget* components are doing.
• The getWidgetComponentProps function should be expanded to include a scoped version of Widget in the props object. (This will have WidgetRenderer pass it through to every registered widget component.)
• The googlesitekit.widgets.components property should be removed (i.e. Widgets.components internally).
• Every Site Kit widget that currently renders <Widget /> manually in its component should rely on the Widget it receives from props instead of importing it. The slug / widgetSlug must no longer be passed since it's already taken care of.

Implementation Brief

• Rename the slug property to be widgetSlug in the Widget component. Update all occurrences of the Widget component to use the new property.
• Add a new property to the returning object from the getWidgetComponentProps function. It should have the Widget name and scoped the Widget component as a value (similarly to other props in the returned object).
• Edit the following components to rely on the Widget property passed to the component instead of Widgets.components.Widget one. Plus remove slug properties from the rendered <Widget> components since they are not needed anymore.
  • The DashboardSummaryWidget component in the AdSense module;
  • The DashboardTopEarningPagesWidget component in the AdSense module;
  • The DashboardAllTrafficWidget component in the Analytics module;
  • The DashboardPopularPagesWidget component in the Analytics module;
  • The DashboardPageSpeedWidget component in the Page Speed module;
  • The DashboardPopularKeywordsWidget component in the Search Console module;
• Remove the components property of the Widgets object in the assets/js/googlesitekit/widgets/index.js file.
• Update storybook stories to account for the aforementioned changes.

Test Coverage

• Adjust existing tests if any starts failing due to the requested changes.

Visual Regression Changes

• No visual changes are expected.

QA Brief

• Review each of the following widgets and match the data returned with the previous version:
  • The DashboardSummaryWidget component in the AdSense module;
  • The DashboardTopEarningPagesWidget component in the AdSense module;
  • The DashboardAllTrafficWidget component in the Analytics module;
  • The DashboardPopularPagesWidget component in the Analytics module;
  • The DashboardPageSpeedWidget component in the Page Speed module;
  • The DashboardPopularKeywordsWidget component in the Search Console module;

Changelog entry

• Simplify usage of the Widget component so that widget components can use a scoped version of it via props rather than manually importing it and re-specifying the widget slug.

[aaemnnosttv]

IB ✅

[benbowler]

Executed, I'll wait on the merge of #2252 to finalise tests and storybooks so I don't have a moving target.

[tofumatt]

QA ✅