user_profile: Update the profile tab after editing.

Use user events to update profile tab for a
synchronized experience across all users.

Fixes #26692.

Co-authored-by: Kunal Sharma <v.shm.kunal@gmail.com>.
Co-authored-by: Angelica <angelica.ferlin@gmail.com>.

web/src/user_events.js

@@ -24,6 +24,7 @@ import * as settings_streams from "./settings_streams";
 import * as settings_users from "./settings_users";
 import {current_user, realm} from "./state_data";
 import * as stream_events from "./stream_events";
+import * as user_profile from "./user_profile";
 
 export const update_person = function update(person) {
     const person_obj = people.maybe_get_user_by_id(person.user_id);
@@ -50,6 +51,7 @@ export const update_person = function update(person) {
     if (Object.hasOwn(person, "delivery_email")) {
         const delivery_email = person.delivery_email;
         person_obj.delivery_email = delivery_email;
+        user_profile.update_profile_modal_ui(person_obj, person);
         if (people.is_my_user_id(person.user_id)) {
             settings_account.update_email(delivery_email);
             current_user.delivery_email = delivery_email;
@@ -64,6 +66,7 @@ export const update_person = function update(person) {
         activity_ui.redraw();
         message_live_update.update_user_full_name(person.user_id, person.full_name);
         pm_list.update_private_messages();
+        user_profile.update_profile_modal_ui(person_obj, person);
         if (people.is_my_user_id(person.user_id)) {
             current_user.full_name = person.full_name;
             settings_account.update_full_name(person.full_name);
@@ -78,6 +81,7 @@ export const update_person = function update(person) {
         person_obj.is_guest = person.role === settings_config.user_role_values.guest.code;
         person_obj.is_moderator = person.role === settings_config.user_role_values.moderator.code;
         settings_users.update_user_data(person.user_id, person);
+        user_profile.update_profile_modal_ui(person_obj, person);
 
         if (people.is_my_user_id(person.user_id) && current_user.is_owner !== person_obj.is_owner) {
             current_user.is_owner = person_obj.is_owner;
@@ -125,10 +129,12 @@ export const update_person = function update(person) {
         }
 
         message_live_update.update_avatar(person_obj.user_id, person.avatar_url);
+        user_profile.update_profile_modal_ui(person_obj, person);
     }
 
     if (Object.hasOwn(person, "custom_profile_field")) {
         people.set_custom_profile_field_data(person.user_id, person.custom_profile_field);
+        user_profile.update_user_custom_profile_fields(person_obj);
         if (person.user_id === people.my_current_user_id()) {
             navbar_alerts.maybe_show_empty_required_profile_fields_alert();
 
@@ -164,6 +170,7 @@ export const update_person = function update(person) {
 
     if (Object.hasOwn(person, "bot_owner_id")) {
         person_obj.bot_owner_id = person.bot_owner_id;
+        user_profile.update_profile_modal_ui(person_obj, person);
     }
 
     if (Object.hasOwn(person, "is_active")) {

web/src/user_profile.js

@@ -8,6 +8,8 @@ import render_admin_human_form from "../templates/settings/admin_human_form.hbs"
 import render_edit_bot_form from "../templates/settings/edit_bot_form.hbs";
 import render_settings_edit_embedded_bot_service from "../templates/settings/edit_embedded_bot_service.hbs";
 import render_settings_edit_outgoing_webhook_service from "../templates/settings/edit_outgoing_webhook_service.hbs";
+import render_user_custom_profile_fields from "../templates/user_custom_profile_fields.hbs";
+import render_user_full_name from "../templates/user_full_name.hbs";
 import render_user_group_list_item from "../templates/user_group_list_item.hbs";
 import render_user_profile_modal from "../templates/user_profile_modal.hbs";
 import render_user_stream_list_item from "../templates/user_stream_list_item.hbs";
@@ -96,6 +98,37 @@ export function update_user_profile_streams_list_for_users(user_ids) {
     }
 }
 
+export function update_profile_modal_ui(user, new_data) {
+    if (!(modals.any_active() && modals.active_modal() === "#user-profile-modal")) {
+        return;
+    }
+    const current_user_id = Number.parseInt(original_values.user_id, 10);
+    if (current_user_id !== user.user_id) {
+        return;
+    }
+    if (new_data.bot_owner_id !== undefined) {
+        const $bot_owner_field = $(".bot_owner_user_field");
+        $bot_owner_field.attr("data-field-id", new_data.bot_owner_id);
+    }
+    if (new_data.avatar_url !== undefined) {
+        $("#avatar").css("background-image", `url(${people.medium_avatar_url_for_person(user)})`);
+    }
+    if (new_data.delivery_email !== undefined) {
+        $("#email").find(".value").text(new_data.delivery_email);
+    }
+    if (new_data.role !== undefined && !user.is_bot) {
+        const user_type = settings_config.user_role_map.get(new_data.role);
+        $("#user-type").find(".value").text(user_type);
+    }
+    if (new_data.full_name !== undefined || new_data.role !== undefined) {
+        const user_type = {
+            name: user.full_name,
+            should_add_guest_user_indicator: people.should_add_guest_user_indicator(user.user_id),
+        };
+        $("#name .user-profile-name").html(render_user_full_name(user_type));
+    }
+}
+
 function initialize_bot_owner(element_id, bot_id) {
     const user_pills = new Map();
     const bot = people.get_by_user_id(bot_id);
@@ -324,6 +357,30 @@ export function get_custom_profile_field_data(user, field, field_types) {
     return profile_field;
 }
 
+export function update_user_custom_profile_fields(user) {
+    if (!(modals.any_active() && modals.active_modal() === "#user-profile-modal")) {
+        return;
+    }
+    const current_user_id = Number.parseInt(original_values.user_id, 10);
+    if (current_user_id !== user.user_id) {
+        return;
+    }
+    const $custom_profile_field = $("#content");
+    const field_types = realm.custom_profile_field_types;
+
+    const profile_fields = realm.custom_profile_fields
+        .map((f) => get_custom_profile_field_data(user, f, field_types))
+        .filter((f) => f.name !== undefined);
+
+    const profile_data = {profile_fields};
+    $custom_profile_field.html(render_user_custom_profile_fields(profile_data));
+    custom_profile_fields_ui.initialize_custom_user_type_fields(
+        "#user-profile-modal #content",
+        user.user_id,
+        false,
+    );
+}
+
 export function hide_user_profile() {
     modals.close_if_open("user-profile-modal");
 }

web/tests/example4.test.js

@@ -59,6 +59,7 @@ const activity_ui = mock_esm("../src/activity_ui");
 const message_live_update = mock_esm("../src/message_live_update");
 const pm_list = mock_esm("../src/pm_list");
 const settings_users = mock_esm("../src/settings_users");
+const user_profile = mock_esm("../src/user_profile");
 
 // Use real versions of these modules.
 const people = zrequire("people");
@@ -137,6 +138,7 @@ run_test("update user with event", ({override}) => {
     override(pm_list, "update_private_messages", noop);
     override(settings_users, "update_user_data", noop);
     override(settings_users, "update_bot_data", noop);
+    override(user_profile, "update_profile_modal_ui", noop);
 
     // Dispatch the realm_user/update event, which will update
     // data structures and have other side effects that are

web/tests/user_events.test.js

@@ -20,6 +20,10 @@ const settings_users = mock_esm("../src/settings_users", {
     update_user_data() {},
     update_view_on_deactivate() {},
 });
+mock_esm("../src/user_profile", {
+    update_profile_modal_ui() {},
+    update_user_custom_profile_fields() {},
+});
 const stream_events = mock_esm("../src/stream_events");
 
 mock_esm("../src/activity_ui", {