user_groups: Allow setting and changing can_join_group setting.

Fixes part of #25938.

web/src/settings_components.ts

@@ -917,6 +917,7 @@ export function check_group_property_changed(elem: HTMLElement, group: UserGroup
     const current_val = get_group_property_value(property_name, group);
     let proposed_val;
     switch (property_name) {
+        case "can_join_group":
         case "can_manage_group": {
             const pill_widget = get_group_setting_widget(property_name);
             assert(pill_widget !== null);
@@ -1402,7 +1403,8 @@ export function initialize_disable_btn_hint_popover(
     tippy.default(util.the($btn_wrapper), tippy_opts);
 }
 
-const group_setting_widget_map = new Map<string, GroupSettingPillContainer | null>([
+export const group_setting_widget_map = new Map<string, GroupSettingPillContainer | null>([
+    ["can_join_group", null],
     ["can_manage_group", null],
 ]);
 
@@ -1446,7 +1448,7 @@ export function set_group_setting_widget_value(
 
 export type GroupSettingType = z.output<typeof group_setting_type_schema>;
 
-type group_setting_name = "can_manage_group";
+type group_setting_name = "can_manage_group" | "can_join_group";
 
 export function create_group_setting_widget({
     $pill_container,

web/src/settings_org.js

@@ -614,9 +614,10 @@ export function discard_group_property_element_changes(elem, group) {
     const property_name = settings_components.extract_property_name($elem);
     const property_value = settings_components.get_group_property_value(property_name, group);
 
+    const group_widget_settings = [...settings_components.group_setting_widget_map.keys()];
     if (property_name === "can_mention_group") {
         settings_components.set_dropdown_list_widget_setting_value(property_name, property_value);
-    } else if (property_name === "can_manage_group") {
+    } else if (group_widget_settings.includes(property_name)) {
         const pill_widget = settings_components.get_group_setting_widget(property_name);
         settings_components.set_group_setting_widget_value(pill_widget, property_value);
     } else if (property_value !== undefined) {

web/src/user_group_create.ts

@@ -29,6 +29,7 @@ export function get_name(): string | undefined {
 }
 
 let can_manage_group_widget: GroupSettingPillContainer | undefined;
+let can_join_group_widget: GroupSettingPillContainer | undefined;
 
 class UserGroupMembershipError {
     report_no_members_to_user_group(): void {
@@ -157,6 +158,10 @@ function create_user_group(): void {
     const can_manage_group =
         settings_components.get_group_setting_widget_value(can_manage_group_widget);
 
+    assert(can_join_group_widget !== undefined);
+    const can_join_group =
+        settings_components.get_group_setting_widget_value(can_join_group_widget);
+
     assert(settings_components.new_group_can_mention_group_widget !== null);
     const can_mention_group_value = settings_components.new_group_can_mention_group_widget.value();
     assert(can_mention_group_value !== undefined);
@@ -169,6 +174,7 @@ function create_user_group(): void {
         name: group_name,
         description,
         members: JSON.stringify(user_ids),
+        can_join_group: JSON.stringify(can_join_group),
         can_mention_group,
         can_manage_group: JSON.stringify(can_manage_group),
     };
@@ -249,5 +255,11 @@ export function set_up_handlers(): void {
         setting_type: "group",
     });
 
+    can_join_group_widget = settings_components.create_group_setting_widget({
+        $pill_container: $container.find(".can-join-group-container .pill-container"),
+        setting_name: "can_join_group",
+        setting_type: "group",
+    });
+
     user_group_components.setup_permissions_dropdown("can_mention_group", undefined, true);
 }

web/src/user_group_edit.js

@@ -170,13 +170,19 @@ function show_membership_settings(group) {
 function show_general_settings(group) {
     user_group_components.setup_permissions_dropdown("can_mention_group", group, false);
     const $edit_container = get_edit_container(group);
-    const $pill_container = $edit_container.find(".can-manage-group-container .pill-container");
     settings_components.create_group_setting_widget({
-        $pill_container,
+        $pill_container: $edit_container.find(".can-manage-group-container .pill-container"),
         setting_name: "can_manage_group",
         setting_type: "group",
         group,
     });
+
+    settings_components.create_group_setting_widget({
+        $pill_container: $edit_container.find(".can-join-group-container .pill-container"),
+        setting_name: "can_join_group",
+        setting_type: "group",
+        group,
+    });
     update_general_panel_ui(group);
 
     if (!page_params.development_environment) {

web/templates/user_group_settings/group_permissions.hbs

@@ -12,3 +12,13 @@
         </div>
     </div>
 </div>
+
+<div class="input-group can-join-group-container">
+    <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>

web/templates/user_group_settings/user_group_creation_form.hbs

@@ -29,6 +29,7 @@
                             </div>
 
                             {{> group_permissions
+                              can_join_group_widget_name="new_group_can_join_group"
                               can_mention_group_widget_name="new_group_can_mention_group" can_manage_group_widget_name="new_group_can_manage_group"
                               }}
                         </div>

web/templates/user_group_settings/user_group_settings.hbs

@@ -41,7 +41,7 @@
                     {{> ../settings/settings_save_discard_widget section_name="group-permissions" }}
                 </div>
 
-                {{> group_permissions can_mention_group_widget_name="can_mention_group" can_manage_group_widget_name="can_manage_group"}}
+                {{> group_permissions can_join_group_widget_name="can_join_group" can_mention_group_widget_name="can_mention_group" can_manage_group_widget_name="can_manage_group"}}
             </div>
 
             <div class="group_detail_box">