user groups: Set up right panel for user group edit.

This is preparatory commit that does basic UI set up for
user group edit in group settings overlay. This allows us to
write proper hashchange logic for user group settings overlay
under diffrent situations.
The work in this commit will be extended in further commits
to add proper UI and group edit logic.

static/js/hash_util.js

@@ -153,6 +153,11 @@ export function stream_edit_url(sub) {
     return hash;
 }
 
+export function group_edit_url(group) {
+    const hash = `#groups/${group.id}/${internal_url.encodeHashComponent(group.name)}`;
+    return hash;
+}
+
 export function search_public_streams_notice_url(operators) {
     const public_operator = {operator: "streams", operand: "public"};
     return operators_to_hash([public_operator].concat(operators));

static/js/ui_init.js

@@ -98,6 +98,7 @@ import * as typing from "./typing";
 import * as ui from "./ui";
 import * as unread from "./unread";
 import * as unread_ui from "./unread_ui";
+import * as user_group_edit from "./user_group_edit";
 import * as user_groups from "./user_groups";
 import * as user_group_settings_ui from "./user_groups_settings_ui";
 import {initialize_user_settings, user_settings} from "./user_settings";
@@ -618,6 +619,7 @@ export function initialize_everything() {
     initialize_kitchen_sink_stuff();
     echo.initialize();
     stream_edit.initialize();
+    user_group_edit.initialize();
     stream_edit_subscribers.initialize();
     stream_data.initialize(stream_data_params);
     pm_conversations.recent.initialize(pm_conversations_params);

static/js/user_group_edit.js

@@ -0,0 +1,115 @@
+import $ from "jquery";
+
+import render_user_group_settings from "../templates/user_group_settings/user_group_settings.hbs";
+
+import * as blueslip from "./blueslip";
+import * as browser_history from "./browser_history";
+import * as components from "./components";
+import * as hash_util from "./hash_util";
+import {$t} from "./i18n";
+import {page_params} from "./page_params";
+import * as people from "./people";
+import * as settings_data from "./settings_data";
+import * as ui from "./ui";
+import * as user_group_ui_updates from "./user_group_ui_updates";
+import * as user_groups from "./user_groups";
+import * as user_group_settings_ui from "./user_groups_settings_ui";
+
+export let toggler;
+export let select_tab = "group_general_settings";
+
+function setup_group_edit_hash(group) {
+    const hash = hash_util.group_edit_url(group);
+    browser_history.update(hash);
+}
+
+function get_user_group_id(target) {
+    const $row = $(target).closest(".group-row");
+    return Number.parseInt($row.attr("data-group-id"), 10);
+}
+
+function get_user_group_for_target(target) {
+    const user_group_id = get_user_group_id(target);
+    if (!user_group_id) {
+        blueslip.error("Cannot find user group id for target");
+        return undefined;
+    }
+
+    const group = user_groups.get_user_group_from_id(user_group_id);
+    if (!group) {
+        blueslip.error("get_user_group_for_target() failed id lookup: " + user_group_id);
+        return undefined;
+    }
+    return group;
+}
+
+export function can_edit(group_id) {
+    if (!settings_data.user_can_edit_user_groups()) {
+        return false;
+    }
+
+    // Admins and moderators are allowed to edit user groups even if they
+    // are not a member of that user group. Members can edit user groups
+    // only if they belong to that group.
+    if (page_params.is_admin || page_params.is_moderator) {
+        return true;
+    }
+
+    return user_groups.is_direct_member_of(people.my_current_user_id(), group_id);
+}
+
+export function get_edit_container(group) {
+    return $(`#groups_overlay .user_group_settings[data-group-id='${CSS.escape(group.id)}']`);
+}
+
+export function show_settings_for(node) {
+    const group = get_user_group_for_target(node);
+    const html = render_user_group_settings({
+        group,
+        can_edit: can_edit(group.id),
+    });
+
+    ui.get_content_element($("#user_group_settings")).html(html);
+    user_group_ui_updates.update_toggler_for_group_setting(group);
+
+    $("#user_group_settings .tab-container").prepend(toggler.get());
+    const $edit_container = get_edit_container(group);
+    $(".nothing-selected").hide();
+
+    $edit_container.addClass("show");
+}
+
+export function setup_group_settings(node) {
+    toggler = components.toggle({
+        child_wants_focus: true,
+        values: [
+            {label: $t({defaultMessage: "General"}), key: "group_general_settings"},
+            {label: $t({defaultMessage: "Members"}), key: "group_member_settings"},
+        ],
+        callback(name, key) {
+            $(".group_setting_section").hide();
+            $("." + key).show();
+            select_tab = key;
+        },
+    });
+
+    show_settings_for(node);
+}
+
+export function open_group_edit_panel_for_row(group_row) {
+    const group = get_user_group_for_target(group_row);
+
+    $(".group-row.active").removeClass("active");
+    user_group_settings_ui.show_user_group_settings_pane.settings(group);
+    $(group_row).addClass("active");
+    setup_group_edit_hash(group);
+    setup_group_settings(group_row);
+}
+
+export function initialize() {
+    $("#manage_groups_container").on("click", ".group-row", function (e) {
+        if ($(e.target).closest(".check, .user_group_settings_wrapper").length === 0) {
+            open_group_edit_panel_for_row(this);
+        }
+    });
+}

static/js/user_group_ui_updates.js

@@ -0,0 +1,7 @@
+import * as user_group_edit from "./user_group_edit";
+
+// This module will handle ui updates logic for group settings,
+// and is analogous to stream_ui_updates.js for stream settings.
+export function update_toggler_for_group_setting() {
+    user_group_edit.toggler.goto(user_group_edit.select_tab);
+}

static/js/user_groups_settings_ui.js

@@ -35,6 +35,11 @@ export const show_user_group_settings_pane = {
             $t({defaultMessage: "User group settings"}),
         );
     },
+    settings(group) {
+        $(".settings, #user-group-creation").hide();
+        $("#groups_overlay .settings").show();
+        $("#groups_overlay .user-group-info-title").text(group.name);
+    },
     create_user_group() {
         $(".nothing-selected, .settings, #user-group-creation").hide();
         $("#user-group-creation").show();

static/styles/dark_theme.css

@@ -573,6 +573,7 @@ body.dark-theme {
         border-top: none;
     }
 
+    .group-row.active,
     .stream-row.active,
     .emoji-info-popover .emoji-showcase-container,
     .emoji-info-popover .emoji-popover .emoji-popover-category-tabs,

static/templates/user_group_settings/user_group_settings.hbs

@@ -0,0 +1,15 @@
+<div class="group_settings_header" data-group-id="{{group.id}}">
+    <div class="tab-container"></div>
+</div>
+<div class="user_group_settings_wrapper" data-group-id="{{group.id}}">
+    <div class="inner-box">
+
+        <div class="group_general_settings group_setting_section">
+            General group settings.
+        </div>
+
+        <div class="group_member_settings group_setting_section">
+            Group member settings.
+        </div>
+    </div>
+</div>

tools/test-js-with-node

@@ -203,6 +203,8 @@ EXEMPT_FILES = make_set(
         "static/js/user_group_create.js",
         "static/js/user_group_create_members.js",
         "static/js/user_group_create_members_data.js",
+        "static/js/user_group_edit.js",
+        "static/js/user_group_ui_updates.js",
         "static/js/user_groups_settings_ui.js",
         "static/js/user_profile.js",
         "static/js/user_settings.ts",