From 8fa225d885396878d7d3ad4904eb3f0a977ec8b4 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Mon, 28 Oct 2024 19:36:21 +0530
Subject: [PATCH] settings: Use new pills UI for group related realm settings.

This commit updates the code to use new UI for can_create_groups
and can_manage_all_groups settings.
---
 web/src/settings_components.ts                | 10 ++++---
 web/src/settings_org.ts                       | 23 ++++++++++++---
 web/src/state_data.ts                         |  4 +--
 web/src/user_events.js                        |  1 +
 .../organization_permissions_admin.hbs        | 28 ++++++++++++-------
 5 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/web/src/settings_components.ts b/web/src/settings_components.ts
index 97498c6d96..79a684611b 100644
--- a/web/src/settings_components.ts
+++ b/web/src/settings_components.ts
@@ -480,11 +480,9 @@ const dropdown_widget_map = new Map<string, DropdownWidget | null>([
     ["can_remove_subscribers_group", null],
     ["realm_can_access_all_users_group", null],
     ["realm_can_add_custom_emoji_group", null],
-    ["realm_can_create_groups", null],
     ["realm_can_create_web_public_channel_group", null],
     ["realm_can_delete_any_message_group", null],
     ["realm_can_delete_own_message_group", null],
-    ["realm_can_manage_all_groups", null],
     ["realm_can_move_messages_between_channels_group", null],
     ["realm_direct_message_initiator_group", null],
     ["realm_direct_message_permission_group", null],
@@ -800,18 +798,18 @@ export function check_realm_settings_property_changed(elem: HTMLElement): boolea
         case "realm_default_code_block_language":
         case "realm_can_access_all_users_group":
         case "realm_can_add_custom_emoji_group":
-        case "realm_can_create_groups":
         case "realm_can_create_web_public_channel_group":
         case "realm_can_delete_any_message_group":
         case "realm_can_delete_own_message_group":
-        case "realm_can_manage_all_groups":
         case "realm_can_move_messages_between_channels_group":
         case "realm_direct_message_initiator_group":
         case "realm_direct_message_permission_group":
             proposed_val = get_dropdown_list_widget_setting_value($elem);
             break;
+        case "realm_can_create_groups":
         case "realm_can_create_public_channel_group":
         case "realm_can_create_private_channel_group":
+        case "realm_can_manage_all_groups":
         case "realm_create_multiuse_invite_group": {
             const pill_widget = get_group_setting_widget(property_name);
             assert(pill_widget !== null);
@@ -1428,8 +1426,10 @@ 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_groups", null],
     ["realm_can_create_public_channel_group", null],
     ["realm_can_create_private_channel_group", null],
+    ["realm_can_manage_all_groups", null],
     ["realm_create_multiuse_invite_group", null],
 ]);
 
@@ -1532,8 +1532,10 @@ export function create_group_setting_widget({
 }
 
 type realm_group_setting_name =
+    | "can_create_groups"
     | "can_create_public_channel_group"
     | "can_create_private_channel_group"
+    | "can_manage_all_groups"
     | "create_multiuse_invite_group";
 export function create_realm_group_setting_widget({
     $pill_container,
diff --git a/web/src/settings_org.ts b/web/src/settings_org.ts
index 1941071792..06a61ec1ba 100644
--- a/web/src/settings_org.ts
+++ b/web/src/settings_org.ts
@@ -132,8 +132,13 @@ export function enable_or_disable_group_permission_settings(): void {
             $("#organization-permissions"),
         );
 
-        // Admins are not allowed to update organization joining settings.
-        const owner_editable_settings = ["realm_create_multiuse_invite_group"];
+        // Admins are not allowed to update organization joining and group
+        // related settings.
+        const owner_editable_settings = [
+            "realm_create_multiuse_invite_group",
+            "realm_can_create_groups",
+            "realm_can_manage_all_groups",
+        ];
         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);
@@ -603,11 +608,9 @@ export function discard_realm_property_element_changes(elem: HTMLElement): void
         case "realm_direct_message_permission_group":
         case "realm_can_add_custom_emoji_group":
         case "realm_can_access_all_users_group":
-        case "realm_can_create_groups":
         case "realm_can_create_web_public_channel_group":
         case "realm_can_delete_any_message_group":
         case "realm_can_delete_own_message_group":
-        case "realm_can_manage_all_groups":
         case "realm_can_move_messages_between_channels_group":
             assert(typeof property_value === "string" || typeof property_value === "number");
             settings_components.set_dropdown_list_widget_setting_value(
@@ -615,8 +618,10 @@ export function discard_realm_property_element_changes(elem: HTMLElement): void
                 property_value,
             );
             break;
+        case "realm_can_create_groups":
         case "realm_can_create_public_channel_group":
         case "realm_can_create_private_channel_group":
+        case "realm_can_manage_all_groups":
         case "realm_create_multiuse_invite_group": {
             const pill_widget = settings_components.get_group_setting_widget(property_name);
             assert(pill_widget !== null);
@@ -973,8 +978,10 @@ export function set_up_dropdown_widget_for_realm_group_settings(): void {
     );
 
     const settings_using_pills_ui = new Set([
+        "can_create_groups",
         "can_create_public_channel_group",
         "can_create_private_channel_group",
+        "can_manage_all_groups",
         "create_multiuse_invite_group",
     ]);
     for (const setting_name of realm_group_permission_settings) {
@@ -1191,6 +1198,14 @@ function initialize_group_setting_widgets(): void {
         $pill_container: $("#id_realm_can_create_private_channel_group"),
         setting_name: "can_create_private_channel_group",
     });
+    settings_components.create_realm_group_setting_widget({
+        $pill_container: $("#id_realm_can_create_groups"),
+        setting_name: "can_create_groups",
+    });
+    settings_components.create_realm_group_setting_widget({
+        $pill_container: $("#id_realm_can_manage_all_groups"),
+        setting_name: "can_manage_all_groups",
+    });
 
     enable_or_disable_group_permission_settings();
 }
diff --git a/web/src/state_data.ts b/web/src/state_data.ts
index 58771f2463..d9eb2b66a3 100644
--- a/web/src/state_data.ts
+++ b/web/src/state_data.ts
@@ -288,13 +288,13 @@ export const realm_schema = z.object({
     realm_bot_domain: z.string(),
     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_groups: group_setting_value_schema,
     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(),
-    realm_can_manage_all_groups: z.number(),
+    realm_can_manage_all_groups: group_setting_value_schema,
     realm_can_move_messages_between_channels_group: z.number(),
     realm_create_multiuse_invite_group: group_setting_value_schema,
     realm_date_created: z.number(),
diff --git a/web/src/user_events.js b/web/src/user_events.js
index 57daa1b8bb..1d0f9cee85 100644
--- a/web/src/user_events.js
+++ b/web/src/user_events.js
@@ -95,6 +95,7 @@ export const update_person = function update(person) {
             current_user.is_admin = person_obj.is_admin;
             settings_linkifiers.maybe_disable_widgets();
             settings_org.maybe_disable_widgets();
+            settings_org.enable_or_disable_group_permission_settings();
             settings_profile_fields.maybe_disable_widgets();
             settings_streams.maybe_disable_widgets();
             settings_realm_user_settings_defaults.maybe_disable_widgets();
diff --git a/web/templates/settings/organization_permissions_admin.hbs b/web/templates/settings/organization_permissions_admin.hbs
index ed4facbff2..4ae2f3da11 100644
--- a/web/templates/settings/organization_permissions_admin.hbs
+++ b/web/templates/settings/organization_permissions_admin.hbs
@@ -350,17 +350,25 @@
                     </select>
                 </div>
 
-                {{> ../dropdown_widget_with_label
-                  widget_name="realm_can_create_groups"
-                  label=(t 'Who can create user groups')
-                  value_type="number"
-                  is_setting_disabled=(not is_owner)}}
+                <div class="input-group">
+                    <label class="group-setting-label">{{t "Who can create user groups" }}</label>
+                    <div class="pill-container person_picker prop-element" id="id_realm_can_create_groups" 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>
 
-                {{> ../dropdown_widget_with_label
-                  widget_name="realm_can_manage_all_groups"
-                  label=(t 'Who can manage user groups')
-                  value_type="number"
-                  is_setting_disabled=(not is_owner)}}
+                <div class="input-group">
+                    <label class="group-setting-label">{{t "Who can manage user groups" }}</label>
+                    <div class="pill-container person_picker prop-element" id="id_realm_can_manage_all_groups" 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>
 
                 {{> ../dropdown_widget_with_label
                   widget_name="realm_can_add_custom_emoji_group"