While analytics in 'gathering data' state, then clicking on 'Total clicks', 'Total impressions' or 'Unique visitors from search' throws error.

Bug Description

While Analytics in gathering state, then clicking on Total clicks’, ‘Total impressions’ or ‘Unique visitors from search’ throws error. Suggestion: We can disable click on cards while analytics is in gathering data state.

Cannot read properties of null (reading '__eventTarget')

    in GoogleChart
    in div
    in Cell
    in div
    in Row
    in div
    in ForwardRef
    in AnalyticsStats
    in div
    in div
    in Widget
    in WithWidgetSlug(Widget)
    in SearchFunnelWidget
    in WidgetRenderer
    in div
    in Cell
    in WidgetCellWrapper
    in div
    in Row
    in div
    in div
    in ForwardRef
    in WidgetAreaRenderer
    in div
    in WidgetContextRenderer
    in DashboardEntityApp
    in GoogleSitekitDashboardDetails
    in RestoreSnapshots
    in ErrorHandler
    in Root

Steps to reproduce

1. Create a new site which will have default gathering state.
2. Activate the “zeroDataStates” feature flag
3. Go to Site Kit Dashboard.
4. Set up Analytics.
5. Clicks on ‘Total clicks’, ‘Total impressions’ or ‘Unique visitors from search’.
6. See Error.

Screenshots/Screencast

https://user-images.githubusercontent.com/94359491/159649263-5225b656-35ea-4060-a8c9-804c3a989b6b.mp4

Additional Context

• PHP Version:
• OS: [e.g. iOS]
• Browser: [e.g. chrome, safari]
• Plugin Version: [e.g. 22]
• Device: [e.g. iPhone6]

---

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

Acceptance criteria

• Metrics in the Search traffic widget that say “gathering data” should not be selectable.
  • The DataBlock component should not call a callback passed via the handleStatSelection property on clicks or keys presses when in the data block is in the gathering data mode.
• The cursor should show as disabled when hovering over such metrics.

Implementation Brief

• Using assets/js/components/DataBlock.js,
  • Set the onClick and onKeyPress props to undefined if gatheringData is true to the googlesitekit-data-block element. Else keep the same values, i.e handleStatSelection && this.handleClick and handleStatSelection && this.handleKeyPress.
  • Add aria-disabled to the googlesitekit-data-block element if gatheringData is true.
  • Ensure the tabindex is set to -1 if gatheringData is true.
• Using assets/sass/components/global/_googlesitekit-data-block.scss,
  • Add .googlesitekit-data-block--is-gathering-data and set cursor: auto.
  • Update the selector where the hover, focus and active styles are set to the googlesitekit-data-block--button-* class names by excluding blocks having the googlesitekit-data-block--is-gathering-data class.

    &--button-#{$button}:not(.googlesitekit-data-block--is-gathering-data) {
    

Test Coverage

• No new tests to be added.

QA Brief

1. Create a new site which will have default gathering state.
2. Activate the “zeroDataStates” feature flag
3. Go to Site Kit Dashboard.
4. Set up Analytics.
5. ‘Total Impression’, ‘Total clicks’, ‘Total impressions’ or ‘Unique visitors from search’ from the SearchFunnel widget should not be clickable, hovered or tabbable.

Changelog entry

• Prevent selection of metrics in the Search Traffic widget when gathering data.

[techanvil]

Hi @wpdarren, I think you raise a good point, but I would suggest creating a new issue for this. The original bug report for this was clearly quite critical with an error being displayed on the page, hence the P0.

The question about whether to make the bar here grey is not as critical - and although I suspect we should, given it wasn’t captured in the AC/IB I think it would be OK to go through the usual process, I don’t think it needs to be rushed into the current release.

[mohitwp]

Created separate tickets for https://github.com/google/site-kit-wp/issues/4967#issuecomment-1091420787 and https://github.com/google/site-kit-wp/issues/4967#issuecomment-1090424456

https://github.com/google/site-kit-wp/issues/5056 https://github.com/google/site-kit-wp/issues/5057