Implement the “no audiences” banner error state

[techanvil]

Feature Description

Implement the error handling for the "no audiences" banner, showing the Full Width Error Banner when there is an error.

See no audiences banner > error state in the design doc.

---

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

Acceptance criteria

• Given that the Audience Segmentation feature has already been set up:
  • If an error occurs when syncing the list of available audiences (which should occur for an authenticated user, either when viewing the Audience Widget Area and an hour or more has passed since the last sync, or when opening the Audience Selection Panel the first time for a given page load):
    • The Full Width Error Banner should be displayed in the appropriate variant.
      • If a permission error is returned by the API call, the "insufficient permissions" variant of the error banner will be shown (see the AC for Add the Full Width Error Banner (Storybook) #8230).
      • Otherwise, the catch-all variant will be shown. Clicking the Retry button will retry syncing the list of available audiences.
    • The Audience Tiles and Info Notice should not be displayed.

Implementation Brief

Note that we should ensure this IB is drafted after that of its dependency, #8147.

• Within AudienceTilesWidget, retrieve the syncAvailableAudiences error via getErrorForAction().
  • If the error is set:
    • Render AudienceSegmentationErrorWidget, passing the error via the errors prop.
    • If the error is not an insufficient permission error:
      • Pass the showRetryButton and onRetry() props.
      • In the onRetry() callback, clear the syncAvailableAudiences error and dispatch the syncAvailableAudiences() action.
• Refer to AudienceSelectionPanel/ErrorNotice for similar logic regarding the syncAvailableAudiences error.

Test Coverage

• Add JS test coverage for the changes to AudienceTilesWidget.

QA Brief

1. Enable audience segmentation and enable audience groups so that audiences are visible in audience tile area.

2. Install Time Travel extension in chrome.

3. Using the Tweak Chrome extension, create a rule as follows.

• URL: .*/wp-json/google-site-kit/v1/modules/analytics-4/data/sync-audiences.*
• Enable the use of regular expressions (.*)
• HTTP Method: POST
• Status code: 400
• Response payload.

{
    "code": 400,
    "message": "Some Error",
    "data": {
        "status": 400,
        "reason": "Some Reason"
    }
}

4. Set the time in Time travel extension to couple of hours later in the future. Reload the page.

5. There should be a the error banner visible in audience tile area with retry button.

6. Change the payload in tweak to following and refresh the page. This time, there should be no retry button, but banner should be visible.

{
  "code": 400,
  "message": "Some Error",
  "data": {
    "status": 400,
    "reason": "insufficientPermissions"
  }
}

Changelog entry

[ivonac4]

@techanvil it looks like this should be added to the design doc, right?

[techanvil]

@ivonac4 yup this has been added to the design doc, I've created an additional issue in for the component and added that as a dependency here. This issue is now ready for AC.

[techanvil]

I've moved this back to Backlog as the final in-progress changes to the design doc, relating to audience caching, will probably affect the AC for this one.

I've also unassigned @jimmymadon from this one due to his break.

[techanvil]

The audience caching aspect of the design doc has been sufficiently finalised, and I've moved this back to AC.

[techanvil]

Hey @kuasha420, just letting you know I've picked this one up to add the AC.

[kuasha420]

Hi @techanvil, the IB looks good overall.

However, in #8130 (related PR #9219) we added a onRetry prop to AudienceSegmentationErrorWidget here. Maybe we can use that instead of creating the new errorActions prop. What do you think?

Cheers.

[techanvil]

Thanks @kuasha420, that's a good point. #8130 has some related feedback, so I'll hold off until it's been merged and update the IB for this issue accordingly.

[techanvil]

With 8130 merged, I've updated the IB for this issue. Back to you for another pass, @kuasha420.

[kuasha420]

Thanks @techanvil! That simplifies a lot 😄

IB ✔️