Add the Full Width Error Banner (Storybook)

[techanvil]

Feature Description

Create the Full Width Error Banner component and add it toStorybook.

See full width error banner in the design doc.

---

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

Acceptance criteria

• The Full Width Error Banner 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

In the assets/js/modules/analytics-4/components/dashboard/AudienceSegmentation directory:

• Create a new file, AudienceSegmentationErrorWidget.js, for the Full Width Error Banner component.
• It can follow a similar structure as the AudienceSegmentationSetupCTAWidget component.
• It should receive a list of errors as a prop.
• Wrap the body with the Widget component and add the noPadding prop to it to layout the SVG graphics.
• Within the Widget component, use Grid->Row->Cell to arrange the error notice and buttons.
• Use the h3 element for the error notice.
• Export the error SVG from the Figma design and render it in the component.
• Check for "insufficient permissions" errors using the isInsufficientPermissionsError helper function and render the Insufficient permissions copy.
• Otherwise, render the Your visitor groups data loading failed copy.
• Render the ReportErrorActions component with the following props, which will render the error variant-specific buttons appropriately (See MetricTileWrapper) :
  • moduleSlug - pass the analytics-4 module slug.
  • error - pass the errors.
  • hideRetryHelpLink - a boolean prop to hide the Get help link if the error is not a permissions error.
  • GetHelpLink - Create a new GetHelpLink component that renders the Contact your administrator. Trouble getting access? copy and the Get help link. It should be similar to the assets/js/components/KeyMetrics/GetHelpLink.js component.
  • getHelpClassName - custom class name for the Get help link.
• Adjust the styles that match the Figma design.

In assets/js/components/ReportErrorActions.js:

• Add a new boolean prop hideRetryHelpLink.
• Render the Retry get help link if hideRetryHelpLink is falsy. See:
  

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

  Lines 130 to 148 in 7911c0a

  	<span className="googlesitekit-error-retry-text">
  	{ createInterpolateElement(
  	__(
  	'Retry didn’t work? <HelpLink />',
  	'google-site-kit'
  	),
  	{
  	HelpLink: (
  	<Link
  	href={ errorTroubleshootingLinkURL }
  	external
  	hideExternalIndicator
  	>
  	{ __( 'Get help', 'google-site-kit' ) }
  	</Link>
  	),
  	}
  	) }
  	</span>

Test Coverage

• Add storybook stories for the AudienceSegmentationErrorWidget component.
• Add test coverage for the AudienceSegmentationErrorWidget component, particularly around the retry logic and different conditions for rendering different sets of copy.

QA Brief

• Review the Storybook stories for AudienceSegmentationErrorWidget to ensure they align with the provided Figma designs and AC.
• Note that the buttons and links in the error banner are not functional in this PR.
• Default error state Figma design.
• Insufficient permissions error state Figma design.

Changelog entry

• Add the Full Width Error Banner for the Audience Segmentation feature as a component in Storybook.

[tofumatt]

IB ✅

[kelvinballoo]

QA Update ❌

Tested on Storybook and documented my issues below:

ITEM 1:
Font weight for 'Retry' button should be 500 instead of 400
Font should be 'Google sans Text' but it's 'Google Sans Display' for the Main title.
These are applicable for both the default and the permission error states.

Implementation: The font weight is currently 400:

Figma: The font weight should be 500.

__________________________________________________

ITEM 2:

• Distance between msg and button should be 14px instead of 18px

Figma:

Implementation: The gap is currently at 18px

__________________________________________________

ITEM 3:

• The top of the image should be 20px from the top of the block but it's more than that currently.
• Similarly at the bottom, the gap should have been 20px below the image but it's less than that.
  Refer to the details for more details:

Figma:

Implementation:

---

ITEM 4:
Overall button size on Figma is 68 x 32 px
And the Top and bottom margin inside button should be 6px.

If you look at the current implementation, the overall button size is (33.75+16+16) x (8+24+8) = 65.75 x 40px
And the Top and bottom margin inside button is 8px.

Figma:

Implementation:

__________________________________________________

ITEM 5:
We don't have a design on mobile but I feel that we can set the top and bottom spaces more equal for a better visual?
Currently, the top section is bigger than the bottom.

---

ITEM 6:
There is a very weird behaviour at breakpoint 960px.
At 959px, the image is at the left.
At 960px, it's at the centre.
At 961px, it's at the right.
While we are transitioning from tablet to desktop, I don't know why we have an odd one at 960px. It feels weird to me.
Let me know if there is a valid reason for this.

959px:

960px:

961px:

[hussain-t]

Thanks for raising the issues, @kelvinballoo. I've addressed most of the observations in the follow-up PR. Please note that the Figma designs can be a bit out of alignment with the actual plugin implementation. You can see examples in the plugin. We should keep it consistent with the existing styles.

ITEM 1:
Font weight for 'Retry' button should be 500 instead of 400
Font should be 'Google sans Text' but it's 'Google Sans Display' for the Main title.
These are applicable for both the default and the permission error states.

Fixed ✅

ITEM 2:
Distance between msg and button should be 14px instead of 18px

Fixed ✅

ITEM 3:
The top of the image should be 20px from the top of the block but it's more than that currently.
Similarly at the bottom, the gap should have been 20px below the image but it's less than that.
Refer to the details for more details:

Fixed ✅

ITEM 4:
Overall button size on Figma is 68 x 32 px
And the Top and bottom margin inside button should be 6px.
If you look at the current implementation, the overall button size is (33.75+16+16) x (8+24+8) = 65.75 x 40px
And the Top and bottom margin inside button is 8px.

Figma design can be a bit out of alignment with the actual plugin implementation. We should keep it consistent with the existing styles. The current implementation of the button aligns with the existing styles.

ITEM 5:
We don't have a design on mobile but I feel that we can set the top and bottom spaces more equal for a better visual?
Currently, the top section is bigger than the bottom.

Fixed ✅

ITEM 6:
There is a very weird behaviour at breakpoint 960px.

Fixed ✅

[hussain-t]

@techanvil, back to you to review the follow-up PR. Thanks!

[techanvil]

Thanks @hussain-t!

Back to you for another pass, @kelvinballoo.

[kelvinballoo]

QA Update ⚠️

Thanks @hussain-t .
Tested good overall.

Need your help to check on item 5.

ITEM 1: ✅
For both the default and the permission error states:

• Font weight for buttons are now 500
• Font is now 'Google sans Text' for the Main title.

________________________________________________________________________

ITEM 2: ✅
Distance between msg and button is now 14px.

---

ITEM 3: ✅
The top and bottom of the image is now 20px.

---

ITEM 4: ✅
Noted that we are keeping things consistent with other areas of the plugin. Figma is not consistent for this.

---

ITEM 5: ⚠️
While the bottom and top margin are the same, it does still feel like the previous one.
@hussain-t , could you elaborate on the changes done for this one?

---

ITEM 6: ✅
The 960px breakpoint follows that of 959px and that's more consistent.
This is good.

[hussain-t]

Hi @kelvinballoo,

ITEM 5: ⚠️
While the bottom and top margin are the same, it does still feel like the previous one.

I have addressed this issue in a new follow-up PR. I've also fixed the spacing for the tablet viewport.

@techanvil, back to you for another review.

[techanvil]

Thanks @hussain-t, that's merged 👍

Back to you @kelvinballoo!

[kelvinballoo]

QA Update ✅

This is looking good on mobile and tablet viewports now.

Moving ticket to Approval.