Add lost events banner variation

[zutigrm]

Feature Description

When events are lost - not detected in the last 90 days CRON sync, a banner should be surfaced to notify users that some data has not been detected for a long time.

Figma designs

---

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

Acceptance criteria

• When lost events are detected, new banner variation should appear in the KMW section matching the Figma designs
  • Lost event(s) should match the currently selected KMW, if there is no KMW associated with the lost event(s) currently on the dashboard, banner shouldn't be shown
• If new events detected banner is showing (9371), lost events banner should appear above it, they shouldn't be mutually exclusive
• Clicking on Got it CTA should dismiss the banner
• Clicking Select metrics CTA should open KM selection panel

Implementation Brief

• [ ] Add assets/js/components/KeyMetrics/LostEventsSubtleNotification.js
  • Use ACRDashboardSubtleNotification (implemented in 9371) as a starting point
  • It should accept onDismissCallback and onSelectMetricsCallback props
  • Replace the icon, background color and content matching the Figma designs)
  • Include the Got it CTA, and on click invoke onDismissCallback prop
  • Include Select metrics CTA and invoke onSelectMetricsCallback callback
• [ ] Update assets/js/components/KeyMetrics/ACRNotificationCTAWidget.js
  • Check if there are lost events detected using hasLostConversionReportingEvents selector from Analytics module datastore
    • Then conditionally render LostEventsSubtleNotification above the ACRDashboardSubtleNotification
  • Include onDismissLostEvents callback function, and dispatch dismissLostConversionReportingEvents action from analytics datastore. Pass it as onDismissCallback prop of LostEventsSubtleNotification
  • Include onSelectMetrics callback function - if not included already by another banner issue - that should open the selection panel https://github.com/google/site-kit-wp/blob/79b4417581b1cca3d718f7e55127681e6e05fc6f/assets/js/components/KeyMetrics/ChangeMetricsLink.js#L48 and dismiss the banner, using onDismissLostEvents
  • Pass it as onSelectMetricsCallback prop of LostEventsSubtleNotification
• Tailored metrics with lost events - not present in detectedEvents GA4 setting, should remain visible on dashboard when lost, only banner should be surfaced. For this purpose include new setting to the analytics module - historicallyDetectedEvents and store all detected events here, by appending them in array, unline detectedEvents that is set every time when sync happens

Test Coverage

• Update tests for ACRNotificationCTAWidget (basic coverage added in 9344), to verify that banner is showing when conditions are met, and not showing otherwise for example. Also test for new CTA's variation and verifying that it updates the UI state which will trigger the opening of selection panel, etc.

QA Brief

Changelog entry

[10upsimon]

@zutigrm AC ✅ Moving to IB.

[Aditya-PS-05]

Can you assign me this issue?

[10upsimon]

@zutigrm this LGTM, moving to EB.