settings: Live update role text in "Profile" panel.

web/src/settings_account.ts

@@ -93,6 +93,15 @@ export function update_email_change_display(): void {
     }
 }
 
+export function update_role_text(): void {
+    if ($("#user_role_details").length === 0) {
+        return;
+    }
+
+    const role_text = people.get_user_type(current_user.user_id)!;
+    $("#user_role_details .user-details-desc").text(role_text);
+}
+
 function display_avatar_upload_complete(): void {
     $("#user-avatar-upload-widget .upload-spinner-background").css({visibility: "hidden"});
     $("#user-avatar-upload-widget .image-upload-text").show();

web/src/user_events.ts

@@ -115,6 +115,10 @@ export const update_person = function update(event: UserUpdate): void {
         settings_users.update_user_data(event.user_id, event);
         user_profile.update_profile_modal_ui(user, event);
 
+        if (people.is_my_user_id(event.user_id)) {
+            settings_account.update_role_text();
+        }
+
         if (people.is_my_user_id(event.user_id) && current_user.is_owner !== user.is_owner) {
             current_user.is_owner = user.is_owner;
             settings_org.maybe_disable_widgets();

web/templates/settings/profile_settings.hbs

@@ -60,7 +60,7 @@
                 </div>
             </div>
             <div class="user-details">
-                <div class="input-group">
+                <div id="user_role_details" class="input-group">
                     <span class="user-details-title">{{t "Role" }}:</span>
                     <span class="user-details-desc">{{user_role_text}}</span>
                 </div>

web/tests/user_events.test.cjs

@@ -14,6 +14,7 @@ const settings_account = mock_esm("../src/settings_account", {
     update_email() {},
     update_full_name() {},
     update_account_settings_display() {},
+    update_role_text() {},
 });
 const settings_users = mock_esm("../src/settings_users", {
     update_user_data() {},