topic: Add a first-time explanation for "Resolve topic".

We show a confirmation dialog explaining the "resolve topics"
feature when the user marks a topic resolved for the first time.
If the user confirms the action, we mark the
topic resolved, else we don't.

We don't show anything the first time a topic is marked
unresolved.

Fixes #31242

web/src/message_edit.ts

@@ -8,6 +8,7 @@ import render_wildcard_mention_not_allowed_error from "../templates/compose_bann
 import render_delete_message_modal from "../templates/confirm_dialog/confirm_delete_message.hbs";
 import render_confirm_merge_topics_with_rename from "../templates/confirm_dialog/confirm_merge_topics_with_rename.hbs";
 import render_confirm_moving_messages_modal from "../templates/confirm_dialog/confirm_moving_messages.hbs";
+import render_intro_resolve_topic_modal from "../templates/confirm_dialog/intro_resolve_topic.hbs";
 import render_message_edit_form from "../templates/message_edit_form.hbs";
 import render_message_moved_widget_body from "../templates/message_moved_widget_body.hbs";
 import render_resolve_topic_time_limit_error_modal from "../templates/resolve_topic_time_limit_error_modal.hbs";
@@ -42,6 +43,7 @@ import * as message_live_update from "./message_live_update";
 import * as message_store from "./message_store";
 import type {Message} from "./message_store";
 import * as message_viewport from "./message_viewport";
+import * as onboarding_steps from "./onboarding_steps";
 import * as people from "./people";
 import * as resize from "./resize";
 import * as rows from "./rows";
@@ -755,6 +757,17 @@ function handle_resolve_topic_failure_due_to_time_limit(topic_is_resolved: boole
     });
 }
 
+function show_intro_resolve_topic_modal(topic_name: string, cb: () => void): void {
+    confirm_dialog.launch({
+        html_heading: $t_html({defaultMessage: "Mark topic as resolved"}),
+        html_body: render_intro_resolve_topic_modal({topic_name}),
+        id: "intro_resolve_topic_modal",
+        on_click: cb,
+        html_submit_button: $t({defaultMessage: "Got it, Confirm"}),
+        html_exit_button: $t({defaultMessage: "Got it, Cancel"}),
+    });
+}
+
 export function toggle_resolve_topic(
     message_id: number,
     old_topic_name: string,
@@ -769,6 +782,39 @@ export function toggle_resolve_topic(
         new_topic_name = resolved_topic.resolve_name(old_topic_name);
     }
 
+    if (
+        !topic_is_resolved &&
+        onboarding_steps.ONE_TIME_NOTICES_TO_DISPLAY.has("intro_resolve_topic")
+    ) {
+        show_intro_resolve_topic_modal(old_topic_name, () => {
+            do_toggle_resolve_topic(
+                message_id,
+                new_topic_name,
+                topic_is_resolved,
+                report_errors_in_global_banner,
+                $row,
+            );
+        });
+        onboarding_steps.post_onboarding_step_as_read("intro_resolve_topic");
+        return;
+    }
+
+    do_toggle_resolve_topic(
+        message_id,
+        new_topic_name,
+        topic_is_resolved,
+        report_errors_in_global_banner,
+        $row,
+    );
+}
+
+function do_toggle_resolve_topic(
+    message_id: number,
+    new_topic_name: string,
+    topic_is_resolved: boolean,
+    report_errors_in_global_banner: boolean,
+    $row: JQuery,
+): void {
     if ($row) {
         show_toggle_resolve_topic_spinner($row);
     }

web/templates/confirm_dialog/intro_resolve_topic.hbs

@@ -0,0 +1,5 @@
+{{#tr}}
+You're marking the topic <b>{topic_name}</b> as resolved. This adds a ✔ at the beginning of the topic name to let everyone know that this conversation is done. <z-link>Learn more</z-link>
+{{#*inline "z-link"}}<a target="_blank" rel="noopener noreferrer" href="/help/resolve-a-topic">{{>
+    @partial-block}}</a>{{/inline}}
+{{/tr}}

zerver/lib/onboarding_steps.py

@@ -52,6 +52,9 @@ ONE_TIME_NOTICES: list[OneTimeNotice] = [
     OneTimeNotice(
         name="interleaved_view_messages_fading",
     ),
+    OneTimeNotice(
+        name="intro_resolve_topic",
+    ),
 ]
 
 ONE_TIME_ACTIONS = [OneTimeAction(name="narrow_to_dm_with_welcome_bot_new_user")]

zerver/tests/test_onboarding_steps.py

@@ -25,13 +25,14 @@ class TestGetNextOnboardingSteps(ZulipTestCase):
 
         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, 6)
+        self.assert_length(onboarding_steps, 7)
         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")
         self.assertEqual(onboarding_steps[3]["name"], "non_interleaved_view_messages_fading")
         self.assertEqual(onboarding_steps[4]["name"], "interleaved_view_messages_fading")
-        self.assertEqual(onboarding_steps[5]["name"], "narrow_to_dm_with_welcome_bot_new_user")
+        self.assertEqual(onboarding_steps[5]["name"], "intro_resolve_topic")
+        self.assertEqual(onboarding_steps[6]["name"], "narrow_to_dm_with_welcome_bot_new_user")
 
         with self.settings(TUTORIAL_ENABLED=False):
             onboarding_steps = get_next_onboarding_steps(self.user)