settings: Use new settings UI for create_multiuse_invite_group.

web/src/group_setting_pill.ts

@@ -153,7 +153,7 @@ export function set_up_pill_typeahead({
     opts: {
         setting_name: string;
         setting_type: "realm" | "stream" | "group";
-        group: UserGroup | undefined;
+        group?: UserGroup | undefined;
     };
 }): void {
     pill_typeahead.set_up_group_setting_typeahead(

web/src/pill_typeahead.ts

@@ -135,7 +135,7 @@ export function set_up_group_setting_typeahead(
     opts: {
         setting_name: string;
         setting_type: "realm" | "stream" | "group";
-        group: UserGroup | undefined;
+        group?: UserGroup | undefined;
     },
 ): void {
     const bootstrap_typeahead_input: TypeaheadInputElement = {

web/src/settings_components.ts

@@ -27,7 +27,7 @@ import * as scroll_util from "./scroll_util";
 import * as settings_config from "./settings_config";
 import * as settings_data from "./settings_data";
 import type {CustomProfileField, GroupSettingValue} from "./state_data";
-import {current_user, realm, realm_schema} from "./state_data";
+import {current_user, group_setting_value_schema, realm, realm_schema} from "./state_data";
 import * as stream_data from "./stream_data";
 import type {StreamSubscription} from "./sub_store";
 import {stream_subscription_schema} from "./sub_store";
@@ -488,7 +488,6 @@ const dropdown_widget_map = new Map<string, DropdownWidget | null>([
     ["realm_can_delete_own_message_group", null],
     ["realm_can_manage_all_groups", null],
     ["realm_can_move_messages_between_channels_group", null],
-    ["realm_create_multiuse_invite_group", null],
     ["realm_direct_message_initiator_group", null],
     ["realm_direct_message_permission_group", null],
 ]);
@@ -801,7 +800,6 @@ export function check_realm_settings_property_changed(elem: HTMLElement): boolea
         case "realm_signup_announcements_stream_id":
         case "realm_zulip_update_announcements_stream_id":
         case "realm_default_code_block_language":
-        case "realm_create_multiuse_invite_group":
         case "realm_can_access_all_users_group":
         case "realm_can_add_custom_emoji_group":
         case "realm_can_create_groups":
@@ -816,6 +814,12 @@ export function check_realm_settings_property_changed(elem: HTMLElement): boolea
         case "realm_direct_message_permission_group":
             proposed_val = get_dropdown_list_widget_setting_value($elem);
             break;
+        case "realm_create_multiuse_invite_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 "realm_message_content_edit_limit_seconds":
         case "realm_message_content_delete_limit_seconds":
         case "realm_move_messages_between_streams_limit_seconds":
@@ -844,7 +848,7 @@ export function check_realm_settings_property_changed(elem: HTMLElement): boolea
                 blueslip.error("Element refers to unknown property", {property_name});
             }
     }
-    return current_val !== proposed_val;
+    return !_.isEqual(current_val, proposed_val);
 }
 
 export function check_stream_settings_property_changed(
@@ -1426,6 +1430,7 @@ export const group_setting_widget_map = new Map<string, GroupSettingPillContaine
     ["can_leave_group", null],
     ["can_manage_group", null],
     ["can_mention_group", null],
+    ["realm_create_multiuse_invite_group", null],
 ]);
 
 export function get_group_setting_widget(setting_name: string): GroupSettingPillContainer | null {
@@ -1525,3 +1530,41 @@ export function create_group_setting_widget({
 
     return pill_widget;
 }
+
+type realm_group_setting_name = "create_multiuse_invite_group";
+export function create_realm_group_setting_widget({
+    $pill_container,
+    setting_name,
+}: {
+    $pill_container: JQuery;
+    setting_name: realm_group_setting_name;
+}): void {
+    const pill_widget = group_setting_pill.create_pills($pill_container, setting_name, "realm");
+    const opts: {
+        setting_name: string;
+        setting_type: "realm";
+    } = {
+        setting_name,
+        setting_type: "realm",
+    };
+    group_setting_pill.set_up_pill_typeahead({pill_widget, $pill_container, opts});
+
+    group_setting_widget_map.set("realm_" + setting_name, pill_widget);
+
+    set_group_setting_widget_value(
+        pill_widget,
+        group_setting_value_schema.parse(
+            realm[realm_schema.keyof().parse("realm_" + setting_name)],
+        ),
+    );
+
+    const $save_discard_widget_container = $(`#id_realm_${CSS.escape(setting_name)}`).closest(
+        ".settings-subsection-parent",
+    );
+    pill_widget.onPillCreate(() => {
+        save_discard_realm_settings_widget_status_handler($save_discard_widget_container);
+    });
+    pill_widget.onPillRemove(() => {
+        save_discard_realm_settings_widget_status_handler($save_discard_widget_container);
+    });
+}

web/src/settings_org.ts

@@ -105,6 +105,29 @@ export function maybe_disable_widgets(): void {
         .addClass("control-label-disabled");
 }
 
+export function enable_or_disable_group_permission_settings(): void {
+    if (current_user.is_owner) {
+        const $permission_pill_container_elements = $("#organization-permissions").find(
+            ".pill-container",
+        );
+        $permission_pill_container_elements.find(".input").prop("contenteditable", true);
+        $permission_pill_container_elements
+            .closest(".input-group")
+            .removeClass("group_setting_disabled");
+        settings_components.enable_opening_typeahead_on_clicking_label(
+            $("#organization-permissions"),
+        );
+        return;
+    }
+
+    const $permission_pill_container_elements = $("#organization-permissions").find(
+        ".pill-container",
+    );
+    $permission_pill_container_elements.find(".input").prop("contenteditable", false);
+    $permission_pill_container_elements.closest(".input-group").addClass("group_setting_disabled");
+    settings_components.disable_opening_typeahead_on_clicking_label($("#organization-permissions"));
+}
+
 type OrganizationSettingsOptions = {
     common_policy_values: SettingOptionValueWithKey[];
     wildcard_mention_policy_values: SettingOptionValueWithKey[];
@@ -551,7 +574,6 @@ export function discard_realm_property_element_changes(elem: HTMLElement): void
         case "realm_signup_announcements_stream_id":
         case "realm_zulip_update_announcements_stream_id":
         case "realm_default_code_block_language":
-        case "realm_create_multiuse_invite_group":
         case "realm_direct_message_initiator_group":
         case "realm_direct_message_permission_group":
         case "realm_can_add_custom_emoji_group":
@@ -570,6 +592,15 @@ export function discard_realm_property_element_changes(elem: HTMLElement): void
                 property_value,
             );
             break;
+        case "realm_create_multiuse_invite_group": {
+            const pill_widget = settings_components.get_group_setting_widget(property_name);
+            assert(pill_widget !== null);
+            settings_components.set_group_setting_widget_value(
+                pill_widget,
+                group_setting_value_schema.parse(property_value),
+            );
+            break;
+        }
         case "realm_default_language":
             assert(typeof property_value === "string");
             $("#org-notifications .language_selection_widget .language_selection_button span").attr(
@@ -917,6 +948,9 @@ export function set_up_dropdown_widget_for_realm_group_settings(): void {
     );
 
     for (const setting_name of realm_group_permission_settings) {
+        if (setting_name === "create_multiuse_invite_group") {
+            continue;
+        }
         const get_setting_options = (): UserGroupForDropdownListWidget[] =>
             user_groups.get_realm_user_groups_for_dropdown_list_widget(setting_name, "realm");
         let dropdown_list_item_click_callback:
@@ -1114,6 +1148,15 @@ export function register_save_discard_widget_handlers(
     );
 }
 
+function initialize_group_setting_widgets(): void {
+    settings_components.create_realm_group_setting_widget({
+        $pill_container: $("#id_realm_create_multiuse_invite_group"),
+        setting_name: "create_multiuse_invite_group",
+    });
+
+    enable_or_disable_group_permission_settings();
+}
+
 export function build_page(): void {
     meta.loaded = true;
 
@@ -1124,6 +1167,8 @@ export function build_page(): void {
     // Populate realm domains
     populate_realm_domains_label(realm.realm_domains);
 
+    initialize_group_setting_widgets();
+
     // Populate authentication methods table
 
     populate_auth_methods(settings_components.realm_authentication_methods_to_boolean_dict());

web/src/state_data.ts

@@ -296,7 +296,7 @@ export const realm_schema = z.object({
     realm_can_delete_own_message_group: z.number(),
     realm_can_manage_all_groups: z.number(),
     realm_can_move_messages_between_channels_group: z.number(),
-    realm_create_multiuse_invite_group: z.number(),
+    realm_create_multiuse_invite_group: group_setting_value_schema,
     realm_date_created: z.number(),
     realm_default_code_block_language: z.string(),
     realm_default_external_accounts: z.record(

web/src/user_events.js

@@ -87,6 +87,7 @@ export const update_person = function update(person) {
         if (people.is_my_user_id(person.user_id) && current_user.is_owner !== person_obj.is_owner) {
             current_user.is_owner = person_obj.is_owner;
             settings_org.maybe_disable_widgets();
+            settings_org.enable_or_disable_group_permission_settings();
             settings.update_lock_icon_in_sidebar();
         }
 

web/styles/settings.css

@@ -814,6 +814,22 @@ input[type="checkbox"] {
     }
 }
 
+.org-permissions-form .pill-container {
+    /* 319px + 2 * (2px padding) + 2 * (1px border) = 325px, which is the total
+    width of dropdown widget buttons */
+    min-width: 319px;
+    background-color: hsl(0deg 0% 100%);
+
+    .input {
+        flex-grow: 1;
+
+        &:first-child:empty::before {
+            opacity: 0.5;
+            content: attr(data-placeholder);
+        }
+    }
+}
+
 .progressive-table-wrapper {
     position: relative;
     max-height: calc(95vh - 220px);

web/templates/settings/organization_permissions_admin.hbs

@@ -23,10 +23,15 @@
                     </select>
                 </div>
 
-                {{> ../dropdown_widget_with_label
+                <div class="input-group">
-                  widget_name="realm_create_multiuse_invite_group"
+                    <label class="group-setting-label">{{t "Who can create reusable invitation links" }}</label>
-                  label=(t 'Who can create reusable invitation links')
+                    <div class="pill-container person_picker prop-element" id="id_realm_create_multiuse_invite_group" 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">
                     <label for="realm_org_join_restrictions" class="settings-field-label">{{t "Restrict email domains of new users" }}</label>

web/tests/settings_org.test.js

@@ -529,6 +529,7 @@ test("set_up", ({override, override_rewire}) => {
     };
 
     override_rewire(settings_org, "init_dropdown_widgets", noop);
+    override_rewire(settings_org, "initialize_group_setting_widgets", noop);
     $("#id_realm_message_content_edit_limit_minutes").set_parent(
         $.create("<stub edit limit custom input parent>"),
     );

web/tests/user_events.test.js

@@ -43,6 +43,7 @@ mock_esm("../src/settings_linkifiers", {
 });
 mock_esm("../src/settings_org", {
     maybe_disable_widgets() {},
+    enable_or_disable_group_permission_settings() {},
 });
 mock_esm("../src/settings_profile_fields", {
     maybe_disable_widgets() {},