'You are offline' error not showing when trying to do set up and user getting stuck on loading state

[FlicHollis]

Asana bug bash ticket: https://app.asana.com/0/1202913874897532/1203043838459319

If user is on GA4 set up now banner then on clicking 'Set up now' button - user gets stuck in a loading state. If user is on 'Create property' banner, then on clicking 'Create Property' button user gets 'You are offline' error message.

---

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

Acceptance criteria

• If any of the API requests that are made to determine which Setup Banner variant to display fail, revert to the Reminder Banner, with the error message displayed above the Set up now CTA (see mockup below).
• If there multiple errors display them each on a separate line.
• Duplicate errors should not be displayed.

Implementation Brief

• In assets/js/modules/analytics-4/componeUnts/dashboard/ActivationBanner/SetupBanner.js:
  • Get any errors that the modules/analytics-4 store's getProperties selector encounters using the getErrorForSelector selector.
  • Using the useEffect hook, check if any error is derived above and if so, set GA4_ACTIVATION_BANNER_STATE_KEY to an object containing returnToReminderStep as the key and true (boolean) as the value by dispatching the setValues action from the core/forms store.
• In assets/js/modules/analytics-4/components/dashboard/ActivationBanner/index.js:
  • Check if the value of GA4_ACTIVATION_BANNER_STATE_KEY key in the core/forms store is returnToReminderStep using the getValue selector.
  • Using the useEffect hook, check if the above derived boolean is true and if so, set the step state to ACTIVATION_STEP_REMINDER.
• In assets/js/modules/analytics-4/components/dashboard/ActivationBanner/ReminderBanner.js:
  • Get any errors that the modules/analytics-4 store's getProperties selector encounters using the getErrorForSelector selector, passing the account ID as the argument for the selector (the account ID can be derived using the getAccountID selector of the modules/analytics store).
  • If an error derived above exists, render an ErrorNotice component with the error prop containing the error object derived above as the child of the BannerNotification component.

Test Coverage

• No tests need to be added/updated.

QA Brief

• Ensure that the ga4ActivationBanner feature flag is enabled in the tester plugin.
• Go to the Site Kit Dashboard.
• Once the GA4 AB has shown up, open the Network tab in the browser developer tools and simulate an Offline network.
• Click on Set up now.
• Verify that you are returned from the "progress bar loader" and an error as depicted in the ACs show up.
• Revert the Offline network simulation to default.
• Verify that clicking on the Set up now action now shows the appropriate setup banner after the "progress bar loader".

Changelog entry

• Fix bug in GA4 activation banner setup that could cause a loading screen to remain when a network error is encountered.

[techanvil]

AC have been added, ready for a review.

cc @aaemnnosttv

[tofumatt]

IB ✅

[eclarke1]

Just noting this issue is in QA but does not have a release assigned, should it be in 1.86.0?

[mohitwp]

Yes, it would be good if we can assign this to 1.86. Probability of creating any regression due to this ticket is very less. But don't not want to rush it.

[nfmohit]

@eclarke1 @mohitwp I think this was mistakenly moved to QA because the connected PR is not reviewed and merged yet.

[hussain-t]

I have assigned it to myself for the CR. I'm not sure why it was moved to QA. It seems @eclarke1 has moved it to QA 🤷 Since it's in QA, @mohitwp has picked it up and unassigned me.

[eclarke1]

Oh yes!! It does look like I'm the guilty party here! No idea how that happened apologies folks! Must have been a delay on my internet or something, sorry!

[hussain-t]

No problem, @eclarke1. I will move it back to CR and assign it to me.

[nfmohit]

No worries, @eclarke1! Zenhub does act glitchy sometimes.

[mohitwp]

QA Update ⚠️

@nfmohit I'm checked it for offline error and now user is not getting stuck in a loading mode but can you please guide me how can I generate multiple errors at a time so that I can check AC this point - If there multiple errors display them each on a separate line.

• Verified on develop.
• Now error is showing and user is not getting stuck in a loading mode.
• When user is online and no error occur then Set up now action shows the appropriate setup banner after the "progress bar loader".

[nfmohit]

how can I generate multiple errors at a time so that I can check AC this point - If there multiple errors display them each on a separate line.

@mohitwp I'm afraid, I'm not sure of a natural way to trigger multiple errors in this context, but you can try mutating our data store and making the banner show custom errors. To do so, run the following in your browser console while being on the Site Kit dashboard:

googlesitekit.data.dispatch( 'modules/analytics-4' ).receiveError(
    { code: 'custom_error_1', message: 'You have encountered error 1.' },
    'getProperties',
    [
        googlesitekit.data.select( 'modules/analytics' ).getAccountID()
    ],
);
googlesitekit.data.dispatch( 'modules/analytics-4' ).receiveError(
    { code: 'custom_error_2', message: 'You have encountered error 2.' },
    'getSettings',
    [],
);

Let me know if this works for you. Thanks!

[mohitwp]

QA Update ✅

• Verified on develop.
• Now error is showing and user is not getting stuck in a loading mode.
• When user is online and no error occur then Set up now action shows the appropriate setup banner after the "progress bar loader".
• To check scenario for multiple errors - I used code provided by Nahid here.
• Multiple errors are displaying in separate line.

https://github.com/google/site-kit-wp/issues/5928#issuecomment-1278821860

https://user-images.githubusercontent.com/94359491/196110564-9cb57c00-ff62-4a69-b5f2-a9a7c530f639.mp4

[aaemnnosttv]

⚠️ Approval

This mostly looks good but the request to check module access does not show as an error if it were to fail. See also https://github.com/google/site-kit-wp/issues/5912#issuecomment-1285918176

[aaemnnosttv]

On further consideration, this still meets the AC because the check-access request is not used to determine the variant shown, and instead is more of a detail/sub-variant of the reminder banner.