No spinning wheel for insufficient permission error

[zutigrm]

Feature Description

Originally added by Kelvin in - https://app.asana.com/1/8468971550303/project/1215795095553989/task/1216688861346416

Whenever an admin doesn't have permissions for the GA account, an error appears on the dashboard when clicking on 'Get Breakdown'

That is fine.

However, when clicking 'Retry' at the notice, while there are transactions in the background, it feels like nothing is happening on the FE.

It would be best to have a spinning wheel to indicate the action happening.

widget.error.-.no.spinning.wheel.1.mov

---

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

Acceptance criteria

• When a user clicks "Retry" on the Site Goals breakdown insufficient-permission error notice, the Retry button should show a loading indicator (spinner) while the retry runs, so it's clear the action is in progress.
• While a retry is in progress, the Retry button should not be re-triggerable.
• The button returns to its normal state once the retry resolves (success, a fresh error, or transition into the loading state).

Implementation Brief

• Let the error notice's Retry button reflect a busy state

  • BreakdownErrorNotice should accept an in-progress flag and pass it into its ctaButton as inProgress (and disabled while busy, to prevent re-clicks)

• Drive it from the existing enable-flow busy signal

  • BreakdownNoticeArea already computes the enable-flow busy state (isBusy, from useBreakdownEnableHandler plus isEnabling) and renders BreakdownErrorNotice with onRetry={ handleEnable }
  • Pass that same busy signal into the new prop so the spinner reflects the in-progress retry

Test Coverage

• BreakdownErrorNotice test: with the busy prop set, the Retry CTA renders in its spinner/in-progress state and is disabled; without it, it renders normally.

• BreakdownNoticeArea test: clicking "Retry" on the permission error notice puts the Retry button into its loading state while the enable flow runs.

QA Brief

• Connect property without custom dimensions and go to the site golals section - enable breakdown notice should be showing
• Paste this into the console:

const d = googlesitekit.data;
const propertyID = d.select( 'modules/analytics-4' ).getPropertyID();
d.dispatch( 'modules/analytics-4' ).setErrorForSelector(
	{
		code: 'insufficient_permissions',
		message: 'Insufficient permissions',
		data: { status: 403, reason: 'insufficientPermissions' },
	},
	'getCustomDimensions',
	[ propertyID ]
);
d.dispatch( 'core/forms' ).setValues( 'analyticsCustomDimensionsCreate', {
	breakdownOrigin: 'widget',   // 'panel' za side panel
	breakdownScope: 'lead',      // 'ecommerce' za Online store widget
	breakdownDismissed: false,
} );

• It should show error notice with Retry CTA
• You can click on it - verify it goes into loading state and is not clickable. And if you want to click it multiple times and verify it goes back to normal state after another error, use tweak extension and include this url .*/wp-json/google-site-kit/v1/modules/analytics-4/data/custom-dimensions.* with following payload:

{
  "code": "insufficient_permissions",
  "message": "You do not have sufficient permissions for this GA4 property.",
  "data": {
    "status": 403,
    "reason": "insufficientPermissions"
  }
}

Changelog entry

[eugene-manuilov]

AC + IB ✔️