From 3af84d6e693223064dc86689b672fe22bd261585 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Mon, 18 Nov 2024 19:08:57 +0530
Subject: [PATCH] group-settings: Use group_setting_value_pill_input template.

We now use group_setting_value_pill_input template for user
group permission settings to avoid duplicate code.
---
 web/src/user_group_create.ts                  | 11 ++--
 web/src/user_group_edit.js                    | 11 ++--
 .../user_group_settings/group_permissions.hbs | 65 ++++++-------------
 .../user_group_creation_form.hbs              |  8 +--
 .../user_group_settings.hbs                   |  8 +--
 5 files changed, 32 insertions(+), 71 deletions(-)

diff --git a/web/src/user_group_create.ts b/web/src/user_group_create.ts
index e1dd73c03c..00335b100b 100644
--- a/web/src/user_group_create.ts
+++ b/web/src/user_group_create.ts
@@ -260,28 +260,27 @@ export function set_up_handlers(): void {
     settings_components.enable_opening_typeahead_on_clicking_label($container);
 
     can_add_members_group_widget = settings_components.create_group_setting_widget({
-        $pill_container: $container.find(".can-add-members-group-container .pill-container"),
+        $pill_container: $("#id_new_group_can_add_members_group"),
         setting_name: "can_add_members_group",
     });
 
-    const $pill_container = $container.find(".can-manage-group-container .pill-container");
     can_manage_group_widget = settings_components.create_group_setting_widget({
-        $pill_container,
+        $pill_container: $("#id_new_group_can_manage_group"),
         setting_name: "can_manage_group",
     });
 
     can_join_group_widget = settings_components.create_group_setting_widget({
-        $pill_container: $container.find(".can-join-group-container .pill-container"),
+        $pill_container: $("#id_new_group_can_join_group"),
         setting_name: "can_join_group",
     });
 
     can_leave_group_widget = settings_components.create_group_setting_widget({
-        $pill_container: $container.find(".can-leave-group-container .pill-container"),
+        $pill_container: $("#id_new_group_can_leave_group"),
         setting_name: "can_leave_group",
     });
 
     can_mention_group_widget = settings_components.create_group_setting_widget({
-        $pill_container: $container.find(".can-mention-group-container .pill-container"),
+        $pill_container: $("#id_new_group_can_mention_group"),
         setting_name: "can_mention_group",
     });
 }
diff --git a/web/src/user_group_edit.js b/web/src/user_group_edit.js
index e2b126ba8e..ff911ceca9 100644
--- a/web/src/user_group_edit.js
+++ b/web/src/user_group_edit.js
@@ -154,33 +154,32 @@ function show_membership_settings(group) {
 }
 
 function show_general_settings(group) {
-    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"),
+        $pill_container: $("#id_can_add_members_group"),
         setting_name: "can_add_members_group",
         group,
     });
 
     settings_components.create_group_setting_widget({
-        $pill_container: $edit_container.find(".can-manage-group-container .pill-container"),
+        $pill_container: $("#id_can_manage_group"),
         setting_name: "can_manage_group",
         group,
     });
 
     settings_components.create_group_setting_widget({
-        $pill_container: $edit_container.find(".can-join-group-container .pill-container"),
+        $pill_container: $("#id_can_join_group"),
         setting_name: "can_join_group",
         group,
     });
 
     settings_components.create_group_setting_widget({
-        $pill_container: $edit_container.find(".can-leave-group-container .pill-container"),
+        $pill_container: $("#id_can_leave_group"),
         setting_name: "can_leave_group",
         group,
     });
 
     settings_components.create_group_setting_widget({
-        $pill_container: $edit_container.find(".can-mention-group-container .pill-container"),
+        $pill_container: $("#id_can_mention_group"),
         setting_name: "can_mention_group",
         group,
     });
