Allow changing display language in dashboard settings #6805

adamint · 2024-11-26T04:43:43Z

Description

Currently, you can change the language of the Aspire dashboard by changing the language of the browser. This change adds a setting in the settings dialog to change the display language. Formatting is not affected, as CultureInfo.CurrentCulture is unchanged. Only CultureInfo.CurrentUICulture is changed.

The one edge case is if there is a culture (such as es-US or pt-PT) that the user is requesting that is different than our localized culture (es and pt-BR respectively). The resolved cultures will be es and pt-BR, so we should select these as the active cultures in the dropdown - except in zh, since there are two different zh cultures that we localize for.

The approach recommended by the Blazor globalization docs was taken.

Fixes #5009

Checklist

Is this feature complete?
- Yes. Ready to ship.
- No. Follow-up changes expected.
Are you including unit tests for the changes and scenario tests if relevant?
- Yes
- No
Did you add public API?
- Yes
  - If yes, did you have an API Review for it?
    - Yes
    - No
  - Did you add <remarks /> and <code /> elements on your triple slash comments?
    - Yes
    - No
- No
Does the change make any security assumptions or guarantees?
- Yes
  - If yes, have you done a threat model and had a security review?
    - Yes
    - No
- No
Does the change require an update in our Aspire docs?
- Yes
  - Is this introducing a breaking change?
    - Yes
      - Link to aspire-docs issue (please use this breaking-change template):
    - No
      - Link to aspire-docs issue (please use this doc-idea template):
- No

…simplified logic

src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor

JamesNK · 2024-11-26T10:08:02Z

src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor

+                        Immediate="true"
+                        Label="@Loc[nameof(Dialogs.SettingsDialogLanguage)]"
+                        Items="@_languageOptions"
+                        OptionText="@(c => c.NativeName.Humanize())"


Do we know the default language for the browser? Having English (default) in the list seems like it would be useful.

We could determine this based on the Accept-Language header or whether UI culture differs from culture, but CultureInfo.CurrentUICulture would just be set to english so that option would be selected, and the user would visibly see that it's english so it would seem a little redundant to me. What do you think?

JamesNK · 2024-11-26T10:22:21Z

src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor.cs

+        NavigationManager.NavigateTo(
+            DashboardUrls.SetLanguageUrl(_selectedUiCulture.Name, uri),
+            forceLoad: true);


What is the reason to use a redirect to change the language? Was it related to setting the cookie? Or was it updating all of the text to a new language?

The problem with using a redirect is it's inconsistent with changing the theme. That happens without reloading the page, while language change reloads the page and loses state (e.g. the settings dialog itself immediately closes).

Did you consider setting the cookie in the browser with JS interop like changing the theme? That plus triggering a StateHasChanged on the overall page to rerender everything seems like it could work. Although I wouldn't be surprised if changing the culture in the middle of a HTTP request is problematic.

Setting the cookie isn't the problem, updating text is unfortunately the real issue.

Did you consider setting the cookie in the browser with JS interop like changing the theme? That plus triggering a StateHasChanged on the overall page to rerender everything seems like it could work. Although I wouldn't be surprised if changing the culture in the middle of a HTTP request is problematic.

I did, but this approach doesn't work. Even after CultureInfo.CurrentUICulture is updated and localizers start returning the strings for the right language, StateHasChanged just doesn't actually update the page text. I've read more into this the past day, and have not been able to get any of these workarounds to work, so I'd strongly prefer sticking with the current approach - it's the recommended approach.

Those workarounds are specific to Blazor WASM which we're not using.

Yes, those are the only workarounds I have found

I'll take a look and see whether I can find a way to make it work.

If a refresh is required then I think a confirmation should be displayed after changing the language, e.g.

The dashboard must be refreshed when the language is changed. Are you sure you want to change the language?

Yes, No

If a refresh is required then I think a confirmation should be displayed after changing the language, e.g.

I don’t think this would be very useful. The user is pretty clear in their intent, the dialog adds unnecessary friction. Reloading (or opening a new page to select language in) is a common pattern, including on Microsoft websites

