empty_feed_notice: Show only query words for empty search results.

Previously, we included channel, topic, sender name and search
qeries (if present) in the empty feed banner.

With this commit, we will now not include channel, topic and sender
name and we only display the search queries when there are excluded
stop words.

Fixes: #34872

web/src/narrow_banner.ts

@@ -82,7 +82,6 @@ const MUTED_TOPICS_IN_CHANNEL_EMPTY_BANNER = {
 const NO_SEARCH_RESULTS_TITLE = $t({defaultMessage: "No search results."});
 
 function empty_search_query_banner(current_filter: Filter): NarrowBannerData {
-    // when search bar contains multiple filters, only retrieve search queries
     const search_query = current_filter.operands("search")[0];
     const query_words = search_query!.split(" ");
 
@@ -91,20 +90,6 @@ function empty_search_query_banner(current_filter: Filter): NarrowBannerData {
         has_stop_word: false,
     };
 
-    // Add in stream:foo and topic:bar if present
-    if (current_filter.has_operator("channel") || current_filter.has_operator("topic")) {
-        const stream_id = current_filter.operands("channel")[0];
-        const topic = current_filter.operands("topic")[0];
-        if (stream_id) {
-            const stream_name = stream_data.get_valid_sub_by_id_string(stream_id).name;
-            search_string_result.stream_query = stream_name;
-        }
-        if (topic !== undefined) {
-            search_string_result.topic_query = util.get_final_topic_display_name(topic);
-            search_string_result.is_empty_string_topic = topic === "";
-        }
-    }
-
     // Gather information about each query word
     for (const query_word of query_words) {
         if (realm.stop_words.includes(query_word)) {
@@ -121,10 +106,15 @@ function empty_search_query_banner(current_filter: Filter): NarrowBannerData {
         }
     }
 
-    return {
+    // We only show description of search query
-        title: NO_SEARCH_RESULTS_TITLE,
+    // when there are excluded stop words.
-        search_data: search_string_result,
+    if (search_string_result.has_stop_word) {
-    };
+        return {
+            title: NO_SEARCH_RESULTS_TITLE,
+            search_data: search_string_result,
+        };
+    }
+    return {title: NO_SEARCH_RESULTS_TITLE};
 }
 
 export function pick_empty_narrow_banner(current_filter: Filter): NarrowBannerData {

web/src/narrow_error.ts

@@ -8,9 +8,6 @@ type QueryWord = {
 export type SearchData = {
     query_words: QueryWord[];
     has_stop_word: boolean;
-    stream_query?: string;
-    topic_query?: string;
-    is_empty_string_topic?: boolean;
 };
 
 export type NarrowBannerData = {

web/templates/empty_feed_notice.hbs

@@ -1,18 +1,9 @@
 <div class="empty_feed_notice">
     <h4 class="empty-feed-notice-title"> {{ title }} </h4>
-    <div class="empty-feed-notice-description">
+    {{#if search_data}}
-        {{#if search_data}}
+        {{#if search_data.has_stop_word}}
-            {{#if search_data.has_stop_word}}{{t "Some common words were excluded from your search." }} <br/>{{/if}}{{t "You searched for:" }}
+        <div class="empty-feed-notice-description">
-            {{#if search_data.stream_query}}
+            {{t "Common words were excluded from your search:" }} <br/>
-            <span>channel: {{search_data.stream_query}}</span>
-            {{/if}}
-            {{#if search_data.topic_query}}
-            {{#if search_data.is_empty_string_topic}}
-            <span>topic: <span class="empty-topic-display">{{search_data.topic_query}}</span></span>
-            {{else}}
-            <span>topic: {{search_data.topic_query}}</span>
-            {{/if}}
-            {{/if}}
             {{#each search_data.query_words}}
                 {{#if is_stop_word}}
                 <del>{{query_word}}</del>
@@ -20,8 +11,11 @@
                 <span class="search-query-word">{{query_word}}</span>
                 {{/if}}
             {{/each}}
-        {{else}}
+        </div>
-            {{{ html }}}
         {{/if}}
-    </div>
+    {{else if html}}
+        <div class="empty-feed-notice-description">
+            {{{ html }}}
+        </div>
+    {{/if}}
 </div>

web/tests/message_view.test.cjs

@@ -116,89 +116,85 @@ user_groups.initialize({realm_user_groups: [nobody, everyone]});
 run_test("empty_narrow_html", ({mock_template}) => {
     mock_template("empty_feed_notice.hbs", true, (_data, html) => html);
 
-    let actual_html = empty_narrow_html("This is a title", "<h1> This is the html </h1>");
+    // Title only
+    let actual_html = empty_narrow_html("This is a title", undefined, undefined);
+    assert.equal(
+        actual_html,
+        `<div class="empty_feed_notice">
+    <h4 class="empty-feed-notice-title"> This is a title </h4>
+</div>
+`,
+    );
+
+    // Title and html
+    actual_html = empty_narrow_html("This is a title", "<h1> This is the html </h1>", undefined);
     assert.equal(
         actual_html,
         `<div class="empty_feed_notice">
     <h4 class="empty-feed-notice-title"> This is a title </h4>
     <div class="empty-feed-notice-description">
-            <h1> This is the html </h1>
+        <h1> This is the html </h1>
+    </div>
     </div>
-</div>
 `,
     );
 
-    const search_data_with_all_search_types = {
+    // Title and search data
-        topic_query: "test",
+    const search_data_with_stop_word = {
-        stream_query: "new",
         has_stop_word: true,
         query_words: [
-            {query_word: "search", is_stop_word: false},
             {query_word: "a", is_stop_word: true},
+            {query_word: "search", is_stop_word: false},
         ],
     };
-    actual_html = empty_narrow_html(
+    actual_html = empty_narrow_html("This is a title", undefined, search_data_with_stop_word);
-        "This is a title",
-        undefined,
-        search_data_with_all_search_types,
-    );
     assert.equal(
         actual_html,
         `<div class="empty_feed_notice">
     <h4 class="empty-feed-notice-title"> This is a title </h4>
     <div class="empty-feed-notice-description">
-            Some common words were excluded from your search. <br/>You searched for:
+        Common words were excluded from your search: <br/>
-            <span>channel: new</span>
+            <del>a</del>
-            <span>topic: test</span>
+            <span class="search-query-word">search</span>
-                <span class="search-query-word">search</span>
-                <del>a</del>
     </div>
 </div>
 `,
     );
 
-    const search_data_with_stream_without_stop_words = {
+    const search_data_with_stop_words = {
-        has_stop_word: false,
+        has_stop_word: true,
-        stream_query: "hello world",
+        query_words: [
-        query_words: [{query_word: "searchA", is_stop_word: false}],
+            {query_word: "a", is_stop_word: true},
+            {query_word: "search", is_stop_word: false},
+            {query_word: "and", is_stop_word: true},
+            {query_word: "return", is_stop_word: false},
+        ],
     };
-    actual_html = empty_narrow_html(
+    actual_html = empty_narrow_html("This is a title", undefined, search_data_with_stop_words);
-        "This is a title",
-        undefined,
-        search_data_with_stream_without_stop_words,
-    );
     assert.equal(
         actual_html,
         `<div class="empty_feed_notice">
     <h4 class="empty-feed-notice-title"> This is a title </h4>
     <div class="empty-feed-notice-description">
-            You searched for:
+        Common words were excluded from your search: <br/>
-            <span>channel: hello world</span>
+            <del>a</del>
-                <span class="search-query-word">searchA</span>
+            <span class="search-query-word">search</span>
+            <del>and</del>
+            <span class="search-query-word">return</span>
     </div>
 </div>
 `,
     );
 
-    const search_data_with_topic_without_stop_words = {
+    const search_data_without_stop_words = {
         has_stop_word: false,
-        topic_query: "hello",
+        query_words: [{query_word: "search", is_stop_word: false}],
-        query_words: [{query_word: "searchB", is_stop_word: false}],
     };
-    actual_html = empty_narrow_html(
+    actual_html = empty_narrow_html("This is a title", undefined, search_data_without_stop_words);
-        "This is a title",
-        undefined,
-        search_data_with_topic_without_stop_words,
-    );
     assert.equal(
         actual_html,
         `<div class="empty_feed_notice">
     <h4 class="empty-feed-notice-title"> This is a title </h4>
-    <div class="empty-feed-notice-description">
-            You searched for:
-            <span>topic: hello</span>
-                <span class="search-query-word">searchB</span>
-    </div>
 </div>
 `,
     );
@@ -648,9 +644,9 @@ run_test("show_empty_narrow_message_with_search", ({mock_template, override}) =>
 
     const current_filter = set_filter([["search", "grail"]]);
     narrow_banner.show_empty_narrow_message(current_filter);
-    assert.match(
+    assert.equal(
         $(".empty_feed_notice_main").html(),
-        /<span class="search-query-word">grail<\/span>/,
+        empty_narrow_html("translated: No search results."),
     );
 });
 
@@ -681,15 +677,6 @@ run_test("show_search_stopwords", ({mock_template, override}) => {
 
     const streamA_id = 88;
     stream_data.add_sub({name: "streamA", stream_id: streamA_id});
-    const expected_stream_search_data = {
-        has_stop_word: true,
-        stream_query: "streamA",
-        query_words: [
-            {query_word: "what", is_stop_word: true},
-            {query_word: "about", is_stop_word: true},
-            {query_word: "grail", is_stop_word: false},
-        ],
-    };
     current_filter = set_filter([
         ["stream", streamA_id.toString()],
         ["search", "what about grail"],
@@ -697,19 +684,9 @@ run_test("show_search_stopwords", ({mock_template, override}) => {
     narrow_banner.show_empty_narrow_message(current_filter);
     assert.equal(
         $(".empty_feed_notice_main").html(),
-        empty_narrow_html("translated: No search results.", undefined, expected_stream_search_data),
+        empty_narrow_html("translated: No search results.", undefined, expected_search_data),
     );
 
-    const expected_stream_topic_search_data = {
-        has_stop_word: true,
-        stream_query: "streamA",
-        topic_query: "topicA",
-        query_words: [
-            {query_word: "what", is_stop_word: true},
-            {query_word: "about", is_stop_word: true},
-            {query_word: "grail", is_stop_word: false},
-        ],
-    };
     current_filter = set_filter([
         ["stream", streamA_id.toString()],
         ["topic", "topicA"],
@@ -718,11 +695,7 @@ run_test("show_search_stopwords", ({mock_template, override}) => {
     narrow_banner.show_empty_narrow_message(current_filter);
     assert.equal(
         $(".empty_feed_notice_main").html(),
-        empty_narrow_html(
+        empty_narrow_html("translated: No search results.", undefined, expected_search_data),
-            "translated: No search results.",
-            undefined,
-            expected_stream_topic_search_data,
-        ),
     );
 });