From c147aafbe384d86f0971f1fc770092277af9470d Mon Sep 17 00:00:00 2001
From: m-e-l-u-h-a-n <purushottam.tiwari.cd.cse19@itbhu.ac.in>
Date: Mon, 20 Mar 2023 18:54:43 +0530
Subject: [PATCH] user groups: Preserve active group state during left panel
 updates.

The active group information that was provided by
`user_groups_settings_ui.get_active_data` became
inconsistent as the group list ui on left panel
updated due to tab toggle between Your/All groups
or due to search inputs.
To address this we maintain a module level variable
`active_group_id` that is updated during switches
in the right pane so that information about the
active_group_id is maintained and updated correctly.
---
 web/src/user_groups_settings_ui.js | 33 +++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/web/src/user_groups_settings_ui.js b/web/src/user_groups_settings_ui.js
index 54c49dbfd1..db6e287192 100644
--- a/web/src/user_groups_settings_ui.js
+++ b/web/src/user_groups_settings_ui.js
@@ -19,6 +19,15 @@ import * as user_groups from "./user_groups";
 
 let group_list_widget;
 let group_list_toggler;
+let active_group_id;
+
+export function set_active_group_id(group_id) {
+    active_group_id = group_id;
+}
+
+export function reset_active_group_id() {
+    active_group_id = undefined;
+}
 
 // Ideally this should be included in page params.
 // Like we have page_params.max_stream_name_length` and
@@ -42,6 +51,7 @@ export function set_up_click_handlers() {
 export const show_user_group_settings_pane = {
     nothing_selected() {
         $(".settings, #user-group-creation").hide();
+        reset_active_group_id();
         $(".nothing-selected").show();
         $("#groups_overlay .user-group-info-title").text(
             $t({defaultMessage: "User group settings"}),
@@ -50,10 +60,12 @@ export const show_user_group_settings_pane = {
     settings(group) {
         $(".settings, #user-group-creation").hide();
         $("#groups_overlay .settings").show();
+        set_active_group_id(group.id);
         $("#groups_overlay .user-group-info-title").text(group.name);
     },
     create_user_group() {
         $(".nothing-selected, .settings, #user-group-creation").hide();
+        reset_active_group_id();
         $("#user-group-creation").show();
         $("#groups_overlay .user-group-info-title").text($t({defaultMessage: "Create user group"}));
     },
@@ -77,12 +89,10 @@ export function is_group_already_present(group) {
 }
 
 export function get_active_data() {
-    const $active_row = $("div.group-row.active");
-    const valid_active_id = Number.parseInt($active_row.attr("data-group-id"), 10);
     const $active_tabs = $(".user-groups-container").find("div.ind-tab.selected");
     return {
-        $row: $active_row,
-        id: valid_active_id,
+        $row: row_for_group_id(active_group_id),
+        id: active_group_id,
         $tabs: $active_tabs,
     };
 }
@@ -96,12 +106,7 @@ export function switch_to_group_row(group_id) {
 
     scroll_util.scroll_element_into_container($group_row, $container);
 
-    // It's dubious that this timeout is needed.
-    setTimeout(() => {
-        if (group_id === get_active_data().id) {
-            $group_row.trigger("click");
-        }
-    }, 100);
+    $group_row.trigger("click");
 }
 
 function show_right_section() {
@@ -267,6 +272,14 @@ export function setup_page(callback) {
                             item.description.toLocaleLowerCase().includes(value))
                     );
                 },
+                onupdate() {
+                    if (active_group_id !== undefined) {
+                        const active_group = user_groups.get_user_group_from_id(active_group_id);
+                        if (is_group_already_present(active_group)) {
+                            row_for_group_id(active_group_id).addClass("active");
+                        }
+                    }
+                },
             },
             init_sort: ["alphabetic", "name"],
             $simplebar_container: $container,