settings: Show assigned group permissions in permissions panel.

Fixes part of #28806.

web/src/group_permission_settings.ts

@@ -132,14 +132,14 @@ export function get_realm_user_groups_for_dropdown_list_widget(
 }
 
 export type AssignedGroupPermission = {
-    setting_name: RealmGroupSettingName | StreamGroupSettingName;
+    setting_name: RealmGroupSettingName | StreamGroupSettingName | GroupSettingName;
     can_edit: boolean;
     tooltip_message?: string;
 };
 
 export function get_assigned_permission_object(
     setting_value: GroupSettingValue,
-    setting_name: RealmGroupSettingName | StreamGroupSettingName,
+    setting_name: RealmGroupSettingName | StreamGroupSettingName | GroupSettingName,
     group_id: number,
     can_edit_settings: boolean,
 ): AssignedGroupPermission | undefined {

web/src/settings_components.ts

@@ -1834,3 +1834,42 @@ export function get_group_assigned_stream_permissions(group: UserGroup): {
 
     return group_assigned_stream_permissions;
 }
+
+export function get_group_assigned_user_group_permissions(group: UserGroup): {
+    group_id: number;
+    group_name: string;
+    assigned_permissions: AssignedGroupPermission[];
+    id_prefix: string;
+}[] {
+    const groups = user_groups.get_realm_user_groups();
+    const group_assigned_user_group_permissions = [];
+    for (const user_group of groups) {
+        const can_edit_settings = settings_data.can_manage_user_group(user_group.id);
+        const assigned_permission_objects = [];
+        for (const setting_name of settings_config.group_permission_settings) {
+            const setting_value =
+                user_group[user_groups.user_group_schema.keyof().parse(setting_name)];
+            const assigned_permission_object =
+                group_permission_settings.get_assigned_permission_object(
+                    group_setting_value_schema.parse(setting_value),
+                    setting_name,
+                    group.id,
+                    can_edit_settings,
+                );
+            if (assigned_permission_object !== undefined) {
+                assigned_permission_objects.push(assigned_permission_object);
+            }
+        }
+
+        if (assigned_permission_objects.length > 0) {
+            group_assigned_user_group_permissions.push({
+                group_id: user_group.id,
+                group_name: user_groups.get_display_group_name(user_group.name),
+                id_prefix: "id_group_permission_" + user_group.id.toString() + "_",
+                assigned_permissions: assigned_permission_objects,
+            });
+        }
+    }
+
+    return group_assigned_user_group_permissions;
+}

web/src/settings_config.ts

@@ -1,7 +1,11 @@
 import Handlebars from "handlebars/runtime.js";
 
 import {page_params} from "./base_page_params.ts";
-import type {RealmGroupSettingName, StreamGroupSettingName} from "./group_permission_settings.ts";
+import type {
+    GroupSettingName,
+    RealmGroupSettingName,
+    StreamGroupSettingName,
+} from "./group_permission_settings.ts";
 import {$t, $t_html} from "./i18n.ts";
 import type {RealmDefaultSettings} from "./realm_user_settings_defaults.ts";
 import {realm} from "./state_data.ts";
@@ -761,6 +765,17 @@ export const stream_group_permission_settings: StreamGroupSettingName[] = [
     "can_remove_subscribers_group",
 ];
 
+// Order of settings is important, as this list is used to
+// render assigned permissions in permissions panel.
+export const group_permission_settings: GroupSettingName[] = [
+    "can_manage_group",
+    "can_mention_group",
+    "can_add_members_group",
+    "can_remove_members_group",
+    "can_join_group",
+    "can_leave_group",
+];
+
 // NOTIFICATIONS
 
 export const general_notifications_table_labels = {

web/src/user_group_edit.ts

@@ -604,6 +604,28 @@ function populate_data_for_removing_stream_permissions(
     return data;
 }
 
+function populate_data_for_removing_user_group_permissions(
+    $subsection: JQuery,
+    group: UserGroup,
+    user_group: UserGroup,
+): Record<string, string> {
+    const changed_setting_elems = settings_components
+        .get_subsection_property_elements($subsection)
+        .filter((elem) => !$(elem).prop("checked"));
+    const changed_setting_names = changed_setting_elems.map((elem) => $(elem).attr("name")!);
+
+    const data: Record<string, string> = {};
+    for (const setting_name of changed_setting_names) {
+        const current_value = user_group[user_groups.user_group_schema.keyof().parse(setting_name)];
+        data[setting_name] = get_request_data_for_removing_group_permission(
+            group_setting_value_schema.parse(current_value),
+            group.id,
+        );
+    }
+
+    return data;
+}
+
 export function update_setting_in_group_permissions_panel(
     $setting_elem: JQuery,
     new_value: GroupSettingValue,
@@ -637,6 +659,8 @@ export function show_settings_for(group: UserGroup): void {
         settings_components.get_group_assigned_realm_permissions(group);
     const group_assigned_stream_permissions =
         settings_components.get_group_assigned_stream_permissions(group);
+    const group_assigned_user_group_permissions =
+        settings_components.get_group_assigned_user_group_permissions(group);
 
     const html = render_user_group_settings({
         group,
@@ -657,9 +681,11 @@ export function show_settings_for(group: UserGroup): void {
         group_setting_labels: settings_config.group_setting_labels,
         group_assigned_realm_permissions,
         group_assigned_stream_permissions,
+        group_assigned_user_group_permissions,
         group_has_no_permissions:
             group_assigned_realm_permissions.length === 0 &&
-            group_assigned_stream_permissions.length === 0,
+            group_assigned_stream_permissions.length === 0 &&
+            group_assigned_user_group_permissions.length === 0,
     });
 
     scroll_util.get_content_element($("#user_group_settings")).html(html);
@@ -739,6 +765,28 @@ export function show_settings_for(group: UserGroup): void {
                 settings_org.save_organization_settings(data, $save_button, url);
             },
         );
+
+    $edit_container
+        .find(".user-group-permissions")
+        .on(
+            "click",
+            ".subsection-header .subsection-changes-save button",
+            function (this: HTMLElement, e: JQuery.ClickEvent) {
+                e.preventDefault();
+                e.stopPropagation();
+                const $save_button = $(this);
+                const $subsection_elem = $save_button.closest(".settings-subsection-parent");
+                const group_id = Number.parseInt($subsection_elem.attr("data-group-id")!, 10);
+                const user_group = user_groups.get_user_group_from_id(group_id);
+                const data = populate_data_for_removing_user_group_permissions(
+                    $subsection_elem,
+                    group,
+                    user_group,
+                );
+                const url = "/json/user_groups/" + group_id;
+                settings_org.save_organization_settings(data, $save_button, url);
+            },
+        );
 }
 
 export function setup_group_settings(group: UserGroup): void {
@@ -1030,6 +1078,16 @@ export function update_group(event: UserGroupUpdateEvent, group: UserGroup): voi
             update_group_management_ui();
         }
     }
+
+    const changed_group_settings = group_permission_settings
+        .get_group_permission_settings()
+        .filter((setting_name) => event.data[setting_name] !== undefined);
+    for (const setting_name of changed_group_settings) {
+        const $elem = $(
+            `#id_group_permission_${CSS.escape(group.id.toString())}_${CSS.escape(setting_name)}`,
+        );
+        update_setting_in_group_permissions_panel($elem, group[setting_name]);
+    }
 }
 
 export function change_state(

web/templates/user_group_settings/group_permission_settings.hbs

@@ -51,4 +51,30 @@
             </div>
         {{/each}}
     </div>
+
+    <div class="user-group-permissions {{#unless group_assigned_user_group_permissions.length}}hide{{/unless}}">
+        <h3>{{t "User group permissions"}}</h3>
+
+        {{#each group_assigned_user_group_permissions}}
+            <div class="settings-subsection-parent {{#unless assigned_permissions.length}}hide{{/unless}}" data-group-id="{{group_id}}">
+                <div class="subsection-header">
+                    <h3>{{group_name}}</h3>
+                    {{> ../settings/settings_save_discard_widget show_only_indicator=false }}
+                </div>
+
+                <div class="subsection-settings">
+                    {{#each assigned_permissions}}
+                        {{> ../settings/settings_checkbox
+                          setting_name=setting_name
+                          prefix=../id_prefix
+                          is_checked=true
+                          label=(lookup ../../group_setting_labels.group setting_name)
+                          is_disabled=(not can_edit)
+                          tooltip_message=tooltip_message
+                          }}
+                    {{/each}}
+                </div>
+            </div>
+        {{/each}}
+    </div>
 </div>

web/tests/lib/events.cjs

@@ -885,6 +885,7 @@ exports.fixtures = {
         data: {
             name: "Frontend",
             description: "All Frontend people",
+            can_manage_group: 2,
         },
     },