From ad3603c0aaea93e8c75aef2d191536afd463f173 Mon Sep 17 00:00:00 2001 From: Prakhar Pratyush Date: Tue, 5 Mar 2024 17:48:56 +0530 Subject: [PATCH] onboarding: Show one-time modal to introduce recent conversations view. To improve onboarding experience, this commit adds a one-time modal which introduces the recent conversations view. Users see this one-time modal on visiting the recent conversations view. Fixes #29073. --- tools/lib/capitalization.py | 1 + web/src/recent_view_ui.js | 24 +++++++++++++++++++- web/templates/introduce_zulip_view_modal.hbs | 7 ++++++ zerver/lib/hotspots.py | 3 +++ zerver/tests/test_hotspots.py | 5 ++-- 5 files changed, 37 insertions(+), 3 deletions(-) diff --git a/tools/lib/capitalization.py b/tools/lib/capitalization.py index fe2ea054e6..a2c521e401 100644 --- a/tools/lib/capitalization.py +++ b/tools/lib/capitalization.py @@ -33,6 +33,7 @@ IGNORED_PHRASES = [ r"Markdown", r"OTP", r"Pivotal", + r"Recent conversations", r"DM", r"DMs", r"Slack", diff --git a/web/src/recent_view_ui.js b/web/src/recent_view_ui.js index f6190ab96f..10add2caed 100644 --- a/web/src/recent_view_ui.js +++ b/web/src/recent_view_ui.js @@ -1,6 +1,7 @@ import $ from "jquery"; import _ from "lodash"; +import render_introduce_zulip_view_modal from "../templates/introduce_zulip_view_modal.hbs"; import render_recent_view_filters from "../templates/recent_view_filters.hbs"; import render_recent_view_row from "../templates/recent_view_row.hbs"; import render_recent_view_body from "../templates/recent_view_table.hbs"; @@ -10,9 +11,10 @@ import * as blueslip from "./blueslip"; import * as buddy_data from "./buddy_data"; import * as compose_closed_ui from "./compose_closed_ui"; import * as compose_state from "./compose_state"; +import * as dialog_widget from "./dialog_widget"; import * as dropdown_widget from "./dropdown_widget"; import * as hash_util from "./hash_util"; -import {$t} from "./i18n"; +import {$t, $t_html} from "./i18n"; import * as left_sidebar_navigation_area from "./left_sidebar_navigation_area"; import * as ListWidget from "./list_widget"; import * as loading from "./loading"; @@ -21,6 +23,7 @@ import * as message_store from "./message_store"; import * as message_util from "./message_util"; import * as modals from "./modals"; import * as muted_users from "./muted_users"; +import * as onboarding_steps from "./onboarding_steps"; import * as overlays from "./overlays"; import {page_params} from "./page_params"; import * as people from "./people"; @@ -35,6 +38,7 @@ import * as sub_store from "./sub_store"; import * as timerender from "./timerender"; import * as ui_util from "./ui_util"; import * as unread from "./unread"; +import {user_settings} from "./user_settings"; import * as user_status from "./user_status"; import * as user_topics from "./user_topics"; import * as views_util from "./views_util"; @@ -1070,6 +1074,24 @@ export function show() { set_visible: recent_view_util.set_visible, complete_rerender, }); + + if (onboarding_steps.ONE_TIME_NOTICES_TO_DISPLAY.has("intro_recent_view_modal")) { + const html_body = render_introduce_zulip_view_modal({ + zulip_view: "recent_conversations", + current_home_view_and_escape_navigation_enabled: + user_settings.web_home_view === "recent_topics" && + user_settings.web_escape_navigates_to_home_view, + }); + dialog_widget.launch({ + html_heading: $t_html({defaultMessage: "Welcome to recent conversations!"}), + html_body, + html_submit_button: $t_html({defaultMessage: "Continue"}), + on_click() {}, + single_footer_button: true, + focus_submit_on_open: true, + }); + onboarding_steps.post_onboarding_step_as_read("intro_recent_view_modal"); + } } function filter_buttons() { diff --git a/web/templates/introduce_zulip_view_modal.hbs b/web/templates/introduce_zulip_view_modal.hbs index d6ae60a13a..1758995f14 100644 --- a/web/templates/introduce_zulip_view_modal.hbs +++ b/web/templates/introduce_zulip_view_modal.hbs @@ -2,6 +2,8 @@

{{#if (eq zulip_view "inbox")}} {{#tr}}The inbox view provides an overview of your conversations with unread messages.{{/tr}} + {{else if (eq zulip_view "recent_conversations")}} + {{#tr}}The recent conversations view provides an overview of all the ongoing conversations.{{/tr}} {{/if}} {{#tr}} In Zulip, a conversation is either a direct message @@ -23,6 +25,11 @@ Click Inbox in the left sidebar. {{#*inline "z-icon-inbox"}}{{/inline}} {{/tr}} + {{else if (eq zulip_view "recent_conversations")}} + {{#tr}} + Click Recent conversations in the left sidebar. + {{#*inline "z-icon-clock"}}{{/inline}} + {{/tr}} {{/if}} {{#if current_home_view_and_escape_navigation_enabled}} diff --git a/zerver/lib/hotspots.py b/zerver/lib/hotspots.py index 3f0c9769fa..ea2302a162 100644 --- a/zerver/lib/hotspots.py +++ b/zerver/lib/hotspots.py @@ -86,6 +86,9 @@ ONE_TIME_NOTICES: List[OneTimeNotice] = [ OneTimeNotice( name="intro_inbox_view_modal", ), + OneTimeNotice( + name="intro_recent_view_modal", + ), ] # We would most likely implement new hotspots in the future that aren't diff --git a/zerver/tests/test_hotspots.py b/zerver/tests/test_hotspots.py index 2a0d5d9b0a..accb02ada4 100644 --- a/zerver/tests/test_hotspots.py +++ b/zerver/tests/test_hotspots.py @@ -39,10 +39,11 @@ class TestGetNextOnboardingSteps(ZulipTestCase): do_mark_onboarding_step_as_read(self.user, "intro_streams") do_mark_onboarding_step_as_read(self.user, "intro_compose") onboarding_steps = get_next_onboarding_steps(self.user) - self.assert_length(onboarding_steps, 3) + self.assert_length(onboarding_steps, 4) self.assertEqual(onboarding_steps[0]["name"], "visibility_policy_banner") self.assertEqual(onboarding_steps[1]["name"], "intro_inbox_view_modal") - self.assertEqual(onboarding_steps[2]["name"], "intro_topics") + self.assertEqual(onboarding_steps[2]["name"], "intro_recent_view_modal") + self.assertEqual(onboarding_steps[3]["name"], "intro_topics") def test_all_onboarding_steps_done(self) -> None: with self.settings(TUTORIAL_ENABLED=True):