From 22f3aebb331aa347174304efd4feb23e6e549600 Mon Sep 17 00:00:00 2001 From: Prakhar Pratyush Date: Wed, 3 Apr 2024 15:31:57 +0530 Subject: [PATCH] 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 | 1 + web/src/compose_notifications.ts | 15 +++++++++++++++ web/src/compose_setup.js | 11 +++++++++++ .../jump_to_sent_message_conversation_banner.hbs | 5 +++++ zerver/lib/onboarding_steps.py | 3 +++ zerver/tests/test_onboarding_steps.py | 3 ++- 6 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 web/templates/compose_banner/jump_to_sent_message_conversation_banner.hbs diff --git a/web/src/compose_banner.ts b/web/src/compose_banner.ts index ec013a6509..fba4a0451d 100644 --- a/web/src/compose_banner.ts +++ b/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, diff --git a/web/src/compose_notifications.ts b/web/src/compose_notifications.ts index a49ef67901..fc69fa2525 100644 --- a/web/src/compose_notifications.ts +++ b/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"), + ); + } } } diff --git a/web/src/compose_setup.js b/web/src/compose_setup.js index 894f5ece64..dde1ed2c46 100644 --- a/web/src/compose_setup.js +++ b/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) => { diff --git a/web/templates/compose_banner/jump_to_sent_message_conversation_banner.hbs b/web/templates/compose_banner/jump_to_sent_message_conversation_banner.hbs new file mode 100644 index 0000000000..f65c7ecab4 --- /dev/null +++ b/web/templates/compose_banner/jump_to_sent_message_conversation_banner.hbs @@ -0,0 +1,5 @@ +{{#> compose_banner }} + +{{/compose_banner}} diff --git a/zerver/lib/onboarding_steps.py b/zerver/lib/onboarding_steps.py index 8c3300d074..8f9c39bcf6 100644 --- a/zerver/lib/onboarding_steps.py +++ b/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' diff --git a/zerver/tests/test_onboarding_steps.py b/zerver/tests/test_onboarding_steps.py index 2d025d5c23..e1cf50a0f1 100644 --- a/zerver/tests/test_onboarding_steps.py +++ b/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)