Updates to KMW Selection Panel Allowable Selection Count to 8

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 guarder 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

google / site-kit-wp