compose_banner: Replace the close button with "Got it" button.

For onboarding banners, we replace the close button with
"Got it" button.

Also, the banner is marked as read for the user only after
the "Got it" button is clicked. Earlier it was marked as read
as soon as it was displayed.

web/src/compose.js

@@ -158,7 +158,6 @@ export function send_message_success(request, data) {
             // topic has been automatically unmuted or followed. No need to
             // suggest the user to unmute. Show the banner and return.
             compose_notifications.notify_automatic_new_visibility_policy(request, data);
-            onboarding_steps.post_onboarding_step_as_read("visibility_policy_banner");
             return;
         }
 

web/src/compose_notifications.ts

@@ -73,6 +73,8 @@ export function notify_automatic_new_visibility_policy(
             narrow_url,
             followed,
             button_text: $t({defaultMessage: "Change setting"}),
+            hide_close_button: true,
+            is_onboarding_banner: true,
         }),
     );
     compose_banner.append_compose_banner_to_banner_list($notification, $("#compose_banners"));

web/src/compose_setup.js

@@ -18,6 +18,7 @@ import * as flatpickr from "./flatpickr";
 import {$t_html} from "./i18n";
 import * as message_edit from "./message_edit";
 import * as narrow from "./narrow";
+import * as onboarding_steps from "./onboarding_steps";
 import {page_params} from "./page_params";
 import * as poll_modal from "./poll_modal";
 import * as popovers from "./popovers";
@@ -212,13 +213,19 @@ export function initialize() {
         },
     );
 
+    const automatic_new_visibility_policy_banner_selector = `.${CSS.escape(compose_banner.CLASSNAMES.automatic_new_visibility_policy)}`;
     $("body").on(
         "click",
-        `.${CSS.escape(
+        `${automatic_new_visibility_policy_banner_selector} .main-view-banner-action-button`,
-            compose_banner.CLASSNAMES.automatic_new_visibility_policy,
-        )} .main-view-banner-action-button`,
         (event) => {
             event.preventDefault();
+            if ($(event.target).attr("data-action") === "mark-as-read") {
+                $(event.target)
+                    .parents(`${automatic_new_visibility_policy_banner_selector}`)
+                    .remove();
+                onboarding_steps.post_onboarding_step_as_read("visibility_policy_banner");
+                return;
+            }
             window.location.href = "/#settings/notifications";
         },
     );

web/templates/compose_banner/compose_banner.hbs

@@ -12,6 +12,9 @@
         {{#if button_text}}
         <button class="main-view-banner-action-button{{#if hide_close_button}} right_edge{{/if}}" {{#if scheduling_message}}data-validation-trigger="schedule"{{/if}}>{{button_text}}</button>
         {{/if}}
+        {{#if is_onboarding_banner}}
+        <button class="main-view-banner-action-button right_edge" data-action="mark-as-read">{{t "Got it"}}</button>
+        {{/if}}
     </div>
     {{#if hide_close_button}}
     {{!-- hide_close_button is null by default, and false if explicitly set as false. --}}

web/tests/compose.test.js

@@ -168,10 +168,6 @@ test_ui("send_message_success", ({override, override_rewire}) => {
         assert.equal(data.automatic_new_visibility_policy, 2);
     });
 
-    override(onboarding_steps, "post_onboarding_step_as_read", (onboarding_step_name) => {
-        assert.equal(onboarding_step_name, "visibility_policy_banner");
-    });
-
     let request = {
         locally_echoed: false,
         local_id: "1001",