While analytics is in gathering state, under 'Search traffic over the last 28 days' widget the first data block has the thick border.

Bug Description

While analytics is in gathering state, under ‘Search traffic over the last 28 days’ widget the first data block has the thick border. In gathering state ‘Total Impression’, ‘Total clicks’, ‘Total impressions’ or ‘Unique visitors from search’ from the SearchFunnel widget are not clickable, hovered or tabbable. It should follow the same design as the disabled pie chart tabs and have a grey colour.

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. See ‘Search traffic over the last 28 days’ widget data blocks.

Screenshots

Additional Context

• PHP Version: 8.0
• OS: [Windows 11]
• Browser: [Chrome, Firefox, edge]

---

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

Acceptance criteria

• In the “Search Funnel” widget, if none of the 2 or 4 tabs (2 if Analytics is not active, 4 otherwise) is actually selectable, the blue line above the active tab (always the first tab in this case as the user can’t change that selection) should be grayed out, to better indicate that there is no selection to make.
  • The line should still appear though (vs being removed completely) since technically that is still the active tab, relating to the chart shown below.
  • This should for example apply in the following scenarios:
    • Analytics is set up and both Search Console and Analytics are gathering data.
    • Analytics is not set up and Search Console is gathering data (Analytics is irrelevant at that point since it’ll have the CTA there instead).

Implementation Brief

• Using assets/sass/components/global/_googlesitekit-data-block.scss, set background-color: $c-jumbo and opacity: 0.6 for .googlesitekit-plugin .googlesitekit-data-block--is-gathering-data.googlesitekit-data-block--selected::before

Test Coverage

• No new tests to be added.

QA Brief

• Using the Tester plugin, force “gathering data” state for the Search Console.
• Navigate to the Dashboard and verify the line at the top of active Search Funnel tab is gray as per the AC.
• Connect Analytics and verify the same.
• Click on one of the Analytics tabs in the Search Funnel and check the tab selection changes as expected (i.e. there’s no visual glitch as evident in the video in the PR description).

Changelog entry

• Remove color from disabled tab in Search Console widget on dashboard when Search Console is gathering data.

[aaemnnosttv]

@techanvil while reviewing the remaining issues for the sprint today, we identified this one as a nice-to-have issue to get into the release – if possible. It’s still not any more important than it was, but it’s the only one left in the sprint that would add value to the release.

[felixarntz]

@aaemnnosttv Ah, good point, I missed that. Updating the ACs now.