Add reconnect UI component to the Blazor template

[oroztocil]

Reconnect UI component for the Blazor template

Adds CSP-compliant UI to the Blazor Web App project template.

Description

Adds a Razor component for reconnection UI to the Blazor Web App project template. This component showcases to users how to override and customize the UI that gets displayed when the client loses the WebSocket connection to the Blazor server.

The appearance and behavior matches the existing default UI that is created by JS code in DefaultReconnectDisplay. However, since it does not need to add inline styles programatically, it does not violate stricter Content-Security-Policy settings for the style-src policy. In this way, users can avoid CSP issues discussed in #58629.

The existing UserSpecifiedDisplay code was updated in two ways:

• Apart from indicating the reconnection state by setting a specific CSS class on the element with ID components-reconnect-modal, it now also dispatches a custom event components-reconnect-state-changed that can be listened for on the modal element.
• New state "retrying" is indicated to the user (by both a CSS class and the custom event) so that they can better differentiate between the stages of the reconnection process.

These changes were needed for the UserSpecifiedDisplay implementation to be on par with DefaultReconnectDisplay but they also makes customization of the reconnection UI more flexible in general.

The PR also adds new E2E tests that check that the UI is displayed and that no style-related CSP errors are logged in the browser.

Fixes #57453
Fixes #58629

[Copilot]

Copilot reviewed 5 out of 9 changed files in this pull request and generated 1 comment.

Files not reviewed (4)

• src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/template.json: Language not supported
• src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/ReconnectModal.razor.css: Language not supported
• src/Components/test/testassets/BasicTestApp/Reconnection/ReconnectionComponent.razor: Evaluated as low risk
• src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/MainLayout.razor: Evaluated as low risk

Comments suppressed due to low confidence (1)

src/Components/Web.JS/src/Platform/Circuits/UserSpecifiedDisplay.ts:56

• Ensure that the new behavior for retrying attempts is covered by tests.

if (currentAttempt > 1 && secondsToNextAttempt > 0) {

[oroztocil]

@javiercn There are two changes in behavior compared to DefaultReconnectDisplay that I know of:

1. The based modal can be closed by pressing ESC. This can be disabled by intercepting the event in JS. However, I am not sure if we want to have that as a default in the template.
2. The original code in DefaultReconnectDisplay adds an event listener that tries to reconnect after the document becomes visible again (e.g. when user switches tabs) - and it does so in the failed() method (see DefaultReconnectDisplay). In the template component, we don't have such direct opportunity to set up the event listener. The implementation in the PR therefore sets in only when the user presses the Retry button which is not that useful, I guess. We can add the listener based on some other event happening. However, I wanted to ask your opinion about this.

[javiercn]

Looks great!