user_groups: Fix live updating user groups UI.

This commit updates code to live update the groups UI if
realm or group level setting to manage groups is changed.

This commit also does some refactoring to better organize the
code in different functions.

And also, the code to hide/disable the UI if the user does not
have permission to manage the group in JS such that the same code
is used for live-updating as well.

web/src/server_events_dispatch.js

@@ -201,7 +201,7 @@ export function dispatch_normal_event(event) {
                 allow_edit_history: noop,
                 allow_message_editing: noop,
                 edit_topic_policy: noop,
-                user_group_edit_policy: noop,
+                user_group_edit_policy: user_group_edit.update_group_management_ui,
                 avatar_changes_disabled: settings_account.update_avatar_change_display,
                 bot_creation_policy: settings_bots.update_bot_permissions_ui,
                 can_delete_any_message_group: noop,
@@ -930,7 +930,7 @@ export function dispatch_normal_event(event) {
                     break;
                 case "update":
                     user_groups.update(event);
-                    user_group_edit.update_group(event.group_id);
+                    user_group_edit.update_group(event);
                     break;
                 default:
                     blueslip.error("Unexpected event type user_group/" + event.op);

web/src/user_group_edit.js

@@ -102,7 +102,7 @@ function update_add_members_elements(group) {
     }
 }
 
-function update_general_settings_elements(group) {
+function update_group_permission_settings_elements(group) {
     if (!is_editing_group(group.id)) {
         return;
     }
@@ -137,43 +137,66 @@ function update_general_settings_elements(group) {
 
 function show_membership_settings(group) {
     const $edit_container = get_edit_container(group);
-    update_add_members_elements(group);
 
     const $member_container = $edit_container.find(".edit_members_for_user_group");
     user_group_edit_members.enable_member_management({
         group,
         $parent_container: $member_container,
     });
+
+    update_members_panel_ui(group);
 }
 
 function show_general_settings(group) {
     user_group_components.setup_permissions_dropdown("can_manage_group", group, false);
     user_group_components.setup_permissions_dropdown("can_mention_group", group, false);
-    update_general_settings_elements(group);
+    update_general_panel_ui(group);
 
     if (!page_params.development_environment) {
         $("#can_manage_group_widget_container").hide();
     }
 }
 
-function enable_group_edit_settings(group) {
-    if (!is_editing_group(group.id)) {
-        return;
-    }
+function update_general_panel_ui(group) {
     const $edit_container = get_edit_container(group);
+
+    if (settings_data.can_edit_user_group(group.id)) {
         $edit_container.find(".group-header .button-group").show();
-    $edit_container.find(".member-list .actions").show();
+        $(`.group_settings_header[data-group-id='${CSS.escape(group.id)}'] .deactivate`).show();
+    } else {
+        $edit_container.find(".group-header .button-group").hide();
+        $(`.group_settings_header[data-group-id='${CSS.escape(group.id)}'] .deactivate`).hide();
+    }
+    update_group_permission_settings_elements(group);
+    update_group_membership_button(group.id);
+}
+
+function update_members_panel_ui(group) {
+    const $edit_container = get_edit_container(group);
+    const $member_container = $edit_container.find(".edit_members_for_user_group");
+
+    user_group_edit_members.rerender_members_list({
+        group,
+        $parent_container: $member_container,
+    });
     update_add_members_elements(group);
 }
 
-function disable_group_edit_settings(group) {
-    if (!is_editing_group(group.id)) {
+export function update_group_management_ui() {
+    if (!overlays.groups_open()) {
         return;
     }
-    const $edit_container = get_edit_container(group);
-    $edit_container.find(".group-header .button-group").hide();
-    $edit_container.find(".member-list .user-remove-actions").hide();
-    update_add_members_elements(group);
+
+    const active_group_id = get_active_data().id;
+
+    if (active_group_id === undefined) {
+        return;
+    }
+
+    const group = user_groups.get_user_group_from_id(active_group_id);
+
+    update_general_panel_ui(group);
+    update_members_panel_ui(group);
 }
 
 function group_membership_button(group_id) {
@@ -211,6 +234,10 @@ function update_group_membership_button(group_id) {
     if (settings_data.can_edit_user_group(group_id)) {
         $group_settings_button.prop("disabled", false);
         $group_settings_button.css("pointer-events", "");
+        const $group_settings_button_wrapper = $group_settings_button.closest(
+            ".join_leave_button_wrapper",
+        );
+        $group_settings_button_wrapper[0]._tippy?.destroy();
     } else {
         $group_settings_button.prop("disabled", true);
         initialize_tooltip_for_membership_button(group_id);
@@ -225,9 +252,10 @@ export function handle_member_edit_event(group_id, user_ids) {
 
     // update members list if currently rendered.
     if (is_editing_group(group_id)) {
-        user_group_edit_members.update_member_list_widget(group);
         if (user_ids.includes(people.my_current_user_id())) {
-            update_group_membership_button(group_id);
+            update_group_management_ui();
+        } else {
+            user_group_edit_members.update_member_list_widget(group);
         }
     }
 
@@ -280,13 +308,6 @@ export function handle_member_edit_event(group_id, user_ids) {
         const $group_row = row_for_group_id(group.id);
         open_group_edit_panel_for_row($group_row);
     }
-
-    // update_settings buttons.
-    if (settings_data.can_edit_user_group(group_id)) {
-        enable_group_edit_settings(group);
-    } else {
-        disable_group_edit_settings(group);
-    }
 }
 
 export function update_settings_pane(group) {
@@ -312,17 +333,12 @@ function update_toggler_for_group_setting() {
 export function show_settings_for(group) {
     const html = render_user_group_settings({
         group,
-        can_edit: settings_data.can_edit_user_group(group.id),
         is_member: user_groups.is_direct_member_of(people.my_current_user_id(), group.id),
     });
 
     scroll_util.get_content_element($("#user_group_settings")).html(html);
     update_toggler_for_group_setting();
 
-    if (!settings_data.can_edit_user_group(group.id)) {
-        initialize_tooltip_for_membership_button(group.id);
-    }
-
     toggler.get().prependTo("#user_group_settings .tab-container");
     const $edit_container = get_edit_container(group);
     $(".nothing-selected").hide();
@@ -551,22 +567,35 @@ export function add_group_to_table(group) {
     }
 }
 
-export function update_group(group_id) {
+export function update_group(event) {
     if (!overlays.groups_open()) {
         return;
     }
+
+    const group_id = event.group_id;
     const group = user_groups.get_user_group_from_id(group_id);
-    const $group_row = row_for_group_id(group_id);
+
     // update left side pane
+    const $group_row = row_for_group_id(group_id);
+    if (event.data.name !== undefined) {
         $group_row.find(".group-name").text(group.name);
+    }
+
+    if (event.data.description !== undefined) {
         $group_row.find(".description").text(group.description);
+    }
 
     if (get_active_data().id === group.id) {
         // update right side pane
         update_settings_pane(group);
+        if (event.data.name !== undefined) {
             // update settings title
             $("#groups_overlay .user-group-info-title").text(group.name);
         }
+        if (event.data.can_manage_group !== undefined) {
+            update_group_management_ui();
+        }
+    }
 }
 
 export function change_state(section, left_side_tab, right_side_tab) {

web/src/user_group_edit_members.ts

@@ -4,6 +4,7 @@ import {z} from "zod";
 
 import render_leave_user_group_modal from "../templates/confirm_dialog/confirm_unsubscribe_private_stream.hbs";
 import render_user_group_member_list_entry from "../templates/stream_settings/stream_member_list_entry.hbs";
+import render_user_group_members_table from "../templates/user_group_settings/user_group_members_table.hbs";
 import render_user_group_membership_request_result from "../templates/user_group_settings/user_group_membership_request_result.hbs";
 
 import * as add_subscribers_pill from "./add_subscribers_pill";
@@ -137,6 +138,25 @@ export function enable_member_management({
     });
 }
 
+export function rerender_members_list({
+    group,
+    $parent_container,
+}: {
+    group: UserGroup;
+    $parent_container: JQuery;
+}): void {
+    $parent_container.find(".member-list-box").html(
+        render_user_group_members_table({
+            can_edit: settings_data.can_edit_user_group(group.id),
+        }),
+    );
+    member_list_widget = make_list_widget({
+        $parent_container,
+        name: "user_group_members",
+        users: get_user_group_members(group),
+    });
+}
+
 function show_user_group_membership_request_result({
     message,
     add_class,

web/templates/user_group_settings/user_group_members.hbs

@@ -16,16 +16,6 @@
         </span>
     </div>
     <div class="member-list-box">
-        <div class="member_list_container" data-simplebar data-simplebar-tab-index="-1">
-            <div class="member_list_loading_indicator"></div>
-            <table class="member-list table table-striped">
-                <thead class="table-sticky-headers">
-                    <th data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}</th>
-                    <th class="settings-email-column" data-sort="email">{{t "Email" }}</th>
-                    <th class="user-remove-actions" {{#unless can_edit}}style="display:none"{{/unless}}>{{t "Actions" }}</th>
-                </thead>
-                <tbody class="member_table" data-empty="{{t 'This group has no members.' }}" data-search-results-empty="{{t 'No group members match your current filter.'}}"></tbody>
-            </table>
-        </div>
+        {{> user_group_members_table}}
     </div>
 </div>

web/templates/user_group_settings/user_group_members_table.hbs

@@ -0,0 +1,11 @@
+<div class="member_list_container" data-simplebar data-simplebar-tab-index="-1">
+    <div class="member_list_loading_indicator"></div>
+    <table class="member-list table table-striped">
+        <thead class="table-sticky-headers">
+            <th data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}</th>
+            <th class="settings-email-column" data-sort="email">{{t "Email" }}</th>
+            <th class="user-remove-actions" {{#unless can_edit}}style="display:none"{{/unless}}>{{t "Actions" }}</th>
+        </thead>
+        <tbody class="member_table" data-empty="{{t 'This group has no members.' }}" data-search-results-empty="{{t 'No group members match your current filter.'}}"></tbody>
+    </table>
+</div>

web/templates/user_group_settings/user_group_settings.hbs

@@ -1,8 +1,8 @@
 <div class="group_settings_header" data-group-id="{{group.id}}">
     <div class="tab-container"></div>
     <div class="button-group">
-        <div class="join_leave_button_wrapper inline-block {{#unless can_edit}}tippy-zulip-tooltip{{/unless}}">
-            <button class="button small rounded join_leave_button" type="button" name="button" {{#unless can_edit}}disabled="disabled"{{/unless}}>
+        <div class="join_leave_button_wrapper inline-block">
+            <button class="button small rounded join_leave_button" type="button" name="button">
                 {{#if is_member}}
                     {{t "Leave group" }}
                 {{else}}
@@ -10,9 +10,7 @@
                 {{/if}}
             </button>
         </div>
-        {{#if can_edit}}
         <button class="button small rounded btn-danger deactivate tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Delete group'}}" type="button" name="delete_button"> <i class="fa fa-trash-o" aria-hidden="true"></i></button>
-        {{/if}}
     </div>
 </div>
 <div class="user_group_settings_wrapper" data-group-id="{{group.id}}">
@@ -24,7 +22,7 @@
                     <span class="group-name" title="{{group.name}}">{{group.name}}</span>
                 </div>
                 <div class="group_change_property_info alert-notification"></div>
-                <div class="button-group" {{#unless can_edit}}style="display:none"{{/unless}}>
+                <div class="button-group">
                     <button id="open_group_info_modal" class="button rounded small btn-warning tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Change group info' }}">
                         <i class="fa fa-pencil" aria-hidden="true"></i>
                     </button>

web/tests/dispatch.test.js

@@ -298,8 +298,8 @@ run_test("user groups", ({override}) => {
         assert_same(args.event.data.name, event.data.name);
         assert_same(args.event.data.description, event.data.description);
 
-        args = user_group_settings_ui_stub.get_args("group_id");
-        assert_same(args.group_id, event.group_id);
+        args = user_group_settings_ui_stub.get_args("event");
+        assert_same(args.event, event);
     }
 });