stream_settings: Show banner on successful stream creation.

This commit adds banner which is shown on successful stream
creation which contains a link to stream narrow. This banner
makes it more clear that stream was created successfully and
also makes it easy to navigate to the new stream.

Fixes #29171.

web/src/stream_edit.js

@@ -274,6 +274,15 @@ export function show_settings_for(node) {
     settings_org.set_message_retention_setting_dropdown(sub);
     stream_ui_updates.enable_or_disable_permission_settings_in_edit_panel(sub);
     setup_dropdown(sub, slim_sub);
+
+    $("#streams_overlay_container").on(
+        "click",
+        ".stream-creation-confirmation-banner .main-view-banner-close-button",
+        (e) => {
+            e.preventDefault();
+            $(e.target).parent().remove();
+        },
+    );
 }
 
 export function setup_stream_settings(node) {

web/src/stream_settings_ui.js

@@ -1,6 +1,7 @@
 import $ from "jquery";
 import _ from "lodash";
 
+import render_stream_creation_confirmation_banner from "../templates/modal_banner/stream_creation_confirmation_banner.hbs";
 import render_browse_streams_list from "../templates/stream_settings/browse_streams_list.hbs";
 import render_browse_streams_list_item from "../templates/stream_settings/browse_streams_list_item.hbs";
 import render_stream_settings from "../templates/stream_settings/stream_settings.hbs";
@@ -9,6 +10,7 @@ import render_stream_settings_overlay from "../templates/stream_settings/stream_
 import * as blueslip from "./blueslip";
 import * as browser_history from "./browser_history";
 import * as components from "./components";
+import * as compose_banner from "./compose_banner";
 import * as compose_recipient from "./compose_recipient";
 import * as compose_state from "./compose_state";
 import * as hash_parser from "./hash_parser";
@@ -231,6 +233,15 @@ export function add_sub_to_table(sub) {
         // ID isn't known yet.  These are appended to the top of the
         // list, so they are more visible.
         stream_ui_updates.row_for_stream_id(sub.stream_id).trigger("click");
+        const context = {
+            banner_type: compose_banner.SUCCESS,
+            classname: "stream_creation_confirmation",
+            stream_name: sub.name,
+            stream_url: hash_util.by_stream_url(sub.stream_id),
+        };
+        $("#stream_settings .stream-creation-confirmation-banner").html(
+            render_stream_creation_confirmation_banner(context),
+        );
         stream_create.reset_created_stream();
     }
     update_empty_left_panel_message();

web/templates/modal_banner/stream_creation_confirmation_banner.hbs

@@ -0,0 +1,8 @@
+{{#> modal_banner }}
+    <p class="banner_message">
+        {{#tr}}
+            Stream <z-link>#{stream_name}</z-link> created!
+            {{#*inline "z-link"}}<a class="stream_narrow_link" href="{{stream_url}}">{{> @partial-block}}</a>{{/inline}}
+        {{/tr}}
+    </p>
+{{/modal_banner}}

web/templates/stream_settings/stream_settings.hbs

@@ -28,7 +28,7 @@
 </div>
 <div class="subscription_settings" data-stream-id="{{sub.stream_id}}">
     <div class="inner-box">
-
+        <div class="stream-creation-confirmation-banner"></div>
         <div class="stream_section" data-stream-section="general">
             {{#with sub}}
             <div class="stream-settings-tip-container">