settings: Use pills UI for channel creation settings.

We now use new pills UI for public and private channel
creation settings. The UI for web-public channel
creation setting is still a dropdown as we allow only
system groups for that.

web/src/settings_components.ts

@@ -481,8 +481,6 @@ const dropdown_widget_map = new Map<string, DropdownWidget | null>([
     ["realm_can_access_all_users_group", null],
     ["realm_can_add_custom_emoji_group", null],
     ["realm_can_create_groups", null],
-    ["realm_can_create_public_channel_group", null],
-    ["realm_can_create_private_channel_group", null],
     ["realm_can_create_web_public_channel_group", null],
     ["realm_can_delete_any_message_group", null],
     ["realm_can_delete_own_message_group", null],
@@ -803,8 +801,6 @@ export function check_realm_settings_property_changed(elem: HTMLElement): boolea
         case "realm_can_access_all_users_group":
         case "realm_can_add_custom_emoji_group":
         case "realm_can_create_groups":
-        case "realm_can_create_public_channel_group":
-        case "realm_can_create_private_channel_group":
         case "realm_can_create_web_public_channel_group":
         case "realm_can_delete_any_message_group":
         case "realm_can_delete_own_message_group":
@@ -814,6 +810,8 @@ 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_can_create_public_channel_group":
+        case "realm_can_create_private_channel_group":
         case "realm_create_multiuse_invite_group": {
             const pill_widget = get_group_setting_widget(property_name);
             assert(pill_widget !== null);
@@ -1430,6 +1428,8 @@ export const group_setting_widget_map = new Map<string, GroupSettingPillContaine
     ["can_leave_group", null],
     ["can_manage_group", null],
     ["can_mention_group", null],
+    ["realm_can_create_public_channel_group", null],
+    ["realm_can_create_private_channel_group", null],
     ["realm_create_multiuse_invite_group", null],
 ]);
 
@@ -1531,7 +1531,10 @@ export function create_group_setting_widget({
     return pill_widget;
 }
 
-type realm_group_setting_name = "create_multiuse_invite_group";
+type realm_group_setting_name =
+    | "can_create_public_channel_group"
+    | "can_create_private_channel_group"
+    | "create_multiuse_invite_group";
 export function create_realm_group_setting_widget({
     $pill_container,
     setting_name,

web/src/settings_org.ts

@@ -120,6 +120,31 @@ export function enable_or_disable_group_permission_settings(): void {
         return;
     }
 
+    if (current_user.is_admin) {
+        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"),
+        );
+
+        // Admins are not allowed to update organization joining settings.
+        const owner_editable_settings = ["realm_create_multiuse_invite_group"];
+        for (const setting_name of owner_editable_settings) {
+            const $permission_pill_container = $(`#id_${CSS.escape(setting_name)}`);
+            $permission_pill_container.find(".input").prop("contenteditable", false);
+            $permission_pill_container.closest(".input-group").addClass("group_setting_disabled");
+            settings_components.disable_opening_typeahead_on_clicking_label(
+                $permission_pill_container.closest(".input-group"),
+            );
+        }
+        return;
+    }
+
     const $permission_pill_container_elements = $("#organization-permissions").find(
         ".pill-container",
     );
@@ -579,8 +604,6 @@ export function discard_realm_property_element_changes(elem: HTMLElement): void
         case "realm_can_add_custom_emoji_group":
         case "realm_can_access_all_users_group":
         case "realm_can_create_groups":
-        case "realm_can_create_public_channel_group":
-        case "realm_can_create_private_channel_group":
         case "realm_can_create_web_public_channel_group":
         case "realm_can_delete_any_message_group":
         case "realm_can_delete_own_message_group":
@@ -592,6 +615,8 @@ export function discard_realm_property_element_changes(elem: HTMLElement): void
                 property_value,
             );
             break;
+        case "realm_can_create_public_channel_group":
+        case "realm_can_create_private_channel_group":
         case "realm_create_multiuse_invite_group": {
             const pill_widget = settings_components.get_group_setting_widget(property_name);
             assert(pill_widget !== null);
@@ -947,8 +972,13 @@ export function set_up_dropdown_widget_for_realm_group_settings(): void {
         realm.server_supported_permission_settings.realm,
     );
 
+    const settings_using_pills_ui = new Set([
+        "can_create_public_channel_group",
+        "can_create_private_channel_group",
+        "create_multiuse_invite_group",
+    ]);
     for (const setting_name of realm_group_permission_settings) {
-        if (setting_name === "create_multiuse_invite_group") {
+        if (settings_using_pills_ui.has(setting_name)) {
             continue;
         }
         const get_setting_options = (): UserGroupForDropdownListWidget[] =>
@@ -1153,6 +1183,14 @@ function initialize_group_setting_widgets(): void {
         $pill_container: $("#id_realm_create_multiuse_invite_group"),
         setting_name: "create_multiuse_invite_group",
     });
+    settings_components.create_realm_group_setting_widget({
+        $pill_container: $("#id_realm_can_create_public_channel_group"),
+        setting_name: "can_create_public_channel_group",
+    });
+    settings_components.create_realm_group_setting_widget({
+        $pill_container: $("#id_realm_can_create_private_channel_group"),
+        setting_name: "can_create_private_channel_group",
+    });
 
     enable_or_disable_group_permission_settings();
 }

web/src/state_data.ts

@@ -289,8 +289,8 @@ export const realm_schema = z.object({
     realm_can_access_all_users_group: z.number(),
     realm_can_add_custom_emoji_group: z.number(),
     realm_can_create_groups: z.number(),
-    realm_can_create_public_channel_group: z.number(),
-    realm_can_create_private_channel_group: z.number(),
+    realm_can_create_public_channel_group: group_setting_value_schema,
+    realm_can_create_private_channel_group: group_setting_value_schema,
     realm_can_create_web_public_channel_group: z.number(),
     realm_can_delete_any_message_group: z.number(),
     realm_can_delete_own_message_group: z.number(),

web/templates/settings/organization_permissions_admin.hbs

@@ -73,10 +73,15 @@
                 {{> settings_save_discard_widget section_name="stream-permissions" }}
             </div>
             <div class="m-10 inline-block organization-permissions-parent">
-                {{> ../dropdown_widget_with_label
-                  widget_name="realm_can_create_public_channel_group"
-                  label=(t 'Who can create public channels')
-                  value_type="number"}}
+                <div class="input-group">
+                    <label class="group-setting-label">{{t "Who can create public channels" }}</label>
+                    <div class="pill-container person_picker prop-element" id="id_realm_can_create_public_channel_group" data-setting-widget-type="group-setting-type">
+                        <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>
 
                 {{> upgrade_tip_widget }}
                 {{> settings_checkbox
@@ -92,10 +97,15 @@
                   label=(t 'Who can create web-public channels')
                   value_type="number"}}
 
-                {{> ../dropdown_widget_with_label
-                  widget_name="realm_can_create_private_channel_group"
-                  label=(t 'Who can create private channels')
-                  value_type="number"}}
+                <div class="input-group">
+                    <label class="group-setting-label">{{t "Who can create private channels" }}</label>
+                    <div class="pill-container person_picker prop-element" id="id_realm_can_create_private_channel_group" data-setting-widget-type="group-setting-type">
+                        <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_invite_to_stream_policy" class="settings-field-label">{{t "Who can add users to channels" }}</label>