narrow_banner: Simplify empty narrow messages for spectators.

frontend_tests/node_tests/narrow.js

@@ -241,7 +241,7 @@ run_test("show_empty_narrow_message", ({mock_template}) => {
         $(".empty_feed_notice_main").html(),
         empty_narrow_html(
             "",
-            'translated HTML: This stream does not exist or is not <a href="/help/public-access-option">publicly accessible</a>.',
+            'translated HTML: This is not a <a href="/help/public-access-option">publicly accessible</a> conversation.',
         ),
     );
 
@@ -255,9 +255,22 @@ run_test("show_empty_narrow_message", ({mock_template}) => {
         $(".empty_feed_notice_main").html(),
         empty_narrow_html(
             "",
-            'translated HTML: This stream does not exist or is not <a href="/help/public-access-option">publicly accessible</a>.',
+            'translated HTML: This is not a <a href="/help/public-access-option">publicly accessible</a> conversation.',
         ),
     );
+
+    // for web-public stream for spectator
+    stream_data.add_sub({name: "web-public-stream", stream_id: 1231, is_web_public: true});
+    set_filter([
+        ["stream", "web-public-stream"],
+        ["topic", "foo"],
+    ]);
+    hide_all_empty_narrow_messages();
+    narrow_banner.show_empty_narrow_message();
+    assert.equal(
+        $(".empty_feed_notice_main").html(),
+        empty_narrow_html("translated: Nothing's been sent here yet!", ""),
+    );
     page_params.is_spectator = false;
 
     set_filter([["is", "starred"]]);

static/js/narrow_banner.js

@@ -12,8 +12,7 @@ const SPECTATOR_STREAM_NARROW_BANNER = {
     title: "",
     html: $t_html(
         {
-            defaultMessage:
+            defaultMessage: "This is not a <z-link>publicly accessible</z-link> conversation.",
-                "This stream does not exist or is not <z-link>publicly accessible</z-link>.",
         },
         {
             "z-link": (content_html) => `<a href="/help/public-access-option">${content_html}</a>`,
@@ -66,15 +65,18 @@ function retrieve_search_query_data() {
 function pick_empty_narrow_banner() {
     const default_banner = {
         title: $t({defaultMessage: "Nothing's been sent here yet!"}),
-        html: $t_html(
+        // Spectators cannot start a conversation.
-            {
+        html: page_params.is_spectator
-                defaultMessage: "Why not <z-link>start the conversation</z-link>?",
+            ? ""
-            },
+            : $t_html(
-            {
+                  {
-                "z-link": (content_html) =>
+                      defaultMessage: "Why not <z-link>start the conversation</z-link>?",
-                    `<a href="#" class="empty_feed_compose_stream">${content_html}</a>`,
+                  },
-            },
+                  {
-        ),
+                      "z-link": (content_html) =>
+                          `<a href="#" class="empty_feed_compose_stream">${content_html}</a>`,
+                  },
+              ),
     };
     const empty_search_narrow_title = $t({defaultMessage: "No search results"});
 
@@ -132,7 +134,13 @@ function pick_empty_narrow_banner() {
             };
         }
 
-        if (page_params.is_spectator) {
+        if (
+            page_params.is_spectator &&
+            first_operator === "stream" &&
+            !stream_data.is_web_public_by_stream_name(first_operand)
+        ) {
+            // For non web-public streams, show `login_to_access` modal.
+            spectators.login_to_access(true);
             return SPECTATOR_STREAM_NARROW_BANNER;
         }
 

static/templates/message_feed_errors.hbs

@@ -9,7 +9,7 @@
         {{/tr}}
     </p>
 </div>
-<div class="all-messages-search-caution" hidden>
+<div class="all-messages-search-caution hidden-for-spectators" hidden>
     <p>
         <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
         {{#tr}}
@@ -19,13 +19,7 @@
           target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
         {{/tr}}
         &nbsp;
-        <span class="only-visible-for-spectators">
+        <span>
-            {{#tr}}
-            <z-link>Log in</z-link> to search your personal history.
-            {{#*inline "z-link"}}<a href="/login/">{{> @partial-block}}</a>{{/inline}}
-            {{/tr}}
-        </span>
-        <span class="hidden-for-spectators">
             {{#tr}}
             Consider <z-link>searching all public streams</z-link>.
             {{#*inline "z-link"}}<a class="search-shared-history" href="">{{> @partial-block}}</a>{{/inline}}