Fix #20797: Added "No Matching Streams." when no result is found.

web/src/sidebar_ui.ts

@@ -13,6 +13,7 @@ import * as settings_data from "./settings_data";
 import * as spectators from "./spectators";
 import {current_user} from "./state_data";
 import {user_settings} from "./user_settings";
+import { getNoStreamFound } from "./stream_list";
 
 export let left_sidebar_expanded_as_overlay = false;
 export let right_sidebar_expanded_as_overlay = false;
@@ -148,6 +149,7 @@ export function initialize(): void {
 
 export function initialize_left_sidebar(): void {
     const rendered_sidebar = render_left_sidebar({
+        no_stream_found: getNoStreamFound,
         is_guest: current_user.is_guest,
         development_environment: page_params.development_environment,
         is_inbox_home_view:

web/src/stream_list.ts

@@ -32,6 +32,7 @@ import type {FullUnreadCountsData, StreamCountInfo} from "./unread";
 
 let pending_stream_list_rerender = false;
 let zoomed_in = false;
+let no_stream_found = false;
 
 export let stream_cursor: ListCursor<number>;
 
@@ -357,8 +358,8 @@ export function get_stream_li(stream_id: number): JQuery | undefined {
 
 export function update_subscribe_to_more_streams_link(): void {
     const can_subscribe_stream_count = stream_data
-        .unsubscribed_subs()
-        .filter((sub) => stream_data.can_toggle_subscription(sub)).length;
+    .unsubscribed_subs()
+    .filter((sub) => stream_data.can_toggle_subscription(sub)).length;
 
     const can_create_streams =
         settings_data.user_can_create_private_streams() ||
@@ -879,12 +880,14 @@ export function set_event_handlers({
         const stream_id = stream_cursor.get_key();
 
         if (stream_id === undefined) {
-            // This can happen for empty searches, no need to warn.
-            return;
+            no_stream_found = true;
         }
+        else {
+            clear_and_hide_search();
+            on_stream_click(stream_id, "sidebar enter key");
 
-        clear_and_hide_search();
-        on_stream_click(stream_id, "sidebar enter key");
+        }
+        return;
     }
 
     keydown_util.handle({
@@ -1021,3 +1024,7 @@ export function get_current_stream_li(): JQuery | undefined {
 
     return $stream_li;
 }
+
+export function getNoStreamFound(): boolean {
+    return no_stream_found;
+}

web/styles/left_sidebar.css

@@ -100,6 +100,12 @@ li.show-more-topics {
     max-width: 18em;
 }
 
+#stream-not-found {
+    margin-left: 10px;
+    color: hsl(0deg, 0%, 67%);
+    font-style: italic;
+}
+
 #stream_filters {
     overflow: visible;
     margin-bottom: 5px;

web/templates/left_sidebar.hbs

@@ -175,9 +175,17 @@
                     </button>
                 </div>
             </div>
+
+            <div class="stream-list-filter">
+                {{#if no_stream_found}}
+                    <p id="stream-not-found">{{t 'No matching streams.'}}</p>
+                {{/if}}
+            </div>
+
             <div id="topics_header">
                 <a class="show-all-streams" tabindex="0">{{t 'Back to channels' }}</a> <span class="unread_count"></span>
             </div>
+
             <div id="stream-filters-container">
                 <ul id="stream_filters" class="filters"></ul>
                 {{#unless is_guest }}

web/tests/stream_search.test.js

@@ -189,3 +189,11 @@ run_test("expanding_sidebar", () => {
         "sidebar_ui.show_streamlist_sidebar",
     ]);
 });
+
+run_test("empty_search", () => {
+    const $input = $(".stream-list-filter");
+    $input.val("hello");
+    stream_list.initiate_search()
+
+    assert.ok($("#stream-not-found"));
+});