Add the Audience Tile Error (Storybook)

[techanvil]

Feature Description

Create the Audience Tile Error component and add it to Storybook.

See audience tiles > error states in the design doc.

---

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

Acceptance criteria

• The Audience Tile Error component should be created and stories for it added to Storybook.
• It should be implemented according to the Figma design.
• The component should accept a list of errors as a prop.
  • If any of the errors is a permissions error, the "insufficient permissions" variant of the error notice will be shown (as mentioned in the design doc, including a Get help link and a Request access buttons.
    • Its Get help link will open the Analytics insufficient permissions support document.
    • The Request access button will open the URL for the connected web data stream in the Analytics UI, allowing the user to request access.
  • Otherwise, the catch-all variant will be shown which just includes the Retry button.
    • Clicking the Retry button will retry whatever triggered the errors (i.e. it will invalidate the resolution for the selector associated with the errors).

Implementation Brief

• Add a new component /assets/js/modules/analytics-4/components/dashboard/AudienceSegmentation/AudienceTile/AudienceTileError.js with the prop errors, an array of errors.

  • Add a function to check if any of the errors are insufficient permissions errors, hasInsufficientPermissionsError, as implemented for widget errors:

  • site-kit-wp/assets/js/components/ReportError.js

    Lines 103 to 105 in 6f01a83

    	const hasInsufficientPermissionsError = errors.some( ( err ) =>
    	isInsufficientPermissionsError( err )
    	);

  • If hasInsufficientPermissionsError is true:
    • Render a Get help link linking to https://sitekit.withgoogle.com/documentation/troubleshooting/analytics/#insufficient-permissions
    • Render a Request access button, which links to the serviceEntityAccessURL, resolved using the getServiceEntityAccessURL selector:

    • site-kit-wp/assets/js/components/ReportErrorActions.js

      Lines 57 to 61 in 6f01a83

      	const requestAccessURL = useSelect( ( select ) =>
      	typeof select( storeName )?.getServiceEntityAccessURL === 'function'
      	? select( storeName ).getServiceEntityAccessURL()
      	: null
      	);

  • If hasInsufficientPermissionsError is false, render a single Retry button which, when clicked, calls a retryErrors function as implemented for widget errors:

  • site-kit-wp/assets/js/components/ReportErrorActions.js

    Lines 103 to 113 in 6f01a83

    	const handleRetry = useCallback( () => {
    	retryableErrors.forEach( ( err ) => {
    	const { selectorData } = err;
    	dispatch( selectorData.storeName ).invalidateResolution(
    	selectorData.name,
    	selectorData.args
    	);
    	} );
    	onRetry?.();
    	}, [ dispatch, retryableErrors, onRetry ] );

• Add assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-segmentation-tile-error.scss and apply the styles to match the Figma designs in the AC.

Test Coverage

• Add AudienceTileError tests and stories.

QA Brief

• View the storybooks for AudienceTileError, confirm they match designs and AC. Note: the Get Help link on the insufficient permissions story does not link to the full URL in the AC within the storybooks but will in use in the dashboard.

Changelog entry

• Add an error state for the Audience tile component.

[tofumatt]

Looks good to me 👍🏻

IB ✅

[mohitwp]

QA Update ❌

Tested on Storybook Story.

@benbowler In Figma text font family is 'Google Sans Text' and under Storybook implementation Font Family is 'Google Sans Display'.

Figma -

Storybook-

[mohitwp]

QA Update ✅

• Tested on Storybook Story.
• Verified that text font family is now updated to 'Google Sans Text' as per Figma.
• Verified storybook story with Figma design.