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

[mohitwp]

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.

[felixarntz]

@marrrmarrr @aaemnnosttv I'm not sure how much this is actually an issue. I tend to agree it looks off, but also, this is still the active tab at this point, even though the user can't click any of them. The graph below relates to this number, not the other three ones.

I'm not sure what the best approach here is, I'd say completely removing it would be wrong. Maybe we can also gray out this line though, to better indicate it's not clickable while still keep the notion of it being active?

[aaemnnosttv]

@felixarntz if the active tab isn't changeable I think graying out the line would be appropriate to indicate it's disabled. If we keep it blue, I'd argue maybe the user should be able to still select the other tabs of the search funnel widget.

[felixarntz]

@aaemnnosttv Makes sense. I agree, we should gray it out if the user cannot select anything else, but if e.g. only Analytics is gathering data but Search Console isn't (i.e. the two Search Console tabs are still selectable), it should remain blue.

[aaemnnosttv]

@felixarntz what about when SC is gathering data and Analytics is not setup yet? Are the current ACs only relevant when Analytics is active?

[felixarntz]

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

[tofumatt]

Works for me 👍🏻

IB ✅

[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.

[mohitwp]

QA update ✅

Verified

• Verified when search console is in gathering state and analytics is not active. (2 widgets)
• Verified when search console and analytics is in gathering state. (4 widgets)
• The line at the top of active Search Funnel tab is gray as per the AC in both the cases.
• Verified when search console and analytics is in zero data state. The Line at the top of the active search funnel is blue.
• Verified for both main and entity dashboard.

    

• Verified for the visual glitch as explained in the video in the PR description . This is also resolved.

https://user-images.githubusercontent.com/94359491/166632635-53c0daed-f6ea-4a7f-925c-c9bbf2aca21f.mp4