Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add reconnect UI component to the Blazor template #60376

Merged
merged 13 commits into from
Feb 18, 2025

Conversation

oroztocil
Copy link
Member

@oroztocil oroztocil commented Feb 13, 2025

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 bot review requested due to automatic review settings February 13, 2025 19:23
@oroztocil oroztocil requested a review from a team as a code owner February 13, 2025 19:23
@dotnet-issue-labeler dotnet-issue-labeler bot added the area-blazor Includes: Blazor, Razor Components label Feb 13, 2025
@dotnet-policy-service dotnet-policy-service bot added the community-contribution Indicates that the PR has been added by a community member label Feb 13, 2025
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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) {

@pavelsavara pavelsavara added this to the 10.0-preview2 milestone Feb 14, 2025
@oroztocil
Copy link
Member Author

@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 javiercn removed the community-contribution Indicates that the PR has been added by a community member label Feb 14, 2025
Copy link
Member

@javiercn javiercn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-blazor Includes: Blazor, Razor Components
Projects
None yet
4 participants