From 072da3b0d39054cdae22c5c8db5b101451e684d2 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Wed, 30 Oct 2024 08:46:57 +0530
Subject: [PATCH] settings: Extract template file for group setting pill UI.

This helps in writing same code again and again for different
settings.

Can also update group settings to use this template in further
commits.
---
 .../group_setting_value_pill_input.hbs        |  8 +++
 .../organization_permissions_admin.hbs        | 60 +++++--------------
 2 files changed, 23 insertions(+), 45 deletions(-)
 create mode 100644 web/templates/settings/group_setting_value_pill_input.hbs

diff --git a/web/templates/settings/group_setting_value_pill_input.hbs b/web/templates/settings/group_setting_value_pill_input.hbs
new file mode 100644
index 0000000000..b4b8371f89
--- /dev/null
+++ b/web/templates/settings/group_setting_value_pill_input.hbs
@@ -0,0 +1,8 @@
+<div class="input-group">
+    <label class="group-setting-label">{{label}}</label>
+    <div class="pill-container person_picker prop-element" id="id_{{setting_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>
diff --git a/web/templates/settings/organization_permissions_admin.hbs b/web/templates/settings/organization_permissions_admin.hbs
index 666eff06e5..cc353f326c 100644
--- a/web/templates/settings/organization_permissions_admin.hbs
+++ b/web/templates/settings/organization_permissions_admin.hbs
@@ -23,15 +23,9 @@
                     </select>
                 </div>
 
-                <div class="input-group">
-                    <label class="group-setting-label">{{t "Who can create reusable invitation links" }}</label>
-                    <div class="pill-container person_picker prop-element" id="id_realm_create_multiuse_invite_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>
+                {{> group_setting_value_pill_input
+                  setting_name="realm_create_multiuse_invite_group"
+                  label=(t 'Who can create reusable invitation links')}}
 
                 <div class="input-group">
                     <label for="realm_org_join_restrictions" class="settings-field-label">{{t "Restrict email domains of new users" }}</label>
@@ -73,15 +67,9 @@
                 {{> settings_save_discard_widget section_name="stream-permissions" }}
             </div>
             <div class="m-10 inline-block organization-permissions-parent">
-                <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>
+                {{> group_setting_value_pill_input
+                  setting_name="realm_can_create_public_channel_group"
+                  label=(t 'Who can create public channels')}}
 
                 {{> upgrade_tip_widget }}
                 {{> settings_checkbox
@@ -97,15 +85,9 @@
                   label=(t 'Who can create web-public 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>
+                {{> group_setting_value_pill_input
+                  setting_name="realm_can_create_private_channel_group"
+                  label=(t 'Who can create private channels')}}
 
                 <div class="input-group">
                     <label for="realm_invite_to_stream_policy" class="settings-field-label">{{t "Who can add users to channels" }}</label>
@@ -349,25 +331,13 @@
                     </select>
                 </div>
 
-                <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>
+                {{> group_setting_value_pill_input
+                  setting_name="realm_can_create_groups"
+                  label=(t 'Who can create user groups')}}
 
-                <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>
+                {{> group_setting_value_pill_input
+                  setting_name="realm_can_manage_all_groups"
+                  label=(t 'Who can manage user groups')}}
 
                 {{> ../dropdown_widget_with_label
                   widget_name="realm_can_add_custom_emoji_group"