Updates to KMW Selection Panel Allowable Selection Count to 8

[10upsimon]

Feature Description

With the introduction of Analytics Conversion reporting Key Metrics Widgets, comes the need to increase the total allowable selected KMW's to be 8, as opposed to the existing 4. This issue addresses this need.

The additional 4 metrics are not necessarily required to be ACR metrics, and 8 regular News Key Metrics tiles may also be selected.

VRT and other tests should also be updated as a result of said change, including KMW selection panel VRT scenarios for <= 4 and >= 4 selected metric scenarios.

---

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

Acceptance criteria

• Existing key metrics widget area should support selecting up to 8 metric tiles
• if up to 4 metrics are selected, layout should stay the same as now - showing one row with 4 key metric widgets
• If 5 or more metrics are selected, layout should expand to 2 rows and 8 metric tiles
  • Empty spaces should still show add metric tile, so if 5 metrics are selected, second row would show 1 selected metric and 3 add metric tiles, etc
• Changes should be guarded behind conversionReporting feature flag

Implementation Brief

• [ ] Update includes/Core/Key_Metrics/REST_Key_Metrics_Controller.php
  • Edit core/user/data/key-metrics CREATABLE route, increase $num_widgets > 4 conditional check to 8 and widgetSlugs[maxItems] to 8 in rest args
• [ ] In assets/js/components/KeyMetrics/constants.js
  • Increase MAX_SELECTED_METRICS_COUNT to 8
• [ ] In assets/js/googlesitekit/widgets/register-defaults.js
  • Currently we are adding 2 AddMetricCTATile metric tiles, depending if total number of selected widgets is 2 or 3.
  • Implement 3 more keyMetricsAddMetric{Third|Fourth|Fifth}, they should show only if:
  • There is 5 or more selected metrics
  • Include all 3 AddMetricCTATile in case total number of selected metrics is 5
  • Include 2 more AddMetricCTATile in case total number of selected metrics is 6
  • Include 1 more AddMetricCTATile in case total number of selected metrics is 7
• [ ] Update assets/sass/components/key-metrics/_googlesitekit-key-metrics-widgets.scss
  • Styles should be adapted to fit the new layout, target .googlesitekit-widget-area--mainDashboardKeyMetricsPrimary .googlesitekit-widget-area-widgets as a parent selector.
  • Note that on mobile regardless of how many AddMetricCTATile are present, only 1 should be visible, it doesn't need to be solved with CSS, perhaps using breakpoints as additional conditional check in each new AddMetricCTATile might be more straightforward.
  • FIgma designs for new layout can be found here

Test Coverage

• Update tests/phpunit/integration/Core/Key_Metrics/REST_Key_Metrics_ControllerTest.php to reflect the change in max allowed widget slugs when conversionReporting feature flag is enabled.
• Update assets/js/components/KeyMetrics/MetricsSelectionPanel/index.test.js - update/expand on test cases that are testing for 4 metrics limit to use 8 metrics as limit, and include test case that includes more than 4 key metrics selected, when conversionReporting feature flag is enabled

QA Brief

• Setup Site Kit with Analytics module
• Verify that metrics selection remains unchanged - max limit should be 4, layout should look like before only 1 row with up to 4 metric tiles
• Enable conversionReporting feature flag
• Verify that limit is upgraded now to 8 metric items. Error should prevent from adding more than 8 metric tiles, and messaging in selection panel should reflect this new limit
• Verify that once 5 or more metrics are selected, second row appears, and remaining unselected slots display add metric tile components.
• Once you reduce metrics back to 4 selected, layout should go back to 1 row and 4 metric tiles
• On mobile, layout should follow the figma design, if 5 or more metrics are selected, no matter how many add metric tile components are visible, on mobile it should always show 1
  • If you have 5 metric selected, 3 slots should be showing add metric tile component, but on mobile it should be 1. When additional metric is added, it should still show 1 add metric tile, until 8 are selected

Changelog entry

• Increase maximum Key Metric Widget selection count to 8.

[eugene-manuilov]

AC ✔️

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Tested when conversionReporting feature flag is not enabled.
• Also, tested when conversionReporting feature flag is enabled.
• Verify that metrics selection remains unchanged - max limit should be 4, layout should look like before only 1 row with up to 4 metric tiles
• Verify that on enabling the conversionReporting feature flag limit is upgraded now to 8 metric items. Error prevent from adding more than 8 metric tiles, and messaging in selection panel reflect this new limit
• Verified that once 5 or more metrics are selected, second row appears, and remaining unselected slots display add metric tile components.
• Once you reduce metrics back to 4 selected, layout go back to 1 row and 4 metric tiles
• On mobile, layout follow the figma design, if 5 or more metrics are selected, no matter how many add metric tile components are visible, on mobile it always show 1
• -- If you have 5 metric selected, 3 slots showing add metric tile component, and on mobile it showing 1. When additional metric is added, it still show 1 add metric tile, until 8 are selected

**_Desktop :_**      https://github.com/user-attachments/assets/408f9ff1-e95e-45e0-a380-6192727dd391 **_Mobile -_**      https://github.com/user-attachments/assets/5e508bf8-e2a2-4e8c-8b3e-5fa2fe517465