All Traffic Widget: Don't show Dimensions tabs when no data is available for Analytics

[tofumatt]

When the All Traffic Widget doesn't have any data to show, the tabs that allow the user to select their dimension should not appear, because there's no data to filter. Currently, the tabs appear even when isZeroData( report ) is truth-y, but they should only be shown when isZeroData( report ) is false-y.

Screenshots

---

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

Acceptance criteria

• When a "zero data" or "error" state is present for any selector used by the DashboardAllTrafficWidget, the entire component should show a "Zero data" or "error" state, and not render the individual children components/charts.

Implementation Brief

After a call with @felixarntz, @aaemnnosttv, and @eugene-manuilov, we decided the best solution is to move all selectors for the DashboardAllTrafficWidget children components into the DashboardAllTrafficWidget component itself, then pass the loading and data/report variables to the child components as props. Data in error (from the getErrorForSelector selector) should not be passed to children—instead, if the component has zeroData from the UserDimensionsPieChart component or an error state, one large "zero data" or "error" state should be rendered.

• Move all loading/error/getReport selectors from TotalUserCount, UserCountGraph, and UserDimensionsPieChart to DashboardAllTrafficWidget.
  • Pass the loading and data/report variables as props to their respective components
  • Optional: All components should show their "loading" state until all data has loaded on first component load/render. After the first load, updates for things like clicking on a dimension in the pie chart to filter results should not enable a loading state in all components, only the ones that are updating (this can be done using useEffect/useState). If this is done, dateRange updates should trigger a full loading state.
• The widget's main component should only return an overall error or "zero data" state as a result for the UserDimensionsPieChart request. That one is the only request which on failure/zero would indicate the entire widget is unusable. If that component's getReport requests has no error and is not "zero data" then each child component with its own error/loading/report variables should be rendered.

Test Coverage

• No test coverage needed.

Visual Regression Changes

• If the "zero data" state has a VRT, it will need adjustment.

QA Brief

• Go to a site with no Analytics data (a new website, for instance) and load the dashboard with development mode enabled to see the All Traffic Widget V2. The tabs should not display when there is no data—instead, the entire component should show a "no data available" blue box component.
• Go to a site with Analytics data, repeat the above process, and ensure the tabs still appear and function, including whilst loading.

Changelog entry

• Improve user experience of new All Traffic widget for when it is loading and for when there is no relevant data available.

[aaemnnosttv]

Thanks @tofumatt – I think there are some details left to consider here.

• The idea of coupling this component to getReport arguments that it doesn't use itself is a bit too fragile and could result in extra queries triggered in the event something changes in another component and these exact args are no longer shared.
  • In #2252 we introduced the concept of widget states which is the newer way to handle this although there's a bit more to the problem here than that
• Logically, we would only want this to show a PreviewBlock just on the initial render – it would be odd UX for this to go back into a loading state when you select a different dimension
• Likewise, we also don't want to simply return null for an error or zero data state because then the user would be "trapped" in that dimension. Similar to a date range with no data, the user still needs to be able to select a different one.

This is a bit of a tricky UX problem as-is; the easiest solution to which would simply be to not to use ReportZero within the sub-components but that would be a big difference than it is now visually. Otherwise, it seems like the only solution would be to select data from all available dimensions and then only show ReportZero for the entire widget (when there really is zero data for any dimension) rather than specific sections; this sounds like too much from an API/data/quota perspective though. Widgets are supposed to only show this once for the whole widget anyways, not sure why we have it on both sides for this one 🤔

Let's talk about this one with @felixarntz on our call later since there are some considerations here that we need his input on.

[felixarntz]

@tofumatt Reviewing this, there is actually a benefit of still passing through each request error to its respective component: When e.g. selecting a pie slice, only the data on the left is refreshed. If an error happens there, it means only the UI for that pie slice (the left half of the widget specifically) should indicate the error state. It's unlikely that this will happen, but in that case the overall widget is still usable, so there shouldn't be a global error.

I suggest the following adjustment:

• Always pass loading, error, and data / report to the child components. Basically, the child components shouldn't be modified, except that they receive this information from props instead of useSelect. The logic flow in those component should be unchanged.
• The widget's main component should only return an overall error or zero data state as a result for the piechart request. That one is the only request which on failure/zero would indicate the entire widget is unusable.

cc @aaemnnosttv @eugene-manuilov

[tofumatt]

@felixarntz Oh, good call. That makes sense; I've updated the IB 👍🏻

[aaemnnosttv]

IB looks good to me 👍

[felixarntz]

IB ✅ from my end, waiting for @eugene-manuilov's feedback

[eugene-manuilov]

IB :heavy_check_mark:

[eugene-manuilov]

Moving to the execution column and will work on it tomorrow morning.

[aaemnnosttv]

QA ✅

In no data state, the widget shows the same full-area ReportZero component as in the legacy widget