user-groups: Live update membership status text.

This commit adds code to live update the membership status text
when a user is added or removed from a group that is subgroup
of the group opened in the right panel of groups UI.

web/src/user_group_edit.js

@@ -344,6 +344,38 @@ export function handle_subgroup_edit_event(group_id, direct_subgroup_ids) {
     }
 }
 
+function update_status_text_on_member_update(updated_group) {
+    const active_group_id = get_active_data().id;
+    if (active_group_id === undefined) {
+        return;
+    }
+
+    if (updated_group.id === active_group_id) {
+        update_membership_status_text(updated_group);
+        return;
+    }
+
+    // We might need to update the text if the updated groups is
+    // one of the subgroups of the group opened in right panel.
+    const current_user_id = people.my_current_user_id();
+    if (user_groups.is_direct_member_of(current_user_id, active_group_id)) {
+        // Since user is already a direct member of the group opened
+        // in right panel, the text shown will remain the same.
+        return;
+    }
+
+    const is_updated_group_subgroup = user_groups.is_subgroup_of_target_group(
+        active_group_id,
+        updated_group.id,
+    );
+    if (!is_updated_group_subgroup) {
+        return;
+    }
+
+    const active_group = user_groups.get_user_group_from_id(active_group_id);
+    update_membership_status_text(active_group);
+}
+
 function update_settings_for_group_overlay(group_id, user_ids) {
     const group = user_groups.get_user_group_from_id(group_id);
 
@@ -351,7 +383,6 @@ function update_settings_for_group_overlay(group_id, user_ids) {
     if (is_editing_group(group_id)) {
         if (user_ids.includes(people.my_current_user_id())) {
             update_group_management_ui();
-            update_membership_status_text(group);
         } else {
             user_group_edit_members.update_member_list_widget(group);
         }
@@ -360,6 +391,12 @@ function update_settings_for_group_overlay(group_id, user_ids) {
     if (user_ids.includes(people.my_current_user_id())) {
         update_your_groups_list_if_needed(group_id);
         update_display_checkmark_on_group_edit(group);
+
+        // Membership status text can be updated even when user was
+        // added to a group which is not opened in the right panel as
+        // membership can be impacted if the updated group is a
+        // subgroup of the group opened in right panel.
+        update_status_text_on_member_update(group);
     }
 }
 

web/src/user_groups.ts

@@ -317,6 +317,21 @@ export function get_recursive_subgroups(target_user_group: UserGroup): Set<numbe
     return subgroup_ids;
 }
 
+export function is_subgroup_of_target_group(target_group_id: number, subgroup_id: number): boolean {
+    const target_user_group = get_user_group_from_id(target_group_id);
+    const direct_subgroup_ids = new Set(target_user_group.direct_subgroup_ids);
+    if (direct_subgroup_ids.has(subgroup_id)) {
+        return true;
+    }
+
+    const recursive_subgroup_ids = get_recursive_subgroups(target_user_group);
+    if (recursive_subgroup_ids === undefined) {
+        return false;
+    }
+
+    return recursive_subgroup_ids.has(subgroup_id);
+}
+
 export function get_recursive_group_members(target_user_group: UserGroup): Set<number> {
     const members = new Set(target_user_group.members);
     const subgroup_ids = get_recursive_subgroups(target_user_group);

web/tests/user_groups.test.cjs

@@ -706,3 +706,47 @@ run_test("get_potential_subgroups", () => {
     assert.deepEqual(get_potential_subgroup_ids(students.id), [admins.id, teachers.id, science.id]);
     assert.deepEqual(get_potential_subgroup_ids(science.id), [students.id]);
 });
+
+run_test("is_subgroup_of_target_group", () => {
+    const admins = {
+        name: "Administrators",
+        id: 1,
+        members: new Set([1]),
+        is_system_group: false,
+        direct_subgroup_ids: new Set([]),
+    };
+    const moderators = {
+        name: "Moderators",
+        id: 2,
+        members: new Set([2]),
+        is_system_group: false,
+        direct_subgroup_ids: new Set([1]),
+    };
+    const all = {
+        name: "Everyone",
+        id: 3,
+        members: new Set([3, 4]),
+        is_system_group: false,
+        direct_subgroup_ids: new Set([2, 4]),
+    };
+    const students = {
+        name: "Students",
+        id: 4,
+        members: new Set([5]),
+        is_system_group: false,
+        direct_subgroup_ids: new Set([]),
+    };
+
+    user_groups.initialize({
+        realm_user_groups: [admins, moderators, all, students],
+    });
+
+    assert.ok(user_groups.is_subgroup_of_target_group(moderators.id, admins.id));
+    assert.ok(!user_groups.is_subgroup_of_target_group(admins.id, moderators.id));
+
+    assert.ok(user_groups.is_subgroup_of_target_group(all.id, admins.id));
+    assert.ok(user_groups.is_subgroup_of_target_group(all.id, moderators.id));
+    assert.ok(user_groups.is_subgroup_of_target_group(all.id, students.id));
+
+    assert.ok(!user_groups.is_subgroup_of_target_group(students.id, all.id));
+});