user groups: Add support for add_member and remove member events.

static/js/server_events_dispatch.js

@@ -766,9 +766,11 @@ export function dispatch_normal_event(event) {
                     break;
                 case "add_members":
                     user_groups.add_members(event.group_id, event.user_ids);
+                    user_group_edit.handle_member_edit_event(event.group_id);
                     break;
                 case "remove_members":
                     user_groups.remove_members(event.group_id, event.user_ids);
+                    user_group_edit.handle_member_edit_event(event.group_id);
                     break;
                 case "add_subgroups":
                     user_groups.add_subgroups(event.group_id, event.direct_subgroup_ids);

static/js/user_group_edit.js

@@ -12,6 +12,7 @@ import * as confirm_dialog from "./confirm_dialog";
 import * as dialog_widget from "./dialog_widget";
 import * as hash_util from "./hash_util";
 import {$t, $t_html} from "./i18n";
+import * as overlays from "./overlays";
 import {page_params} from "./page_params";
 import * as people from "./people";
 import * as settings_data from "./settings_data";
@@ -83,6 +84,44 @@ function show_membership_settings(group) {
     });
 }
 
+function enable_group_edit_settings(group) {
+    if (!hash_util.is_editing_group(group.id)) {
+        return;
+    }
+    const $edit_container = get_edit_container(group);
+    $edit_container.find("#open_group_info_modal").show();
+    $edit_container.find(".member-list .actions").show();
+    user_group_ui_updates.update_add_members_elements(group);
+}
+
+function disable_group_edit_settings(group) {
+    if (!hash_util.is_editing_group(group.id)) {
+        return;
+    }
+    const $edit_container = get_edit_container(group);
+    $edit_container.find("#open_group_info_modal").hide();
+    $edit_container.find(".member-list .actions").hide();
+    user_group_ui_updates.update_add_members_elements(group);
+}
+
+export function handle_member_edit_event(group_id) {
+    if (!overlays.groups_open()) {
+        return;
+    }
+    const group = user_groups.get_user_group_from_id(group_id);
+
+    // update members list.
+    const members = Array.from(group.members);
+    user_group_edit_members.update_member_list_widget(group_id, members);
+
+    // update_settings buttons.
+    if (can_edit(group_id)) {
+        enable_group_edit_settings(group);
+    } else {
+        disable_group_edit_settings(group);
+    }
+}
+
 export function update_settings_pane(group) {
     const $edit_container = get_edit_container(group);
     $edit_container.find(".group-name").text(group.name);

static/js/user_group_edit_members.js

@@ -8,6 +8,7 @@ import * as add_subscribers_pill from "./add_subscribers_pill";
 import * as blueslip from "./blueslip";
 import * as channel from "./channel";
 import * as confirm_dialog from "./confirm_dialog";
+import * as hash_util from "./hash_util";
 import {$t, $t_html} from "./i18n";
 import * as ListWidget from "./list_widget";
 import {page_params} from "./page_params";
@@ -19,6 +20,7 @@ import * as user_groups from "./user_groups";
 
 export let pill_widget;
 let current_group_id;
+let member_list_widget;
 
 function get_potential_members() {
     const group = user_groups.get_user_group_from_id(current_group_id);
@@ -34,6 +36,15 @@ function get_potential_members() {
     return people.filter_all_users(is_potential_member);
 }
 
+export function update_member_list_widget(group_id, member_ids) {
+    if (!hash_util.is_editing_group(group_id)) {
+        return;
+    }
+    const users = people.get_users_from_ids(member_ids);
+    people.sort_but_pin_current_user_on_top(users);
+    member_list_widget.replace_list_data(users);
+}
+
 function format_member_list_elem(person) {
     return render_user_group_member_list_entry({
         name: person.full_name,
@@ -85,7 +96,7 @@ export function enable_member_management({group, $parent_container}) {
         get_potential_subscribers: get_potential_members,
     });
 
-    make_list_widget({
+    member_list_widget = make_list_widget({
         $parent_container,
         name: "user_group_members",
         user_ids: Array.from(group.members),

static/templates/user_group_settings/user_group_members.hbs

@@ -23,9 +23,7 @@
                     <th>{{t "Name" }}</th>
                     <th>{{t "Email" }}</th>
                     <th>{{t "User ID" }}</th>
-                    {{#if can_edit}}
-                    <th class="actions">{{t "Actions" }}</th>
-                    {{/if}}
+                    <th class="actions" {{#unless can_edit}}style="display:none"{{/unless}}>{{t "Actions" }}</th>
                 </thead>
                 <tbody class="member_table"></tbody>
             </table>