stream: Add conditional note to can_add_subscribers_group.

Fixes #33156.
If the stream is set to on the private settings for privacy, we add a
parenthesis text `must be subscribed`.
We had to use JS to change the string since just having a conditional in
the handlebars template would not ensure that the parenthesis text
appears or disappears on changing the value.

tools/lib/capitalization.py

@@ -177,6 +177,8 @@ IGNORED_PHRASES = [
     r"hours",
     r"days",
     r"weeks",
+    # Used in "Who can subscribe others to this channel" label.
+    r"must be subscribed",
 ]
 
 # Sort regexes in descending order of their lengths. As a result, the

web/src/stream_create.ts

@@ -512,6 +512,7 @@ export function show_new_stream_modal(): void {
     // set default state for "announce stream" and "default stream" option.
     $("#stream_creation_form .default-stream input").prop("checked", false);
     update_announce_stream_state();
+    stream_ui_updates.update_can_add_subscribers_group_label($("#stream-creation"));
     stream_ui_updates.update_default_stream_and_stream_privacy_state($("#stream-creation"));
     clear_error_display();
 }
@@ -542,6 +543,10 @@ export function set_up_handlers(): void {
     $container.on("change", ".stream-privacy-values input", () => {
         update_announce_stream_state();
         stream_ui_updates.update_default_stream_and_stream_privacy_state($container);
+        // We update the label on `can_add_subscribers_groups` in the
+        // listener attached to `.stream-privacy-values input` on
+        // `#channels_overlay_container` which covers both stream
+        // create and edit scenarios.
     });
 
     $container.on("change", ".default-stream input", () => {

web/src/stream_edit.ts

@@ -279,6 +279,7 @@ export function show_settings_for(node: HTMLElement): void {
     settings_org.set_message_retention_setting_dropdown(sub);
     stream_ui_updates.enable_or_disable_permission_settings_in_edit_panel(sub);
     setup_group_setting_widgets(slim_sub);
+    stream_ui_updates.update_can_add_subscribers_group_label($edit_container);
 
     $("#channels_overlay_container").on(
         "click",
@@ -722,6 +723,11 @@ export function initialize(): void {
         },
     );
 
+    // This takes care of both stream create and edit.
+    $("#channels_overlay_container").on("change", ".stream-privacy-values input", () => {
+        stream_ui_updates.update_can_add_subscribers_group_label($("#channels_overlay_container"));
+    });
+
     $("#channels_overlay_container").on(
         "click",
         ".subsection-header .subsection-changes-save button",

web/src/stream_ui_updates.ts

@@ -3,6 +3,7 @@ import assert from "minimalistic-assert";
 import type * as tippy from "tippy.js";
 
 import render_announce_stream_checkbox from "../templates/stream_settings/announce_stream_checkbox.hbs";
+import render_stream_can_add_subscribers_group_label from "../templates/stream_settings/stream_can_add_subscribers_group_label.hbs";
 import render_stream_privacy_icon from "../templates/stream_settings/stream_privacy_icon.hbs";
 import render_stream_settings_tip from "../templates/stream_settings/stream_settings_tip.hbs";
 
@@ -257,6 +258,17 @@ export function update_default_stream_and_stream_privacy_state($container: JQuer
     update_private_stream_privacy_option_state($container, is_default_stream);
 }
 
+export function update_can_add_subscribers_group_label($container: JQuery): void {
+    const privacy_type = $container.find("input[type=radio][name=privacy]:checked").val();
+    const is_invite_only =
+        privacy_type === "invite-only" || privacy_type === "invite-only-public-history";
+
+    const $can_add_subscribers_group_label = $("#group_setting_label_can_add_subscribers_group");
+    $can_add_subscribers_group_label.html(
+        render_stream_can_add_subscribers_group_label({is_invite_only}),
+    );
+}
+
 export function enable_or_disable_permission_settings_in_edit_panel(
     sub: SettingsSubscription,
 ): void {

web/templates/settings/group_setting_value_pill_input.hbs

@@ -1,5 +1,8 @@
 <div class="input-group">
-    <label class="group-setting-label">
+    {{!-- We are using snake case for the id since setting_name is always
+    in snake case and it would be weird to have the resultant id be a mix
+    of two types of cases. --}}
+    <label class="group-setting-label" id="group_setting_label_{{setting_name}}">
         {{label}}
         {{#if label_parens_text}}(<i>{{label_parens_text}}</i>){{/if}}
         {{#if help_link}}

web/templates/stream_settings/stream_can_add_subscribers_group_label.hbs

@@ -0,0 +1,6 @@
+{{t 'Who can subscribe others to this channel'}}
+{{#if is_invite_only}}
+<i>
+    ({{t 'must be subscribed'}})
+</i>
+{{/if}}