streams: Make stream settings and create stream UI more consistent.

This commit make changes in create stream panel by moving
announce stream option below stream description and adds a
"Stream permissions" section heading just above
"Who can access the stream?" and also rewords the text
"Announce stream".

Also now announce stream option is only shown if the user creating
stream have access to the announcement stream name. When option
is not shown, default behaviour is to announce public and
web-public streams.

Fixes #23327.

docs/testing/manual-testing.md

@@ -437,7 +437,7 @@ Create new public stream "public1" and add Hamlet:
 
 - Type "public1" in the text box and then click "Create new stream."
 - Select "People must be invited" and then verify you can't
-  select "Announce stream".
+  select "Announce new stream in #[announcement stream]".
 - Select "Anyone can join" again to make it be public.
 - Check the checkbox for Hamlet.
 - Hit the "Create" button.

help/create-a-stream.md

@@ -36,11 +36,10 @@ There are several parameters you can set while creating a stream. All but
 * **Stream description**: Helps users decide whether to subscribe when they
   are browsing streams.
 
-* **Who can access the stream?**: See [Stream permissions](/help/stream-permissions).
+* **Announce new stream in the [stream configured by your organization](/help/configure-notification-bot#new-stream-announcements)**:
+  Posts a message in the "new streams" topic advertising the new stream.
 
-* **Announce stream**: Posts a message to `#general` advertising the new
-  stream. Organization administrators can change the stream used for [stream
-  creation announcements](/help/configure-notification-bot#new-stream-announcements).
+* **Who can access the stream?**: See [Stream permissions](/help/stream-permissions).
 
 * **Who can post to the stream?**: See [Stream permissions](/help/stream-permissions).
 

web/src/server_events_dispatch.js

@@ -64,6 +64,7 @@ import * as stream_events from "./stream_events";
 import * as stream_list from "./stream_list";
 import * as stream_settings_ui from "./stream_settings_ui";
 import * as stream_topic_history from "./stream_topic_history";
+import * as stream_ui_updates from "./stream_ui_updates";
 import * as sub_store from "./sub_store";
 import * as submessage from "./submessage";
 import * as typing_events from "./typing_events";
@@ -219,7 +220,7 @@ export function dispatch_normal_event(event) {
                 move_messages_between_streams_policy: noop,
                 name: notifications.redraw_title,
                 name_changes_disabled: settings_account.update_name_change_display,
-                notifications_stream_id: noop,
+                notifications_stream_id: stream_ui_updates.update_announce_stream_option,
                 org_type: noop,
                 private_message_policy: noop,
                 send_welcome_emails: noop,

web/src/stream_create.js

@@ -123,7 +123,7 @@ let stream_announce_previous_value =
 // Within the new stream modal...
 function update_announce_stream_state() {
     // If there is no notifications_stream, we simply hide the widget.
-    if (!stream_data.realm_has_notifications_stream()) {
+    if (stream_data.get_notifications_stream() === "") {
         $("#announce-new-stream").hide();
         return;
     }
@@ -235,9 +235,18 @@ function create_stream() {
 
     data.message_retention_days = JSON.stringify(message_retention_selection);
 
-    const announce =
-        stream_data.realm_has_notifications_stream() &&
+    let announce =
+        stream_data.get_notifications_stream() !== "" &&
         $("#announce-new-stream input").prop("checked");
+
+    if (
+        stream_data.get_notifications_stream() === "" &&
+        stream_data.realm_has_notifications_stream() &&
+        !invite_only
+    ) {
+        announce = true;
+    }
+
     data.announce = JSON.stringify(announce);
 
     // TODO: We can eliminate the user_ids -> principals conversion

web/src/stream_settings_ui.js

@@ -677,7 +677,11 @@ export function setup_page(callback) {
         // TODO: Ideally we'd indicate in some way what stream types
         // the user can create, by showing other options as disabled.
         const stream_privacy_policy = stream_data.stream_privacy_policy_values.public.code;
+        const notifications_stream = stream_data.get_notifications_stream();
+        const notifications_stream_sub = stream_data.get_sub_by_name(notifications_stream);
+
         const template_data = {
+            notifications_stream_sub,
             ask_to_announce_stream: true,
             can_create_streams:
                 settings_data.user_can_create_private_streams() ||

web/src/stream_ui_updates.js

@@ -1,5 +1,6 @@
 import $ from "jquery";
 
+import render_announce_stream_checkbox from "../templates/stream_settings/announce_stream_checkbox.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";
 
@@ -155,6 +156,24 @@ export function enable_or_disable_permission_settings_in_edit_panel(sub) {
     );
 }
 
+export function update_announce_stream_option() {
+    if (!hash_util.is_create_new_stream_narrow()) {
+        return;
+    }
+    if (stream_data.get_notifications_stream() === "") {
+        $("#announce-new-stream").hide();
+        return;
+    }
+    $("#announce-new-stream").show();
+
+    const notifications_stream = stream_data.get_notifications_stream();
+    const notifications_stream_sub = stream_data.get_sub_by_name(notifications_stream);
+    const rendered_announce_stream = render_announce_stream_checkbox({
+        notifications_stream_sub,
+    });
+    $("#announce-new-stream").expectOne().html(rendered_announce_stream);
+}
+
 export function update_stream_privacy_icon_in_settings(sub) {
     if (!hash_util.is_editing_stream(sub.stream_id)) {
         return;

web/templates/stream_settings/announce_stream_checkbox.hbs

@@ -0,0 +1,13 @@
+<label class="checkbox">
+    <input type="checkbox" name="announce" value="announce" checked />
+    <span></span>
+    {{t "Announce new stream in"}}
+    {{#if notifications_stream_sub}}
+        <strong>
+            {{> ../inline_decorated_stream_name
+              stream=notifications_stream_sub
+              }}
+        </strong>
+    {{/if}}
+    {{> ../help_link_widget link="/help/configure-notification-bot#new-stream-announcements"}}
+</label>

web/templates/stream_settings/stream_creation_form.hbs

@@ -20,8 +20,14 @@
                 <input type="text" name="stream_description" id="create_stream_description" class="settings_text_input"
                   placeholder="{{t 'Stream description' }}" value="" autocomplete="off" maxlength="{{ max_stream_description_length }}" />
             </section>
+            {{#if ask_to_announce_stream}}
+                <div id="announce-new-stream">
+                    {{>announce_stream_checkbox }}
+                </div>
+            {{/if}}
             <section class="block" id="make-invite-only">
                 <div class="stream-types">
+                    <h3 class="stream_setting_subsection_title">{{t "Stream permissions" }}</h3>
                     {{> stream_types
                       stream_post_policy=stream_post_policy_values.everyone.code
                       is_stream_edit=false

web/templates/stream_settings/stream_types.hbs

@@ -16,17 +16,6 @@
     </div>
 </div>
 
-{{#if ask_to_announce_stream}}
-    <div id="announce-new-stream">
-        <label class="checkbox">
-            <input type="checkbox" name="announce" value="announce" checked />
-            <span></span>
-            {{t "Announce stream" }}
-        </label>
-        <span class="fa fa-info-circle settings-info-icon" aria-hidden="true" id="announce-stream-docs"></span>
-    </div>
-{{/if}}
-
 <div class="input-group">
     <label class="dropdown-title">{{t 'Who can post to the stream?'}}
         {{> ../help_link_widget link="/help/stream-sending-policy" }}