user groups: Add tabs for your/all groups in #groups overlay.

We add tabs to make distinction between the groups the user
is a member of and all groups in the realm. This is a preliminary
commit and there would be following immediate follow-ups to this:
* Persisting the active state of selected group in the left panel
  as the list updates with search and thorugh tab toggles.
* Updating the display of group in the left panel list on membership
  update events.

web/src/user_group_edit.js

@@ -163,10 +163,32 @@ export function setup_group_settings(node) {
     show_settings_for(node);
 }
 
+export function setup_group_list_tab_hash(tab_key_value) {
+    /*
+        We do not update the hash based on tab switches if
+        a group is currently being edited.
+    */
+    if (user_group_settings_ui.get_active_data().id !== undefined) {
+        return;
+    }
+
+    if (tab_key_value === "all-groups") {
+        browser_history.update("#groups/all");
+    } else if (tab_key_value === "your-groups") {
+        browser_history.update("#groups/your");
+    } else {
+        blueslip.debug(`Unknown tab_key_value: ${tab_key_value} for groups overlay.`);
+    }
+}
+
 function open_right_panel_empty() {
     $(".group-row.active").removeClass("active");
     user_group_settings_ui.show_user_group_settings_pane.nothing_selected();
-    browser_history.update("#groups");
+    const tab_key = $(".user-groups-container")
+        .find("div.ind-tab.selected")
+        .first()
+        .attr("data-tab-key");
+    setup_group_list_tab_hash(tab_key);
 }
 
 export function handle_deleted_group(group_id) {

web/src/user_groups_settings_ui.js

@@ -6,6 +6,7 @@ import render_user_group_settings_overlay from "../templates/user_group_settings
 
 import * as blueslip from "./blueslip";
 import * as browser_history from "./browser_history";
+import * as components from "./components";
 import {$t} from "./i18n";
 import * as ListWidget from "./list_widget";
 import * as overlays from "./overlays";
@@ -17,6 +18,7 @@ import * as user_group_edit from "./user_group_edit";
 import * as user_groups from "./user_groups";
 
 let group_list_widget;
+let group_list_toggler;
 
 // Ideally this should be included in page params.
 // Like we have page_params.max_stream_name_length` and
@@ -158,28 +160,77 @@ export function update_group(group_id) {
 }
 
 export function change_state(section) {
-    if (!section) {
-        show_user_group_settings_pane.nothing_selected();
-        return;
-    }
     if (section === "new") {
         do_open_create_user_group();
         return;
     }
 
+    if (section === "all") {
+        group_list_toggler.goto("all-groups");
+        return;
+    }
+
+    if (section === "your") {
+        group_list_toggler.goto("your-groups");
+        return;
+    }
+
     // if the section is a valid number.
     if (/\d+/.test(section)) {
         const group_id = Number.parseInt(section, 10);
+        const group = user_groups.get_user_group_from_id(group_id);
+        if (!group) {
+            // Some users can type random url of the form
+            // /#groups/<random-group-id> we need to handle that.
+            group_list_toggler.goto("your-groups");
+        } else {
             show_right_section();
             switch_to_group_row(group_id);
+        }
         return;
     }
 
-    blueslip.warn("invalid section for groups: " + section);
-    show_user_group_settings_pane.nothing_selected();
+    blueslip.info("invalid section for groups: " + section);
+    group_list_toggler.goto("your-groups");
+}
+
+function redraw_left_panel(tab_name) {
+    if (tab_name === "all-groups") {
+        group_list_widget.replace_list_data(user_groups.get_realm_user_groups());
+    } else if (tab_name === "your-groups") {
+        group_list_widget.replace_list_data(
+            user_groups.get_user_groups_of_user(people.my_current_user_id()),
+        );
+    }
+    // TODO: If possible persist selection of active group in the left panel.
+}
+
+export function switch_group_tab(tab_name) {
+    /*
+        This switches the groups list tab, but it doesn't update
+        the group_list_toggler widget.  You may instead want to
+        use `group_list_toggler.goto`.
+    */
+    redraw_left_panel(tab_name);
+    user_group_edit.setup_group_list_tab_hash(tab_name);
 }
 
 export function setup_page(callback) {
+    function initialize_components() {
+        group_list_toggler = components.toggle({
+            child_wants_focus: true,
+            values: [
+                {label: $t({defaultMessage: "Your groups"}), key: "your-groups"},
+                {label: $t({defaultMessage: "All groups"}), key: "all-groups"},
+            ],
+            callback(_label, key) {
+                switch_group_tab(key);
+            },
+        });
+
+        $("#groups_overlay_container .search-container").prepend(group_list_toggler.get());
+    }
+
     function populate_and_fill() {
         const template_data = {
             can_create_or_edit_user_groups: settings_data.user_can_edit_user_groups(),
@@ -221,6 +272,8 @@ export function setup_page(callback) {
             $simplebar_container: $container,
         });
 
+        initialize_components();
+
         set_up_click_handlers();
         user_group_create.set_up_handlers();
 

web/styles/dark_theme.css

@@ -894,6 +894,7 @@
     .stream-row,
     .group-row,
     .subscriptions-container .left .search-container,
+    .user-groups-container .left .search-container,
     .subscriptions-container .left,
     .user-groups-container .left,
     .subscriber-list-box,

web/styles/subscriptions.css

@@ -96,12 +96,6 @@
     }
 }
 
-.create_user_group_button {
-    position: relative;
-    top: 7px;
-    margin: 0 7px 0 0;
-}
-
 #create_user_group_description,
 #create_stream_description {
     width: calc(100% - 15px);
@@ -485,15 +479,6 @@ h4.user_group_setting_subsection_title {
     width: 100%;
 }
 
-.user-groups-list {
-    /*
-        This height rule is temporary for this preparatory commit and
-        will be removed as we add other components widgets in groups list
-        and its styling similar to streams list.
-    */
-    height: calc(100% - 42px) !important;
-}
-
 #clear_search_stream_name,
 #clear_search_group_name {
     right: 5px !important;

web/templates/user_group_settings/user_group_settings_overlay.hbs

@@ -9,12 +9,7 @@
                 </div>
             </div>
             <div class="left">
-                <div class="input-append group_name_search_section" id="group_filter">
-                    <input type="text" name="group_name" id="search_group_name" class="filter_text_input" autocomplete="off"
-                      placeholder="{{t 'Filter groups' }}" value=""/>
-                    <button type="button" class="btn clear_search_button" id="clear_search_group_name">
-                        <i class="fa fa-remove" aria-hidden="true"></i>
-                    </button>
+                <div class="search-container">
                     <div id="add_new_user_group">
                         <button class="create_user_group_button create_user_group_plus_button">
                             <span>+</span>
@@ -22,6 +17,13 @@
                         <div class="float-clear"></div>
                     </div>
                 </div>
+                <div class="input-append group_name_search_section" id="group_filter">
+                    <input type="text" name="group_name" id="search_group_name" class="filter_text_input" autocomplete="off"
+                      placeholder="{{t 'Filter groups' }}" value=""/>
+                    <button type="button" class="btn clear_search_button" id="clear_search_group_name">
+                        <i class="fa fa-remove" aria-hidden="true"></i>
+                    </button>
+                </div>
                 <div class="user-groups-list" data-simplebar>
                 </div>
             </div>