But it’s inconsistent with the rest of the dashboard. Nothing else (adding filters, changing the theme, etc) triggers the dashboard to completely reload. Some page state could be lost.

There needs to be some notification that the page will reload. I think showing a yes/no dialog would be best, but a lower effort change could be to add some small text below the dropdown that changing the language will reload the dashboard.

…e settings

JamesNK · 2024-11-28T01:58:21Z

src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor

 @inject IStringLocalizer<Dialogs> Loc

 <FluentDialogBody>
-    <FluentStack Orientation="Orientation.Vertical" Style="display: flex; height: 100%" VerticalGap="0">
+    <FluentStack Orientation="Orientation.Vertical" Style="display: flex; height: 100%" VerticalGap="5">


Suggested change

<FluentStack Orientation="Orientation.Vertical" Style="display: flex; height: 100%" VerticalGap="5">

<FluentStack Orientation="Orientation.Vertical" Style="display: flex; height: 100%" VerticalGap="8">

JamesNK · 2024-11-28T01:59:00Z

src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor

 @inject IStringLocalizer<Dialogs> Loc

 <FluentDialogBody>
-    <FluentStack Orientation="Orientation.Vertical" Style="display: flex; height: 100%" VerticalGap="0">
+    <FluentStack Orientation="Orientation.Vertical" Style="display: flex; height: 100%" VerticalGap="5">
        <FluentRadioGroup TValue="string"


Place in <div>. Otherwise the label and content have gap inserted between them from stack

JamesNK · 2024-11-28T01:59:06Z

src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor

                          Orientation="Orientation.Vertical">
            <FluentRadio Value="@ThemeManager.ThemeSettingSystem">@Loc[nameof(Dialogs.SettingsDialogSystemTheme)]</FluentRadio>
            <FluentRadio Value="@ThemeManager.ThemeSettingLight">@Loc[nameof(Dialogs.SettingsDialogLightTheme)]</FluentRadio>
            <FluentRadio Value="@ThemeManager.ThemeSettingDark">@Loc[nameof(Dialogs.SettingsDialogDarkTheme)]</FluentRadio>
        </FluentRadioGroup>

+        <FluentSelect


Place in <div>. Otherwise the label and content have gap inserted between them from stack

JamesNK · 2024-11-28T02:08:00Z

src/Aspire.Dashboard/DashboardWebApplication.cs

+                httpContext.Response.Cookies.Append(
+                    CookieRequestCultureProvider.DefaultCookieName,
+                    // keep current culture for formatting, etc., but change ui (display) culture
+                    CookieRequestCultureProvider.MakeCookieValue(new RequestCulture(CultureInfo.CurrentCulture.Name, language)));


Right now this is a session cookie and is lost when the browser is complete closed. Add an expiry:

new CookieOptions { Expires = DateTimeOffset.UtcNow.AddYears(1) }

JamesNK · 2024-11-28T02:10:34Z

src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor.cs

+        var uri = new Uri(NavigationManager.Uri)
+            .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
+
+        NavigationManager.NavigateTo(
+            DashboardUrls.SetLanguageUrl(_selectedUiCulture.Name, uri),
+            forceLoad: true);


Add a comment here that a cookie must be set and the dashboard reloaded to use the new culture set by localization middle.

JamesNK · 2024-11-28T02:16:55Z

src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor.cs

+        if (!_languageOptions.Contains(CultureInfo.CurrentUICulture)
+                 && !StringComparers.Culture.Equals(CultureInfo.CurrentUICulture.TwoLetterISOLanguageName, "zh")
+                 && _languageOptions.FirstOrDefault(c => StringComparers.Culture.Equals(c.TwoLetterISOLanguageName, CultureInfo.CurrentUICulture.TwoLetterISOLanguageName)) is var matchedCulture)


This seems like it could be prone to mistakes. Tests are needed here. It could be moved to a class and have some unit tests that test different cultures.

I looked at what the middleware does and it uses Parent property on culture. What about using that to match?

https://github.com/dotnet/aspnetcore/blob/81a2bab8704d87d324039b42eb1bab0d977f25b8/src/Middleware/Localization/src/RequestLocalizationMiddleware.cs#L172

JamesNK · 2024-11-28T02:20:51Z

