Feature Description

When the Internal Server Error banner is shown, the viewport should be scrolled to bring it into view if it's not already visible.

See this Figma thread for additional context.

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

Acceptance criteria

• When the Internal Server Error banner is rendered, the viewport should be scrolled to bring it into view if it's not already visible.
• For example, as things stand, if the core/modules/data/activation endpoint returns an error when the user clicks the Connect now button in the AdSense Connect CTA widget, the Internal Server Error banner is displayed at the top of the dashboard, but the user is too far down the page to see it and should be scrolled up so they know that an error occurred.

Implementation Brief

• In assets/js/googlesitekit/notifications/components/Notification/index.js:
  • Wrap the component with forwardRef so parents can receive a ref to the root <section> DOM node.
  • Keep the existing internal ref used by ViewedStateObserver: use useMergedRef to merge the forwarded and internal refs.
• In assets/js/components/notifications/InternalServerError.js:
  • Add a ref (via useRef) and pass it to <Notification ref={ … }> once Notification supports forwardRef.
  • Add a useEffect that depends on the internal server error from getInternalServerError() being truthy. When it is, call ref.current?.scrollIntoView( { behavior: 'smooth', block: 'nearest', inline: 'nearest' } ).
    • block / inline: 'nearest' keeps scrolling minimal so the viewport does not move when the banner is already fully visible.

Test Coverage

• In assets/js/components/notifications/InternalServerError.test.js:
  • Add tests to cover the above behaviour.

QA Brief

• Go to the Site Kit dashboard.
• Scroll down downwards in the dashboard.
• Open the console in the browser developer tools, and run the following script:

const error = {
    id: 'module-setup-error',
    title: 'Test Error',
    description: 'Error message',
};

googlesitekit.data.dispatch( 'core/site' ).setInternalServerError( error );

• Verify that you're scrolled back and the error notification is in your view.

Changelog entry

• Scroll to bring the Internal Server Error banner into view when it's displayed.