[Blazor] Enable custom text in the new (.Net 9.0) reconnect dialog

[dgoldm]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

The new reconnect dialog, displayed by Blazor when the browser loses connection with the server is a wonderful improvement, and I'm tempted to upgrade my project, which is used in production, to .Net 9.0 preview for this reason alone.
The problem is that I need to display the text in languages other than English.
As far as I can see the English text is hard-coded, e.g.:

aspnetcore/src/Components/Web.JS/src/Platform/Circuits/DefaultReconnectDisplay.ts

Line 94 in d65f5c4

this.status.innerHTML = 'Rejoining the server...';

Describe the solution you'd like

Could you provide a way to customize the text?

Additional context

No response

[javiercn]

@dgoldm thanks for contacting us.

We don't offer customization of the built-in UI bits other than you providing your own UI.

With that said, you should be able to detect when the element is made visible on to the page using a MutationObserver and change the contents programmatically by navigating to the element.

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

[dgoldm]

Thanks @javiercn.
Judging by the documentation for customization of the old reconnect dialog, (which BTW is still the same in the 9.0 docs -
https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-9.0#reflect-the-server-side-connection-state-in-the-ui), which gives a straightforward, scriptless method to replace the built in UI with a functionally equivalent custom one, I was expecting a similar option for the new dialog.
I expect developers to be disappointed when they follow the docs only to discover that their custom UI looks so miserable compared to the built-in one.

Understanding that it now requires javascript, it would be great if MS could provide information on how to create my own UI and hook into the circuit events,
Or if indeed the only method is via MutationObserver, have the docs list the relevant element ids and classes, and provide some sample code.

[javiercn]

@dgoldm You can still use the option that you mention, but you won't get the styles, etc. of the new reconnect dialog.

The built-in reconnect UI has never been extensible by other means than you providing your own markup, at which point we simply set some classes and some text on the markup you provide.

In the future we likely want to move this UI into the template itself, there's no need for this UI to be hardcoded inside blazor and only creates problems like this.

If you want to replicate the UI within your app, you can grab the styles and HTML from our default one from here:

• https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web.JS/src/Platform/Circuits/DefaultReconnectDisplay.ts#L139-L280
• https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web.JS/src/Platform/Circuits/DefaultReconnectDisplay.ts#L36-L77

[dgoldm]

@javiercn I'm not interested in the styles, only the functionality, namely to display different messages corresponding to the current state of the reconnection mechanism. But for that I would have to be able to implement the various callbacks of ReconnectDisplay. That doesn't seem to be in the scope of the snippets you marked.

Anyway in the meantime I've managed to implement the MutationObserver workaround that you suggested.
I'm putting it here, in case anyone comes here with similar needs, or has any suggestion for improvement (I'm no expert at javascript, Blazor has relieved me from pursuing that path 😄)

Add this to App.razor:

<script>
	const rejoiningText = "{your custom text}";
	const retryingText = "{your custom text}";
	const rejoinFailedText = "{your custom text}";
	const buttonCaption = "{your custom text}";

	const observer = new MutationObserver(() => {
		let dialog = document.querySelector('.components-reconnect-dialog');
		if (dialog) {
			let paragraph = dialog.querySelector('p');
			let text = paragraph.innerText;
			if (text.startsWith('Rejoining')) {
				paragraph.innerHTML = rejoiningText;
			} else if (text.startsWith('Rejoin failed')) {
				paragraph.innerHTML = text.replace(/.+ (\d+) seconds?/, retryingText);
			} else if (text.startsWith('Failed to rejoin')) {
                                paragraph.innerHTML = rejoinFailedText;
			}

			let button = dialog.querySelector('button');
			if (button) {
				button.textContent = buttonCaption;
			}
		};
	});

	observer.observe(document.body, { childList: true, subtree: true });
</script>

[pthivierge-sayona]

Hi there, not sure this goes here, however I had an issue with text color. I suspect my theming (using mudblazor) was is inverting color of the paragraph style globally. So perhaps the new .net9 reconnect dialog should force black color in it's default style?

#components-reconnect-modal {
color: black !important;
}

For me, that made the text visible again when user's chose dark mode,

[raphadesa]

Hello @dgoldm I've tried your solution in a new Server app with .NET 9 but it doesn't work, the UI doesn't update...

Maybe @javiercn can help us ?

Thanks !

[dgoldm]

Hi @raphadesa,
Thanks for pointing this out.
Although It did work on the 9.0 preview version that was out at that time, now on 9.0.100 indeed it's not working.
I'll take a look.
Anyway, please upvote my OP. Maybe with some more upvotes we could get the feature request's priority boosted.

[boukenka]

Hi @dgoldm
I have tried as well. With no success, for the text color. 😿
I am using the MudBlazor library.

#components-reconnect-modal p {
    color: black !important;
}

[boukenka]

Based on your solution @dgoldm and with some modifications, I was finally able to display a black color. Here's my code if it helps anyone.

const observer = new MutationObserver(() => {
    let dialog = document.getElementById('components-reconnect-modal');
    if (dialog) {
        var shadowRoot = dialog.shadowRoot;
        if (shadowRoot) {
            var paragraph = shadowRoot.querySelector('p');
            if (paragraph) {
                paragraph.style.color = 'black';
                paragraph.innerHTML = '{your custom text}';
            }
        }
    };
});

observer.observe(document.body, { childList: true, subtree: true });