compose: Show a one-time banner for jump to sent message conversation.

We immediately navigate the user to the conversation they just
sent a message to if they are not already in the appropriate
conversation view.

This commit adds a first-time banner to explain the same.

Fixes #29575.

web/src/compose_banner.ts

@@ -23,6 +23,7 @@ const MESSAGE_SENT_CLASSNAMES = {
     sent_scroll_to_view: "sent_scroll_to_view",
     message_scheduled_success_compose_banner: "message_scheduled_success_compose_banner",
     automatic_new_visibility_policy: "automatic_new_visibility_policy",
+    jump_to_sent_message_conversation: "jump_to_sent_message_conversation",
 };
 // Technically, unmute_topic_notification is a message sent banner, but
 // it has distinct behavior / look - it has an associated action button,

web/src/compose_notifications.ts

@@ -2,6 +2,7 @@ import $ from "jquery";
 import assert from "minimalistic-assert";
 
 import render_automatic_new_visibility_policy_banner from "../templates/compose_banner/automatic_new_visibility_policy_banner.hbs";
+import render_jump_to_sent_message_conversation_banner from "../templates/compose_banner/jump_to_sent_message_conversation_banner.hbs";
 import render_message_sent_banner from "../templates/compose_banner/message_sent_banner.hbs";
 import render_unmute_topic_banner from "../templates/compose_banner/unmute_topic_banner.hbs";
 
@@ -12,6 +13,7 @@ import {$t} from "./i18n";
 import * as message_lists from "./message_lists";
 import type {Message} from "./message_store";
 import * as narrow_state from "./narrow_state";
+import * as onboarding_steps from "./onboarding_steps";
 import * as people from "./people";
 import * as stream_data from "./stream_data";
 import * as user_topics from "./user_topics";
@@ -191,6 +193,19 @@ export function notify_local_mixes(
         }
 
         narrow_to_recipient(link_msg_id);
+
+        if (onboarding_steps.ONE_TIME_NOTICES_TO_DISPLAY.has("jump_to_conversation_banner")) {
+            const new_row_html = render_jump_to_sent_message_conversation_banner({
+                banner_type: compose_banner.SUCCESS,
+                classname: compose_banner.CLASSNAMES.jump_to_sent_message_conversation,
+                hide_close_button: true,
+                is_onboarding_banner: true,
+            });
+            compose_banner.append_compose_banner_to_banner_list(
+                $(new_row_html),
+                $("#compose_banners"),
+            );
+        }
     }
 }
 

web/src/compose_setup.js

@@ -287,6 +287,17 @@ export function initialize() {
         },
     );
 
+    const jump_to_conversation_banner_selector = `.${CSS.escape(compose_banner.CLASSNAMES.jump_to_sent_message_conversation)}`;
+    $("body").on(
+        "click",
+        `${jump_to_conversation_banner_selector} .main-view-banner-action-button`,
+        (event) => {
+            event.preventDefault();
+            $(event.target).parents(`${jump_to_conversation_banner_selector}`).remove();
+            onboarding_steps.post_onboarding_step_as_read("jump_to_conversation_banner");
+        },
+    );
+
     for (const classname of Object.values(compose_banner.CLASSNAMES)) {
         const classname_selector = `.${CSS.escape(classname)}`;
         $("body").on("click", `${classname_selector} .main-view-banner-close-button`, (event) => {

web/templates/compose_banner/jump_to_sent_message_conversation_banner.hbs

@@ -0,0 +1,5 @@
+{{#> compose_banner }}
+    <p class="banner_message">
+        {{#tr}}Viewing the conversation where you sent your message. To go back, use the <b>back</b> button in your browser or desktop app.{{/tr}}
+    </p>
+{{/compose_banner}}

zerver/lib/onboarding_steps.py

@@ -32,6 +32,9 @@ ONE_TIME_NOTICES: List[OneTimeNotice] = [
     OneTimeNotice(
         name="first_stream_created_banner",
     ),
+    OneTimeNotice(
+        name="jump_to_conversation_banner",
+    ),
 ]
 
 # We may introduce onboarding step of types other than 'one time notice'

zerver/tests/test_onboarding_steps.py

@@ -22,9 +22,10 @@ class TestGetNextOnboardingSteps(ZulipTestCase):
         do_mark_onboarding_step_as_read(self.user, "visibility_policy_banner")
         do_mark_onboarding_step_as_read(self.user, "intro_inbox_view_modal")
         onboarding_steps = get_next_onboarding_steps(self.user)
-        self.assert_length(onboarding_steps, 2)
+        self.assert_length(onboarding_steps, 3)
         self.assertEqual(onboarding_steps[0]["name"], "intro_recent_view_modal")
         self.assertEqual(onboarding_steps[1]["name"], "first_stream_created_banner")
+        self.assertEqual(onboarding_steps[2]["name"], "jump_to_conversation_banner")
 
         with self.settings(TUTORIAL_ENABLED=False):
             onboarding_steps = get_next_onboarding_steps(self.user)