settings: Show stream and group info in a banner at the top.

Instead of having information about streams and groups below the
create button, we show that in a banner at the top irrespective
of whether user has permission to create them or not.

Fixes part of #32212.

web/src/stream_settings_ui.js

@@ -2,6 +2,7 @@ import $ from "jquery";
 import _ from "lodash";
 
 import render_stream_creation_confirmation_banner from "../templates/modal_banner/stream_creation_confirmation_banner.hbs";
+import render_stream_info_banner from "../templates/modal_banner/stream_info_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";
@@ -705,6 +706,18 @@ export function setup_page(callback) {
             throttled_redraw_left_panel();
         });
 
+        const context = {
+            banner_type: compose_banner.INFO,
+            classname: "stream_info",
+            hide_close_button: true,
+            button_text: $t({defaultMessage: "Learn more"}),
+            button_link: "/help/introduction-to-channels",
+        };
+
+        $("#channels_overlay_container .nothing-selected .stream-info-banner").html(
+            render_stream_info_banner(context),
+        );
+
         // When hitting Enter in the stream creation box, we open the
         // "create stream" UI with the stream name prepopulated.  This
         // is only useful if the user has permission to create

web/src/user_group_edit.js

@@ -1,6 +1,7 @@
 import $ from "jquery";
 
 import render_confirm_delete_user from "../templates/confirm_dialog/confirm_delete_user.hbs";
+import render_group_info_banner from "../templates/modal_banner/user_group_info_banner.hbs";
 import render_browse_user_groups_list_item from "../templates/user_group_settings/browse_user_groups_list_item.hbs";
 import render_cannot_deactivate_group_banner from "../templates/user_group_settings/cannot_deactivate_group_banner.hbs";
 import render_change_user_group_info_modal from "../templates/user_group_settings/change_user_group_info_modal.hbs";
@@ -11,6 +12,7 @@ import * as blueslip from "./blueslip";
 import * as browser_history from "./browser_history";
 import * as channel from "./channel";
 import * as components from "./components";
+import * as compose_banner from "./compose_banner";
 import * as confirm_dialog from "./confirm_dialog";
 import * as dialog_widget from "./dialog_widget";
 import * as hash_util from "./hash_util";
@@ -866,6 +868,18 @@ export function setup_page(callback) {
         );
         $groups_overlay_container.html(groups_overlay_html);
 
+        const context = {
+            banner_type: compose_banner.INFO,
+            classname: "group_info",
+            hide_close_button: true,
+            button_text: $t({defaultMessage: "Learn more"}),
+            button_link: "/help/user-groups",
+        };
+
+        $("#groups_overlay_container .nothing-selected .group-info-banner").html(
+            render_group_info_banner(context),
+        );
+
         // Initially as the overlay is build with empty right panel,
         // active_group_id is undefined.
         user_group_components.reset_active_group_id();

web/styles/subscriptions.css

