Tile title and messaging for Top earning pages

[zutigrm]

Feature Description

When AdSense is not connected, but it's metric is included as part of the tailored metrics (like for Sell products site purpose), the tile should be updated to include the metric title, and description should be changed to Adsense is disconnected, metric can't be displayed

Originally reported during bug bash in this Asana ticket

---

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

Acceptance criteria

• When AdSense is not connected, but it's metric is included as part of the tailored metrics and the connect module tile appears in the dashboard:
  • The tile title is included (Top earning pages in this case)
  • Description text above CTA is Adsense is disconnected, metric can't be displayed (when AdSense related metric is present)
• This shouldn't be limited only to the AdSense KMW we should implement future proof solution that shows this layout in connect module tile in general, whenever a single metric is shown and it's module is disconnected

Implementation Brief

• Update assets/js/components/KeyMetrics/ConnectModuleCTATile.js
  • Retrieve the widgets

    site-kit-wp/assets/js/components/KeyMetrics/MetricsSelectionPanel/MetricItems.js

    Lines 93 to 98 in f4f7360

    	const widgets = useSelect(
    	( select ) =>
    	select( CORE_WIDGETS ).getWidgets(
    	AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY
    	) || []
    	);

  • Retrieve currently selected key metrics using getKeyMetrics selector from CORE_USER datastore
  • Loop through selected metrics, and map a new array, by:
    • Filtering selected metrics from retrieved widgets
    • Filtering the metrics by modules property, (it will look like [ 'analytics' ]), so only the ones associated with current module are retrieved. You can use moduleSlug prop already passed to the component for the matching
  • Count the retrieved KMW associated with the module, and if:
    • There is more than 1, keep the current layout
    • If there is only 1 metrics, Include MetricTileHeader component, just bellow the main div wrapper, and pass it the title and tooltip content, which can be extracted from KEY_METRICS_WIDGETS object, using the metric slug
      • Instead of current copy %s is disconnected, some of your metrics can’t be displayed, render %s is disconnected, metric can't be displayed
• Add any style needed in assets/sass/components/key-metrics/_googlesitekit-km-connect-module-cta-tile.scss

Test Coverage

• Update failing VRT

QA Brief

Changelog entry

[eugene-manuilov]

IB ✔