user_groups: Allow setting and changing can_manage_group.

This commit adds a group level setting can_manage_group in
`#groups` overlay. This setting can be set while creating a
new user_group and can be changed for existing groups.

web/src/settings_components.ts

@@ -465,6 +465,7 @@ function get_field_data_input_value($input_elem: JQuery): string | undefined {
     return JSON.stringify(proposed_value);
 }
 
+export let new_group_can_manage_group_widget: DropdownWidget | null = null;
 export let new_group_can_mention_group_widget: DropdownWidget | null = null;
 
 const dropdown_widget_map = new Map<string, DropdownWidget | null>([
@@ -475,6 +476,7 @@ const dropdown_widget_map = new Map<string, DropdownWidget | null>([
     ["realm_create_multiuse_invite_group", null],
     ["can_remove_subscribers_group", null],
     ["realm_can_access_all_users_group", null],
+    ["can_manage_group", null],
     ["can_mention_group", null],
     ["realm_can_create_public_channel_group", null],
     ["realm_can_create_private_channel_group", null],
@@ -510,6 +512,10 @@ export function set_new_group_can_mention_group_widget(widget: DropdownWidget):
     new_group_can_mention_group_widget = widget;
 }
 
+export function set_new_group_can_manage_group_widget(widget: DropdownWidget): void {
+    new_group_can_manage_group_widget = widget;
+}
+
 export function set_dropdown_list_widget_setting_value(
     property_name: string,
     value: number | string,
@@ -868,6 +874,7 @@ export function check_group_property_changed(elem: HTMLElement, group: UserGroup
     const current_val = get_group_property_value(property_name, group);
     let proposed_val;
     switch (property_name) {
+        case "can_manage_group":
         case "can_mention_group":
             proposed_val = get_dropdown_list_widget_setting_value($elem);
             break;
@@ -1054,10 +1061,12 @@ export function populate_data_for_group_request(
         if (check_group_property_changed(input_elem, group)) {
             const input_value = get_input_element_value(input_elem);
             if (input_value !== undefined && input_value !== null) {
-                const property_name = extract_property_name($input_elem);
+                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                const property_name = extract_property_name($input_elem) as keyof UserGroup;
+                const old_value = get_group_property_value(property_name, group);
                 data[property_name] = JSON.stringify({
                     new: input_value,
-                    old: group.can_mention_group,
+                    old: old_value,
                 });
             }
         }

web/src/settings_org.js

@@ -639,7 +639,7 @@ export function discard_group_property_element_changes(elem, group) {
     const property_name = settings_components.extract_property_name($elem);
     const property_value = settings_components.get_group_property_value(property_name, group);
 
-    if (property_name === "can_mention_group") {
+    if (property_name === "can_manage_group" || property_name === "can_mention_group") {
         settings_components.set_dropdown_list_widget_setting_value(property_name, property_value);
     } else if (property_value !== undefined) {
         settings_components.set_input_element_value($elem, property_value);

web/src/user_group_components.ts

@@ -2,6 +2,7 @@ import $ from "jquery";
 import assert from "minimalistic-assert";
 
 import * as dropdown_widget from "./dropdown_widget";
+import * as group_permission_settings from "./group_permission_settings";
 import {$t_html} from "./i18n";
 import * as settings_components from "./settings_components";
 import * as user_groups from "./user_groups";
@@ -9,33 +10,37 @@ import type {UserGroup} from "./user_groups";
 
 export let active_group_id: number | undefined;
 
+type group_setting = "can_manage_group" | "can_mention_group";
 export function setup_permissions_dropdown(
+    setting_name: group_setting,
     group: UserGroup | undefined,
     for_group_creation: boolean,
 ): void {
     let widget_name: string;
     let default_id: number;
     if (for_group_creation) {
-        widget_name = "new_group_can_mention_group";
+        widget_name = "new_group_" + setting_name;
-        default_id = user_groups.get_user_group_from_name("role:everyone")!.id;
+        const group_setting_config = group_permission_settings.get_group_permission_setting_config(
+            setting_name,
+            "group",
+        )!;
+        const default_group_name = group_setting_config.default_group_name;
+        default_id = user_groups.get_user_group_from_name(default_group_name)!.id;
     } else {
         assert(group !== undefined);
-        widget_name = "can_mention_group";
+        widget_name = setting_name;
-        default_id = group.can_mention_group;
+        default_id = group[setting_name];
     }
 
-    const can_mention_group_widget = new dropdown_widget.DropdownWidget({
+    const group_setting_widget = new dropdown_widget.DropdownWidget({
         widget_name,
         get_options: () =>
-            user_groups.get_realm_user_groups_for_dropdown_list_widget(
+            user_groups.get_realm_user_groups_for_dropdown_list_widget(setting_name, "group"),
-                "can_mention_group",
-                "group",
-            ),
         item_click_callback(event, dropdown) {
             dropdown.hide();
             event.preventDefault();
             event.stopPropagation();
-            can_mention_group_widget.render();
+            group_setting_widget.render();
             if (!for_group_creation) {
                 assert(group !== undefined);
                 settings_components.save_discard_group_widget_status_handler(
@@ -53,14 +58,15 @@ export function setup_permissions_dropdown(
         },
     });
     if (for_group_creation) {
-        settings_components.set_new_group_can_mention_group_widget(can_mention_group_widget);
+        if (setting_name === "can_mention_group") {
+            settings_components.set_new_group_can_mention_group_widget(group_setting_widget);
         } else {
-        settings_components.set_dropdown_setting_widget(
+            settings_components.set_new_group_can_manage_group_widget(group_setting_widget);
-            "can_mention_group",
-            can_mention_group_widget,
-        );
         }
-    can_mention_group_widget.setup();
+    } else {
+        settings_components.set_dropdown_setting_widget(setting_name, group_setting_widget);
+    }
+    group_setting_widget.setup();
 }
 
 export function set_active_group_id(group_id: number): void {

web/src/user_group_create.ts

@@ -5,6 +5,7 @@ import * as channel from "./channel";
 import {$t, $t_html} from "./i18n";
 import * as keydown_util from "./keydown_util";
 import * as loading from "./loading";
+import {page_params} from "./page_params";
 import * as settings_components from "./settings_components";
 import * as ui_report from "./ui_report";
 import * as user_group_components from "./user_group_components";
@@ -126,6 +127,10 @@ export function show_new_user_group_modal(): void {
     user_group_create_members.build_widgets();
 
     clear_error_display();
+
+    if (!page_params.development_environment) {
+        $("#new_group_can_manage_group_widget_container").hide();
+    }
 }
 
 function create_user_group(): void {
@@ -145,6 +150,14 @@ function create_user_group(): void {
     }
     const user_ids = user_group_create_members.get_principals();
 
+    assert(settings_components.new_group_can_manage_group_widget !== null);
+    const can_manage_group_value = settings_components.new_group_can_manage_group_widget.value();
+    assert(can_manage_group_value !== undefined);
+    const can_manage_group =
+        typeof can_manage_group_value === "number"
+            ? can_manage_group_value
+            : Number.parseInt(can_manage_group_value, 10);
+
     assert(settings_components.new_group_can_mention_group_widget !== null);
     const can_mention_group_value = settings_components.new_group_can_mention_group_widget.value();
     assert(can_mention_group_value !== undefined);
@@ -157,6 +170,7 @@ function create_user_group(): void {
         name: group_name,
         description,
         members: JSON.stringify(user_ids),
+        can_manage_group,
         can_mention_group,
     };
     loading.make_indicator($("#user_group_creating_indicator"), {
@@ -229,5 +243,6 @@ export function set_up_handlers(): void {
         }
     });
 
-    user_group_components.setup_permissions_dropdown(undefined, true);
+    user_group_components.setup_permissions_dropdown("can_manage_group", undefined, true);
+    user_group_components.setup_permissions_dropdown("can_mention_group", undefined, true);
 }

web/src/user_group_edit.js

@@ -17,6 +17,7 @@ import {$t, $t_html} from "./i18n";
 import * as ListWidget from "./list_widget";
 import * as loading from "./loading";
 import * as overlays from "./overlays";
+import {page_params} from "./page_params";
 import * as people from "./people";
 import * as scroll_util from "./scroll_util";
 import * as settings_components from "./settings_components";
@@ -141,8 +142,13 @@ function show_membership_settings(group) {
 }
 
 function show_general_settings(group) {
-    user_group_components.setup_permissions_dropdown(group, false);
+    user_group_components.setup_permissions_dropdown("can_manage_group", group, false);
+    user_group_components.setup_permissions_dropdown("can_mention_group", group, false);
     update_general_settings_elements(group);
+
+    if (!page_params.development_environment) {
+        $("#can_manage_group_widget_container").hide();
+    }
 }
 
 function enable_group_edit_settings(group) {

web/templates/user_group_settings/group_permissions.hbs

@@ -2,3 +2,8 @@
   widget_name=can_mention_group_widget_name
   label=(t 'Who can mention this group?')
   value_type="number"}}
+
+{{> ../dropdown_widget_with_label
+  widget_name=can_manage_group_widget_name
+  label=(t 'Who can manage this group?')
+  value_type="number"}}

web/templates/user_group_settings/user_group_creation_form.hbs

@@ -28,7 +28,9 @@
                                 </h3>
                             </div>
 
-                            {{> group_permissions can_mention_group_widget_name="new_group_can_mention_group"}}
+                            {{> group_permissions
+                              can_mention_group_widget_name="new_group_can_mention_group" can_manage_group_widget_name="new_group_can_manage_group"
+                              }}
                         </div>
                     </section>
                 </div>

web/templates/user_group_settings/user_group_settings.hbs

@@ -43,7 +43,7 @@
                     {{> ../settings/settings_save_discard_widget section_name="group-permissions" }}
                 </div>
 
-                {{> group_permissions can_mention_group_widget_name="can_mention_group"}}
+                {{> group_permissions can_mention_group_widget_name="can_mention_group" can_manage_group_widget_name="can_manage_group"}}
             </div>
         </div>