[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 });

[maxedin]

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.

In 9.0.100 they added shadowRoot and observer can't handle it (not part of child nodes). I had to create an internal observer. A bit ugly but works

        const rejoiningText = "{your custom rejoiningText}";
        const retryingText = "{your custom retryingText}";
        const rejoinFailedText = "{your custom rejoinFailedText}";
        const buttonCaption = "{your custom buttonCaption}";
        const observer = new MutationObserver(() => {
            let dialog = document.querySelector('div#components-reconnect-modal');
            if (dialog) {
                let paragraph = dialog.shadowRoot.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;
                }
                const observerInner = new MutationObserver(() => {
                    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;
                    }
                });
                observerInner.observe(paragraph, { childList: true });
            };
        });
        observer.observe(document.body, { childList: true });
    </script>

[CrahunGit]

Mixing responses from @dgoldm and @boukenka this my solution, working on final realese bytes

<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.getElementById('components-reconnect-modal');
          if (dialog) {
              var shadowRoot = dialog.shadowRoot;
              if (shadowRoot) {
                  var paragraph = shadowRoot.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>

[raphadesa]

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.

In 9.0.100 they added shadowRoot and observer can't handle it (not part of child nodes). I had to create an internal observer. A bit ugly but works

        const rejoiningText = "{your custom rejoiningText}";
        const retryingText = "{your custom retryingText}";
        const rejoinFailedText = "{your custom rejoinFailedText}";
        const buttonCaption = "{your custom buttonCaption}";
        const observer = new MutationObserver(() => {
            let dialog = document.querySelector('div#components-reconnect-modal');
            if (dialog) {
                let paragraph = dialog.shadowRoot.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;
                }
                const observerInner = new MutationObserver(() => {
                    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;
                    }
                });
                observerInner.observe(paragraph, { childList: true });
            };
        });
        observer.observe(document.body, { childList: true });
    </script>

Thank you, this solution worked fine for me !!!

[vertonghenb]

Let's also take the dark modes into account. Since it's creates an inline style tag, it overrides the simple css selectors.

.components-reconnect-dialog{
    background-color:black;
}

Also fails with an !important tag.

[CrahunGit]

Maybe you can use classList instead

[dgoldm]

@maxedin's solution works perfectly, whereas @CrahunGit's holds up for about 10 seconds after which the original text reappears

[HugCoder]

                    let button = dialog.querySelector('button');   

This also needs shadowRoot:
let button = dialog.shadowRoot.querySelector('button');

Also perhaps it should be mentioned that to insert the seconds on the retrying countdown, you can do something like this:
const retryingText = "Reconnection failed. Trying again in $1 s.";

This causes the RegEx replace in:
text.replace(/.+ (\d+) seconds?/, retryingText);
to keep what's in (\d+) and insert it at $1 in your custom text.

Another tip, if you want to account for dark mode, you can add something like this:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    let actualDialog = dialog.shadowRoot.querySelector('.components-reconnect-dialog');
    
   if (actualDialog) {
        actualDialog.style.backgroundColor = "#1F2937";
    }
}

It feels like quite a big oversight to release this feature without some customization, and especially to not account for dark mode, which all real developers use, if I may be bold enough to say so 😅

[voids]

Thanks @maxedin , and I found the observer can be reused by calling its observe() method again.

(() => {
    const rejoiningText = "{your custom rejoiningText}";
    const retryingText = "{your custom retryingText}";
    const rejoinFailedText = "{your custom rejoinFailedText}";
    const buttonCaption = "{your custom buttonCaption}";
    let modal = null;
    new MutationObserver((mutations, observer) => {
        if (modal === null) {
            modal = document.getElementById('components-reconnect-modal');
            if (modal !== null) {
                // shadowRoot must be observed individually
                observer.observe(modal.shadowRoot, {childList: true, subtree: true, attributes: false});
            }
        } else {
            const paragraph = modal.shadowRoot.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;
            }
            const button = modal.shadowRoot.querySelector('button');
            if (button) {
                button.textContent = buttonCaption;
            }
        }
    }).observe(document.body, {childList: true, subtree: false, attributes: false});
})();

[javiercn]

This is related to #58629 too.

The plan here is to extract the code from the JS bundle and put it into a component in the template. That should allow for anyone to easily customize it as needed and to avoid causing issues with strict CSP policies.

As part of this task, we should include a test that ensures that we can run with a strict policy and don't break this in the future.

When the code is in the template, the bit in the bundle doesn't get used, so it shouldn't cause issues with CSP. We need to keep the code in the bundle as we don't break existing apps upgrading to a newer version.