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

@@ -33,6 +33,7 @@ IGNORED_PHRASES = [
     r"Markdown",
     r"OTP",
     r"Pivotal",
+    r"Recent conversations",
     r"DM",
     r"DMs",
     r"Slack",

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 <b>recent conversations</b>!"}),
+            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() {

web/templates/introduce_zulip_view_modal.hbs

@@ -2,6 +2,8 @@
     <p>
         {{#if (eq zulip_view "inbox")}}
             {{#tr}}The <b>inbox</b> view provides an overview of your conversations with unread messages.{{/tr}}
+        {{else if (eq zulip_view "recent_conversations")}}
+            {{#tr}}The <b>recent conversations</b> view provides an overview of all the ongoing conversations.{{/tr}}
         {{/if}}
         {{#tr}}
             In Zulip, a conversation is either a <z-link-direct-message>direct message</z-link-direct-message>
@@ -23,6 +25,11 @@
                         Click <z-icon-inbox></z-icon-inbox> <b>Inbox</b> in the left sidebar.
                         {{#*inline "z-icon-inbox"}}<i class="zulip-icon zulip-icon-inbox" aria-hidden="true"></i>{{/inline}}
                     {{/tr}}
+                {{else if (eq zulip_view "recent_conversations")}}
+                    {{#tr}}
+                        Click <z-icon-clock></z-icon-clock> <b>Recent conversations</b> in the left sidebar.
+                        {{#*inline "z-icon-clock"}}<i class="zulip-icon zulip-icon-clock" aria-hidden="true"></i>{{/inline}}
+                    {{/tr}}
                 {{/if}}
             </li>
             {{#if current_home_view_and_escape_navigation_enabled}}

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

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):