src/Aspire.Dashboard/DashboardWebApplication.cs

@@ -437,6 +438,19 @@ await Microsoft.AspNetCore.Authentication.AuthenticationHttpContextExtensions.Si
        {
            _app.MapPost("/authentication/logout", () => TypedResults.SignOut(authenticationSchemes: [CookieAuthenticationDefaults.AuthenticationScheme, OpenIdConnectDefaults.AuthenticationScheme]));
        }
+
+        _app.MapGet("/api/set-language", (string? language, string redirectUrl, HttpContext httpContext) =>


Return BadRequest result if language or redirectUrl are null or empty.

drewnoakes · 2024-11-28T02:34:07Z

My understanding is that CultureInfo.CurrentUICulture exists for the process. For server-side Blazor, does this mean that when one user sets a language, all users have that setting pushed on them?

That might not be such a problem in the local development case, but for hosted environments like ACA, it might be problematic. If an issue, can we fix it, or allow this feature to be suppressed in such cases?

JamesNK · 2024-11-28T02:45:12Z

CultureInfo.CurrentUICulture is thread local.

Adam Ratzman added 2 commits November 25, 2024 22:20

Allow setting language in dashboard settings

e5cf412

Determined Asp.Net is always falling back to a supported culture, so …

8b7b139

…simplified logic

adamint requested review from JamesNK and drewnoakes November 26, 2024 04:43

adamint changed the title ~~Dev/adamint/allow setting language in dashboard~~ Allow changing display language in dashboard settings Nov 26, 2024

JamesNK reviewed Nov 26, 2024

View reviewed changes

Adam Ratzman added 2 commits November 26, 2024 17:29

Change combobox to select

4064f7e

Update SettingChangedAsync->ThemeChangedAsync since there are multipl…

1391594

…e settings

adamint requested a review from JamesNK November 27, 2024 21:17

JamesNK reviewed Nov 28, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow changing display language in dashboard settings #6805

Allow changing display language in dashboard settings #6805

adamint commented Nov 26, 2024 •

edited

Loading

JamesNK Nov 26, 2024

adamint Nov 26, 2024 •

edited

Loading

JamesNK Nov 26, 2024 •

edited

Loading

adamint Nov 27, 2024 •

edited

Loading

JamesNK Nov 27, 2024

adamint Nov 27, 2024 •

edited

Loading

JamesNK Nov 27, 2024 •

edited

Loading

adamint Nov 27, 2024

JamesNK Nov 27, 2024 •

edited

Loading

JamesNK Nov 28, 2024

JamesNK Nov 28, 2024

JamesNK Nov 28, 2024

JamesNK Nov 28, 2024

JamesNK Nov 28, 2024

JamesNK Nov 28, 2024

JamesNK Nov 28, 2024

drewnoakes commented Nov 28, 2024

JamesNK commented Nov 28, 2024

	<FluentStack Orientation="Orientation.Vertical" Style="display: flex; height: 100%" VerticalGap="5">
	<FluentStack Orientation="Orientation.Vertical" Style="display: flex; height: 100%" VerticalGap="8">

Allow changing display language in dashboard settings #6805

Are you sure you want to change the base?

Allow changing display language in dashboard settings #6805

Conversation

adamint commented Nov 26, 2024 • edited Loading

Description

Checklist

Choose a reason for hiding this comment

adamint Nov 26, 2024 • edited Loading

Choose a reason for hiding this comment

JamesNK Nov 26, 2024 • edited Loading

Choose a reason for hiding this comment

adamint Nov 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamint Nov 27, 2024 • edited Loading

Choose a reason for hiding this comment

JamesNK Nov 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JamesNK Nov 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drewnoakes commented Nov 28, 2024

JamesNK commented Nov 28, 2024

adamint commented Nov 26, 2024 •

edited

Loading

adamint Nov 26, 2024 •

edited

Loading

JamesNK Nov 26, 2024 •

edited

Loading

adamint Nov 27, 2024 •

edited

Loading

adamint Nov 27, 2024 •

edited

Loading

JamesNK Nov 27, 2024 •

edited

Loading

JamesNK Nov 27, 2024 •

edited

Loading