Admin UI: Changing (logged-in) user system language has no (immediate) effect

[FlxRobole]

Q	A
Sulu Version	^2.5
PHP Version	8.2
DB Version	-
Browser Version	Latest Firefox & Vivaldi

Actual Behavior

After changing the field "System language" of the currently logged-in user in "Edit profile" form, the admin UI translation strings do not change until the page is manually reloaded. This affects the "Edit profile" (modal) form as well as the contact detail view of the logged-in user.

The missing immediate update of the UI language is not critical, but implies a lack of store <> UI synchronization and could confuse (especially non-technical) users.

Expected Behavior

Changes in the "Edit profile" (modal) form or contact detail view of the currently logged-in user should both, lead to an immediate update of the user-store AND the UI. For fields like "First name" or "Last name" this is already the case.

Steps to Reproduce

1. Log into your Sulu CMS backend
2. On the very bottom left-hand side, click on your user profile and hit "Edit profile" (OR navigate to "Contacts > People" and select the logged-in user)
3. Change the field "System language" and submit the form
4. Navigate through Sulu: The UI translation strings appear in the "old" language
5. Refresh the page: The UI translation string appear in the "new" language

Possible Solutions

Once we have agreed on a solution, I am willing to provide a PR that fixes this issue.

Solution 1

Translations are currently mainly managed in initializer.js and Translator.js. In initializer.js we would need to add an observer to the userStore.user.locale property that re-fetches the translation strings and re-initializes (/re-renders) the whole application tree. Assuming that this would be possible without larger code modifications, we may have to consider how to "bridge" the time between submitting the updated "Edit profile" form, fetching the new translations, and applying them to the UI. One way could be to artificially delay the loading-indicator in the submit button of "Edit profile" form until the fetch has been resolved. This, however, requires the loading property of the initializer class to be observable from the outside, which I have not checked. Another approach could be to update the initializeTranslations method in initializer class to return a Promise.

Solution 2

Extend the logic in user form submit method to simply run "location.reload()" once the locale property of the current user has changed. As the "Edit profile" form can be opened as a modal on top of an eventually unsaved form, we should allow the user to opt-out of the page reload by displaying the "Leave form?" modal dialogue.

[alexander-schranz]

Changing your own roles and / or your own languages requires currently a whole refresh so the config is reloaded.

I think currently there is no indicator if I'm changing my own system language or roles or the fields of another user. I'm currenlty not sure what would the best way for telling the frontend todo reload after a save / change of the own user, maybe over a special header which can be set in the controller response but not sure.

Maybe @chirimoya has an idea what would be best.