user_groups: Use group picker for can_mention_group.

web/src/settings_components.ts

@@ -489,8 +489,6 @@ function get_field_data_input_value($input_elem: JQuery): string | undefined {
     return JSON.stringify(proposed_value);
 }
 
-export let new_group_can_mention_group_widget: DropdownWidget | null = null;
-
 const dropdown_widget_map = new Map<string, DropdownWidget | null>([
     ["realm_new_stream_announcements_stream_id", null],
     ["realm_signup_announcements_stream_id", null],
@@ -499,7 +497,6 @@ 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_mention_group", null],
     ["realm_can_add_custom_emoji_group", null],
     ["realm_can_create_groups", null],
     ["realm_can_create_public_channel_group", null],
@@ -534,10 +531,6 @@ export function set_dropdown_setting_widget(property_name: string, widget: Dropd
     dropdown_widget_map.set(property_name, widget);
 }
 
-export function set_new_group_can_mention_group_widget(widget: DropdownWidget): void {
-    new_group_can_mention_group_widget = widget;
-}
-
 export function set_dropdown_list_widget_setting_value(
     property_name: string,
     value: number | string,
@@ -940,15 +933,13 @@ export function check_group_property_changed(elem: HTMLElement, group: UserGroup
         case "can_add_members_group":
         case "can_join_group":
         case "can_leave_group":
-        case "can_manage_group": {
+        case "can_manage_group":
+        case "can_mention_group": {
             const pill_widget = get_group_setting_widget(property_name);
             assert(pill_widget !== null);
             proposed_val = get_group_setting_widget_value(pill_widget);
             break;
         }
-        case "can_mention_group":
-            proposed_val = get_dropdown_list_widget_setting_value($elem);
-            break;
         default:
             if (current_val !== undefined) {
                 proposed_val = get_input_element_value(elem, typeof current_val);
@@ -1431,6 +1422,7 @@ export const group_setting_widget_map = new Map<string, GroupSettingPillContaine
     ["can_join_group", null],
     ["can_leave_group", null],
     ["can_manage_group", null],
+    ["can_mention_group", null],
 ]);
 
 export function get_group_setting_widget(setting_name: string): GroupSettingPillContainer | null {
@@ -1475,7 +1467,8 @@ type group_setting_name =
     | "can_add_members_group"
     | "can_join_group"
     | "can_leave_group"
-    | "can_manage_group";
+    | "can_manage_group"
+    | "can_mention_group";
 
 export function create_group_setting_widget({
     $pill_container,

web/src/settings_org.ts

@@ -673,10 +673,7 @@ export function discard_group_property_element_changes(elem: HTMLElement, group:
     );
 
     const group_widget_settings = [...settings_components.group_setting_widget_map.keys()];
-    if (property_name === "can_mention_group") {
+    if (group_widget_settings.includes(property_name)) {
-        assert(typeof property_value === "number" || typeof property_value === "string");
-        settings_components.set_dropdown_list_widget_setting_value(property_name, property_value);
-    } else if (group_widget_settings.includes(property_name)) {
         const pill_widget = settings_components.get_group_setting_widget(property_name);
         assert(pill_widget !== null);
         settings_components.set_group_setting_widget_value(

web/src/state_data.ts

@@ -149,7 +149,7 @@ export const raw_user_group_schema = z.object({
     can_join_group: group_setting_value_schema,
     can_leave_group: group_setting_value_schema,
     can_manage_group: group_setting_value_schema,
-    can_mention_group: z.number(),
+    can_mention_group: group_setting_value_schema,
     deactivated: z.boolean(),
 });
 

web/src/user_group_components.ts

@@ -1,70 +1,10 @@
 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";
 import type {UserGroup} from "./user_groups";
 
 export let active_group_id: number | undefined;
 
-type group_setting = "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_" + setting_name;
-        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 = setting_name;
-        default_id = group[setting_name];
-    }
-
-    const group_setting_widget = new dropdown_widget.DropdownWidget({
-        widget_name,
-        get_options: () =>
-            user_groups.get_realm_user_groups_for_dropdown_list_widget(setting_name, "group"),
-        item_click_callback(event, dropdown) {
-            dropdown.hide();
-            event.preventDefault();
-            event.stopPropagation();
-            group_setting_widget.render();
-            if (!for_group_creation) {
-                assert(group !== undefined);
-                settings_components.save_discard_group_widget_status_handler(
-                    $("#group_permission_settings"),
-                    group,
-                );
-            }
-        },
-        $events_container: $("#groups_overlay .group-permissions"),
-        default_id,
-        unique_id_type: dropdown_widget.DataTypes.NUMBER,
-        on_mount_callback(dropdown) {
-            $(dropdown.popper).css("min-width", "300px");
-            $(dropdown.popper).find(".simplebar-content").css("width", "max-content");
-        },
-    });
-    if (for_group_creation) {
-        settings_components.set_new_group_can_mention_group_widget(group_setting_widget);
-    } 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 {
     active_group_id = group_id;
 }

web/src/user_group_create.ts

@@ -31,6 +31,7 @@ let can_add_members_group_widget: GroupSettingPillContainer | undefined;
 let can_join_group_widget: GroupSettingPillContainer | undefined;
 let can_leave_group_widget: GroupSettingPillContainer | undefined;
 let can_manage_group_widget: GroupSettingPillContainer | undefined;
+let can_mention_group_widget: GroupSettingPillContainer | undefined;
 
 class UserGroupMembershipError {
     report_no_members_to_user_group(): void {
@@ -168,13 +169,9 @@ function create_user_group(): void {
     const can_leave_group =
         settings_components.get_group_setting_widget_value(can_leave_group_widget);
 
-    assert(settings_components.new_group_can_mention_group_widget !== null);
+    assert(can_mention_group_widget !== undefined);
-    const can_mention_group_value = settings_components.new_group_can_mention_group_widget.value();
-    assert(can_mention_group_value !== undefined);
     const can_mention_group =
-        typeof can_mention_group_value === "number"
+        settings_components.get_group_setting_widget_value(can_mention_group_widget);
-            ? can_mention_group_value
-            : Number.parseInt(can_mention_group_value, 10);
 
     const data = {
         name: group_name,
@@ -183,7 +180,7 @@ function create_user_group(): void {
         can_add_members_group: JSON.stringify(can_add_members_group),
         can_join_group: JSON.stringify(can_join_group),
         can_leave_group: JSON.stringify(can_leave_group),
-        can_mention_group,
+        can_mention_group: JSON.stringify(can_mention_group),
         can_manage_group: JSON.stringify(can_manage_group),
     };
     loading.make_indicator($("#user_group_creating_indicator"), {
@@ -281,5 +278,9 @@ export function set_up_handlers(): void {
         setting_type: "group",
     });
 
-    user_group_components.setup_permissions_dropdown("can_mention_group", undefined, true);
+    can_mention_group_widget = settings_components.create_group_setting_widget({
+        $pill_container: $container.find(".can-mention-group-container .pill-container"),
+        setting_name: "can_mention_group",
+        setting_type: "group",
+    });
 }

web/src/user_group_edit.js

@@ -112,39 +112,19 @@ function update_group_permission_settings_elements(group) {
     // We are concerend with the General tab for changing group permissions.
     const $group_permission_settings = $("#group_permission_settings");
 
-    // Otherwise, we adjust whether the widgets are disabled based on
-    // whether this user is authorized to change the group settings.
-    const $permission_dropdown_elements =
-        $group_permission_settings.find(".dropdown-widget-button");
-
     const $permission_pill_container_elements = $group_permission_settings.find(".pill-container");
 
     if (settings_data.can_manage_user_group(group.id)) {
-        $permission_dropdown_elements.prop("disabled", false);
         $permission_pill_container_elements.find(".input").prop("contenteditable", true);
         $permission_pill_container_elements.removeClass("group_setting_disabled");
 
-        $permission_dropdown_elements.each(function () {
-            const $dropdown_wrapper = $(this).closest(".dropdown_widget_with_label_wrapper");
-            $dropdown_wrapper[0]._tippy?.destroy();
-        });
-
         $permission_pill_container_elements.each(function () {
             $(this)[0]._tippy?.destroy();
         });
     } else {
-        $permission_dropdown_elements.prop("disabled", true);
         $permission_pill_container_elements.find(".input").prop("contenteditable", false);
         $permission_pill_container_elements.addClass("group_setting_disabled");
 
-        $permission_dropdown_elements.each(function () {
-            const $dropdown_wrapper = $(this).closest(".dropdown_widget_with_label_wrapper");
-            settings_components.initialize_disable_btn_hint_popover(
-                $dropdown_wrapper,
-                $t({defaultMessage: "You do not have permission to edit this setting."}),
-            );
-        });
-
         $permission_pill_container_elements.each(function () {
             settings_components.initialize_disable_btn_hint_popover(
                 $(this),
@@ -167,7 +147,6 @@ function show_membership_settings(group) {
 }
 
 function show_general_settings(group) {
-    user_group_components.setup_permissions_dropdown("can_mention_group", group, false);
     const $edit_container = get_edit_container(group);
     settings_components.create_group_setting_widget({
         $pill_container: $edit_container.find(".can-add-members-group-container .pill-container"),
@@ -196,6 +175,13 @@ function show_general_settings(group) {
         setting_type: "group",
         group,
     });
+
+    settings_components.create_group_setting_widget({
+        $pill_container: $edit_container.find(".can-mention-group-container .pill-container"),
+        setting_name: "can_mention_group",
+        setting_type: "group",
+        group,
+    });
     update_general_panel_ui(group);
 }
 
@@ -659,6 +645,7 @@ export function update_group(event) {
         }
         if (event.data.can_mention_group !== undefined) {
             sync_group_permission_setting("can_mention_group", group);
+            update_group_management_ui();
         }
         if (event.data.can_add_members_group !== undefined) {
             sync_group_permission_setting("can_add_members_group", group);

web/src/user_groups.ts

@@ -162,7 +162,7 @@ export function get_user_groups_allowed_to_mention(): UserGroup[] {
     const user_groups = get_realm_user_groups();
     return user_groups.filter((group) => {
         const can_mention_group_id = group.can_mention_group;
-        return is_user_in_group(can_mention_group_id, current_user.user_id);
+        return is_user_in_setting_group(can_mention_group_id, current_user.user_id);
     });
 }
 
@@ -442,10 +442,7 @@ export function get_realm_user_groups_for_setting(
             return user_group;
         });
 
-    if (
+    if (!page_params.development_environment || group_setting_config.require_system_group) {
-        (setting_name !== "can_mention_group" && !page_params.development_environment) ||
-        group_setting_config.require_system_group
-    ) {
         return system_user_groups;
     }
 

web/templates/user_group_settings/group_permissions.hbs

@@ -8,10 +8,15 @@
     </div>
 </div>
 
-{{> ../dropdown_widget_with_label
+<div class="input-group can-mention-group-container">
-  widget_name=can_mention_group_widget_name
+    <label>{{t "Who can mention this group" }}</label>
-  label=(t 'Who can mention this group')
+    <div class="pill-container person_picker prop-element" id="id_{{can_mention_group_widget_name}}" data-setting-widget-type="group-setting-type">
-  value_type="number"}}
+        <div class="input" contenteditable="true"
+          data-placeholder="{{t 'Add roles, groups or users' }}">
+            {{~! Squash whitespace so that placeholder is displayed when empty. ~}}
+        </div>
+    </div>
+</div>
 
 <div class="input-group can-add-members-group-container">
     <label>{{t "Who can add members to this group" }}</label>