@@ -365,9 +365,9 @@ h4.user_group_setting_subsection_title {
 
     .left .no-streams-to-show,
     .left .no-groups-to-show,
-    .right .nothing-selected {
+    .right .nothing-selected .create-stream-button-container,
+    .right .nothing-selected .create-group-button-container {
         display: block;
-        margin-top: calc(45vh - 75px);
         text-align: center;
         font-size: 1em;
         margin-left: 2em;
@@ -378,6 +378,28 @@ h4.user_group_setting_subsection_title {
         }
     }
 
+    .left .no-streams-to-show,
+    .left .no-groups-to-show {
+        margin-top: calc(45vh - 75px);
+    }
+
+    .right .nothing-selected {
+        padding: 5px 5px 0;
+
+        .stream-info-banner a,
+        .group-info-banner a {
+            color: inherit;
+        }
+
+        .create-stream-button-container {
+            margin-top: calc(45vh - 128px);
+        }
+
+        .create-group-button-container {
+            margin-top: calc(45vh - 134px);
+        }
+    }
+
     .left {
         border-right: 1px solid var(--color-border-modal-bar);
 
@@ -398,12 +420,11 @@ h4.user_group_setting_subsection_title {
     .right {
         width: calc(50% + 1px);
 
-        .nothing-selected {
-            & button {
-                padding: 6px 10px 8px;
-                display: block;
-                margin: 0 auto 10px;
-            }
+        .nothing-selected .create_stream_button,
+        .nothing-selected .create_user_group_button {
+            padding: 6px 10px 8px;
+            display: block;
+            margin: 0 auto 10px;
         }
 
         .display-type {

web/templates/modal_banner/modal_banner.hbs

@@ -6,8 +6,14 @@
         <div class="banner_content">{{> @partial-block}}</div>
         {{/if}}
         {{#if button_text}}
+        {{#if button_link}}
+        <a href="{{button_link}}">
+            <button class="main-view-banner-action-button{{#if hide_close_button}} right_edge{{/if}}">{{button_text}}</button>
+        </a>
+        {{else}}
         <button class="main-view-banner-action-button{{#if hide_close_button}} right_edge{{/if}}">{{button_text}}</button>
         {{/if}}
+        {{/if}}
     </div>
     {{#unless hide_close_button}}
     <a role="button" class="zulip-icon zulip-icon-close main-view-banner-close-button"></a>

web/templates/modal_banner/stream_info_banner.hbs

@@ -0,0 +1,5 @@
+{{#> modal_banner }}
+    <p class="banner_message">
+        {{#tr}}Channels organize conversations based on who needs to see them.{{/tr}}
+    </p>
+{{/modal_banner}}

web/templates/modal_banner/user_group_info_banner.hbs

@@ -0,0 +1,5 @@
+{{#> modal_banner }}
+    <p class="banner_message">
+        {{#tr}}User groups offer a flexible way to manage permissions in your organization.{{/tr}}
+    </p>
+{{/modal_banner}}

web/templates/stream_settings/stream_settings_overlay.hbs

@@ -63,19 +63,15 @@
                     <div id="stream_settings_title" class="stream-info-title">{{t 'Channel settings' }}</div>
                 </div>
                 <div class="nothing-selected">
-                    <button type="button" class="create_stream_button animated-purple-button" {{#unless can_create_streams}}disabled{{/unless}}>{{t 'Create channel' }}</button>
-                    {{#if can_create_streams}}
-                    <span class="settings-empty-option-text">
-                        {{#tr}}
-                            First time? Read our <z-link>guidelines</z-link> for creating and naming channels.
-                            {{#*inline "z-link"}}<a href="/help/create-channels" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
-                        {{/tr}}
-                    </span>
-                    {{else}}
-                    <span class="settings-empty-option-text">
-                        {{t 'You do not have permission to create channels in this organization.' }}
-                    </span>
-                    {{/if}}
+                    <div class="stream-info-banner"></div>
+                    <div class="create-stream-button-container">
+                        <button type="button" class="create_stream_button animated-purple-button" {{#unless can_create_streams}}disabled{{/unless}}>{{t 'Create channel' }}</button>
+                        {{#unless can_create_streams}}
+                        <span class="settings-empty-option-text">
+                            {{t 'You do not have permission to create channels in this organization.' }}
+                        </span>
+                        {{/unless}}
+                    </div>
                 </div>
                 <div id="stream_settings" class="settings" data-simplebar data-simplebar-tab-index="-1" data-simplebar-auto-hide="false">
                     {{!-- edit stream here --}}

web/templates/user_group_settings/user_group_settings_overlay.hbs

@@ -50,19 +50,15 @@
                     <div id="user_group_settings_title" class="user-group-info-title">{{t 'User group settings' }}</div>
                 </div>
                 <div class="nothing-selected">
-                    <button type="button" class="create_user_group_button animated-purple-button" {{#unless can_create_user_groups}}disabled{{/unless}}>{{t 'Create user group' }}</button>
-                    {{#if can_create_user_groups}}
-                    <span class="settings-empty-option-text">
-                        {{#tr}}
-                            First time? Read our <z-link>guidelines</z-link> for creating user groups.
-                            {{#*inline "z-link"}}<a href="/help/user-groups" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
-                        {{/tr}}
-                    </span>
-                    {{else}}
-                    <span class="settings-empty-option-text">
-                        {{t 'You do not have permission to create user groups.' }}
-                    </span>
-                    {{/if}}
+                    <div class="group-info-banner"></div>
+                    <div class="create-group-button-container">
+                        <button type="button" class="create_user_group_button animated-purple-button" {{#unless can_create_user_groups}}disabled{{/unless}}>{{t 'Create user group' }}</button>
+                        {{#unless can_create_user_groups}}
+                        <span class="settings-empty-option-text">
+                            {{t 'You do not have permission to create user groups.' }}
+                        </span>
+                        {{/unless}}
+                    </div>
                 </div>
                 <div id="user_group_settings" class="settings" data-simplebar data-simplebar-tab-index="-1" data-simplebar-auto-hide="false">
                     {{!-- edit user group here --}}