Implement the unhappy paths for the Audience Creation Notice

[techanvil]

Feature Description

Implement the unhappy paths for creating an audience via the Audience Creation Notice. This does include showing an error from the OAuth flow.

See audience creation > error states and OAuth errors in the design doc.

---

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

Acceptance criteria

Implementation Brief

• [ ]

Test Coverage

QA Brief

Changelog entry

[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

[techanvil]

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

[techanvil]

Hi @hussain-t, thanks for drafting this IB. The production code side looks good. My only hesitation is that the amount of testing looks a bit excessive. It suggests we'll effectively be providing stories and tests that cover the same thing multiple times - the AudienceSelectionPanel stories/tests would be things in their fully integrated form, so maybe we don't actually need the explicit AudienceCreationNotice coverage as well. Incidentally I'm guessing the last line of the Test Coverage section is intended to refer to the AudienceSelectionPanel component?

[hussain-t]

Thanks, @techanvil. I've updated the test coverage as suggested. However, retaining the AudienceCreationErrorNotice stories is important to ensure all error variants are captured. Specifically, scenarios like insufficient permissions and generic errors might be challenging to cover within the AudienceSelectionPanel stories, as these depend on the component state.

[techanvil]

Thanks @hussain-t. Agreed, keeping the AudienceCreationErrorNotice stories makes sense and will be useful during development too.

IB :white_check_mark:

[nfmohit]

@techanvil Temporarily co-assigning this to you for visibility as I have a question regarding the ACs in the PR here. Thanks!

CC: @hussain-t

[techanvil]

Thanks @nfmohit, I've replied to the question and amended the link in the AC.

[kelvinballoo]

QA Update ❌

Have 2 observations:

ITEM 1 There is a typo for 'Request access' button. It should have been 'Request Access' ❌

Implementation:

Figma:

---

ITEM 2 For the 2 error variants: Insufficient Permissions Error Variant and Generic Error Variant

• System is handling well per the ACs
• However, when we have already hit the errors and click on 'Create' (while disabling the Tweak extension), the new audiences would be created successfully but the error still remained on the screen. ❌ We would need to remove those errors.

Videos attached for reference:

Insufficient Permissions Error Variant: (50 second mark)

https://github.com/user-attachments/assets/df733320-8f10-4c61-9935-07db6c6c9e28

Generic Error Variant: (18 second mark)

https://github.com/user-attachments/assets/dc2c75e9-f72a-4ea3-ac0b-185b33411ce8

[hussain-t]

Thanks for spotting the issues, @kelvinballoo!

There is a typo for 'Request access' button. It should have been 'Request Access' ❌

The implementation is correct, as it follows the convention. However, the typo exists in the Figma design. @techanvil, could you confirm it?

For the 2 error variants: Insufficient Permissions Error Variant and Generic Error Variant

This is a valid bug. I’ve addressed it in this follow-up PR.

[nfmohit]

The follow-up PR has been merged and this is back with you for another pass, @kelvinballoo.

To add, I also agree that "Request access" is not a typo. This is consistent with other instances of this button. However, let's wait for @techanvil to confirm.

[techanvil]

Thanks folks. Agreed, "Request access" is the correct implementation. I've asked Sigal to update the Figma design accordingly. Over to you again, @kelvinballoo :)

[kelvinballoo]

QA Update ✅

Verified good as follows:

• If an error is returned from the OAuth flow, the OAuth error variant of the error notice is displayed. ✅

  • It follows the Figma design, with the copy: Setup was interrupted because you didn't grant the necessary permissions. Click on Create again to retry. If that doesn't work, get help

  • The default OAuth error notice that Site Kit usually displays when the OAuth flow returns an error is not shown.

  • Verified good for new and returning visitors.

    https://github.com/user-attachments/assets/c61b89c8-cdbc-4fa5-9130-6c19daf7ffef

    https://github.com/user-attachments/assets/ea484ee0-0b7e-4bae-b798-9420c14dfcb2

• If a permission error is returned by the API call to create the audience, the "insufficient permissions" variant of the error notice is displayed. ✅

  • It follows the Figma design, with the copy: Title: Insufficient permissions Description: Contact your administrator. Trouble getting access? Get help

  • The Request access button opens the URL for the currently connected web data stream in the Analytics UI, allowing the user to request access.

  • The "Get help" links open the Analytics support page in a new tab, scrolled to the insufficient permissions section.

  • Verified good for new and returning visitors and also ensured that when successful, the error message disappeared accordingly.

    https://github.com/user-attachments/assets/431f539c-13c2-4c7f-9656-377e806f4ae9

    https://github.com/user-attachments/assets/0eafb0c3-9571-41b4-933a-fa4da8eb90ac

• If any other error is returned by the API call to create the audience: ✅

  • The generic error variant of the error notice is displayed.

  • It follows the Figma design, with the following copy: Title: Analytics update failed Description: Click on Create to try again.

  • Verified good for new and returning visitors and also ensured that when successful, the error message disappeared accordingly.

    https://github.com/user-attachments/assets/96500e69-534b-4e25-85f4-7c0482a57e41

    https://github.com/user-attachments/assets/42e8d543-fa31-4015-8c55-aaccfa24e704