diff --git a/web/templates/user_group_settings/group_permissions.hbs b/web/templates/user_group_settings/group_permissions.hbs
index a1167e510a..7f95179973 100644
--- a/web/templates/user_group_settings/group_permissions.hbs
+++ b/web/templates/user_group_settings/group_permissions.hbs
@@ -1,49 +1,24 @@
-<div class="input-group can-manage-group-container">
-    <label class="group-setting-label">{{t "Who can administer this group" }}</label>
-    <div class="pill-container person_picker prop-element" id="id_{{can_manage_group_widget_name}}" 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>
+{{> ../settings/group_setting_value_pill_input
+  setting_name="can_manage_group"
+  label=(t 'Who can administer this group')
+  prefix=prefix }}
 
-<div class="input-group can-mention-group-container">
-    <label class="group-setting-label">{{t "Who can mention this group" }}</label>
-    <div class="pill-container person_picker prop-element" id="id_{{can_mention_group_widget_name}}" 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>
+{{> ../settings/group_setting_value_pill_input
+  setting_name="can_mention_group"
+  label=(t 'Who can mention this group')
+  prefix=prefix }}
 
-<div class="input-group can-add-members-group-container">
-    <label class="group-setting-label">{{t "Who can add members to this group" }}</label>
-    <div class="pill-container person_picker prop-element" id="id_{{can_add_members_group_widget_name}}" 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>
+{{> ../settings/group_setting_value_pill_input
+  setting_name="can_add_members_group"
+  label=(t 'Who can add members to this group')
+  prefix=prefix }}
 
-<div class="input-group can-join-group-container">
-    <label class="group-setting-label">{{t "Who can join this group" }}</label>
-    <div class="pill-container person_picker prop-element" id="id_{{can_join_group_widget_name}}" 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>
+{{> ../settings/group_setting_value_pill_input
+  setting_name="can_join_group"
+  label=(t 'Who can join this group')
+  prefix=prefix }}
 
-<div class="input-group can-leave-group-container">
-    <label class="group-setting-label">{{t "Who can leave this group" }}</label>
-    <div class="pill-container person_picker prop-element" id="id_{{can_leave_group_widget_name}}" 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>
+{{> ../settings/group_setting_value_pill_input
+  setting_name="can_leave_group"
+  label=(t 'Who can leave this group')
+  prefix=prefix }}
diff --git a/web/templates/user_group_settings/user_group_creation_form.hbs b/web/templates/user_group_settings/user_group_creation_form.hbs
index 2cec196496..6236919246 100644
--- a/web/templates/user_group_settings/user_group_creation_form.hbs
+++ b/web/templates/user_group_settings/user_group_creation_form.hbs
@@ -28,13 +28,7 @@
                                 </h3>
                             </div>
 
-                            {{> group_permissions
-                              can_add_members_group_widget_name="new_group_can_add_members_group"
-                              can_join_group_widget_name="new_group_can_join_group"
-                              can_leave_group_widget_name="new_group_can_leave_group"
-                              can_mention_group_widget_name="new_group_can_mention_group"
-                              can_manage_group_widget_name="new_group_can_manage_group"
-                              }}
+                            {{> group_permissions prefix="id_new_group_"}}
                         </div>
                     </section>
                 </div>
diff --git a/web/templates/user_group_settings/user_group_settings.hbs b/web/templates/user_group_settings/user_group_settings.hbs
index 647593e33c..90162fd053 100644
--- a/web/templates/user_group_settings/user_group_settings.hbs
+++ b/web/templates/user_group_settings/user_group_settings.hbs
@@ -43,13 +43,7 @@
                     {{> ../settings/settings_save_discard_widget section_name="group-permissions" }}
                 </div>
 
-                {{> group_permissions
-                  can_add_members_group_widget_name="can_add_members_group"
-                  can_join_group_widget_name="can_join_group"
-                  can_leave_group_widget_name="can_leave_group"
-                  can_mention_group_widget_name="can_mention_group"
-                  can_manage_group_widget_name="can_manage_group"
-                  }}
+                {{> group_permissions prefix="id_"}}
             </div>
 
             <div class="group_detail_box">