message_feed: Improve placeholder text for empty unsubscribed stream.

This commit changes the placeholder text along with fixing the style issue of subscribe button in empty unsubscribed streams. Fixes #29692.
zulip · Apr 13, 2024 · 6249d30 · 6249d30
1 parent 8a80794
commit 6249d30
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/web/src/narrow_banner.ts b/web/src/narrow_banner.ts
@@ -266,19 +266,23 @@ function pick_empty_narrow_banner(): NarrowBannerData {
                 if (can_toggle_narrowed_stream()) {
                     return {
                         title: $t({
-                            defaultMessage:
-                                "You aren't subscribed to this stream and nobody has talked about that yet!",
+                            defaultMessage: "There are no messages here.",
                         }),
                         // TODO: Consider moving the button to be its own option in the template.
                         html: $t_html(
                             {
-                                defaultMessage: "<z-button>Subscribe</z-button>",
+                                defaultMessage:
+                                    "Why not <z-link>start the conversation</z-link>? <z-button>Subscribe</z-button>",
                             },
                             {
+                                "z-link": (content_html) =>
+                                    `<a href="#" class="empty_feed_compose_stream">${content_html.join(
+                                        "",
+                                    )}</a>`,
                                 "z-button": (content_html) =>
-                                    `<button class="button white rounded stream_sub_unsub_button sea-green" type="button" name="subscription">${content_html.join(
+                                    `<div class="sub_button_row new-style"><button class="button white rounded stream_sub_unsub_button sea-green" type="button" name="subscription">${content_html.join(
                                         "",
-                                    )}</button>`,
+                                    )}</button></div>`,
                             },
                         ),
                     };

diff --git a/web/tests/narrow.test.js b/web/tests/narrow.test.js
@@ -232,8 +232,8 @@ run_test("show_empty_narrow_message", ({mock_template}) => {
     assert.equal(
         $(".empty_feed_notice_main").html(),
         empty_narrow_html(
-            "translated: You aren't subscribed to this stream and nobody has talked about that yet!",
-            'translated HTML: <button class="button white rounded stream_sub_unsub_button sea-green" type="button" name="subscription">Subscribe</button>',
+            "translated: There are no messages here.",
+            'translated HTML: Why not <a href="#" class="empty_feed_compose_stream">start the conversation</a>? <div class="sub_button_row new-style"><button class="button white rounded stream_sub_unsub_button sea-green" type="button" name="subscription">Subscribe</button></div>',
         ),
     );